solidus_admin 0.0.2 → 0.1.0

data/app/assets/config/solidus_admin_manifest.js

@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_tree ../builds
 //= link_tree ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../components .js

data/app/assets/stylesheets/solidus_admin/application.tailwind.css

@@ -0,0 +1,4 @@
+@import url("https://rsms.me/inter/inter.css");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

data/app/assets/stylesheets/solidus_admin/dark.css

@@ -0,0 +1,12 @@
+/*
+ * = require solidus_admin/tailwind.css
+*/
+
+html {
+  -webkit-filter: invert(100%);
+  filter: invert(100%) hue-rotate(180deg);
+}
+
+main img {
+  filter: invert(100%) hue-rotate(-180deg);
+}

data/app/assets/stylesheets/solidus_admin/dimmed.css

@@ -0,0 +1,11 @@
+/*
+ * = require solidus_admin/tailwind.css
+*/
+
+html {
+  filter: invert(91%) hue-rotate(180deg);
+}
+
+main img {
+  filter: invert(91%) brightness(1.5) contrast(1.5) hue-rotate(-180deg);
+}

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

@@ -0,0 +1,32 @@
+<%= render component('refunds_and_returns').new(current_class: Spree::AdjustmentReason) do |layout| %>
+  <% layout.with_actions do %>
+    <%= render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: spree.new_admin_adjustment_reason_path,
+      icon: "add-line",
+      class: "align-self-end w-full",
+    ) %>
+  <% end %>
+
+  <%= render component('ui/table').new(
+    id: stimulus_id,
+    data: {
+      class: Spree::AdjustmentReason,
+      rows: @page.records,
+      url: ->(adjustment_reason) { spree.edit_admin_adjustment_reason_path(adjustment_reason) },
+      prev: prev_page_path,
+      next: next_page_path,
+      columns: columns,
+      batch_actions: batch_actions,
+    },
+    search: {
+      name: :q,
+      value: params[:q],
+      url: solidus_admin.adjustment_reasons_path,
+      searchbar_key: :name_or_code_cont,
+      scopes: scopes,
+      filters: filters,
+    },
+  ) %>
+<% end %>

data/app/components/solidus_admin/adjustment_reasons/index/component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::AdjustmentReasons::Index::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
+  def initialize(page:)
+    @page = page
+  end
+
+  def title
+    Spree::AdjustmentReason.model_name.human.pluralize
+  end
+
+  def prev_page_path
+    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+  end
+
+  def next_page_path
+    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+  end
+
+  def batch_actions
+    [
+      {
+        display_name: t('.batch_actions.delete'),
+        action: solidus_admin.adjustment_reasons_path,
+        method: :delete,
+        icon: 'delete-bin-7-line',
+      },
+    ]
+  end
+
+  def scopes
+    []
+  end
+
+  def filters
+    []
+  end
+
+  def columns
+    [
+      :name,
+      :code,
+      {
+        header: :active,
+        data: ->(adjustment_reason) do
+          adjustment_reason.active? ? component('ui/badge').yes : component('ui/badge').no
+        end
+      },
+    ]
+  end
+end

data/app/components/solidus_admin/adjustment_reasons/index/component.yml

@@ -0,0 +1,4 @@
+en:
+  add: 'Add new'
+  batch_actions:
+    delete: 'Delete'

data/app/components/solidus_admin/layout/feedback/component.html.erb

@@ -0,0 +1,15 @@
+<%= link_to(
+  "https://solidus.io/feedback?category=solidus-admin",
+  class: 'whitespace-nowrap flex flex-col items-center gap-2 text-gray-500 text-small hover:text-black',
+  target: '_blank',
+) do %>
+
+  <span>
+    <%= render component("ui/badge").new(name: "beta", size: :s, color: :blue) %>
+    <span class="underline"><%= t(".give_feedback") %></span>
+  </span>
+
+  <span class="font-normal text-sm text-center">
+    <%= t(".feedback_description_html") %>
+  </span>
+<% end %>

data/app/components/solidus_admin/layout/feedback/component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Layout::Feedback::Component < SolidusAdmin::BaseComponent
+end

data/app/components/solidus_admin/layout/feedback/component.yml

@@ -0,0 +1,3 @@
+en:
+  give_feedback: 'Give feedback'
+  feedback_description_html: 'We are constantly trying to improve. <br>Please let us know what you think about this admin page.'

data/app/components/solidus_admin/layout/navigation/account/component.html.erb

@@ -0,0 +1,74 @@
+<details
+  data-controller="<%= stimulus_id %>"
+  class="relative w-full"
+  aria-label="<%= t('.account') %>"
+  data-action="keydown.escape-><%= stimulus_id %>#close"
+  <%= :open if params[:account_menu_open] %>
+>
+  <summary
+    class="
+      flex gap-1.5
+      p-3 mt-2 rounded
+      font-semibold text-sm text-gray-500
+      hover:bg-gray-25 [[open]_>_&]:bg-gray-25
+      cursor-pointer
+    ">
+    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] font-normal text-sm fill-yellow bg-black") %>
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis leading-6">
+      <%= @user_label %>
+    </span>
+  </summary>
+
+  <ul
+    class="
+      p-2 mb-1 absolute bottom-full left-0 w-full
+      font-normal text-sm 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">
+        <%= autosubmit_select_tag(
+          "switch_to_locale",
+          options_for_select(locale_options_for_select(available_locales), selected: I18n.locale),
+          icon: 'global-line',
+        ) %>
+      </li>
+    <% end %>
+
+    <li class="h-8 items-center hover:bg-gray-25 rounded dark:hidden flex">
+      <%= autosubmit_select_tag(
+        "switch_to_theme",
+        options_for_select(theme_options_for_select, session[:admin_light_theme]),
+        icon: 'sun-line',
+      ) do %>
+        <%= hidden_field_tag(:system_theme, :light) %>
+      <% end %>
+    </li>
+
+    <li class="h-8 items-center hover:bg-gray-25 rounded hidden dark:flex">
+      <%= autosubmit_select_tag(
+        "switch_to_theme",
+        options_for_select(theme_options_for_select, session[:admin_dark_theme]),
+        icon: 'moon-line',
+      ) do %>
+        <%= hidden_field_tag(:system_theme, :dark) %>
+      <% end %>
+    </li>
+
+    <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/layout/navigation/account/component.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside() {
+    this.close()
+  }
+
+  close() {
+    this.element.removeAttribute("open")
+  }
+}

data/app/components/solidus_admin/layout/navigation/account/component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Layout::Navigation::Account::Component < SolidusAdmin::BaseComponent
+  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
+
+  def locale_options_for_select(available_locales)
+    available_locales.map do |locale|
+      [
+        t("spree.i18n.this_file_language", locale: locale, default: locale.to_s, fallback: false),
+        locale,
+      ]
+    end.sort
+  end
+
+  def theme_options_for_select
+    SolidusAdmin::Config.themes.keys.map { |theme| [theme.to_s.humanize, theme] }.sort
+  end
+
+  def autosubmit_select_tag(name, options, icon:, &block)
+    form_tag(request.fullpath, method: :get, 'data-turbo': false, class: "w-full") do
+      safe_join([
+        block_given? ? capture(&block) : nil,
+        tag.label(safe_join([
+          icon_tag(icon, class: "w-full max-w-[20px] h-5 fill-current shrink"),
+          tag.select(options, name: name, onchange: "this.form.requestSubmit()", class: "w-full appearance-none grow bg-transparent outline-none"),
+          icon_tag("expand-up-down-line", class: "w-full max-w-[20px] h-5 fill-current shrink"),
+        ]), class: "flex gap-2 items-center px-2"),
+      ])
+    end
+  end
+end

data/app/components/solidus_admin/{sidebar → layout/navigation}/component.html.erb

@@ -4,32 +4,32 @@
   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 %>
+  <%= link_to spree.admin_path, 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>
+  <%= 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 flex flex-col gap-0.5">
+      <p class="font-semibold text-sm text-black"><%= @store.name %></p>
+      <p class="font-normal text-xs 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 class="flex flex-col gap-0.5">
+    <%= render component("layout/navigation/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">
+      <label class="flex gap-3 items-center py-0.5 px-3 pb-0.5 rounded hover:text-red-500 hover:bg-gray-50 font-semibold text-sm 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(
+    <%= render component("layout/navigation/account").new(
       user_label: helpers.current_solidus_admin_user.email,
       account_path: solidus_admin.account_path,
       logout_path: helpers.solidus_admin_logout_path,

data/app/components/solidus_admin/layout/navigation/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Layout::Navigation::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::MenuItem.new(**_1, top_level: false) }
+      SolidusAdmin::MenuItem.new(**attrs, children: children, top_level: true)
+    end
+    @store = store
+  end
+
+  def before_render
+    url = @store.url
+    url = "https://#{url}" unless url.start_with?("http")
+    @store_url = url
+  end
+
+  def items
+    @items.sort_by(&:position)
+  end
+end

data/app/components/solidus_admin/{sidebar → layout/navigation}/item/component.html.erb

@@ -4,13 +4,13 @@
     aria-current="<%= @item.current?(@url_helpers, @fullpath) ? "page" : "false" %>"
     class="
       flex gap-3 items-center
-      py-0.5 px-3 mb-0.5 rounded
+      py-1 px-3 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" %>
+      <%= "text-red-600 bg-gray-50" if active? %>
+      <%= @item.top_level ? "font-semibold text-sm text-black" : "font-normal text-sm text-gray-600" %>
     "
   >
-    <i class="w-[1.125rem] h-[1.125rem] body-small flex">
+    <i class="w-[1.125rem] h-[1.125rem] font-normal text-sm flex">
       <% if @item.icon %>
         <%= icon_tag(@item.icon, class: "inline-block w-full h-full fill-current") %>
       <% end %>
@@ -19,7 +19,7 @@
   </a>
 
   <% if @item.children? %>
-    <ul class="<%= "hidden" unless active? %>">
+    <ul class="flex flex-col gap-0.5 pt-0.5 <%= "hidden" unless active? %>">
       <%= render self.class.with_collection(@item.children, url_helpers: @url_helpers, fullpath: @fullpath) %>
     </ul>
   <% end %>

data/app/components/solidus_admin/{sidebar → layout/navigation}/item/component.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
 # Menu item within a {Sidebar}
-class SolidusAdmin::Sidebar::Item::Component < SolidusAdmin::BaseComponent
+class SolidusAdmin::Layout::Navigation::Item::Component < SolidusAdmin::BaseComponent
   with_collection_parameter :item
 
-  # @param item [SolidusAdmin::MainNavItem
+  # @param item [SolidusAdmin::MenuItem]
   # @param fullpath [String] the current path
   # @param url_helpers [#solidus_admin, #spree] context for generating paths
   def initialize(

data/app/components/solidus_admin/layout/page_helpers.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module SolidusAdmin::Layout::PageHelpers
+  def page(**attrs, &block)
+    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id, **attrs) +
+      tag.div(render(component("layout/feedback").new), class: "flex justify-center py-10")
+  end
+
+  def page_header_actions(&block)
+    tag.div(safe_join([
+      capture(&block),
+    ]), class: "flex gap-2 items-center")
+  end
+
+  def page_header_back(back_path)
+    render component("ui/button").new(
+      tag: :a,
+      title: t(".back"),
+      icon: "arrow-left-line",
+      scheme: :secondary,
+      href: back_path
+    )
+  end
+
+  def page_header_title(title, &block)
+    tag.h1(safe_join([
+      tag.span(title, class: "font-semibold text-xl"),
+      (capture(&block) if block_given?) || "",
+    ]), class: "flex-1 text-2xl font-bold")
+  end
+
+  def page_header(&block)
+    tag.header(capture(&block), class: "py-6 flex items-center gap-4")
+  end
+
+  def page_with_sidebar(&block)
+    tag.div(capture(&block), class: "flex gap-4 items-start pb-4")
+  end
+
+  def page_with_sidebar_main(&block)
+    tag.div(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full")
+  end
+
+  def page_with_sidebar_aside(&block)
+    tag.aside(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full max-w-sm")
+  end
+
+  def page_footer(&block)
+    tag.div(capture(&block), class: "mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex")
+  end
+
+  def page_footer_actions(&block)
+    tag.div(capture(&block), class: "flex gap-2 grow")
+  end
+end

data/app/components/solidus_admin/{skip_link → layout/skip_link}/component.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
-# Skip to content link
-class SolidusAdmin::SkipLink::Component < SolidusAdmin::BaseComponent
-  # @param href [String] the href attribute for the skip link
+class SolidusAdmin::Layout::SkipLink::Component < SolidusAdmin::BaseComponent
   def initialize(href:)
     @href = href
   end
@@ -16,7 +14,7 @@ class SolidusAdmin::SkipLink::Component < SolidusAdmin::BaseComponent
               inline-block
               focus:p-2
               focus:absolute
-              body-small
+              font-normal text-sm
               text-white
               bg-black
             }

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

@@ -0,0 +1,30 @@
+<%= 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_option_type_path,
+        icon: "add-line",
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render component('ui/table').new(
+    id: stimulus_id,
+    data: {
+      class: Spree::OptionType,
+      rows: @page.records,
+      url: ->(option_type) { spree.edit_admin_option_type_path(option_type) },
+      prev: prev_page_path,
+      next: next_page_path,
+      columns: columns,
+      batch_actions: batch_actions,
+    },
+    sortable: {
+      url: ->(option_type) { solidus_admin.move_option_type_path(option_type) },
+      param: 'position',
+    },
+  ) %>
+<% end %>

data/app/components/solidus_admin/option_types/index/component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::OptionTypes::Index::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
+  def initialize(page:)
+    @page = page
+  end
+
+  def title
+    Spree::OptionType.model_name.human.pluralize
+  end
+
+  def prev_page_path
+    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+  end
+
+  def next_page_path
+    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+  end
+
+  def batch_actions
+    [
+      {
+        display_name: t('.batch_actions.delete'),
+        action: solidus_admin.option_types_path,
+        method: :delete,
+        icon: 'delete-bin-7-line',
+      },
+    ]
+  end
+
+  def columns
+    [
+      name_column,
+      presentation_column,
+    ]
+  end
+
+  def name_column
+    {
+      header: :name,
+      data: ->(option_type) do
+        content_tag :div, option_type.name
+      end
+    }
+  end
+
+  def presentation_column
+    {
+      header: :presentation,
+      data: ->(option_type) do
+        content_tag :div, option_type.presentation
+      end
+    }
+  end
+end

data/app/components/solidus_admin/option_types/index/component.yml

@@ -0,0 +1,4 @@
+en:
+  batch_actions:
+    delete: 'Delete'
+  add: 'Add new'

data/app/components/solidus_admin/orders/cart/component.html.erb

@@ -0,0 +1,77 @@
+<div
+  class="w-full relative overflow-visible"
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-products-url-value="<%= solidus_admin.variants_for_order_path(@order) %>"
+  data-action="
+    <%= component('ui/forms/search').stimulus_id %>:search-><%= stimulus_id %>#search
+    <%= component('ui/forms/search').stimulus_id %>:submit-><%= stimulus_id %>#selectResult
+  "
+>
+  <%= render component('ui/panel').new(title: t('.title')) do |panel| %>
+    <% panel.with_section do %>
+      <%= render component('ui/forms/search').new(
+        placeholder: t('.search_placeholder'),
+        id: :order_cart,
+      ) %>
+    <% end %>
+
+    <% panel.with_section(wide: true, high: true) do %>
+      <div class="rounded-b-lg overflow-hidden">
+        <table class="table-auto w-full" <%= :hidden if @order.line_items.empty? %>>
+          <thead>
+            <tr>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @order.line_items.each do |line_item| %>
+              <tr class="border-gray-100 border-t">
+                <td class="px-6 py-4">
+                  <%= render component("ui/resource_item").new(
+                    thumbnail: (line_item.variant.images.first || line_item.variant.product.gallery.images.first)&.url(:small),
+                    title: line_item.variant.name,
+                    subtitle: "#{line_item.variant.sku}#{line_item.variant.options_text.presence&.prepend("- ")}",
+                  ) %>
+                </td>
+                <td class="px-6 py-4">
+                  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
+                    "data-controller": "readonly-when-submitting"
+                  }) do |f| %>
+                    <%= render component("ui/forms/input").new(
+                      name: "#{f.object_name}[quantity]",
+                      type: :number,
+                      value: line_item.quantity,
+                      "aria-label": "Quantity",
+                      min: 0,
+                      class: "!w-16 inline-block",
+                      "data-action": "input->#{stimulus_id}#updateLineItem",
+                    ) %>
+                    <% render component("ui/button").new(type: :submit, text: "Update", class: "inline-block") %>
+                  <% end %>
+                </td>
+                <td class="px-6 py-4">
+                  <span class="text-gray-500 font-normal text-sm"><%= line_item.single_money.to_html %></span>
+                </td>
+                <td class="px-6 py-4 text-right">
+                  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>
+                    <%= render component('ui/button').new(
+                      scheme: :ghost,
+                      size: :s,
+                      title: t("spree.delete"),
+                      icon: 'close-line',
+                      "data-controller": "confirm",
+                      "data-confirm-text-value": t("spree.are_you_sure"),
+                    ) %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+    </div>
+    <% end %>
+  <% end %>
+</div>