From 0b2c03565286eb8848bd5fb89aea3ddded92b4f4 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 4 Oct 2023 09:41:30 +0200
Subject: [PATCH] Extract the table search field to a component

---
 .../solidus_admin/ui/forms/input/component.rb |  1 +
 .../ui/forms/search_field/component.html.erb  | 20 ++++++++++++++
 .../ui/forms/search_field/component.js        |  9 +++++++
 .../ui/forms/search_field/component.rb        | 10 +++++++
 .../ui/forms/search_field/component.yml       |  2 ++
 .../solidus_admin/ui/table/component.html.erb | 26 +++++--------------
 .../solidus_admin/ui/table/component.js       |  5 ----
 .../solidus_admin/ui/table/component.yml      |  1 -
 .../forms/search_field/component_preview.rb   | 10 +++++++
 .../component_preview/overview.html.erb       |  7 +++++
 .../ui/forms/search_field/component_spec.rb   |  9 +++++++
 11 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 admin/app/components/solidus_admin/ui/forms/search_field/component.html.erb
 create mode 100644 admin/app/components/solidus_admin/ui/forms/search_field/component.js
 create mode 100644 admin/app/components/solidus_admin/ui/forms/search_field/component.rb
 create mode 100644 admin/app/components/solidus_admin/ui/forms/search_field/component.yml
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview/overview.html.erb
 create mode 100644 admin/spec/components/solidus_admin/ui/forms/search_field/component_spec.rb

diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.rb b/admin/app/components/solidus_admin/ui/forms/input/component.rb
index e933cbb9409..4c6bb2bad05 100644
--- a/admin/app/components/solidus_admin/ui/forms/input/component.rb
+++ b/admin/app/components/solidus_admin/ui/forms/input/component.rb
@@ -32,6 +32,7 @@ class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
     datetime-local
     month
     week
+    search
     time
   ]).freeze
 
diff --git a/admin/app/components/solidus_admin/ui/forms/search_field/component.html.erb b/admin/app/components/solidus_admin/ui/forms/search_field/component.html.erb
new file mode 100644
index 00000000000..068a568cb60
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/forms/search_field/component.html.erb
@@ -0,0 +1,20 @@
+<label
+  data-controller="<%= stimulus_id %>"
+  class="items-center gap-1 p-0 inline-flex w-full justify-start relative"
+>
+  <%= render component("ui/icon").new(
+    name: "search-line",
+    class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3",
+  ) %>
+  <%= render component("ui/forms/input").new(**@attributes) %>
+  <button
+    class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
+    data-action="<%= stimulus_id %>#clear"
+    aria-label="<%= t('.clear') %>"
+  >
+    <%= render component("ui/icon").new(
+      name: "close-circle-fill",
+      class: "w-[1.4em] h-[1.4em] fill-gray-500"
+    ) %>
+  </button>
+</label>
diff --git a/admin/app/components/solidus_admin/ui/forms/search_field/component.js b/admin/app/components/solidus_admin/ui/forms/search_field/component.js
new file mode 100644
index 00000000000..54f31dd2bfd
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/forms/search_field/component.js
@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  clear() {
+    this.inputTarget.value = ""
+  }
+}
diff --git a/admin/app/components/solidus_admin/ui/forms/search_field/component.rb b/admin/app/components/solidus_admin/ui/forms/search_field/component.rb
new file mode 100644
index 00000000000..590db58c983
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/forms/search_field/component.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::SearchField::Component < SolidusAdmin::BaseComponent
+  def initialize(**attributes)
+    @attributes = attributes
+    @attributes[:type] ||= :search
+    @attributes[:class] = "search-cancel:appearance-none peer !px-10 #{@attributes[:class]}"
+    @attributes[:"data-#{stimulus_id}-target"] = "input"
+  end
+end
diff --git a/admin/app/components/solidus_admin/ui/forms/search_field/component.yml b/admin/app/components/solidus_admin/ui/forms/search_field/component.yml
new file mode 100644
index 00000000000..d368ad97ce1
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/forms/search_field/component.yml
@@ -0,0 +1,2 @@
+en:
+  clear: Clear
diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index f8a9ba4f99a..ed1d88ceb16 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -31,25 +31,13 @@
           "data-action": "input->#{stimulus_id}#search change->#{stimulus_id}#search",
         },
       ) do |form| %>
-        <label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
-          <%= render component("ui/icon").new(name: 'search-line', class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3") %>
-          <input
-            name="<%= "#{@search_param}[#{@search_key}]" %>"
-            value="<%= params.dig(@search_param, @search_key) %>"
-            type="search"
-            placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
-            class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
-            data-<%= stimulus_id %>-target="searchField"
-            aria-label="<%= t('.search_placeholder', resources: resource_plural_name) %>"
-          >
-          <button
-            class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
-            data-action="<%= stimulus_id %>#clearSearch"
-            aria-label="<%= t('.clear') %>"
-          >
-            <%= render component("ui/icon").new(name: 'close-circle-fill', class: "w-[1.4em] h-[1.4em] fill-gray-500") %>
-          </button>
-        </label>
+        <%= render component('ui/forms/search_field').new(
+          name: "#{@search_param}[#{@search_key}]",
+          value: params.dig(@search_param, @search_key),
+          placeholder: t('.search_placeholder', resources: resource_plural_name),
+          "data-#{stimulus_id}-target": "searchField",
+          "aria-label": t('.search_placeholder', resources: resource_plural_name)
+        ) %>
       <% end %>
 
       <div class="ml-4">
diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js
index fe9b6f5bf5e..b5fef338272 100644
--- a/admin/app/components/solidus_admin/ui/table/component.js
+++ b/admin/app/components/solidus_admin/ui/table/component.js
@@ -45,11 +45,6 @@ export default class extends Controller {
     this.searchFormTarget.requestSubmit()
   }
 
-  clearSearch() {
-    this.searchFieldTarget.value = ''
-    this.search()
-  }
-
   cancelSearch() {
     this.clearSearch()
 
diff --git a/admin/app/components/solidus_admin/ui/table/component.yml b/admin/app/components/solidus_admin/ui/table/component.yml
index e0521f6d337..6014596942a 100644
--- a/admin/app/components/solidus_admin/ui/table/component.yml
+++ b/admin/app/components/solidus_admin/ui/table/component.yml
@@ -7,5 +7,4 @@ en:
   search_placeholder: 'Search all %{resources}'
   refine_search: 'Refine Search'
   batch_actions: Batch actions
-  clear: Clear
   cancel: Cancel
diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview.rb
new file mode 100644
index 00000000000..822bfd09174
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# @component "ui/forms/search_field"
+class SolidusAdmin::UI::Forms::SearchField::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+end
diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview/overview.html.erb
new file mode 100644
index 00000000000..56c2025cc1a
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/forms/search_field/component_preview/overview.html.erb
@@ -0,0 +1,7 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Default
+  </h6>
+
+  <%= render current_component.new %>
+</div>
diff --git a/admin/spec/components/solidus_admin/ui/forms/search_field/component_spec.rb b/admin/spec/components/solidus_admin/ui/forms/search_field/component_spec.rb
new file mode 100644
index 00000000000..167a177ce03
--- /dev/null
+++ b/admin/spec/components/solidus_admin/ui/forms/search_field/component_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Forms::SearchField::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end