solidus_admin 0.0.0 → 0.0.2

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

@@ -0,0 +1,36 @@
+<div
+  class="
+    bg-white
+    rounded-lg
+    shadow-sm
+    border
+    border-gray-100
+    flex-col
+    justify-start
+    items-start
+    gap-6
+    inline-flex
+    w-full
+    py-6
+  "
+  data-controller="<%= stimulus_id %>"
+>
+  <% 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>
+  <% end %>
+
+  <% if content&.present? %>
+    <div class="px-6 w-full flex flex-col gap-6">
+      <%= content %>
+    </div>
+  <% end %>
+
+  <% if action? %>
+    <div class="flex gap-2 items-center border-t border-gray-100 px-6 pt-6 w-full">
+      <%= action %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['output']
+
+  typed(event) {
+    this.text = event.currentTarget.value
+    this.render()
+  }
+
+  render() {
+    this.outputTarget.innerText = this.text
+  }
+}

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
+  renders_one :action, ->(name:, href:, icon: 'add-box-fill', **args) {
+    link_to(
+      icon_tag(icon, class: 'w-[1.4em] h-[1.4em]') + name,
+      href,
+      **args,
+      class: 'flex gap-1 hover:underline'
+    )
+  }
+
+  # @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)
+    @title = title
+    @title_hint = title_hint
+  end
+end

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

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

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+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],
+  }
+
+  def initialize(text:, size: :m, current: false, disabled: false, **attributes)
+    @text = text
+    @size = size
+    @attributes = attributes
+
+    @attributes[:'aria-current'] = current
+    @attributes[:'aria-disabled'] = disabled
+    @attributes[:class] = [
+      %w[
+        rounded justify-start items-center inline-flex py-1.5 cursor-pointer
+        bg-transparent text-gray-500
+
+        hover:bg-gray-75 hover:text-gray-700
+        focus:bg-gray-25 focus:text-gray-700
+
+        active:bg-gray-50 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
+      ],
+      SIZES.fetch(@size.to_sym),
+      @attributes.delete(:class),
+    ].join(" ")
+  end
+
+  def call
+    content_tag(
+      :a,
+      @text,
+      **@attributes
+    )
+  end
+end

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

@@ -0,0 +1,170 @@
+<div
+  class="
+    rounded-lg
+    border
+    border-gray-100
+    overflow-hidden
+  "
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
+>
+  <% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>
+
+  <div role="search">
+    <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
+      <%= form_with(
+        url: @search_url,
+        method: :get,
+        html: {
+          id: search_form_id,
+          class: 'flex-grow',
+          "data-turbo-frame": table_frame_id,
+          "data-turbo-action": "replace",
+          "data-#{stimulus_id}-target": "searchForm",
+          "data-action": "reset->#{stimulus_id}#search",
+        },
+      ) do |form| %>
+        <label 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") %>
+          <input
+            name="q[<%= @search_key %>]"
+            value="<%= params.dig(:q, @search_key) %>"
+            type="search"
+            placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
+            class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
+            data-<%= stimulus_id %>-target="searchField"
+            data-action="<%= stimulus_id %>#search"
+            aria-label="<%= t('.search_placeholder', resources: resource_plural_name) %>"
+          >
+          <button
+            class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
+            data-action="<%= stimulus_id %>#clearSearch"
+            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>
+      <% end %>
+
+      <div class="ml-4">
+        <%= render component("ui/button").new(
+          text: t('.cancel'),
+          scheme: :ghost,
+          "data-action": "#{stimulus_id}#cancelSearch",
+        ) %>
+      </div>
+    </div>
+
+    <% if @filters.any? %>
+      <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
+        <div class="font-semibold text-gray-700 text-sm px-2"><%= t('.refine_search') %>:</div>
+        <% @filters.each do |filter| %>
+          <label class="flex gap-2 px-2">
+            <%= render component('ui/forms/checkbox').new(
+              name: filter[:name],
+              value: filter[:value],
+              size: :s,
+              form: search_form_id,
+              'data-action': "#{stimulus_id}#search",
+            ) %>
+            <span class="text-gray-700 leading-none text-sm self-center"><%= filter[:label] %></span>
+          </label>
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
+      <div class="flex-grow">
+        <%= render component("ui/tab").new(text: "All", current: true, href: "") %>
+      </div>
+
+      <%= render component("ui/button").new(
+        'aria-label': t('.filter'),
+        icon: "filter-3-line",
+        scheme: :secondary,
+        "data-action": "#{stimulus_id}#showSearch",
+      ) %>
+    </div>
+  </div>
+
+  <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="batchToolbar" role="toolbar" aria-label="<%= t(".batch_actions") %>">
+    <%= form_tag '', id: batch_actions_form_id %>
+    <% @batch_actions.each do |batch_action| %>
+      <%= render_batch_action_button(batch_action) %>
+    <% end %>
+  </div>
+
+  <%= turbo_frame_tag table_frame_id, target: "_top" do %>
+    <table class="table-fixed w-full border-collapse">
+      <colgroup>
+        <% @columns.each do |column| %>
+          <col class="<%= column.class_name %>">
+        <% end %>
+      </colgroup>
+
+      <thead
+        class="bg-gray-15 text-gray-700 text-left text-small"
+        data-<%= stimulus_id %>-target="defaultHeader"
+      >
+        <tr>
+          <% @columns.each do |column| %>
+            <%= render_header_cell(column.header) %>
+          <% end %>
+        </tr>
+      </thead>
+
+      <% if @batch_actions %>
+        <thead
+          data-<%= stimulus_id %>-target="batchHeader"
+          class="bg-white color-black text-xs leading-none text-left"
+          hidden
+        >
+          <tr>
+            <%= render_header_cell(selectable_column.header) %>
+            <%= render_header_cell(content_tag(:div, safe_join([
+              content_tag(:span, "0", "data-#{stimulus_id}-target": "selectedRowsCount"),
+              " #{t('.rows_selected')}.",
+            ])), colspan: @columns.count - 1) %>
+          </div>
+        </thead>
+      <% end %>
+
+      <tbody class="bg-white text-3.5 line-[150%] text-black">
+        <% @rows.each do |row| %>
+          <tr class="<%= row_class_for(row) %>">
+            <% @columns.each do |column| %>
+              <%= render_data_cell(column.data, row) %>
+            <% end %>
+          </tr>
+        <% end %>
+
+        <% if @rows.empty? && @model_class %>
+          <tr>
+            <td
+              colspan="<%= @columns.size %>"
+              class="text-center py-4 text-3.5 line-[150%] text-black bg-white"
+            >
+              <%= t('.no_resources_found', resources: resource_plural_name) %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+
+      <% if @prev_page_link || @next_page_link %>
+        <tfoot>
+          <tr>
+            <td colspan="<%= @columns.size %>" class="py-4 bg-white">
+              <div class="flex justify-center">
+                <%= render component('ui/table/pagination').new(
+                  prev_link: @prev_page_link,
+                  next_link: @next_page_link
+                ) %>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+      <% end %>
+
+    </table>
+  <% end %>
+</div>

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

@@ -0,0 +1,118 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "solidus_admin/utils"
+
+export default class extends Controller {
+  static targets = [
+    "checkbox",
+    "headerCheckbox",
+    "batchToolbar",
+    "scopesToolbar",
+    "searchToolbar",
+    "searchField",
+    "searchForm",
+    "filterToolbar",
+    "defaultHeader",
+    "batchHeader",
+    "selectedRowsCount",
+  ]
+
+  static classes = ["selectedRow"]
+  static values = {
+    mode: { type: String, default: "scopes" },
+  }
+
+  initialize() {
+    // Debounced search function.
+    // This method submits the search form after a delay of 200ms.
+    // If the function is called again within this delay, the previous call is cleared,
+    // effectively ensuring the form is only submitted 200ms after the last call (e.g., user stops typing).
+    this.search = debounce(this.search.bind(this), 200)
+  }
+
+  connect() {
+    if (this.searchFieldTarget.value !== "") this.modeValue = "search"
+
+    this.render()
+  }
+
+  showSearch(event) {
+    this.modeValue = "search"
+    this.render()
+    this.searchFieldTarget.focus()
+  }
+
+  search() {
+    this.searchFormTarget.requestSubmit()
+  }
+
+  clearSearch() {
+    this.searchFieldTarget.value = ''
+    this.search()
+  }
+
+  cancelSearch() {
+    this.clearSearch()
+
+    this.modeValue = "scopes"
+    this.render()
+  }
+
+  selectRow(event) {
+    if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
+      this.modeValue = "batch"
+    } else if (this.searchFieldTarget.value !== '') {
+      this.modeValue = "search"
+    } else {
+      this.modeValue = "scopes"
+    }
+
+    this.render()
+  }
+
+  selectAllRows(event) {
+    if (this.modeValue = event.target.checked) {
+      this.modeValue = "batch"
+    } else if (this.searchFieldTarget.value !== '') {
+      this.modeValue = "search"
+    } else {
+      this.modeValue = "scopes"
+    }
+
+    this.checkboxTargets.forEach((checkbox) => (checkbox.checked = event.target.checked))
+
+    this.render()
+  }
+
+  render() {
+    const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
+
+    this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+
+    if (this.hasFilterToolbarTarget) {
+      this.filterToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+    }
+
+    this.batchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "batch")
+    this.batchHeaderTarget.toggleAttribute("hidden", this.modeValue !== "batch")
+    this.defaultHeaderTarget.toggleAttribute("hidden", this.modeValue === "batch")
+
+    this.scopesToolbarTarget.toggleAttribute("hidden", this.modeValue !== "scopes")
+
+    // Update the rows background color
+    this.checkboxTargets.filter((checkbox) =>
+      checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked),
+    )
+
+    // Update the selected rows count
+    this.selectedRowsCountTarget.textContent = `${selectedRows.length}`
+
+    // Update the header checkboxes
+    this.headerCheckboxTargets.forEach((checkbox) => {
+      checkbox.indeterminate = false
+      checkbox.checked = false
+
+      if (selectedRows.length === this.checkboxTargets.length) checkbox.checked = true
+      else if (selectedRows.length > 0) checkbox.indeterminate = true
+    })
+  }
+}

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

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
+  # @param id [String] A unique identifier for the table component.
+  # @param model_class [ActiveModel::Translation] The model class used for translations.
+  # @param rows [Array] The collection of objects that will be passed to columns for display.
+  # @param fade_row_proc [Proc, nil] A proc determining if a row should have a faded appearance.
+  # @param search_key [Symbol] The key for searching.
+  # @param search_url [String] The base URL for searching.
+  #
+  # @param columns [Array<Hash>] The array of column definitions.
+  # @option columns [Symbol|Proc|#to_s] :header The column header.
+  # @option columns [Symbol|Proc|#to_s] :data The data accessor for the column.
+  # @option columns [String] :class_name (optional) The class name for the column.
+  #
+  # @param batch_actions [Array<Hash>] The array of batch action definitions.
+  # @option batch_actions [String] :display_name The batch action display name.
+  # @option batch_actions [String] :icon The batch action icon.
+  # @option batch_actions [String] :action The batch action path.
+  # @option batch_actions [String] :method The batch action HTTP method for the provided path.
+  #
+  #
+  # @param filters [Array<Hash>] The array of filter definitions.
+  # @option filters [String] :name The filter's name.
+  # @option filters [Any] :value The filter's value.
+  # @option filters [String] :label The filter's label.
+  #
+  # @param prev_page_link [String, nil] The link to the previous page.
+  # @param next_page_link [String, nil] The link to the next page.
+  def initialize(
+    id:,
+    model_class:,
+    rows:,
+    search_key:,
+    search_url:,
+    fade_row_proc: nil,
+    columns: [],
+    batch_actions: [],
+    filters: [],
+    prev_page_link: nil,
+    next_page_link: nil
+  )
+    @columns = columns.map { Column.new(**_1) }
+    @batch_actions = batch_actions.map { BatchAction.new(**_1) }
+    @filters = filters.map { Filter.new(**_1) }
+    @id = id
+    @model_class = model_class
+    @rows = rows
+    @fade_row_proc = fade_row_proc
+    @search_key = search_key
+    @search_url = search_url
+    @prev_page_link = prev_page_link
+    @next_page_link = next_page_link
+
+    @columns.unshift selectable_column if batch_actions.present?
+  end
+
+  def resource_plural_name
+    @model_class.model_name.human.pluralize
+  end
+
+  def selectable_column
+    @selectable_column ||= Column.new(
+      header: -> {
+        component("ui/forms/checkbox").new(
+          form: batch_actions_form_id,
+          "data-action": "#{stimulus_id}#selectAllRows",
+          "data-#{stimulus_id}-target": "headerCheckbox",
+          "aria-label": t('.select_all'),
+        )
+      },
+      data: ->(data) {
+        component("ui/forms/checkbox").new(
+          name: "id[]",
+          form: batch_actions_form_id,
+          value: data.id,
+          "data-action": "#{stimulus_id}#selectRow",
+          "data-#{stimulus_id}-target": "checkbox",
+          "aria-label": t('.select_row'),
+        )
+      },
+      class_name: 'w-[52px]',
+    )
+  end
+
+  def batch_actions_form_id
+    @batch_actions_form_id ||= "#{stimulus_id}--batch-actions-#{@id}"
+  end
+
+  def table_frame_id
+    @table_frame_id ||= "#{stimulus_id}--table-frame-#{@id}"
+  end
+
+  def search_form_id
+    @search_form_id ||= "#{stimulus_id}--search-form-#{@id}"
+  end
+
+  def render_batch_action_button(batch_action)
+    render component("ui/button").new(
+      name: request_forgery_protection_token,
+      value: form_authenticity_token(form_options: {
+        action: batch_action.action,
+        method: batch_action.method,
+      }),
+      formaction: batch_action.action,
+      formmethod: batch_action.method,
+      form: batch_actions_form_id,
+      type: :submit,
+      icon: batch_action.icon,
+      text: batch_action.display_name,
+      scheme: :secondary,
+    )
+  end
+
+  def render_header_cell(cell, **attrs)
+    cell = cell.call if cell.respond_to?(:call)
+    cell = @model_class.human_attribute_name(cell) if cell.is_a?(Symbol)
+    cell = cell.render_in(self) if cell.respond_to?(:render_in)
+
+    content_tag(:th, cell, class: %{
+      border-b
+      border-gray-100
+      px-4
+      h-9
+      font-semibold
+      vertical-align-middle
+      leading-none
+    }, **attrs)
+  end
+
+  def render_data_cell(cell, data)
+    cell = cell.call(data) if cell.respond_to?(:call)
+    cell = data.public_send(cell) if cell.is_a?(Symbol)
+    cell = cell.render_in(self) if cell.respond_to?(:render_in)
+
+    content_tag(:td, content_tag(:div, cell, class: "flex items-center gap-1.5"), class: "py-2 px-4 h-10 vertical-align-middle leading-none")
+  end
+
+  def row_class_for(row)
+    classes = ['border-b', 'border-gray-100']
+    classes << ['bg-gray-15', 'text-gray-700'] if @fade_row_proc&.call(row)
+
+    classes.join(' ')
+  end
+
+  Column = Struct.new(:header, :data, :class_name, keyword_init: true)
+  BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
+  Filter = Struct.new(:name, :value, :label, keyword_init: true)
+  private_constant :Column, :BatchAction, :Filter
+end

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

@@ -0,0 +1,11 @@
+en:
+  no_resources_found: "No %{resources} found"
+  rows_selected: 'selected'
+  select_all: 'Select all'
+  select_row: 'Select row'
+  filter: 'Filter'
+  search_placeholder: 'Search all %{resources}'
+  refine_search: 'Refine Search'
+  batch_actions: Batch actions
+  clear: Clear
+  cancel: Cancel

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

@@ -0,0 +1,28 @@
+<nav aria-label="pagination" class="flex items-center">
+  <%= render component("ui/button").new(
+    icon: 'arrow-left-s-line',
+    class: 'rounded-tr-none rounded-br-none border-r-0',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @prev_link,
+    'aria-disabled': @prev_link.blank?,
+    rel: 'prev',
+    text: content_tag(:span, t('.previous'), class: 'sr-only'),
+    "data-turbo-frame": "_self",
+    "data-turbo-action": "advance",
+  ) -%>
+  <%= render component("ui/button").new(
+    icon: 'arrow-right-s-line',
+    class: 'rounded-tl-none rounded-bl-none',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @next_link,
+    'aria-disabled': @next_link.blank?,
+    rel: 'next',
+    text: content_tag(:span, t('.next'), class: 'sr-only'),
+    "data-turbo-frame": "_self",
+    "data-turbo-action": "advance",
+  ) %>
+</nav>

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Table::Pagination::Component < SolidusAdmin::BaseComponent
+  # @param prev_link [String] The link to the previous page.
+  # @param next_link [String] The link to the next page.
+  def initialize(prev_link: nil, next_link: nil)
+    @prev_link = prev_link
+    @next_link = next_link
+  end
+
+  def render?
+    @prev_link.present? || @next_link.present?
+  end
+end

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

@@ -0,0 +1,3 @@
+en:
+  next: Next
+  previous: Previous

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

@@ -0,0 +1,26 @@
+<div
+  class="
+    rounded inline-block px-3 py-2
+    <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
+  "
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-closing-class="transform opacity-0 transition duration-500"
+  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 %>
+
+  <p class="inline-block body-tiny-bold"><%= @text %></p>
+
+  <button
+    class="inline-block ml-3 align-text-bottom"
+    title="<%= t('.close_text') %>"
+    data-action="<%= stimulus_id %>#close"
+    aria-label="<%= t('.close_text') %>"
+    data-<%= stimulus_id %>-target="closeButton"
+  >
+    <%= icon_tag('close-line', class: "w-[1.125rem] h-[1.125rem] fill-current") %>
+  </button>
+</div>

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

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

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
+  SCHEMES = {
+    default: %w[
+      bg-gray-800 text-white
+    ],
+    error: %w[
+      bg-red-500 text-white
+    ],
+  }
+
+  def initialize(text:, icon: nil, scheme: :default)
+    @text = text
+    @icon = icon
+    @scheme = scheme.to_sym
+  end
+end