Extract the table search field to a component

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
 

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>

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 = ""
+  }
+}

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

admin/app/components/solidus_admin/ui/forms/search_field/component.yml

@@ -0,0 +1,2 @@
+en:
+  clear: Clear

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">

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()
 

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

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

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>

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