solidus_admin 0.0.0 → 0.0.2

data/app/components/solidus_admin/sidebar/account_nav/component.html.erb

@@ -0,0 +1,67 @@
+<details class="relative w-full" aria-label="<%= t('.account') %>">
+  <summary
+    class="
+      flex gap-1.5
+      p-3 mt-2 rounded
+      body-small-bold text-gray-500
+      hover:bg-gray-25 [[open]_>_&]:bg-gray-25
+      cursor-pointer
+      [&::marker]:hidden
+      [&::-webkit-details-marker]:hidden
+    ">
+    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] body-small fill-yellow bg-black") %>
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+      <%= @user_label %>
+    </span>
+  </summary>
+
+  <ul
+    class="
+      p-2 mb-1 absolute bottom-full left-0 w-full
+      body-small text-black bg-white
+      border border-gray-100 rounded-lg
+      shadow-base
+    ">
+
+    <% if (available_locales = Spree.i18n_available_locales).any? %>
+      <li class="h-8 flex items-center hover:bg-gray-25 rounded">
+        <%= form_tag request.fullpath, method: :get do %>
+          <label class="flex gap-2 items-center px-2">
+            <%= icon_tag("global-line", class: "w-full max-w-[20px] h-5 fill-current shrink") %>
+            <select class="w-full appearance-none grow bg-transparent outline-none" onchange="this.form.requestSubmit()" name="switch_to_locale">
+              <%= options_for_select(
+                available_locales
+                  .map do |locale|
+                    [
+                      t(
+                        "spree.i18n.this_file_language",
+                        locale: locale,
+                        default: locale.to_s,
+                        fallback: false
+                      ),
+                      locale
+                    ]
+                  end
+                  .sort,
+                selected: I18n.locale,
+              ) %>
+            </select>
+            <%= icon_tag("expand-up-down-line", class: "w-full max-w-[20px] h-5 fill-current shrink") %>
+          </label>
+        <% end %>
+      </li>
+    <% end %>
+    <li class="h-8 flex items-center hover:bg-gray-25 rounded">
+      <%= link_to @account_path, class: 'flex gap-2 items-center px-2' do %>
+        <%= icon_tag("user-3-line", class: "w-5 h-5 fill-current shrink") %>
+        <span><%= t('.account') %></span>
+      <% end %>
+    </li>
+    <li class="h-8 flex items-center hover:bg-gray-25 rounded">
+      <%= button_to @logout_path, method: @logout_method, class: 'flex gap-2 items-center px-2' do %>
+        <%= icon_tag("logout-box-line", class: "w-5 h-5 fill-current shrink") %>
+        <span><%= t('.logout') %></span>
+      <% end %>
+    </li>
+  </ul>
+</details>

data/app/components/solidus_admin/sidebar/account_nav/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Account navigation
+class SolidusAdmin::Sidebar::AccountNav::Component < SolidusAdmin::BaseComponent
+  # @param user_label [String]
+  # @param account_path [String]
+  # @param logout_path [String]
+  # @param logout_method [Symbol]
+  def initialize(user_label:, account_path:, logout_path:, logout_method:)
+    @user_label = user_label
+    @account_path = account_path
+    @logout_path = logout_path
+    @logout_method = logout_method
+  end
+end

data/app/components/solidus_admin/sidebar/account_nav/component.yml

@@ -0,0 +1,3 @@
+en:
+  account: "Account"
+  logout: "Logout"

data/app/components/solidus_admin/sidebar/component.html.erb

@@ -0,0 +1,39 @@
+<nav class="
+  flex flex-col
+  bg-gray-15
+  p-4
+  w-full
+" data-controller="<%= stimulus_id %>" data-<%= stimulus_id %>-cookie-value="solidus_admin">
+  <%= link_to @store.url, class: "py-3 px-2 text-left flex mb-4" do %>
+    <%= image_tag @logo_path, alt: t('.visit_store'), class: "max-h-7" %>
+  <% end %>
+
+  <%= link_to @store.url, target: :_blank, class: "flex mb-4 px-2 py-1.5 border border-gray-100 rounded-sm shadow-sm" do %>
+    <div class="flex-grow">
+      <p class="body-small-bold text-black"><%= @store.name %></p>
+      <p class="body-tiny text-gray-500"><%= @store.url %></p>
+    </div>
+    <%= render component("ui/icon").new(name: 'arrow-right-up-line', class: 'w-4 h-4 fill-gray-400') %>
+  <% end %>
+
+  <ul>
+    <%= render component("sidebar/item").with_collection(items, fullpath: request.fullpath) %>
+  </ul>
+
+  <div class="mt-auto">
+    <div class="group mb-3">
+      <label class="flex gap-3 items-center py-0.5 px-3 pb-0.5 rounded hover:text-red-500 hover:bg-gray-50 body-small-bold text-black cursor-pointer">
+        <%= t('spree.navigation.switch_to_legacy') %>
+        <div class="flex items-center">
+          <%= render component("ui/forms/switch").new(size: :s, checked: false, 'data-action': "#{stimulus_id}#setCookie:prevent") %>
+        </div>
+      </label>
+    </div>
+    <%= render component("sidebar/account_nav").new(
+      user_label: helpers.current_solidus_admin_user.email,
+      account_path: solidus_admin.account_path,
+      logout_path: helpers.solidus_admin_logout_path,
+      logout_method: helpers.solidus_admin_logout_method,
+    ) %>
+  </div>
+</nav>

data/app/components/solidus_admin/sidebar/component.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    cookie: String
+  }
+
+  setCookie(event) {
+    let value = !event.currentTarget.checked
+
+    document.cookie = `${this.cookieValue}=${value}; Path=/`
+    location.reload()
+  }
+}

data/app/components/solidus_admin/sidebar/component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# Renders the sidebar
+class SolidusAdmin::Sidebar::Component < SolidusAdmin::BaseComponent
+  def initialize(
+    store:,
+    logo_path: SolidusAdmin::Config.logo_path,
+    items: SolidusAdmin::Config.menu_items
+  )
+    @logo_path = logo_path
+    @items = items.map do |attrs|
+      children = attrs[:children].to_a.map { SolidusAdmin::MainNavItem.new(**_1, top_level: false) }
+      SolidusAdmin::MainNavItem.new(**attrs, children: children, top_level: true)
+    end
+    @store = store
+  end
+
+  def items
+    @items.sort_by(&:position)
+  end
+end

data/app/components/solidus_admin/sidebar/component.yml

@@ -0,0 +1,2 @@
+en:
+  visit_store: Visit your store

data/app/components/solidus_admin/sidebar/item/component.html.erb

@@ -0,0 +1,26 @@
+<li class="group <%= "active" if active? %>">
+  <a
+    href="<%= path %>"
+    aria-current="<%= @item.current?(@url_helpers, @fullpath) ? "page" : "false" %>"
+    class="
+      flex gap-3 items-center
+      py-0.5 px-3 mb-0.5 rounded
+      hover:text-red-500 hover:bg-gray-50
+      <%= "text-red-500 bg-gray-50" if active? %>
+      <%= @item.top_level ? "body-small-bold text-black" : "body-small text-gray-600" %>
+    "
+  >
+    <i class="w-[1.125rem] h-[1.125rem] body-small flex">
+      <% if @item.icon %>
+        <%= icon_tag(@item.icon, class: "inline-block w-full h-full fill-current") %>
+      <% end %>
+    </i>
+    <%= @item.name %>
+  </a>
+
+  <% if @item.children? %>
+    <ul class="<%= "hidden" unless active? %>">
+      <%= render self.class.with_collection(@item.children, url_helpers: @url_helpers, fullpath: @fullpath) %>
+    </ul>
+  <% end %>
+</li>

data/app/components/solidus_admin/sidebar/item/component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# Menu item within a {Sidebar}
+class SolidusAdmin::Sidebar::Item::Component < SolidusAdmin::BaseComponent
+  with_collection_parameter :item
+
+  # @param item [SolidusAdmin::MainNavItem
+  # @param fullpath [String] the current path
+  # @param url_helpers [#solidus_admin, #spree] context for generating paths
+  def initialize(
+    item:,
+    fullpath: "#",
+    url_helpers: Struct.new(:spree, :solidus_admin).new(spree, solidus_admin)
+  )
+    @item = item
+    @url_helpers = url_helpers
+    @fullpath = fullpath
+  end
+
+  def path
+    @item.path(@url_helpers)
+  end
+
+  def active?
+    @item.active?(@url_helpers, @fullpath)
+  end
+end

data/app/components/solidus_admin/skip_link/component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Skip to content link
+class SolidusAdmin::SkipLink::Component < SolidusAdmin::BaseComponent
+  # @param href [String] the href attribute for the skip link
+  def initialize(href:)
+    @href = href
+  end
+
+  def call
+    link_to t(".skip_link"),
+            @href,
+            class: %{
+              sr-only
+              focus:not-sr-only
+              inline-block
+              focus:p-2
+              focus:absolute
+              body-small
+              text-white
+              bg-black
+            }
+  end
+end

data/app/components/solidus_admin/skip_link/component.yml

@@ -0,0 +1,2 @@
+en:
+  skip_link: Skip to content

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Badge::Component < SolidusAdmin::BaseComponent
+  include ViewComponent::InlineTemplate
+
+  COLORS = {
+    graphite_light: "text-black bg-graphiteLight",
+    red: 'text-red-500 bg-red-100',
+    green: 'text-forest bg-seafoam',
+    blue: 'text-blue bg-sky',
+    black: 'text-white bg-black',
+    yellow: 'text-orange bg-papayaWhip',
+  }.freeze
+
+  SIZES = {
+    s: 'leading-4 px-2 py-0.5 text-3 font-[500]',
+    m: 'leading-5 px-3 py-0.5 text-3.5 font-[500]',
+    l: 'leading-6 px-3 py-0.5 text-4 font-[500]',
+  }.freeze
+
+  def initialize(name:, color: :graphite_light, size: :m)
+    @name = name
+
+    @class_name = [
+      'inline-flex items-center rounded-full whitespace-nowrap', # layout
+      SIZES.fetch(size.to_sym), # size
+      COLORS.fetch(color.to_sym), # color
+    ].join(' ')
+  end
+
+  erb_template <<~ERB
+    <div class="<%= @class_name %>"><%= @name %></div>
+  ERB
+end

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

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: %w[
+      h-7 w-7 p-1
+      text-xs font-semibold leading-none
+    ],
+    m: %w[
+      h-9 w-9 p-1.5
+      text-sm font-semibold leading-none
+    ],
+    l: %w[
+      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],
+  }
+
+  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]],
+  }
+
+  SCHEMES = {
+    primary: %w[
+      text-white bg-black
+      hover:text-white hover:bg-gray-600
+      active:text-white active: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[
+      text-gray-700 bg-white border border-1 border-gray-200
+      hover:bg-gray-50
+      active: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[
+      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
+      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[
+      text-gray-700 bg-transparent
+      hover:bg-gray-50
+      active: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
+    ],
+  }
+
+  def initialize(
+    tag: :button,
+    text: nil,
+    icon: nil,
+    size: :m,
+    scheme: :primary,
+    **attributes
+  )
+    @tag = tag
+    @text = text
+    @icon = icon
+    @attributes = attributes
+
+    @attributes[:class] = [
+      'justify-start items-center justify-center gap-1 inline-flex rounded',
+      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none',
+      SIZES.fetch(size.to_sym),
+      (TEXT_PADDINGS.fetch(size.to_sym) if @text),
+      SCHEMES.fetch(scheme.to_sym),
+      @attributes[:class],
+    ].join(' ')
+
+    @icon_classes = [
+      'fill-current',
+      ICON_SIZES.fetch(size.to_sym),
+    ]
+  end
+
+  def call
+    content = []
+    content << render(component('ui/icon').new(name: @icon, class: @icon_classes)) if @icon
+    content << @text if @text
+
+    content_tag(@tag, safe_join(content), **@attributes)
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Checkbox::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: 'w-4 h-4',
+    m: 'w-5 h-5',
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    tag.input(
+      type: 'checkbox',
+      class: "
+        #{SIZES.fetch(@size)}
+        form-checkbox
+        cursor-pointer
+        disabled:cursor-not-allowed
+
+        bg-white rounded border border-2 border-gray-300
+        hover:border-gray-700
+        focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0
+        active:ring active:ring-gray-300 active:ring-0.5
+        disabled:border-gray-300
+
+        indeterminate:border-gray-700 indeterminate:bg-gray-700 indeterminate:text-white
+        indeterminate:hover:border-gray-500 indeterminate:hover:bg-gray-500
+        indeterminate:focus:bg-gray-700
+        indeterminate:disabled:border-gray-300 indeterminate:disabled:bg-gray-300
+
+        checked:border-gray-700 checked:bg-gray-700 checked:text-white
+        checked:hover:border-gray-500 checked:hover:bg-gray-500
+        checked:focus:bg-gray-700
+        checked:disabled:border-gray-300 checked:disabled:bg-gray-300
+      ",
+      **@attributes,
+    )
+  end
+end

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

@@ -0,0 +1,28 @@
+<label class="flex flex-col gap-2 w-full">
+  <div class="flex gap-1 items-center">
+    <span class="
+      text-gray-700
+      body-tiny-bold
+      body-text-xs-semibold
+    "><%= @label %></span>
+
+    <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
+  </div>
+
+  <% if @input_attributes.present? %>
+    <%= render component('ui/forms/input').new(**@input_attributes) %>
+  <% else %>
+    <%= content %>
+  <% end %>
+
+  <% if @hint.present? || @error.present? %>
+    <div class="
+      body-tiny
+      [: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? %>
+    </div>
+  <% end %>
+</label>

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Field::Component < SolidusAdmin::BaseComponent
+  def initialize(label:, hint: nil, tip: nil, error: nil, input_attributes: nil, **attributes)
+    @label = label
+    @hint = hint
+    @tip = tip
+    @error = [error] if error.present?
+    @attributes = attributes
+    @input_attributes = input_attributes
+
+    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
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        tag: :input,
+        size: size,
+        value: form.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
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        tag: :select,
+        choices: choices,
+        size: size,
+        value: form.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
+
+    new(
+      label: form.object.class.human_attribute_name(method),
+      hint: hint,
+      tip: tip,
+      error: errors,
+      input_attributes: {
+        name: "#{form.object_name}[#{method}]",
+        size: size,
+        tag: :textarea,
+        value: form.object.public_send(method),
+        error: (errors.to_sentence.capitalize if errors),
+        **attributes,
+      }
+    )
+  end
+end

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

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    customValidity: String,
+  }
+
+  connect() {
+    if (this.customValidityValue)
+      this.element.setCustomValidity(this.customValidityValue)
+  }
+
+  clearCustomValidity() {
+    this.element.setCustomValidity('')
+  }
+}

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

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+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"
+  }.freeze
+
+  HEIGHTS = {
+    s: "h-7",
+    m: "h-9",
+    l: "h-12"
+  }.freeze
+
+  MULTILINE_HEIGHTS = {
+    s: %w[min-h-[84px]],
+    m: %w[min-h-[108px]],
+    l: %w[min-h-[144px]],
+  }.freeze
+
+  TYPES = Set.new(%i[
+    text
+    password
+    number
+    email
+    tel
+    url
+    search
+    color
+    date
+    datetime-local
+    month
+    week
+    time
+  ]).freeze
+
+  def initialize(tag: :input, size: :m, error: nil, **attributes)
+    raise ArgumentError, "unsupported tag: #{tag}" unless %i[input textarea select].include?(tag)
+
+    specialized_classes = []
+
+    case tag
+    when :input
+      specialized_classes << "form-input"
+      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 << MULTILINE_HEIGHTS[size]
+    when :select
+      if attributes[:multiple]
+        specialized_classes << "form-multiselect"
+        specialized_classes << MULTILINE_HEIGHTS[size]
+      else
+        specialized_classes << "form-select"
+        specialized_classes << "bg-arrow-down-s-fill-gray-700 invalid:bg-arrow-down-s-fill-red-400 aria-invalid:bg-arrow-down-s-fill-red-400"
+        specialized_classes << HEIGHTS[size]
+      end
+    end
+
+    attributes[:class] = [
+      %w[
+        w-full
+        text-black bg-white border border-gray-300 rounded-sm placeholder:text-gray-400
+        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
+      ],
+      SIZES[size],
+      specialized_classes,
+      attributes[:class],
+    ].compact.join(" ")
+
+    @tag = tag
+    @size = size
+    @error = error
+    @attributes = attributes
+  end
+
+  def call
+    if @tag == :select && @attributes[:choices]
+      with_content options_for_select(@attributes.delete(:choices), @attributes.delete(:value))
+    end
+
+    tag.public_send(
+      @tag,
+      content,
+      "data-controller": stimulus_id,
+      "data-#{stimulus_id}-custom-validity-value": @error.presence,
+      "data-action": "#{stimulus_id}#clearCustomValidity",
+      **@attributes
+    )
+  end
+end