solidus_admin 0.0.2 → 0.1.0

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

data/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

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

@@ -0,0 +1,4 @@
+en:
+  loading: "Loading..."
+  initial: "Type to search"
+  empty: "No results"

data/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

data/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>

data/app/{javascript/solidus_admin/controllers/hello_controller.js → components/solidus_admin/ui/forms/search_field/component.js}

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  greet() {
-    console.log(`Hello World! ${new Date()}`)
+  static targets = ["input"]
+
+  clear() {
+    this.inputTarget.value = ""
   }
 }

data/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

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

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

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

@@ -2,46 +2,42 @@
 
 class SolidusAdmin::UI::Forms::Switch::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: '
-      w-8 h-5
-
-      after:w-4 after:h-4
-      after:top-0.5 after:left-0.5
-
-      active:after:w-4
-      after:checked:left-[1.875rem]
-    ',
-    m: '
-      w-10 h-6
-
-      after:w-5 after:h-5
-      after:top-0.5 after:left-0.5
-
-      active:after:w-5
-      after:checked:left-[2.375rem]
-    ',
+    s: 'w-8 h-5 after:w-4 after:h-4 after:checked:translate-x-3',
+    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
+    @include_hidden = include_hidden
+    @attributes[: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
+
+      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
 
   def call
-    tag.input(
+    input = tag.input(
       type: 'checkbox',
-      class: "
-        #{SIZES.fetch(@size)}
-        appearance-none	outline-0 cursor-pointer bg-gray-200 inline-block rounded-full relative
-
-        after:content-[''] after:absolute after:bg-white
-        after:duration-300 after:rounded-full after:checked:-translate-x-full
-
-        hover:bg-gray-300
-        disabled:opacity-40 disabled:cursor-not-allowed
-        checked:bg-gray-500 checked:hover:bg-gray-700
-      ",
       **@attributes,
     )
+
+    @include_hidden ? hidden_field_tag(@attributes.fetch(:name), false) + input : input
   end
 end

data/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 font-semibold text-base"><%= @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 font-normal text-sm [: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>

data/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

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

@@ -16,6 +16,10 @@ class SolidusAdmin::UI::Icon::Component < SolidusAdmin::BaseComponent
 
     # Hide the icon from screen readers by default.
     @attrs['aria-hidden'] = true unless @attrs.key?('aria-hidden')
+
+    # Default icons without style to 16x16, mostly useful in test snapshots.
+    @attrs['width'] = '16'
+    @attrs['height'] = '16'
   end
 
   def call

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

@@ -0,0 +1,37 @@
+<dialog
+  data-controller="<%= stimulus_id %>"
+  <%= tag.attributes(
+    "aria-label": @title,
+    class: "relative z-10",
+    **@attributes
+  ) %>
+>
+  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto"></a>
+  <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
+    <div class="min-w-[40rem] max-h-screen pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
+
+      <header class="flex items-center justify-between p-4 sticky top-0 bg-inherit">
+        <h3 class="text-xl font-semibold text-gray-900">
+          <%= @title %>
+        </h3>
+        <%= render component('ui/button').new(
+          tag: :a,
+          href: @close_path,
+          icon: 'close-line',
+          scheme: :ghost,
+          title: t('.close'),
+        ) %>
+      </header>
+
+      <div class="p-4 overflow-auto">
+        <%= content %>
+      </div>
+
+      <% if actions? %>
+        <footer class="p-4 flex gap-2 justify-end sticky bottom-0 bg-inherit">
+          <%= actions %>
+        </footer>
+      <% end %>
+    </div>
+  </div>
+</dialog>

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
+  renders_one :actions
+
+  def initialize(title:, close_path: nil, open: true, **attributes)
+    @title = title
+    @close_path = close_path
+    @attributes = attributes
+    @attributes[:open] = open
+  end
+end

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

@@ -0,0 +1,2 @@
+en:
+  close: Close

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

@@ -8,29 +8,43 @@
     flex-col
     justify-start
     items-start
-    gap-6
     inline-flex
     w-full
-    py-6
+    relative
   "
   data-controller="<%= stimulus_id %>"
 >
+  <% if menus? %>
+    <%= render component('ui/dropdown').new(
+      size: :s,
+      class: "absolute top-0 right-0 m-6",
+    ).with_content(safe_join(menus)) %>
+  <% end %>
+
   <% if @title %>
-    <h2 class="mt-0 px-6 w-full">
-      <span class="body-title"><%= @title %></span>
-      <%= render component('ui/toggletip').new(text: @title_hint, position: :left) if @title_hint %>
-    </h2>
+    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+      <h2>
+        <span class="font-semibold text-xl"><%= @title %></span>
+        <%= render component("ui/toggletip").new(text: @title_hint) if @title_hint %>
+      </h2>
+    </section>
+  <% end %>
+
+  <% sections.each do |section| %>
+    <%= section %>
   <% end %>
 
-  <% if content&.present? %>
-    <div class="px-6 w-full flex flex-col gap-6">
+  <% if content.present? %>
+    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
       <%= content %>
-    </div>
+    </section>
   <% end %>
 
   <% if action? %>
-    <div class="flex gap-2 items-center border-t border-gray-100 px-6 pt-6 w-full">
-      <%= action %>
-    </div>
+    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+      <div class="flex justify-between items-center">
+        <%= action %>
+      </div>
+    </section>
   <% end %>
 </div>

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

@@ -10,6 +10,23 @@ 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 first-of-type:border-t-0
+      #{'px-6' unless wide}
+      #{'py-6' unless high}
+      #{args[:class]}
+    ", &block)
+  end
+
+  renders_many :menus, ->(name, url, **args) do
+    if args[:method]
+      button_to(name, url, **args)
+    else
+      link_to(name, url, **args)
+    end
+  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)

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

@@ -1,4 +1,2 @@
-# Add your component translations here.
-# Use the translation in the example in your template with `t(".hello")`.
 en:
-  hello: "Hello world!"
+  more: "More"

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

@@ -0,0 +1,10 @@
+<div class="flex gap-2 grow">
+  <%= render component("ui/thumbnail").new(
+    src: @thumbnail,
+    alt: @title,
+  ) if @thumbnail %>
+  <div class="flex-col">
+    <div class="leading-5 text-black font-semibold text-sm"><%= @title %></div>
+    <div class="leading-5 text-gray-500 font-normal text-sm"><%= @subtitle %></div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::ResourceItem::Component < SolidusAdmin::BaseComponent
+  def initialize(title:, subtitle:, thumbnail: nil)
+    @thumbnail = thumbnail
+    @title = title
+    @subtitle = subtitle
+  end
+end

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

@@ -2,12 +2,13 @@
 
 class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: %w[h-7 px-1.5 body-small-bold],
-    m: %w[h-9 px-3 body-small-bold],
-    l: %w[h-12 px-4 body-text-bold],
+    s: %w[h-7 px-1.5 font-semibold text-sm],
+    m: %w[h-9 px-3 font-semibold text-sm],
+    l: %w[h-12 px-4 font-semibold text-base],
   }
 
-  def initialize(text:, size: :m, current: false, disabled: false, **attributes)
+  def initialize(text:, tag: :a, size: :m, current: false, disabled: false, **attributes)
+    @tag = tag
     @text = text
     @size = size
     @attributes = attributes
@@ -22,11 +23,11 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
         hover:bg-gray-75 hover:text-gray-700
         focus:bg-gray-25 focus:text-gray-700
 
-        active:bg-gray-50 active:text-black
+        active:bg-gray-75 active:text-black
         aria-current:bg-gray-50 aria-current:text-black
 
-        disabled:bg-gray-100 disabled:text-gray-400
-        aria-disabled:bg-gray-100 aria-disabled:text-gray-400
+        disabled:bg-gray-75 disabled:text-gray-400
+        aria-disabled:bg-gray-75 aria-disabled:text-gray-400
       ],
       SIZES.fetch(@size.to_sym),
       @attributes.delete(:class),
@@ -35,7 +36,7 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
 
   def call
     content_tag(
-      :a,
+      @tag,
       @text,
       **@attributes
     )