From 4ceef99d23939ae7015e701fcef815290324c562 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 11 Oct 2023 16:47:27 +0200
Subject: [PATCH] Extract a thumbnail component from product images

---
 .../solidus_admin/products/index/component.rb |  2 +-
 .../solidus_admin/ui/thumbnail/component.rb   | 29 ++++++++++++
 .../ui/thumbnail/component_preview.rb         | 16 +++++++
 .../component_preview/overview.html.erb       | 45 +++++++++++++++++++
 .../ui/thumbnail/component_spec.rb            |  9 ++++
 5 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 admin/app/components/solidus_admin/ui/thumbnail/component.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview/overview.html.erb
 create mode 100644 admin/spec/components/solidus_admin/ui/thumbnail/component_spec.rb

diff --git a/admin/app/components/solidus_admin/products/index/component.rb b/admin/app/components/solidus_admin/products/index/component.rb
index b0ddcea548b..87b9c0b7d49 100644
--- a/admin/app/components/solidus_admin/products/index/component.rb
+++ b/admin/app/components/solidus_admin/products/index/component.rb
@@ -75,7 +75,7 @@ def image_column
         image = product.gallery.images.first or return
 
         link_to(
-          image_tag(image.url(:small), class: 'h-10 w-10 max-w-min rounded border border-gray-100', alt: product.name),
+          render(component('ui/thumbnail').new(src: image.url(:small), alt: product.name)),
           solidus_admin.product_path(product),
           class: 'inline-flex overflow-hidden',
           tabindex: -1,
diff --git a/admin/app/components/solidus_admin/ui/thumbnail/component.rb b/admin/app/components/solidus_admin/ui/thumbnail/component.rb
new file mode 100644
index 00000000000..6198e4dbbad
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/thumbnail/component.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Thumbnail::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: 'h-6 w-6',
+    m: 'h-10 w-10',
+    l: 'h-20 w-20',
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    tag.div(
+      tag.img(
+        **@attributes,
+        class: "object-contain h-full w-full",
+      ),
+      class: "
+        #{SIZES[@size]}
+        rounded border border-gray-100
+        bg-white overflow-hidden
+        #{@attributes[:class]}
+      "
+    )
+  end
+end
diff --git a/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview.rb
new file mode 100644
index 00000000000..5691be19f31
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# @component "ui/thumbnail"
+class SolidusAdmin::UI::Thumbnail::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param size select { choices: [s, m, l] }
+  # @param src text
+  def playground(size: :m, src: "https://picsum.photos/200/300")
+    render component("ui/thumbnail").new(size: size.to_sym, src: src)
+  end
+end
diff --git a/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview/overview.html.erb
new file mode 100644
index 00000000000..411ebee7ee5
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview/overview.html.erb
@@ -0,0 +1,45 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Empty
+  </h6>
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size) %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Square
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/200/200") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/20/20") %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Portrait
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/200/286") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/20/28") %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Landscape
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/280/200") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/28/20") %>
+  <% end %>
+</div>
diff --git a/admin/spec/components/solidus_admin/ui/thumbnail/component_spec.rb b/admin/spec/components/solidus_admin/ui/thumbnail/component_spec.rb
new file mode 100644
index 00000000000..100ddfb92fa
--- /dev/null
+++ b/admin/spec/components/solidus_admin/ui/thumbnail/component_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Thumbnail::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end