solidus_admin 0.0.2 → 0.1.0

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

@@ -7,5 +7,4 @@ en:
   search_placeholder: 'Search all %{resources}'
   refine_search: 'Refine Search'
   batch_actions: Batch actions
-  clear: Clear
   cancel: Cancel

data/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb

@@ -0,0 +1,72 @@
+<fieldset class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
+  <input type="hidden" form="<%= @form %>"
+         name="<%= @combinator.name %>"
+         value="<%= @combinator.value %>">
+
+  <details class="relative inline-block text-left" data-<%= stimulus_id %>-target="details">
+    <summary class="
+      inline-flex justify-center
+      rounded-full border border-gray-300
+      shadow-sm
+      px-3 py-2
+      text-sm font-medium text-gray-700
+      hover:bg-gray-50
+      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
+      cursor-default
+    " data-<%= stimulus_id %>-target="summary">
+      <%= @presentation %>
+      <%= render component("ui/icon").new(name: 'arrow-down-s-fill', class: "w-[1.4em] h-[1.4em]") %>
+    </summary>
+
+    <div class="
+      absolute
+      left-0 mt-2 w-56
+      rounded-md shadow-lg
+      bg-white
+      ring-1 ring-black ring-opacity-5
+      z-10
+    ">
+      <div class="relative">
+        <% if @selections.size > 6 %>
+          <div class="px-4 py-2 sticky top-0 z-50">
+            <input type="text"
+                   placeholder="<%= t('.search') %>"
+                   class="w-full px-2 py-1 border border-gray-300 rounded focus:border-indigo-500 focus:ring-indigo-500"
+                   data-action="input-><%= stimulus_id %>#filterOptions">
+          </div>
+        <% end %>
+        <div class="py-1 max-h-[240px] overflow-y-auto" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" data-<%= stimulus_id %>-target="menu">
+          <% if @selections.any? %>
+            <% @selections.each do |selection| %>
+              <div class="px-4 py-2" data-<%= stimulus_id %>-target="option">
+                <input type="hidden" form="<%= @form %>"
+                       name="<%= selection.attribute.name %>"
+                       value="<%= selection.attribute.value %>">
+                <input type="hidden" form="<%= @form %>"
+                       name="<%= selection.predicate.name %>"
+                       value="<%= selection.predicate.value %>">
+
+                <%= render component('ui/forms/checkbox').new(
+                     id: selection.id,
+                     name: selection.option.name,
+                     value: selection.option.value,
+                     checked: selection.checked,
+                     size: :s,
+                     form: @form,
+                     "data-action": "#{stimulus_id}#search #{stimulus_id}#sortCheckboxes #{stimulus_id}#updateHiddenInputs",
+                     "data-#{stimulus_id}-target": "checkbox"
+                   ) %>
+
+                <%= label_tag selection.id, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-4 py-2 text-sm text-gray-700">
+              <%= t('.no_filter_options') %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </details>
+</fieldset>

data/app/components/solidus_admin/ui/table/ransack_filter/component.js

@@ -0,0 +1,73 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside, useDebounce } from 'stimulus-use'
+
+const BG_GRAY = 'bg-gray-100'
+
+export default class extends Controller {
+  static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
+  static debounces = ['init']
+
+  connect() {
+    useDebounce(this, { wait: 50 })
+    useClickOutside(this)
+    this.init()
+    this.updateHiddenInputs()
+  }
+
+  clickOutside(event) {
+    this.detailsTarget.removeAttribute("open")
+  }
+
+  init() {
+    this.highlightFilter()
+    this.showSearch()
+  }
+
+  highlightFilter() {
+    const optionIsSelected = this.isAnyCheckboxChecked()
+    this.summaryTarget.classList.toggle(BG_GRAY, optionIsSelected)
+  }
+
+  showSearch() {
+    if (this.isAnyCheckboxChecked()) {
+      this.dispatch("showSearch", { detail: { avoidFocus: true } })
+    }
+  }
+
+  filterOptions(event) {
+    const query = event.currentTarget.value.toLowerCase()
+    this.optionTargets.forEach((option) => {
+      option.style.display = option.textContent.toLowerCase().includes(query) ? 'block' : 'none'
+    })
+  }
+
+  search() {
+    this.dispatch("search")
+    this.highlightFilter()
+  }
+
+  updateHiddenInputs() {
+    this.checkboxTargets.forEach((checkbox) => {
+      const hiddenElements = checkbox.parentElement.querySelectorAll("input[type='hidden']")
+      checkbox.checked
+        ? hiddenElements.forEach(e => e.removeAttribute("disabled"))
+        : hiddenElements.forEach(e => e.setAttribute("disabled", true))
+    })
+  }
+
+  sortCheckboxes() {
+    const checkboxes = this.checkboxTargets
+
+    checkboxes.sort((a, b) => {
+      if (a.checked && !b.checked) return -1
+      if (!a.checked && b.checked) return 1
+      return 0
+    }).forEach(checkbox => {
+      this.menuTarget.appendChild(checkbox.closest('div'))
+    })
+  }
+
+  isAnyCheckboxChecked() {
+    return this.checkboxTargets.some(checkbox => checkbox.checked)
+  }
+}

data/app/components/solidus_admin/ui/table/ransack_filter/component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Table::RansackFilter::Component < SolidusAdmin::BaseComponent
+  # @param presentation [String] The label for the filter.
+  # @param search_param [String] The search parameter for the filter query.
+  # @param combinator [String] The combining logic for filter options.
+  # @param attribute [String] The database attribute the filter is based on.
+  # @param predicate [String] The comparison logic for the filter (e.g., "eq" for equals).
+  # @param options [Proc] A callable that returns filter options.
+  # @param index [Integer] The index of the filter.
+  # @param form [String] The form in which the filter resides.
+  def initialize(
+    presentation:,
+    combinator:, attribute:, predicate:, options:, form:, index:, search_param: :q
+)
+    @presentation = presentation
+    @group = "#{search_param}[g][#{index}]"
+    @combinator = build(:combinator, combinator)
+    @attribute = attribute
+    @predicate = predicate
+    @options = options
+    @form = form
+    @index = index
+  end
+
+  def before_render
+    @selections = @options.map.with_index do |(label, value), opt_index|
+      Selection.new(
+        "#{stimulus_id}--#{label}-#{value}".parameterize,
+        label,
+        build(:attribute, @attribute, opt_index),
+        build(:predicate, @predicate, opt_index),
+        build(:option, value, opt_index),
+        checked?(value)
+      )
+    end
+  end
+
+  # Builds form attributes for filter options.
+  #
+  # @param type [Symbol] The type of the form attribute.
+  # @param value [String] The value of the form attribute.
+  # @param opt_index [Integer] The index of the option, if applicable.
+  # @return [FormAttribute] The built form attribute.
+  def build(type, value, opt_index = nil)
+    suffix = SUFFIXES[type] % { index: opt_index || @index }
+    Attribute.new("#{@group}#{suffix}", value)
+  end
+
+  # Determines if a given value should be checked based on the params.
+  #
+  # @param value [String] The value of the checkbox.
+  # @return [Boolean] Returns true if the checkbox should be checked, false otherwise.
+  def checked?(value)
+    conditions = params.dig(:q, :g, @index.to_s, :c)
+    conditions && conditions.values.any? { |c| c[:v]&.include?(value.to_s) }
+  end
+
+  SUFFIXES = {
+    combinator: '[m]',
+    attribute: '[c][%<index>s][a][]',
+    predicate: '[c][%<index>s][p]',
+    option: '[c][%<index>s][v][]'
+  }
+
+  Selection = Struct.new(:id, :presentation, :attribute, :predicate, :option, :checked)
+  Attribute = Struct.new(:name, :value)
+end

data/app/components/solidus_admin/ui/table/ransack_filter/component.yml

@@ -0,0 +1,3 @@
+en:
+  search: Search
+  no_filter_options: No options available

data/app/components/solidus_admin/ui/table/toolbar/component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Table::Toolbar::Component < SolidusAdmin::BaseComponent
+  def initialize(**options)
+    @options = options
+  end
+
+  def call
+    tag.div(
+      content,
+      **@options,
+      class: "
+        min-h-14 p-2 bg-white border-b border-gray-100
+        justify-start items-center gap-2
+        visible:flex hidden:hidden
+        rounded-t-lg
+        #{@options[:class]}
+      "
+    )
+  end
+end

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Thumbnail::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: 'h-6 w-6',
+    m: 'h-10 w-10',
+    l: 'h-20 w-20',
+  }.freeze
+
+  def initialize(icon: nil, size: :m, **attributes)
+    @icon = icon
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    icon = if @icon
+      icon_tag(@icon, class: "bg-gray-25 fill-gray-700 #{SIZES[@size]} p-2")
+    else
+      tag.img(**@attributes, class: "object-contain #{SIZES[@size]}")
+    end
+
+    tag.div(icon, class: "
+      #{SIZES[@size]}
+      rounded border border-gray-100
+      bg-white overflow-hidden
+      content-box
+      #{@attributes[:class]}
+    ")
+  end
+
+  def self.for(record, **attrs)
+    case record
+    when Spree::PromotionAction then new(icon: "megaphone-line", **attrs)
+    when Spree::UnitCancel then new(icon: "close-circle-line", **attrs)
+    when Spree::TaxRate then new(icon: "percent-line", **attrs)
+    when Spree::LineItem then self.for(record.variant, **attrs)
+    when Spree::Product then self.for((record.images.first || record.master.images.first), **attrs)
+    when Spree::Variant then self.for((record.images.first || record.product), **attrs)
+    when Spree::Image then new(src: record.attachment&.url(:small), alt: record.alt, **attrs)
+    when Spree::Order then new(icon: "shopping-bag-line", **attrs)
+    when Spree::Shipment then new(icon: "truck-line", **attrs)
+    else new(icon: "question-line", **attrs)
+    end
+  end
+end

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

@@ -1,21 +1,25 @@
 <div
   class="
-    rounded inline-block px-3 py-2
+    flex items-center justify-between
+    rounded px-3 py-2
+    transform translate-y-full opacity-0 transition-all duration-500
+    pointer-events-auto
     <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
   "
   data-controller="<%= stimulus_id %>"
-  data-<%= stimulus_id %>-closing-class="transform opacity-0 transition duration-500"
+  data-<%= stimulus_id %>-animation-class="translate-y-full opacity-0"
   data-<%= stimulus_id %>-transition-value="500"
   role="dialog"
   aria-label="<%= t(".#{@scheme}_label") %>"
   aria-live="polite"
 >
-  <%= icon_tag(@icon, class: 'inline-block w-[1.125rem] h-[1.125rem] mr-3 fill-current') if @icon %>
+  <%= icon_tag(@icon, class: 'w-[1.125rem] h-[1.125rem] mr-2 fill-current') if @icon %>
 
-  <p class="inline-block body-tiny-bold"><%= @text %></p>
+  <p class="font-semibold text-xs leading-none"><%= @text %></p>
 
   <button
-    class="inline-block ml-3 align-text-bottom"
+    type="button"
+    class="ml-2 align-text-bottom"
     title="<%= t('.close_text') %>"
     data-action="<%= stimulus_id %>#close"
     aria-label="<%= t('.close_text') %>"

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

@@ -2,16 +2,19 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static targets = ['closeButton']
-  static classes = ['closing']
+  static classes = ['animation']
   static values = { transition: Number }
 
-  connect () {
-    // Give focus to the close button
-    this.closeButtonTarget.focus();
+  connect() {
+    this.closeButtonTarget.focus()
+
+    requestAnimationFrame(() => {
+      this.element.classList.remove(...this.animationClasses)
+    })
   }
 
-  close () {
-    this.element.classList.add(...this.closingClasses);
+  close() {
+    this.element.classList.add(...this.animationClasses)
     setTimeout(() => this.element.remove(), this.transitionValue)
   }
 }

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

@@ -3,7 +3,7 @@
 class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
   SCHEMES = {
     default: %w[
-      bg-gray-800 text-white
+      bg-full-black text-white
     ],
     error: %w[
       bg-red-500 text-white
@@ -13,6 +13,6 @@ class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
   def initialize(text:, icon: nil, scheme: :default)
     @text = text
     @icon = icon
-    @scheme = scheme.to_sym
+    @scheme = scheme
   end
 end

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

@@ -3,7 +3,6 @@
   <%= tag.attributes(**@attributes) %>
 >
   <summary
-    type="button"
     class="
       block
       w-[1rem]
@@ -12,27 +11,27 @@
       [&::marker]:hidden
       [&::-webkit-details-marker]:hidden
     "
-    data-<%= stimulus_id %>-target="button"
     data-action="
-      click:prevent-><%= stimulus_id %>#toggle
+      click-><%= stimulus_id %>#toggle
       keydown.esc@window-><%= stimulus_id %>#close
     "
     aria-label="<%= t('.get_help') %>"
   >
-    <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] #{icon_theme_classes}") %>
+    <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] fill-gray-800") %>
   </summary>
 
   <div
     class="
       absolute
       inline-block
-      w-[9rem]
+      w-48
       px-[0.75rem]
-      body-tiny-bold
+      font-semibold text-xs
       rounded
       z-10
-      <%= bubble_position_classes %>
-      <%= bubble_theme_classes %>
+      text-white
+      bg-gray-800
+      <%= POSITIONS.fetch(@position)[:bubble] %>
     "
     data-<%= stimulus_id %>-target="bubble"
   >
@@ -43,9 +42,14 @@
         block
         bg-inherit
         py-[0.5rem]
-        <%= bubble_arrow_pseudo_element %>
+        before:content['']
+        before:absolute
+        before:w-[0.375rem]
+        before:h-[0.375rem]
+        before:rotate-45
+        before:bg-inherit
+        <%= POSITIONS.fetch(@position)[:arrow] %>
       "
-      data-<%= stimulus_id %>-target="content"
     >
       <%= @text %>
     </span>

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

@@ -2,10 +2,11 @@ import { Controller } from '@hotwired/stimulus'
 import { useClickOutside } from 'stimulus-use'
 
 export default class extends Controller {
-  static targets = ['button', 'bubble', 'content']
+  static targets = ['bubble']
 
   connect () {
     useClickOutside(this)
+    this.open = false
   }
 
   clickOutside () {
@@ -13,14 +14,31 @@ export default class extends Controller {
   }
 
   toggle (e) {
-    this.element.open = !this.element.open
+    e.preventDefault()
+    this.open = !this.open
+    this.render()
   }
 
   open () {
-    this.element.open = true
+    this.open = true
+    this.render()
   }
 
   close () {
-    this.element.open = false
+    this.open = false
+    this.render()
+  }
+
+  render() {
+    const needsPositioning = this.open && !this.element.open
+    this.element.open = this.open
+
+    if (needsPositioning) {
+      const bubbleRect = this.bubbleTarget.getBoundingClientRect()
+      if (bubbleRect.right  > window.innerWidth) this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
+      if (bubbleRect.bottom > window.innerHeight) this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
+      if (bubbleRect.left < 0) this.bubbleTarget.style.left = '0px'
+      if (bubbleRect.top < 0) this.bubbleTarget.style.top = '0px'
+    }
   }
 }

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

@@ -1,98 +1,21 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
-  # Icon size: 1rem
-  # Arrow size: 0.375rem
-  # Banner padding x: 0.75rem
   POSITIONS = {
-    up: {
-      arrow: %w[before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]],
-      bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]]
+    below: {
+      arrow: "before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]",
+      bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]"
     },
-    up_right: {
-      arrow: %w[before:top-0 before:right-0 before:translate-y-[-50%]],
-      bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.375rem/2))] translate-y-[calc(0.375rem/2)]]
+    above: {
+      arrow: "before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]",
+      bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]"
     },
-    right: {
-      arrow: %w[before:top-1/2 before:right-0 before:translate-y-[-50%] before:translate-x-[0.93rem]],
-      bubble: %w[translate-x-[calc(-100%+(-0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
-    },
-    down_right: {
-      arrow: %w[before:bottom-0 before:right-0 before:translate-y-[50%]],
-      bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.376rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
-    },
-    down: {
-      arrow: %w[before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]],
-      bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
-    },
-    down_left: {
-      arrow: %w[before:bottom-0 before:left-0 before:translate-y-[50%]],
-      bubble: %w[translate-x-[calc(-1rem/2)] translate-y-[calc(-100%-0.75rem-0.375rem)]]
-    },
-    left: {
-      arrow: %w[before:top-1/2 before:left-0 before:translate-y-[-50%] before:translate-x-[-0.93rem]],
-      bubble: %w[translate-x-[calc(1rem+(0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
-    },
-    up_left: {
-      arrow: %w[before:top-0 before:left-0 before:translate-y-[-50%]],
-      bubble: %w[translate-x-[calc(-0.75rem+0.375rem)] translate-y-[calc(0.375rem/2)]]
-    },
-    none: {
-      arrow: %w[before:hidden],
-      bubble: %w[translate-x-[calc(-50%+0.75rem)]]
-    }
-  }.freeze
-
-  THEMES = {
-    light: {
-      icon: %w[fill-gray-500],
-      bubble: %w[text-gray-800 bg-gray-50]
-    },
-    dark: {
-      icon: %w[fill-gray-800],
-      bubble: %w[text-white bg-gray-800]
-    }
   }.freeze
 
-  # @param text [String] The toggletip text
-  # @param position [Symbol] The position of the arrow in relation to the
-  #   toggletip. The latter will be positioned accordingly in relation to the
-  #   help icon. Defaults to `:up`. See `POSITIONS` for available options.
-  # @param theme [Symbol] The theme of the toggletip. Defaults to `:light`. See
-  #   `THEMES` for available options.
-  def initialize(text:, position: :down, theme: :light, **attributes)
+  def initialize(text:, position: :above, **attributes)
     @text = text
     @position = position
-    @theme = theme
     @attributes = attributes
-    @attributes[:class] = [
-      "relative inline-block",
-      @attributes[:class],
-    ].join(" ")
-  end
-
-  def icon_theme_classes
-    THEMES.fetch(@theme)[:icon].join(" ")
-  end
-
-  def bubble_theme_classes
-    THEMES.fetch(@theme)[:bubble].join(" ")
-  end
-
-  def bubble_position_classes
-    POSITIONS.fetch(@position)[:bubble].join(" ")
-  end
-
-  def bubble_arrow_pseudo_element
-    (
-      [
-        "before:content['']",
-        "before:absolute",
-        "before:w-[0.375rem]",
-        "before:h-[0.375rem]",
-        "before:rotate-45",
-        "before:bg-inherit",
-      ] + POSITIONS.fetch(@position)[:arrow]
-    ).join(" ")
+    @attributes[:class] = "relative inline-block #{@attributes[:class]}"
   end
 end

data/app/components/solidus_admin/users/index/component.html.erb

@@ -0,0 +1,34 @@
+<%= page do %>
+  <%= page_header do %>
+    <%= page_header_title title %>
+    <%= page_header_actions do %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        text: t('.add'),
+        href: spree.new_admin_user_path,
+        icon: "add-line",
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render component('ui/table').new(
+    id: stimulus_id,
+    data: {
+      class: Spree.user_class,
+      rows: @page.records,
+      url: ->(user) { spree.admin_user_path(user) },
+      prev: prev_page_path,
+      next: next_page_path,
+      columns: columns,
+      batch_actions: batch_actions,
+    },
+    search: {
+      name: :q,
+      value: params[:q],
+      url: solidus_admin.users_path,
+      searchbar_key: :email_cont,
+      scopes: scopes,
+      filters: filters,
+    },
+  ) %>
+<% end %>