solidus_admin 0.0.2 → 0.2.0

data/app/components/solidus_admin/ui/button/component.rb

@@ -2,65 +2,65 @@
 
 class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: %w[
+    s: %{
       h-7 w-7 p-1
       text-xs font-semibold leading-none
-    ],
-    m: %w[
+    },
+    m: %{
       h-9 w-9 p-1.5
       text-sm font-semibold leading-none
-    ],
-    l: %w[
+    },
+    l: %{
       h-12 w-12 p-2
       text-base font-semibold leading-none
-    ],
+    },
   }
 
   TEXT_PADDINGS = {
-    s: %w[px-1.5 w-auto],
-    m: %w[px-3 w-auto],
-    l: %w[px-4 w-auto],
+    s: %{px-1.5 w-auto},
+    m: %{px-3 w-auto},
+    l: %{px-4 w-auto},
   }
 
   ICON_SIZES = {
-    s: %w[w-[1.4em] h-[1.4em]],
-    m: %w[w-[1.35em] h-[1.35em]],
-    l: %w[w-[1.5em] h-[1.5em]],
+    s: %{w-[1.4em] h-[1.4em]},
+    m: %{w-[1.35em] h-[1.35em]},
+    l: %{w-[1.5em] h-[1.5em]},
   }
 
   SCHEMES = {
-    primary: %w[
+    primary: %{
       text-white bg-black
       hover:text-white hover:bg-gray-600
-      active:text-white active:bg-gray-800
+      active:text-white active:bg-gray-800 aria-current:text-white aria-current:bg-gray-800
       focus:text-white focus:bg-gray-700
-      disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
-      aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:aria-disabled:cursor-not-allowed
-    ],
-    secondary: %w[
+      disabled:text-gray-400 disabled:bg-gray-100
+      aria-disabled:text-gray-400 aria-disabled:bg-gray-100
+    },
+    secondary: %{
       text-gray-700 bg-white border border-1 border-gray-200
       hover:bg-gray-50
-      active:bg-gray-100
+      active:bg-gray-100            aria-current:bg-gray-100
       focus:bg-gray-50
-      disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed
-      aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed
-    ],
-    danger: %w[
+      disabled:text-gray-300 disabled:bg-white
+      aria-disabled:text-gray-300 aria-disabled:bg-white
+    },
+    danger: %{
       text-red-500 bg-white border border-1 border-red-500
       hover:bg-red-500 hover:border-red-600 hover:text-white
-      active:bg-red-600 active:border-red-700 active:text-white
+      active:bg-red-600 active:border-red-700 active:text-white aria-current:bg-red-600 aria-current:border-red-700 aria-current:text-white
       focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
-      disabled:text-red-300 disabled:bg-white disabled:border-red-200 disabled:cursor-not-allowed
-      aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200 aria-disabled:cursor-not-allowed
-    ],
-    ghost: %w[
+      disabled:text-red-300 disabled:bg-white disabled:border-red-200
+      aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200
+    },
+    ghost: %{
       text-gray-700 bg-transparent
       hover:bg-gray-50
-      active:bg-gray-100
+      active:bg-gray-100 aria-current:bg-gray-100
       focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
-      disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300 disabled:cursor-not-allowed
-      aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300 aria-disabled:cursor-not-allowed
-    ],
+      disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300
+      aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300
+    },
   }
 
   def initialize(

data/app/components/solidus_admin/ui/details_list/component.html.erb

@@ -0,0 +1,10 @@
+<div class="<%= stimulus_id %>">
+  <ul class="text-sm">
+    <% @items.each do |item| %>
+      <li class="flex justify-between py-2 <%= item[:class] %>">
+        <span><%= item[:label] %></span>
+        <span><%= item[:value] %></span>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/components/solidus_admin/ui/details_list/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::DetailsList::Component < SolidusAdmin::BaseComponent
+  def initialize(items:)
+    @items = items
+  end
+end

data/app/components/solidus_admin/ui/dropdown/component.html.erb

@@ -0,0 +1,50 @@
+<details
+  <%= tag.attributes @attributes %>
+>
+  <summary
+    class="
+      text-black
+      hover:fill-gray-500
+      [[open]_&]:fill-gray-500
+      cursor-pointer
+      flex
+      items-center
+    "
+    title="<%= @text || t(".more") %>"
+    data-action="keydown.esc-><%= stimulus_id %>#close"
+  >
+    <% if @text %>
+      <%= @text %>
+      <%= icon_tag "arrow-down-s-fill", class: SIZES.fetch(@size) %>
+    <% else %>
+      <%= icon_tag "more-line", class: SIZES.fetch(@size) %>
+    <% end %>
+  </summary>
+
+  <div
+    class="
+      absolute
+      border
+      border-gray-100
+      mt-0.5
+      flex
+      flex-col
+      min-w-[10rem]
+      p-2
+      rounded-sm
+      shadow-lg
+      bg-white
+      z-10
+
+      <%= DIRECTIONS.fetch(@direction) %>
+
+      [&>*]:p-2
+      [&>*]:rounded-sm
+      [&>*:hover]:bg-gray-50
+      [&>*]:text-black
+      [&>*]:min-w-fit
+    "
+  >
+    <%= content %>
+  </div>
+</details>

data/app/components/solidus_admin/ui/dropdown/component.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside() {
+    this.close()
+  }
+
+  close() {
+    this.element.removeAttribute('open')
+  }
+}

data/app/components/solidus_admin/ui/dropdown/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Dropdown::Component < SolidusAdmin::BaseComponent
+  DIRECTIONS = {
+    left: "right-0",
+    right: "left-0",
+  }
+
+  SIZES = {
+    s: "w-5 h-5",
+    m: "w-[22px] h-[22px]",
+  }
+
+  def initialize(text: nil, size: :m, direction: :left, **attributes)
+    @text = text
+    @size = size
+    @attributes = attributes
+    @direction = direction
+
+    @attributes[:"data-controller"] = "#{stimulus_id} #{attributes[:"data-controller"]}"
+    @attributes[:"data-action"] = "turbo:before-cache@window->#{stimulus_id}#close #{attributes[:"data-action"]}"
+    @attributes[:class] = "
+      font-normal
+      #{@size == :m ? 'text-base' : 'text-sm'}
+      #{@attributes[:class]}
+    "
+  end
+end

data/app/components/solidus_admin/ui/dropdown/component.yml

@@ -0,0 +1,2 @@
+en:
+  more: "More"

data/app/components/solidus_admin/ui/forms/address/component.html.erb

@@ -0,0 +1,36 @@
+<fieldset class="<%= stimulus_id %>"
+  data-controller="<%= stimulus_id %>"
+  <%= :disabled if @disabled %>
+>
+  <div class="<%= stimulus_id %>--address-form flex flex-wrap gap-4 pb-4">
+    <%= render component("ui/forms/field").text_field(@name, :name, object: @address) %>
+    <%= render component("ui/forms/field").text_field(@name, :address1, object: @address) %>
+    <%= render component("ui/forms/field").text_field(@name, :address2, object: @address) %>
+    <div class="flex gap-4 w-full">
+      <%= render component("ui/forms/field").text_field(@name, :city, object: @address) %>
+      <%= render component("ui/forms/field").text_field(@name, :zipcode, object: @address) %>
+    </div>
+
+    <%= render component("ui/forms/field").select(
+      @name,
+      :country_id,
+      Spree::Country.all.map { |c| [c.name, c.id] },
+      object: @address,
+      value: @address.try(:country_id),
+      "data-#{stimulus_id}-target": "country",
+      "data-action": "change->#{stimulus_id}#loadStates"
+    ) %>
+
+    <%= render component("ui/forms/field").select(
+      @name,
+      :state_id,
+      state_options,
+      object: @address,
+      value: @address.try(:state_id),
+      disabled: @address.country&.states&.empty?,
+      "data-#{stimulus_id}-target": "state"
+    ) %>
+
+    <%= render component("ui/forms/field").text_field(@name, :phone,  object: @address) %>
+  </div>
+</fieldset>

data/app/components/solidus_admin/ui/forms/address/component.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["country", "state"]
+
+  loadStates() {
+    const countryId = this.countryTarget.value
+
+    fetch(`/admin/countries/${countryId}/states`)
+      .then(response => response.json())
+      .then(data => {
+        this.updateStateOptions(data)
+      })
+  }
+
+  updateStateOptions(data) {
+    const stateSelect = this.stateTarget
+
+    stateSelect.innerHTML = ""
+
+    if (data.length === 0) {
+      stateSelect.disabled = true
+    } else {
+      stateSelect.disabled = false
+
+      data.forEach((state) => {
+        const option = document.createElement("option")
+        option.value = state.id
+        option.innerText = state.name
+        stateSelect.appendChild(option)
+      })
+    }
+  }
+}

data/app/components/solidus_admin/ui/forms/address/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Component < SolidusAdmin::BaseComponent
+  def initialize(address:, name:, disabled: false)
+    @address = address
+    @name = name
+    @disabled = disabled
+  end
+
+  def state_options
+    return [] unless @address.country
+    @address.country.states.map { |s| [s.name, s.id] }
+  end
+end

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

@@ -2,8 +2,7 @@
   <div class="flex gap-1 items-center">
     <span class="
       text-gray-700
-      body-tiny-bold
-      body-text-xs-semibold
+      font-semibold text-xs
     "><%= @label %></span>
 
     <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
@@ -11,18 +10,20 @@
 
   <% if @input_attributes.present? %>
     <%= render component('ui/forms/input').new(**@input_attributes) %>
+  <% elsif content.respond_to?(:render_in) %>
+    <%= render content %>
   <% else %>
     <%= content %>
   <% end %>
 
   <% if @hint.present? || @error.present? %>
     <div class="
-      body-tiny
+      font-normal text-xs
       [: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? %>
+      <%= tag.span safe_join(@error, tag.br), class: "text-red-600" if @error.present? %>
     </div>
   <% end %>
 </label>

data/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
@@ -12,61 +14,97 @@ class SolidusAdmin::UI::Forms::Field::Component < SolidusAdmin::BaseComponent
     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
+  def self.text_field(form, method, object: nil, hint: nil, tip: nil, size: :m, **attributes)
+    object_name, object, label, errors = extract_form_details(form, object, method)
 
     new(
-      label: form.object.class.human_attribute_name(method),
+      label: label,
       hint: hint,
       tip: tip,
       error: errors,
       input_attributes: {
-        name: "#{form.object_name}[#{method}]",
+        name: "#{object_name}[#{method}]",
         tag: :input,
         size: size,
-        value: form.object.public_send(method),
+        value: 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
+  def self.select(form, method, choices, object: nil, hint: nil, tip: nil, size: :m, **attributes)
+    object_name, object, label, errors = extract_form_details(form, object, method)
 
     new(
-      label: form.object.class.human_attribute_name(method),
+      label: label,
       hint: hint,
       tip: tip,
       error: errors,
       input_attributes: {
-        name: "#{form.object_name}[#{method}]",
+        name: "#{object_name}[#{method}]",
         tag: :select,
         choices: choices,
         size: size,
-        value: form.object.public_send(method),
+        value: 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
+  def self.text_area(form, method, object: nil, hint: nil, tip: nil, size: :m, **attributes)
+    object_name, object, label, errors = extract_form_details(form, object, method)
 
     new(
-      label: form.object.class.human_attribute_name(method),
+      label: label,
       hint: hint,
       tip: tip,
       error: errors,
       input_attributes: {
-        name: "#{form.object_name}[#{method}]",
+        name: "#{object_name}[#{method}]",
         size: size,
         tag: :textarea,
-        value: form.object.public_send(method),
+        value: object.public_send(method),
         error: (errors.to_sentence.capitalize if errors),
         **attributes,
       }
     )
   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
+      raise ArgumentError, "Object must be provided when form name is a string" unless object
+    elsif form.respond_to?(:object)
+      object_name = form.object_name
+      object = form.object
+    else
+      raise ArgumentError, "Invalid arguments: expected a form object or form.object_name and form.object"
+    end
+
+    errors = object.errors.messages_for(method).presence if object.respond_to?(:errors)
+    label = object.class.human_attribute_name(method)
+
+    [object_name, object, label, errors]
+  end
 end

data/app/components/solidus_admin/ui/forms/input/component.rb

@@ -2,9 +2,9 @@
 
 class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: "form-control-sm px-3 py-1.5 body-small",
-    m: "form-control-md px-3 py-1.5 body-small",
-    l: "form-control-lg px-3 py-1.5 body-text"
+    s: "form-control-sm px-3 py-1.5 font-normal text-sm",
+    m: "form-control-md px-3 py-1.5 font-normal text-sm",
+    l: "form-control-lg px-3 py-1.5 font-normal text-base"
   }.freeze
 
   HEIGHTS = {
@@ -32,6 +32,7 @@ class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
     datetime-local
     month
     week
+    search
     time
   ]).freeze
 
@@ -39,16 +40,21 @@ class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
     raise ArgumentError, "unsupported tag: #{tag}" unless %i[input textarea select].include?(tag)
 
     specialized_classes = []
+    readonly_classes = "read-only:bg-gray-15 focus:read-only:bg-gray-15 focus:read-only:ring-0
+      read-only:cursor-not-allowed read-only:focus:border-gray-300
+      read-only:hover:border-gray-300 read-only:hover:focus:border-gray-300"
 
     case tag
     when :input
       specialized_classes << "form-input"
+      specialized_classes << readonly_classes
       specialized_classes << HEIGHTS[size]
       if attributes[:type] && !TYPES.include?(attributes[:type])
         raise ArgumentError, "unsupported type attribute: #{attributes[:type]}"
       end
     when :textarea
       specialized_classes << "form-textarea"
+      specialized_classes << readonly_classes
       specialized_classes << MULTILINE_HEIGHTS[size]
     when :select
       if attributes[:multiple]
@@ -68,8 +74,8 @@ class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
         hover:border-gray-500
         focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none
         disabled:bg-gray-50 disabled:text-gray-500 disabled:placeholder:text-gray-300 disabled:cursor-not-allowed
-        invalid:border-red-400 invalid:hover:border-red-400 invalid:text-red-400
-        aria-invalid:border-red-400 aria-invalid:hover:border-red-400 aria-invalid:text-red-400
+        invalid:border-red-600 invalid:hover:border-red-600 invalid:text-red-600
+        aria-invalid:border-red-600 aria-invalid:hover:border-red-600 aria-invalid:text-red-600
       ],
       SIZES[size],
       specialized_classes,

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

@@ -0,0 +1,52 @@
+<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
+          flex-col
+          gap-1
+          max-h-screen
+          overflow-y-auto
+        "
+        data-<%= stimulus_id %>-target="results"
+      >
+      </div>
+    </details>
+  </div>
+</div>

data/app/components/solidus_admin/ui/forms/search/component.js

@@ -0,0 +1,116 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside, useDebounce } from "stimulus-use"
+
+export default class extends Controller {
+  static targets = ["result", "results", "searchField"]
+  static values = {
+    results: String,
+    loadingText: String,
+    initialText: String,
+    emptyText: String,
+  }
+  static debounces = ["search"]
+
+  get query() {
+    return this.searchFieldTarget.value
+  }
+
+  get selectedResult() {
+    // Keep the index within boundaries
+    if (this.selectedIndex < 0) this.selectedIndex = 0
+    if (this.selectedIndex >= this.resultTargets.length) this.selectedIndex = this.resultTargets.length - 1
+
+    return this.resultTargets[this.selectedIndex]
+  }
+
+  connect() {
+    useClickOutside(this)
+    useDebounce(this)
+
+    this.selectedIndex = 0
+
+    if (this.query) {
+      this.showResults()
+      this.search()
+    }
+  }
+
+  selectResult(event) {
+    event.preventDefault()
+    this.dispatch("submit", { detail: { resultTarget: this.selectedResult } })
+  }
+
+  clickedResult(event) {
+    this.selectedIndex = this.resultTargets.indexOf(event.currentTarget)
+    this.render()
+    this.selectResult(event)
+  }
+
+  selectPrev(event) {
+    event.preventDefault()
+    this.selectedIndex -= 1
+    this.render()
+  }
+
+  selectNext(event) {
+    event.preventDefault()
+    this.selectedIndex += 1
+    this.render()
+  }
+
+  clickOutside() {
+    this.openResults = false
+    this.render()
+  }
+
+  async search() {
+    const query = this.query
+
+    if (query) {
+      this.resultsValue = this.loadingTextValue
+      this.render()
+      this.dispatch("search", { detail: { query, controller: this } })
+    } else {
+      this.resultsValue = this.initialTextValue
+      this.render()
+    }
+  }
+
+  resultsValueChanged() {
+    this.selectedIndex = 0
+    this.render()
+  }
+
+  showResults() {
+    this.openResults = true
+    this.render()
+  }
+
+  render() {
+    let resultsHtml = this.resultsValue
+
+    if (this.renderedHtml !== resultsHtml) {
+      this.renderedHtml = resultsHtml
+      this.resultsTarget.innerHTML = resultsHtml
+    }
+
+    if (this.openResults && resultsHtml && this.query) {
+      if (!this.resultsTarget.parentNode.open) this.selectedIndex = 0
+
+      for (const result of this.resultTargets) {
+        if (result === this.selectedResult) {
+          if (!result.hasAttribute("aria-selected") && result.scrollIntoViewIfNeeded) {
+            // This is a non-standard method, but it's supported by all major browsers
+            result.scrollIntoViewIfNeeded()
+          }
+          result.setAttribute("aria-selected", true)
+        } else {
+          result.removeAttribute("aria-selected")
+        }
+      }
+      this.resultsTarget.parentNode.open = true
+    } else {
+      this.resultsTarget.parentNode.open = false
+    }
+  }
+}