solidus_admin 0.4.1 → 0.5.0

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

@@ -11,7 +11,7 @@
     <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">
+        <h3 class="text-xl font-semibold text-gray-900 modal-title">
           <%= @title %>
         </h3>
         <form method="dialog">
@@ -23,9 +23,7 @@
         </form>
       </header>
 
-      <div class="p-4 overflow-auto">
-        <%= content %>
-      </div>
+      <div class="p-4 empty:hidden modal-body"><%= content %></div>
 
       <% if actions? %>
         <footer class="p-4 flex gap-2 justify-end sticky bottom-0 bg-inherit">

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

@@ -1,7 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static values = {
+    openOnConnect: { type: Boolean, default: true }
+  };
+
   connect() {
-    this.element.showModal()
+    if (this.openOnConnectValue) {
+      this.element.showModal();
+    }
   }
 }

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

@@ -3,10 +3,10 @@
 class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
   renders_one :actions
 
-  def initialize(title:, close_path: nil, open: false, **attributes)
+  def initialize(title:, close_path: nil, open: true, **attributes)
     @title = title
     @close_path = close_path
     @attributes = attributes
-    @attributes[:open] = open
+    @attributes.merge! stimulus_value(name: "open-on-connect", value: open)
   end
 end

data/app/components/solidus_admin/ui/pages/index/component.rb

@@ -6,19 +6,48 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
   Tab = Struct.new(:text, :href, :current, keyword_init: true)
 
   # Template methods
-  def tabs; end
-  def model_class; end
-  def back_url; end
-  def search_key; end
-  def search_url; end
-  def page_actions; end
-  def sidebar; end
-  def sortable_options; end
-  def row_url(_record); end
-  def batch_actions; []; end
-  def scopes; []; end
-  def filters; []; end
-  def columns; []; end
+  def tabs
+  end
+
+  def model_class
+  end
+
+  def back_url
+  end
+
+  def search_key
+  end
+
+  def search_url
+  end
+
+  def page_actions
+  end
+
+  def sidebar
+  end
+
+  def sortable_options
+  end
+
+  def row_url(_record)
+  end
+
+  def batch_actions
+    []
+  end
+
+  def scopes
+    []
+  end
+
+  def filters
+    []
+  end
+
+  def columns
+    []
+  end
 
   def initialize(page:)
     @page = page
@@ -51,11 +80,11 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
   end
 
   def prev_page_path
-    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+    solidus_admin.url_for(**request.params, page: @page.current_page - 1, only_path: true) if @page && !@page.first_page?
   end
 
   def next_page_path
-    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+    solidus_admin.url_for(**request.params, page: @page.next_page, only_path: true) if @page&.next_page
   end
 
   def search_options
@@ -67,7 +96,7 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
       url: search_url,
       searchbar_key: search_key,
       filters:,
-      scopes:,
+      scopes:
     }
   end
 
@@ -76,12 +105,12 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
 
     safe_join [
       (page_header_back back_url if back_url),
-      page_header_title(title),
+      page_header_title(title)
     ]
   end
 
   def render_table
-    render component('ui/table').new(
+    render component("ui/table").new(
       id: stimulus_id,
       data: {
         class: model_class,
@@ -92,9 +121,11 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
         columns:,
         batch_actions:,
         url: -> { row_url(_1) },
+        page: @page&.current_page,
+        per_page: @page&.limit_value
       },
       search: search_options,
-      sortable: sortable_options,
+      sortable: sortable_options
     )
   end
 

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

@@ -1,13 +1,8 @@
 # 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'
-    )
+  renders_one :action, ->(name:, href:, icon: "add-line", size: :m, **args) {
+    render component("ui/button").add(text: name, path: href, icon:, size:, **args)
   }
 
   renders_many :sections, ->(**args, &block) do
@@ -32,8 +27,9 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
   def render_section(wide: false, high: false, **args, &block)
     tag.section(**args, class: "
       border-gray-100 border-t w-full first-of-type:border-t-0
-      #{'px-6' unless wide}
-      #{'py-4' unless high}
+      flex flex-col gap-6
+      #{"px-6" unless wide}
+      #{"py-4" unless high}
       #{args[:class]}
     ", &block)
   end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Radio::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: "size-4 checked:border-[5px]",
+    m: "size-5 checked:border-[6px]"
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+    @attributes[:class] = "
+      #{SIZES.fetch(@size)}
+      appearance-none cursor-pointer outline-none
+      rounded-full border-2 border-gray-300 bg-white
+      checked:border-gray-700
+      hover:border-gray-700 hover:checked:border-gray-500
+      focus:ring-2 focus:ring-offset-1 focus:ring-gray-300
+      active:ring-2 active:ring-offset-1 active:ring-gray-300
+      focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-300
+      disabled:border-gray-300/50 disabled:hover:border-gray-300/50 disabled:active:ring-0 disabled:cursor-not-allowed
+      transition-all duration-75 ease-linear
+    "
+  end
+
+  def call
+    tag.input(type: "radio", **@attributes)
+  end
+end

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

@@ -4,7 +4,7 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
   SIZES = {
     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],
+    l: %w[h-12 px-4 font-semibold text-base]
   }
 
   def initialize(text:, tag: :a, size: :m, current: false, disabled: false, **attributes)
@@ -13,8 +13,8 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
     @size = size
     @attributes = attributes
 
-    @attributes[:'aria-current'] = current
-    @attributes[:'aria-disabled'] = disabled
+    @attributes[:"aria-current"] = current
+    @attributes[:"aria-disabled"] = disabled
     @attributes[:class] = [
       %w[
         rounded justify-start items-center inline-flex py-1.5 cursor-pointer
@@ -30,7 +30,7 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
         aria-disabled:bg-gray-75 aria-disabled:text-gray-400
       ],
       SIZES.fetch(@size.to_sym),
-      @attributes.delete(:class),
+      @attributes.delete(:class)
     ].join(" ")
   end
 

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

@@ -1,8 +1,6 @@
 <div
   class="
-    rounded-lg
-    border
-    border-gray-100
+    <%= 'rounded-lg border border-gray-100' unless @options[:embedded] %>
     <%= 'overflow-hidden' unless @search %>
   "
   data-controller="<%= stimulus_id %>"
@@ -88,21 +86,22 @@
   <% end %>
 
   <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "batchToolbar", role: "toolbar", "aria-label": t(".batch_actions"), hidden: true) do %>
-    <%= form_tag '', id: batch_actions_form_id %>
-    <% @data.batch_actions.each do |batch_action| %>
-      <%= render_batch_action_button(batch_action) %>
+    <%= form_tag '', id: batch_actions_form_id do %>
+      <% @data.batch_actions.each do |batch_action| %>
+        <%= render_batch_action_button(batch_action) %>
+      <% end %>
     <% end %>
   <% end %>
 
   <table class="table-fixed w-full border-collapse">
     <colgroup>
       <% @data.columns.each do |column| %>
-        <col <%= tag.attributes(**column.col) if column.col %>">
+        <col <%= tag.attributes(**column.col) if column.col %>>
       <% end %>
     </colgroup>
 
     <thead
-      class="bg-gray-15 text-gray-700 text-left text-small"
+      class="bg-gray-15 text-gray-700 text-left"
       data-<%= stimulus_id %>-target="defaultHeader"
     >
       <tr>
@@ -115,7 +114,7 @@
     <% if @data.batch_actions && @data.rows.any? %>
       <thead
         data-<%= stimulus_id %>-target="batchHeader"
-        class="bg-white color-black text-xs leading-none text-left"
+        class="bg-white color-black leading-none text-left"
         hidden
       >
         <tr>
@@ -135,6 +134,8 @@
       <%= "data-sortable-param-value=#{@sortable.param}" if @sortable&.param %>
       <%= "data-sortable-handle-value=#{@sortable.handle}" if @sortable&.handle %>
       <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %>
+      <%= "data-sortable-page-value=#{@data.page}" if @data&.page %>
+      <%= "data-sortable-per-page-value=#{@data.per_page}" if @data&.per_page %>
     >
       <% @data.rows.each do |row| %>
         <% row_url = @data.url&.call(row) %>
@@ -143,8 +144,8 @@
           <% if row_url %>
             data-action="click-><%= stimulus_id %>#rowClicked"
             data-<%= stimulus_id %>-url-param="<%= row_url %>"
-            <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
           <% end %>
+          <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
         >
           <% @data.columns.each do |column| %>
             <%= render_data_cell(column, row) %>

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

@@ -15,6 +15,7 @@ export default class extends Controller {
     "batchHeader",
     "tableBody",
     "selectedRowsCount",
+    "batchActionButton",
   ]
 
   static classes = ["selectedRow"]
@@ -32,7 +33,9 @@ export default class extends Controller {
   }
 
   // Determine if sortable should be enabled
-  modeValueChanged() {
+  modeValueChanged(_current, previous) {
+    this.previousMode = previous;
+
     const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search"
 
     if (shouldSetSortable) {
@@ -69,13 +72,9 @@ export default class extends Controller {
 
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
-      this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
-      this.modeValue = "search"
-    } else if (this.hasScopesToolbarTarget) {
-      this.modeValue = "scopes"
+      this.modeValue = "batch";
     } else {
-      this.modeValue = "search"
+      this.modeValue = this.previousMode;
     }
 
     this.render()
@@ -83,13 +82,9 @@ export default class extends Controller {
 
   selectAllRows(event) {
     if (event.target.checked) {
-      this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
-      this.modeValue = "search"
-    } else if (this.hasScopesToolbarTarget) {
-      this.modeValue = "scopes"
+      this.modeValue = "batch";
     } else {
-      this.modeValue = "search"
+      this.modeValue = this.previousMode;
     }
 
     this.checkboxTargets.forEach((checkbox) => (checkbox.checked = event.target.checked))
@@ -129,19 +124,6 @@ export default class extends Controller {
     return this.checkboxTargets.filter((checkbox) => checkbox.checked)
   }
 
-  confirmAction(event) {
-    const message = event.params.message
-      .replace("${count}", this.selectedRows().length)
-      .replace(
-        "${resource}",
-        this.selectedRows().length > 1 ? event.params.resourcePlural : event.params.resourceSingular
-      )
-
-    if (!confirm(message)) {
-      event.preventDefault()
-    }
-  }
-
   render() {
     const selectedRows = this.selectedRows()
 
@@ -178,5 +160,15 @@ export default class extends Controller {
         checkbox.checked = true
       else if (selectedRows.length > 0) checkbox.indeterminate = true
     })
+
+    // Update confirmation text
+    this.batchActionButtonTargets.forEach((button) => {
+      button.dataset.confirmDetails = button.dataset.confirmationTemplate
+        .replace("${count}", selectedRows.length)
+        .replace(
+          "${resource}",
+          this.selectedRows().length > 1 ? button.dataset.resourcePlural : button.dataset.resourceSingular,
+        );
+    });
   }
 }

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

@@ -8,7 +8,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   BatchAction = Struct.new(:label, :icon, :action, :require_confirmation, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
   private_constant :BatchAction, :Column, :Filter, :Scope, :Sortable
 
-  class Data < Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, keyword_init: true) # rubocop:disable Lint/StructNewOverride,Style/StructInheritance
+  class Data < Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, :page, :per_page, keyword_init: true) # rubocop:disable Lint/StructNewOverride,Style/StructInheritance
     def initialize(**args)
       super
 
@@ -19,7 +19,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     end
 
     def singular_name
-      self[:class].model_name.human if self[:class]
+      self[:class]&.model_name&.human
     end
 
     def plural_name
@@ -60,35 +60,37 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     end
   end
 
-  def initialize(id:, data:, search: nil, sortable: nil)
+  # @option options [Boolean] :embedded if true, does not add border around table
+  def initialize(id:, data:, search: nil, sortable: nil, **options)
     @id = id
     @data = Data.new(**data)
     @data.columns.unshift selectable_column if @data.batch_actions.present? && @data.rows.present?
     @search = Search.new(**search) if search
     @sortable = Sortable.new(**sortable) if sortable
+    @options = options
   end
 
   def selectable_column
     @selectable_column ||= Column.new(
       header: -> {
-        component("ui/forms/checkbox").new(
+        component("ui/checkbox").new(
           form: batch_actions_form_id,
           "data-action": "#{stimulus_id}#selectAllRows",
           "data-#{stimulus_id}-target": "headerCheckbox",
-          "aria-label": t('.select_all'),
+          "aria-label": t(".select_all")
         )
       },
       data: ->(data) {
-        component("ui/forms/checkbox").new(
+        component("ui/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'),
+          "aria-label": t(".select_row")
         )
       },
-      col: { class: 'w-[52px]' },
+      col: {class: "w-[52px]"}
     )
   end
 
@@ -105,7 +107,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       name: request_forgery_protection_token,
       value: form_authenticity_token(form_options: {
         action: batch_action.action,
-        method: batch_action.method,
+        method: batch_action.method
       }),
       formaction: batch_action.action,
       formmethod: batch_action.method,
@@ -113,17 +115,19 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       type: :submit,
       icon: batch_action.icon,
       text: batch_action.label,
-      scheme: :secondary,
+      scheme: :secondary
     }
 
     if batch_action.require_confirmation
-      params["data-action"] = "click->#{stimulus_id}#confirmAction"
-      params["data-#{stimulus_id}-message-param"] = t(
+      params["data-turbo-confirm"] = t(".are_you_sure")
+      params["data-confirmation-template"] = t(
         ".action_confirmation",
         action: batch_action.label.downcase
       )
-      params["data-#{stimulus_id}-resource-singular-param"] = @data.singular_name.downcase
-      params["data-#{stimulus_id}-resource-plural-param"] = @data.plural_name.downcase
+      params["data-confirm-button"] = batch_action.label
+      params["data-resource-singular"] = @data.singular_name.downcase
+      params["data-resource-plural"] = @data.plural_name.downcase
+      params.merge! stimulus_target("batchActionButton")
     end
 
     render component("ui/button").new(**params)
@@ -138,7 +142,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       predicate: filter.predicate,
       options: filter.options,
       form: search_form_id,
-      index:,
+      index:
     )
   end
 
@@ -147,7 +151,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     cell = @data[: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: %{
+    content_tag(:th, cell, class: %(
       border-b
       border-gray-100
       px-4
@@ -155,7 +159,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       font-semibold
       vertical-align-middle
       leading-none
-    }, **attrs)
+    ), **attrs)
   end
 
   def render_data_cell(column, data)
@@ -185,6 +189,8 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   end
 
   def should_enable_sortable?
-    @sortable && @search&.on_default_scope?
+    return false if @sortable.nil?
+    return true if @search.nil?
+    @search.on_default_scope?
   end
 end

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

@@ -1,4 +1,5 @@
 en:
+  are_you_sure: "Are you sure?"
   no_resources_found: "No %{resources} found"
   rows_selected: 'selected'
   select_all: 'Select all'

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

@@ -46,7 +46,7 @@
                        name="<%= selection.predicate.name %>"
                        value="<%= selection.predicate.value %>">
 
-                <%= render component('ui/forms/checkbox').new(
+                <%= render component('ui/checkbox').new(
                      id: selection.id,
                      name: selection.option.name,
                      value: selection.option.value,

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

@@ -12,7 +12,7 @@ class SolidusAdmin::UI::Table::RansackFilter::Component < SolidusAdmin::BaseComp
   def initialize(
     presentation:,
     combinator:, attribute:, predicate:, options:, form:, index:, search_param: :q
-)
+  )
     @presentation = presentation
     @group = "#{search_param}[g][#{index}]"
     @combinator = build(:combinator, combinator)
@@ -43,7 +43,7 @@ class SolidusAdmin::UI::Table::RansackFilter::Component < SolidusAdmin::BaseComp
   # @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 }
+    suffix = SUFFIXES[type] % {index: opt_index || @index}
     Attribute.new("#{@group}#{suffix}", value)
   end
 
@@ -53,14 +53,14 @@ class SolidusAdmin::UI::Table::RansackFilter::Component < SolidusAdmin::BaseComp
   # @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) }
+    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][]'
+    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)

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

@@ -2,9 +2,9 @@
 
 class SolidusAdmin::UI::Thumbnail::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: 'h-6 w-6',
-    m: 'h-10 w-10',
-    l: 'h-20 w-20',
+    s: "h-6 w-6",
+    m: "h-10 w-10",
+    l: "h-20 w-20"
   }.freeze
 
   def initialize(icon: nil, size: :m, **attributes)
@@ -35,8 +35,8 @@ class SolidusAdmin::UI::Thumbnail::Component < SolidusAdmin::BaseComponent
     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::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)

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

@@ -6,24 +6,24 @@
     pointer-events-auto
     <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
   "
-  data-controller="<%= stimulus_id %>"
-  data-<%= stimulus_id %>-animation-class="translate-y-full opacity-0"
-  data-<%= stimulus_id %>-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
+  data-controller="alert-animation"
+  data-alert-animation-animation-class="translate-y-full opacity-0"
+  data-alert-animation-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
   role="dialog"
   aria-label="<%= t(".#{@scheme}_label") %>"
   aria-live="polite"
 >
   <%= icon_tag(@icon, class: 'w-[1.125rem] h-[1.125rem] mr-2 fill-current') if @icon %>
 
-  <p class="font-semibold text-xs leading-none"><%= @text %></p>
+  <p class="font-semibold leading-none"><%= @text %></p>
 
   <button
     type="button"
     class="ml-2 align-text-bottom"
     title="<%= t('.close_text') %>"
-    data-action="<%= stimulus_id %>#close"
+    data-action="alert-animation#close"
     aria-label="<%= t('.close_text') %>"
-    data-<%= stimulus_id %>-target="closeButton"
+    data-alert-animation-target="closeButton"
   >
     <%= icon_tag('close-line', class: "w-[1.125rem] h-[1.125rem] fill-current") %>
   </button>

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

@@ -7,7 +7,7 @@ class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
     ],
     error: %w[
       bg-red-500 text-white
-    ],
+    ]
   }
 
   def initialize(text:, icon: nil, scheme: :default)

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

@@ -9,7 +9,7 @@ class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
     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))]"
-    },
+    }
   }.freeze
 
   def initialize(text:, position: :above, **attributes)