Split the panel from the search component

The search component becomes more adaptable this way and can be placed
in more ways within or without a panel.

The panel component gained an `actions` slot and updated paddings,
removing the need for the previously used negative margins.

admin/app/components/solidus_admin/orders/cart/component.html.erb

@@ -3,77 +3,84 @@
  data-controller="<%= stimulus_id %>"
  data-<%= stimulus_id %>-products-url-value="<%= solidus_admin.variants_for_order_path(@order) %>"
  data-action="
- <%= component('ui/search_panel').stimulus_id %>:search-><%= stimulus_id %>#search
- <%= component('ui/search_panel').stimulus_id %>:submit-><%= stimulus_id %>#selectResult
+ <%= component('ui/forms/search').stimulus_id %>:search-><%= stimulus_id %>#search
+ <%= component('ui/forms/search').stimulus_id %>:submit-><%= stimulus_id %>#selectResult
  "
 >
- <%= render component('ui/search_panel').new(
- title: t('.title'),
- search_placeholder: t('.search_placeholder'),
- id: :order_cart,
- ) do |panel| %>
- <table class="table-auto w-full" <%= :hidden if @order.line_items.empty? %>>
- <thead>
- <tr class="border-gray-100 border-t">
- <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
- <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
- <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
- <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
- </tr>
- </thead>
- <tbody>
- <% @order.line_items.each do |line_item| %>
- <tr class="border-gray-100 border-t">
- <td class="px-6 py-4">
- <div class="flex gap-2 grow">
- <% variant = line_item.variant %>
- <%= render component("ui/thumbnail").new(
- src: (variant.images.first || variant.product.gallery.images.first)&.url(:small),
- alt: variant.name
- ) %>
- <div class="flex-col">
- <div class="leading-5 text-black body-small-bold"><%= variant.name %></div>
- <div class="leading-5 text-gray-500 body-small">
- SKU: <%= variant.sku %>
- <%= variant.options_text.presence&.prepend("- ") %>
+ <%= render component('ui/panel').new(title: t('.title')) do |panel| %>
+ <% panel.with_section do %>
+ <%= render component('ui/forms/search').new(
+ placeholder: t('.search_placeholder'),
+ id: :order_cart,
+ ) %>
+ <% end %>
+
+ <% panel.with_section(wide: true, high: true) do %>
+ <div class="rounded-b-lg overflow-hidden">
+ <table class="table-auto w-full" <%= :hidden if @order.line_items.empty? %>>
+ <thead>
+ <tr>
+ <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
+ <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
+ <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
+ <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
+ </tr>
+ </thead>
+ <tbody>
+ <% @order.line_items.each do |line_item| %>
+ <tr class="border-gray-100 border-t">
+ <td class="px-6 py-4">
+ <div class="flex gap-2 grow">
+ <% variant = line_item.variant %>
+ <%= render component("ui/thumbnail").new(
+ src: (variant.images.first || variant.product.gallery.images.first)&.url(:small),
+ alt: variant.name
+ ) %>
+ <div class="flex-col">
+ <div class="leading-5 text-black body-small-bold"><%= variant.name %></div>
+ <div class="leading-5 text-gray-500 body-small">
+ SKU: <%= variant.sku %>
+ <%= variant.options_text.presence&.prepend("- ") %>
+ </div>
+ </div>
  </div>
- </div>
- </div>
- </td>
- <td class="px-6 py-4">
- <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
- "data-controller": "readonly-when-submitting"
- }) do |f| %>
- <%= render component("ui/forms/input").new(
- name: "#{f.object_name}[quantity]",
- type: :number,
- value: line_item.quantity,
- "aria-label": "Quantity",
- min: 0,
- class: "!w-16 inline-block",
- "data-action": "input->#{stimulus_id}#updateLineItem",
- ) %>
- <% render component("ui/button").new(type: :submit, text: "Update", class: "inline-block") %>
- <% end %>
- </td>
- <td class="px-6 py-4">
- <span class="text-gray-500 body-small"><%= line_item.single_money.to_html %></span>
- </td>
- <td class="px-6 py-4 text-right">
- <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>
- <%= render component('ui/button').new(
- scheme: :ghost,
- size: :s,
- title: t("spree.delete"),
- icon: 'close-line',
- "data-controller": "confirm",
- "data-confirm-text-value": t("spree.are_you_sure"),
- ) %>
- <% end %>
- </td>
- </tr>
- <% end %>
-  </tbody>
- </table>
+ </td>
+  <td class="px-6 py-4">
+  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
+  "data-controller": "readonly-when-submitting"
+  }) do |f| %>
+  <%= render component("ui/forms/input").new(
+  name: "#{f.object_name}[quantity]",
+  type: :number,
+  value: line_item.quantity,
+  "aria-label": "Quantity",
+  min: 0,
+  class: "!w-16 inline-block",
+  "data-action": "input->#{stimulus_id}#updateLineItem",
+  ) %>
+  <% render component("ui/button").new(type: :submit, text: "Update", class: "inline-block") %>
+  <% end %>
+ </td>
+  <td class="px-6 py-4">
+  <span class="text-gray-500 body-small"><%= line_item.single_money.to_html %></span>
+  </td>
+  <td class="px-6 py-4 text-right">
+  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>
+  <%= render component('ui/button').new(
+  scheme: :ghost,
+  size: :s,
+  title: t("spree.delete"),
+  icon: 'close-line',
+  "data-controller": "confirm",
+  "data-confirm-text-value": t("spree.are_you_sure"),
+  ) %>
+ <% end %>
+ </td>
+ </tr>
+ <% end %>
+ </tbody>
+ </table>
+ </div>
+ <% end %>
  <% end %>
 </div>

admin/app/components/solidus_admin/orders/cart/result/component.html.erb

@@ -1,4 +1,4 @@
-<%= render component('ui/search_panel/result').new do %>
+<%= render component('ui/forms/search/result').new do %>
  <%= form_for(@order.line_items.build(variant: @variant), url: solidus_admin.order_line_items_path(@order), method: :post, html: {
  "data-controller": "readonly-when-submitting",
  class: "flex items-center",

admin/app/components/solidus_admin/orders/show/component.html.erb

@@ -19,8 +19,8 @@
  link_to(t(".edit_shipping"), solidus_admin.new_order_ship_address_path(@order), class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
  link_to(t(".edit_billing"), solidus_admin.new_order_bill_address_path(@order), class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
  @order.user && button_to(t(".remove_customer"), solidus_admin.order_customer_path(@order), method: :delete, class: "p-2 hover:bg-gray-25 rounded-sm text-red-500"),
- ].compact)) do %>
- <div class="flex flex-col -m-6 p-6 gap-6 border-t border-gray-100 mt-0">
+ ].compact)) do |panel| %>
+ <% panel.with_section(class: 'flex flex-col gap-6') do %>
  <%# CUSTOMER %>
  <% if @order.user %>
  <div class="flex flex-col gap-2">
@@ -62,8 +62,7 @@
  </div>
  <% end %>
 
- </div>
-
+ <% end %>
  <% end %>
 
  <% end %>

admin/app/components/solidus_admin/ui/forms/search/component.html.erb

@@ -0,0 +1,51 @@
+<div
+ data-controller="<%= stimulus_id %>"
+ class="w-full relative overflow-visible"
+ data-action="
+ keydown.up-><%= stimulus_id %>#selectPrev
+ keydown.down-><%= stimulus_id %>#selectNext
+ keydown.enter-><%= stimulus_id %>#selectResult
+ "
+ data-<%= stimulus_id %>-loading-text-value="<%= t('.loading') %>"
+ data-<%= stimulus_id %>-initial-text-value="<%= t('.initial') %>"
+ data-<%= stimulus_id %>-empty-text-value="<%= t('.empty') %>"
+>
+ <div>
+ <div class="peer">
+ <%= render component("ui/forms/search_field").new(
+ id: "#{stimulus_id}--search-field--#{@id}",
+ "data-action": "
+ #{stimulus_id}#search
+ #{stimulus_id}#showResults
+ ",
+ "data-#{stimulus_id}-target": "searchField",
+ **@attributes,
+ ) %>
+ </div>
+
+ <details class="px-6 relative overflow-visible">
+ <summary class="hidden"></summary>
+ <div
+ class="
+ absolute
+ left-0
+ top-2
+ bg-white
+ z-30
+ w-full
+ rounded-lg
+ shadow
+ border
+ border-gray-100
+ p-2
+ flex-col
+ gap-1
+ max-h-screen
+ overflow-y-auto
+ "
+ data-<%= stimulus_id %>-target="results"
+ >
+ </div>
+ </details>
+ </div>
+</div>

admin/app/components/solidus_admin/ui/forms/search/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Search::Component < SolidusAdmin::BaseComponent
+ def initialize(id: nil, **attributes)
+ @id = id
+ @attributes = attributes
+ end
+end

admin/app/components/solidus_admin/ui/forms/search/result/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Search::Result::Component < SolidusAdmin::BaseComponent
+ def call
+ tag.div(
+ content,
+ class: "rounded p-2 hover:bg-gray-25 aria-selected:bg-gray-25 cursor-pointer",
+ "data-#{component('ui/forms/search').stimulus_id}-target": "result",
+ "data-action": "click->#{component('ui/forms/search').stimulus_id}#clickedResult",
+ )
+ end
+end

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -8,28 +8,30 @@
  flex-col
  justify-start
  items-start
- gap-6
  inline-flex
  w-full
- py-6
  "
  data-controller="<%= stimulus_id %>"
 >
  <% if @title %>
- <h2 class="mt-0 px-6 w-full">
+ <h2 class="mt-0 p-6 w-full">
  <span class="body-title"><%= @title %></span>
  <%= render component('ui/toggletip').new(text: @title_hint) if @title_hint %>
  </h2>
  <% end %>
 
- <% if content&.present? %>
- <div class="px-6 w-full flex flex-col gap-6">
+ <% sections.each do |section| %>
+ <%= section %>
+ <% end %>
+
+ <% if content.present? %>
+ <div class="p-6 w-full flex flex-col gap-6 <%= 'pt-0' if @title.present? && !sections? %>">
  <%= content %>
  </div>
  <% end %>
 
  <% if action? %>
- <div class="flex gap-2 items-center border-t border-gray-100 px-6 pt-6 w-full">
+ <div class="flex gap-2 items-center border-t border-gray-100 p-6 w-full">
  <%= action %>
  </div>
  <% end %>

admin/app/components/solidus_admin/ui/panel/component.rb

@@ -10,6 +10,15 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
  )
  }
 
+ renders_many :sections, ->(wide: false, high: false, **args, &block) do
+ tag.section(**args, class: "
+ border-gray-100 border-t w-full
+ #{'px-6' unless wide}
+ #{'py-6' unless high}
+ #{args[:class]}
+ ", &block)
+ end
+
  # @param title [String] the title of the panel
  # @param title_hint [String] the title hint of the panel
  def initialize(title: nil, title_hint: nil)

admin/spec/components/previews/solidus_admin/ui/search_panel/component_preview.rb → admin/spec/components/previews/solidus_admin/ui/forms/search/component_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-# @component "ui/search_panel"
-class SolidusAdmin::UI::SearchPanel::ComponentPreview < ViewComponent::Preview
+# @component "ui/forms/search"
+class SolidusAdmin::UI::Forms::Search::ComponentPreview < ViewComponent::Preview
  include SolidusAdmin::Preview
 
  def overview