Add new ui/switch_field component

This commit introduces a new `ui/switch_field` component, which
utilizes the `ui/switch` component:
It includes a hidden input to facilitate the passing of the switch
parameter
in forms.

Additionally, a toggle field generator has been added to the main field
component.

Co-Authored-By: Elia Schito <[email protected]>

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Forms::Field::Component < SolidusAdmin::BaseComponent
+ extend SolidusAdmin::ComponentsHelper
+
  def initialize(label:, hint: nil, tip: nil, error: nil, input_attributes: nil, **attributes)
  @label = label
  @hint = hint
@@ -70,6 +72,25 @@ def self.text_area(form, method, object: nil, hint: nil, tip: nil, size: :m, **a
  )
  end
 
+ def self.toggle(form, method, object: nil, hint: nil, tip: nil, size: :m, **attributes)
+ object_name, object, label, errors = extract_form_details(form, object, method)
+
+ new(
+ label: label,
+ hint: hint,
+ tip: tip,
+ error: errors,
+ ).with_content(
+ component('ui/forms/switch').new(
+ name: "#{object_name}[#{method}]",
+ size: size,
+ checked: object.public_send(method),
+ include_hidden: true,
+ **attributes,
+ )
+ )
+ end
+
  def self.extract_form_details(form, object, method)
  if form.is_a?(String)
  object_name = form

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

@@ -6,34 +6,38 @@ class SolidusAdmin::UI::Forms::Switch::Component < SolidusAdmin::BaseComponent
  m: 'w-10 h-6 after:w-5 after:h-5 after:checked:translate-x-4',
  }.freeze
 
- def initialize(size: :m, **attributes)
+ def initialize(size: :m, include_hidden: false, **attributes)
  @size = size
  @attributes = attributes
- end
+ @include_hidden = include_hidden
+ @attributes[:class] = "
+ #{SIZES.fetch(@size)}
+ rounded-full after:rounded-full
+ appearance-none inline-block relative p-0.5 cursor-pointer
 
- def call
- tag.input(
- type: 'checkbox',
- class: "
- #{SIZES.fetch(@size)}
- rounded-full after:rounded-full
- appearance-none inline-block relative p-0.5 cursor-pointer
+ outline-none
+ focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-1
+ active:ring active:ring-gray-300 active:ring-0.5 active:ring-offset-1
 
- outline-none
- focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-1
- active:ring active:ring-gray-300 active:ring-0.5 active:ring-offset-1
+ disabled:cursor-not-allowed
+ after:top-0 after:left-0
+ after:content-[''] after:block
+ after:transition-all after:duration-300 after:ease-in-out
 
- disabled:cursor-not-allowed
- after:top-0 after:left-0
- after:content-[''] after:block
- after:transition-all after:duration-300 after:ease-in-out
+ bg-gray-200 after:bg-white
+ hover:bg-gray-300
+ checked:bg-gray-500 checked:hover:bg-gray-70
+ disabled:opacity-40
+ #{attributes[:class]}
+ "
+ end
 
- bg-gray-200 after:bg-white
- hover:bg-gray-300
- checked:bg-gray-500 checked:hover:bg-gray-70
- disabled:opacity-40
- ",
+ def call
+ input = tag.input(
+ type: 'checkbox',
  **@attributes,
  )
+
+ @include_hidden ? hidden_field_tag(@attributes.fetch(:name), false) + input : input
  end
 end

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

@@ -0,0 +1,20 @@
+<label class="flex flex-wrap items-center gap-2 w-full border border-gray-100 rounded px-4 py-2">
+ <div class="flex gap-1 items-center grow py-2">
+ <span class="text-gray-700 body-tiny-bold body-text-bold"><%= @label %></span>
+
+ <%= render component("ui/toggletip").new(text: @tip) if @tip.present? %>
+ </div>
+
+ <%= render component("ui/forms/switch").new(**@attributes) %>
+
+ <% if @hint.present? || @error.present? %>
+ <div
+ class="
+ w-full body-small [:disabled~&]:text-gray-300 text-gray-500 flex gap-1 flex-col pt-2 pb-4
+ "
+ >
+ <%= 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/switch_field/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::SwitchField::Component < SolidusAdmin::BaseComponent
+ def initialize(label:, error:, hint: nil, tip: nil, **attributes)
+ @label = label
+ @error = error
+ @hint = hint
+ @tip = tip
+ @attributes = attributes
+ end
+end

admin/spec/components/previews/solidus_admin/ui/forms/switch_field/component_preview.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# @component "ui/forms/switch_field"
+class SolidusAdmin::UI::Forms::SwitchField::ComponentPreview < ViewComponent::Preview
+ include SolidusAdmin::Preview
+
+ def overview
+ render_with_template
+ end
+
+ # @param label text
+ # @param error text
+ # @param hint text
+ # @param tip text
+ # @param size select { choices: [s, m] }
+ # @param checked toggle
+ # @param disabled toggle
+ def playground(
+ label: "Your Label",
+ error: "Your Error Message",
+ hint: "Your Hint Text",
+ tip: "Your Tip Text",
+ size: :m,
+ checked: false,
+ disabled: false
+ )
+ render current_component.new(
+ label: label,
+ name: nil,
+ error: [error],
+ hint: hint,
+ tip: tip,
+ size: size.to_sym,
+ checked: checked,
+ disabled: disabled,
+ )
+ end
+end

admin/spec/components/previews/solidus_admin/ui/forms/switch_field/component_preview/overview.html.erb

@@ -0,0 +1,9 @@
+<div class="mb-8 py-10">
+ <%= render current_component.new(
+ label: "Enable Notifications",
+ error: ["Unable to save settings"],
+ hint: "Turn on to receive regular updates",
+ tip: "Notifications can be customized in settings",
+ size: :m
+ ) %>
+</div>

admin/spec/components/solidus_admin/ui/forms/switch_field/component_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Forms::SwitchField::Component, type: :component do
+ it "renders the overview preview" do
+ render_preview(:overview)
+ end
+end