Merge pull request #5385 from solidusio/elia/admin/form-components-cl…

…eanup

[admin] Streamline form inputs

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

@@ -36,18 +36,15 @@
     <div class="flex gap-4 items-start pb-4">
       <div class="justify-center items-start gap-4 flex flex-col w-full">
         <%= render component('ui/panel').new do %>
-          <%= render component("ui/forms/text_field").new(field: :name, builder: f) %>
-          <%= render component("ui/forms/text_field").new(field: :slug, builder: f) %>
-          <%= render component("ui/forms/text_area").new(field: :description, builder: f) %>
+          <%= render component("ui/forms/field").text_field(f, :name) %>
+          <%= render component("ui/forms/field").text_field(f, :slug) %>
+          <%= render component("ui/forms/field").text_area(f, :description) %>
         <% end %>
 
         <%= render component('ui/panel').new(title: 'SEO', title_hint: 'Search Engine Optimization') do %>
-          <%= render component("ui/forms/text_field").new(field: :meta_title, builder: f) %>
-          <%= render component("ui/forms/text_field").new(
-            field: :meta_description,
-            builder: f
-          ) %>
-          <%= render component("ui/forms/text_area").new(field: :meta_keywords, builder: f) %>
+          <%= render component("ui/forms/field").text_field(f, :meta_title) %>
+          <%= render component("ui/forms/field").text_field(f, :meta_description) %>
+          <%= render component("ui/forms/field").text_area(f, :meta_keywords) %>
         <% end %>
 
         <%= render component('ui/panel').new(title: "Media") do |panel| %>
@@ -58,15 +55,15 @@
         <% end %>
 
         <%= render component('ui/panel').new(title: 'Pricing') do %>
-          <%= render component("ui/forms/text_field").new(field: :price, builder: f) %>
-          <div class="flex gap-4 items-grow">
-            <%= render component("ui/forms/text_field").new(field: :cost_price, builder: f) %>
-            <%= render component("ui/forms/text_field").new(field: :cost_currency, builder: f) %>
+          <%= render component("ui/forms/field").text_field(f, :price) %>
+          <div class="flex gap-4 justify-items-stretch">
+            <%= render component("ui/forms/field").text_field(f, :cost_price) %>
+            <%= render component("ui/forms/field").text_field(f, :cost_currency) %>
           </div>
         <% end %>
 
         <%= render component('ui/panel').new(title: 'Stock') do |panel| %>
-          <%= render component("ui/forms/text_field").new(field: :sku, builder: f) %>
+          <%= render component("ui/forms/field").text_field(f, :sku) %>
 
           <% panel.with_action(
             name: t(".manage_stock"),
@@ -75,38 +72,30 @@
         <% end %>
 
         <%= render component('ui/panel').new(title: 'Shipping') do %>
-          <%= render component("ui/forms/select").new(
-            field: :shipping_category_id,
-            toggletip: t(".hints.shipping_category_html"),
-            choices:
-              [[t(".none"), nil]] +
-                Spree::ShippingCategory.order(:name).pluck(:name, :id),
-            builder: f
+          <%= render component("ui/forms/field").select(
+            f,
+            :shipping_category_id,
+            [[t(".none"), nil]] + Spree::ShippingCategory.order(:name).pluck(:name, :id),
+            tip: t(".hints.shipping_category_html"),
           ) %>
-          <%= render component("ui/forms/select").new(
-            field: :tax_category_id,
-            toggletip:
-              t(
-                ".hints.tax_category_html",
-                default_tax_category: Spree::TaxCategory.default&.name
-              ),
-            choices:
-              [[t(".none"), nil]] + Spree::TaxCategory.order(:name).pluck(:name, :id),
-            builder: f
+          <%= render component("ui/forms/field").select(
+            f,
+            :tax_category_id,
+            [[t(".none"), nil]] + Spree::TaxCategory.order(:name).pluck(:name, :id),
+            tip: t(
+              ".hints.tax_category_html",
+              default_tax_category: Spree::TaxCategory.default&.name
+            ),
           ) %>
         <% end %>
 
         <%= render component('ui/panel').new(title: "Options") do %>
-          <%= render component("ui/forms/label").new(field: :option_type_ids, builder: f) %>
-          <%= f.select(
+          <%= render component("ui/forms/field").select(
+            f,
             :option_type_ids,
             option_type_options,
-            { include_hidden: false },
-            {
-              multiple: true,
-              size: option_type_options.size,
-              class: "w-full padding-2 border border-gray-200 rounded overflow-y-auto"
-            }
+            multiple: true,
+            "size" => option_type_options.size,
           ) %>
         <% end %>
 
@@ -120,18 +109,8 @@
 
       <aside class="justify-center items-start gap-4 flex flex-col w-full max-w-sm">
         <%= render component('ui/panel').new(title: "Publishing") do %>
-          <%= render component("ui/forms/text_field").new(
-            field: :available_on,
-            toggletip: t(".hints.available_on_html"),
-            builder: f,
-            type: :date
-          ) %>
-          <%= render component("ui/forms/text_field").new(
-            field: :discontinue_on,
-            toggletip: t(".hints.discontinue_on_html"),
-            builder: f,
-            type: :date
-          ) %>
+          <%= render component("ui/forms/field").text_field(f, :available_on, tip: t(".hints.available_on_html"), type: :date) %>
+          <%= render component("ui/forms/field").text_field(f, :discontinue_on, tip: t(".hints.discontinue_on_html"), type: :date) %>
 
           <label class="flex gap-2 items-center">
             <%= render component("ui/forms/checkbox").new(
@@ -147,13 +126,7 @@
         <% end %>
 
         <%= render component('ui/panel').new(title: "Product organization") do %>
-          <%= render component("ui/forms/label").new(field: :taxon_ids, builder: f) %>
-          <%= f.select(
-            :taxon_ids,
-            taxon_options,
-            { include_hidden: false },
-            { multiple: true, size: taxon_options.size, class: "w-full" }
-          ) %>
+          <%= render component("ui/forms/field").select(f, :taxon_ids, taxon_options, multiple: true, "size" => taxon_options.size) %>
         <% end %>
       </aside>
     </div>

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

@@ -0,0 +1,28 @@
+<label class="flex flex-col gap-2 w-full">
+  <div class="flex gap-1 items-center">
+    <span class="
+      text-gray-700
+      body-tiny-bold
+      body-text-xs-semibold
+    "><%= @label %></span>
+
+    <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
+  </div>
+
+  <% if @input_attributes.present? %>
+    <%= render component('ui/forms/input').new(**@input_attributes) %>
+  <% else %>
+    <%= content %>
+  <% end %>
+
+  <% if @hint.present? || @error.present? %>
+    <div class="
+      body-tiny
+      [:disabled~&]:text-gray-300 text-gray-500
+      flex gap-1 flex-col
+    ">
+      <%= tag.span @hint if @hint.present? %>
+      <%= tag.span safe_join(@error, tag.br), class: "text-red-400" if @error.present? %>
+    </div>
+  <% end %>
+</label>

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Field::Component < SolidusAdmin::BaseComponent
+  def initialize(label:, hint: nil, tip: nil, error: nil, input_attributes: nil, **attributes)
+    @label = label
+    @hint = hint
+    @tip = tip
+    @error = [error] if error.present?
+    @attributes = attributes
+    @input_attributes = input_attributes
+
+    raise ArgumentError, "provide either a block or input_attributes" if content? && input_attributes
+  end
+
+  def self.text_field(form, method, hint: nil, tip: nil, size: :m, **attributes)
+    errors = form.object.errors.messages_for(method).presence
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        tag: :input,
+        size: size,
+        value: form.object.public_send(method),
+        error: (errors.to_sentence.capitalize if errors),
+        **attributes,
+      }
+    )
+  end
+
+  def self.select(form, method, choices, hint: nil, tip: nil, size: :m, **attributes)
+    errors = form.object.errors.messages_for(method).presence
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        tag: :select,
+        choices: choices,
+        size: size,
+        value: form.object.public_send(method),
+        error: (errors.to_sentence.capitalize if errors),
+        **attributes,
+      }
+    )
+  end
+
+  def self.text_area(form, method, hint: nil, tip: nil, size: :m, **attributes)
+    errors = form.object.errors.messages_for(method).presence
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        size: size,
+        tag: :textarea,
+        value: form.object.public_send(method),
+        error: (errors.to_sentence.capitalize if errors),
+        **attributes,
+      }
+    )
+  end
+end