solidus_admin 0.0.2 → 0.2.0

data/config/tailwind.config.js

@@ -0,0 +1,119 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
+const adminRoot = __dirname.replace(/\/config$/, '')
+
+module.exports = {
+  content: [
+    `${adminRoot}/{app/helpers,app/views,app/components,app/assets/javascripts,spec/components/previews}/**/*`,
+  ],
+  theme: {
+    extend: {
+      aria: {
+        current: 'current="true"',
+      },
+      fontFamily: {
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+
+        // Primary palette
+        "solidus-red": "#ef3023",
+        black: "#222222",
+        graphite: "#c7ccc7",
+        "graphite-light": "#d8dad8",
+        sand: "#f5f3f0",
+        white: "#ffffff",
+
+        // Secondary palette
+        yellow: "#fdc071",
+        orange: "#f68050",
+        blue: "#2554b1",
+        moss: "#2d3925",
+        forest: "#096756",
+        midnight: "#163449",
+        pink: "#f6d7e2",
+        plum: "#3a0e31",
+        sky: "#cbdff1",
+        seafoam: "#c1e0de",
+        dune: "#e6bf9b",
+        "full-black": "#000000",
+
+        // Extra colors (not part of the original palette)
+        "papaya-whip": "#f9e3d9",
+
+        // UI Red
+        red: {
+          100: "#f8d6d3",
+          200: "#f1ada7",
+          300: "#ea8980",
+          400: "#e36054",
+          500: "#dc3728",
+          600: "#b12c20",
+          700: "#862219",
+          800: "#561610",
+          900: "#2b0b08",
+        },
+
+        // Grayscale
+        gray: {
+          15: "#fafafa",
+          25: "#f5f5f5",
+          50: "#f0f0f0",
+          100: "#dedede",
+          200: "#cfcfcf",
+          300: "#bababa",
+          400: "#a3a3a3",
+          500: "#737373",
+          600: "#616161",
+          700: "#4a4a4a",
+          800: "#333333",
+        },
+      },
+      borderRadius: {
+        sm: "4px",
+      },
+      backgroundImage: {
+        "arrow-right-up-line": "url('solidus_admin/arrow_right_up_line.svg')",
+        "arrow-down-s-fill-gray-700": "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
+        "arrow-down-s-fill-red-400": "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
+      },
+      boxShadow: {
+        sm: "0px 1px 2px 0px rgba(0, 0, 0, 0.04)",
+        base: "0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+    plugin(({ addVariant, addBase, addComponents, theme }) => {
+      // Support the "hidden" attribute
+      addVariant("hidden", "&([hidden])")
+      addVariant("visible", "&:not([hidden])")
+
+      // Support the "search-cancel" pseudo-element
+      addVariant("search-cancel", "&::-webkit-search-cancel-button")
+
+      // Reset the <summary> marker
+      addBase({
+        "summary::-webkit-details-marker": { display: "none" },
+        "summary::marker": { display: "none" },
+        summary: { listStyle: "none" },
+      })
+
+      // Add a text style for links
+      addComponents({
+        ".body-link": {
+          color: theme("colors.blue"),
+          "&:hover": {
+            textDecoration: "underline",
+          },
+        },
+      })
+    }),
+  ],
+}

data/docs/{customizing_main_navigation.md → customizing_menu_items.md}

@@ -1,6 +1,6 @@
 # Customizing the main navigation
 
-You are allowed to add your custom links to the main navigation. To do so, you can access `SolidusAdmin::Config.main_nav` in an initializer:
+You are allowed to add your custom links to the main navigation. To do so, you can access `SolidusAdmin::Config.menu_items` in an initializer:
 
 ```ruby
 # config/initializers/solidus_admin.rb
@@ -13,7 +13,7 @@ SolidusAdmin::Config.menu_items << {
 ```
 
 - The key you provide will be used to translate the link's label under the
-`solidus_admin.main_nav.#{key}` key.
+`solidus_admin.menu_item.#{key}` key.
 - Icon needs to be an icon name from [Remixicon](https://remixicon.com/).
 - Position tells Solidus where to place the link in the main navigation. The
  default items are placed with 10 points of difference between them.

data/docs/customizing_tailwindcss.md

@@ -0,0 +1,57 @@
+# Customizing TailwindCSS
+
+Solidus Admin uses [Tailwind CSS](https://tailwindcss.com/) for styling. The
+benefit of using Tailwind is that it allows you to customize the look and feel
+of the admin without having to write any CSS. By leveraging utility classes,
+you can easily change the colors, fonts, and spacing in use.
+
+Solidus Admin provides a precompiled CSS file that includes all the necessary
+Tailwind classes for the admin to work out of the box.
+
+In case you need to customize the admin's look and feel, or create custom
+components, you can do so by running Tailwind's build process in your host
+application.
+
+This process presumes that you have a working knowledge of Tailwind CSS. If you
+are not familiar with Tailwind, please refer to the [Tailwind
+documentation](https://tailwindcss.com/docs) for more information.
+
+## Setting up a local TailwindCSS build for Solidus Admin
+
+In order to customize the admin's look and feel, you'll need to set up a local
+Tailwind build. This is a two-step process:
+
+Add Tailwind configuration files to your application:
+
+```shell
+bin/rails solidus_admin:tailwindcss:install
+```
+
+This will create all the necessary files for you to customize TailwindCSS,
+including:
+- A `config/solidus_admin/tailwind.config.js` configuration file
+  that will automatically import the Solidus Admin's default configuration.
+- An `app/assets/stylesheets/solidus_admin/application.tailwind.css` file
+  in which you can add your own customizations.
+- Tasks to build the CSS file once or watch for changes and automatically
+  rebuild the target `app/assets/builds/solidus_admin/application.css` file.
+
+In order to manually build the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:build
+```
+
+Or, to watch for changes and automatically rebuild the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:watch
+```
+
+## Caveats
+
+### Conflict with sassc-rails
+
+Tailwind uses modern CSS features that are not recognized by the sassc-rails extension that was included by default in the Gemfile for Rails 6. In order to avoid any errors like SassC::SyntaxError, you must remove that gem from your Gemfile.
+
+*See https://github.com/rails/tailwindcss-rails#conflict-with-sassc-rails.*

data/docs/customizing_view_components.md

@@ -11,18 +11,12 @@ All the components Solidus Admin uses are located in the [`app/components`](../a
 - They are grouped in sidecar directories, where the main component file and
   all its related files (assets, i18n files, etc.) live together.
 
-For instance, the component for the main navigation is located in
-[`app/components/solidus_admin/main_nav/component.rb`](../app/components/solidus_admin/main_nav/component.rb).
-
 Solidus Admin components are designed to be easily customizable by the host
 application. Because of that, if you look at how they are designed, you'll find
 a series of patterns are followed consistently:
 
 - Components are always resolved from a global registry in
-  `SolidusAdmin::Config.components` instead of being referenced by their constant. For
-  example, we call `component('main_nav')` instead of referencing
-  `SolidusAdmin::MainNav::Component` directly. As you'll see later, this makes
-  it easy to replace or tweak a component.
+  `SolidusAdmin::Config.components` instead of being referenced by their constant.
 - It's possible to override the registry locally inside a component by redefining
   the `#component` method. This is useful when you need to use a component that
   is not registered in the global registry or need to address some edge case.
@@ -50,37 +44,22 @@ end
 # render component('foo').new
 ```
 
-## Customizing components
-
-Some of the customizations detailed below require you to match Solidus Admin's
-component paths in your application. For instance, if we talk about the
-component in `solidus_admin` gem's
-`app/components/solidus_admin/main_nav/component.rb`, the matching path in your
-application would be
-`app/components/my_application/solidus_admin/main_nav/component.rb`, where
-`my_application` is the underscored name of your application (you can get it by
-running `Rails.application.class.module_parent_name`).
-
 ### Replacing a component's template
 
 In the most typical case, you'll only need to replace the template used by a
 component. You can do that by creating a new component with a maching path in
 your application, inheriting from the default one. Then, you can create a new
-template for it. For example, to replace the main nav template:
+template for it. For example, to replace the menu item template:
 
-```erb
-# app/components/my_application/solidus_admin/main_nav/component.rb %>
-class MyApplication::SolidusAdmin::MainNav::Component < ::SolidusAdmin::MainNav::Component
+```rb
+# app/components/my_admin/navigation/item/component.rb
+class MyAdmin::Navigation::Item::Component < SolidusAdmin::Layout::Navigation::Item::Component
 end
+```
 
-<%# app/components/my_application/solidus_admin/main_nav/component.html.erb %>
-<nav class="my_own_classes">
-  <%=
-    render main_nav_item_component.with_collection(
-      sorted_items
-    )
-  %>
-</nav>
+```erb
+<%# app/components/my_admin/navigation/item/component.html.erb %>
+<li><%= link_to @item.name, path %></li>
 ```
 
 ### Prepending or appending to a component's template
@@ -90,9 +69,9 @@ component. You can easily do that by rendering the Solidus Admin component and
 adding your markup before or after it.
 
 ```erb
-<%# app/components/my_application/solidus_admin/main_nav/component.html.erb %>
+<%# app/components/my_admin/menu_item/component.html.erb %>
 <h1>MY STORE ADMINISTRATION</h1>
-<%= render SolidusAdmin::MainNav::Component.new %>
+<%= render SolidusAdmin::MenuItem::Component.new %>
 ```
 
 ### Replacing a component
@@ -109,12 +88,12 @@ There are two considerations to keep in mind:
   [SolidusAdmin::BaseComponent](../app/components/solidus_admin/base_component.rb).
   You can consider doing the same if you need to use one of its helpers.
 
-For example, the following replaces the main nav component:
+For example, the following replaces the menu item component:
 
 ```ruby
-# app/components/my_application/solidus_admin/main_nav/component.rb
-class MyApplication::SolidusAdmin::MainNav::Component < SolidusAdmin::BaseComponent
-  # do your thing
+# app/components/my_admin/menu_item/component.rb
+class MyAdmin::MenuItem::Component < SolidusAdmin::BaseComponent
+  # Here goes your code
 end
 ```
 
@@ -138,8 +117,8 @@ matching path from within your application (or manually add it to the
 registry) and override the methods you need to change:
 
 ```ruby
-# app/components/my_application/solidus_admin/main_nav/component.rb
-class MyApplication::SolidusAdmin::MainNav::Component < ::SolidusAdmin::MainNav::Component
+# app/components/my_admin/menu_item/component.rb
+class MyAdmin::MenuItem::Component < SolidusAdmin::MenuItem::Component
   def sorted_items
     super.reverse
   end

data/lib/generators/solidus_admin/install/install_generator.rb

@@ -4,12 +4,13 @@ module SolidusAdmin
   module Generators
     class InstallGenerator < Rails::Generators::Base
       class_option :lookbook, type: :boolean, default: !!ENV['SOLIDUS_ADMIN_LOOKBOOK'], desc: 'Install Lookbook for component previews'
+      class_option :tailwind, type: :boolean, default: false, desc: 'Install TailwindCSS for custom components'
 
       source_root "#{__dir__}/templates"
 
       def install_solidus_core_support
         route <<~RUBY
-          mount SolidusAdmin::Engine, at: '/admin', constraints: ->(req) {
+          mount SolidusAdmin::Engine, at: '#{solidus_mount_point}admin', constraints: ->(req) {
             req.cookies['solidus_admin'] != 'false' &&
             req.params['solidus_admin'] != 'false'
           }
@@ -17,7 +18,7 @@ module SolidusAdmin
       end
 
       def copy_initializer
-        copy_file "config/initializers/solidus_admin.rb"
+        template 'config/initializers/solidus_admin.rb.tt', 'config/initializers/solidus_admin.rb'
       end
 
       def ignore_tailwind_build_files
@@ -25,7 +26,7 @@ module SolidusAdmin
       end
 
       def build_tailwind
-        rake "solidus_admin:tailwindcss:build"
+        rake "solidus_admin:tailwindcss:install" if options[:tailwind]
       end
 
       def install_lookbook
@@ -37,7 +38,15 @@ module SolidusAdmin
           gem "actioncable"
         end
 
-        route "mount Lookbook::Engine, at: '/lookbook' if Rails.env.development?"
+        route "mount Lookbook::Engine, at: '#{solidus_mount_point}lookbook' if Rails.env.development?"
+      end
+
+      private
+
+      def solidus_mount_point
+        mount_point = Spree::Core::Engine.routes.find_script_name({})
+        mount_point += "/" unless mount_point.end_with?("/")
+        mount_point
       end
     end
   end

data/lib/generators/solidus_admin/install/templates/config/initializers/{solidus_admin.rb → solidus_admin.rb.tt}

@@ -6,28 +6,24 @@ SolidusAdmin::Config.configure do |config|
   # It needs to be a path to an image file accessible by Sprockets.
   # config.logo_path = "my_own_logo.svg"
 
-  # Add custom paths for TailwindCSS to scan for styles. By default, it already
-  # includes the following paths:
-  # - public/solidus_admin/*.html
-  # - app/helpers/solidus_admin/**/*.rb
-  # - app/assets/javascripts/solidus_admin/**/*.js
-  # - app/views/solidus_admin/**/*.{erb,haml,html,slim}
-  # - app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}
-  #
-  # config.tailwind_content << Rails.root.join("app/my/custom/path/**.rb")
-
-  # Append custom stylesheets to be compiled by TailwindCSS.
-  # config.tailwind_stylesheets << Rails.root.join("app/my/custom/path/style.css")
-
   # Add custom folder paths to watch for changes to trigger a cache sweep forcing a
   # regeneration of the importmap.
   # config.importmap_cache_sweepers << Rails.root.join("app/javascript/my_admin_components")
 
+  # If you want to avoid defining menu_item customizations twice while migrating to SolidusAdmin
+  # you can import menu_items from the backend by uncommenting the following line,
+  # but you will need to
+  <%- if defined? Spree::Backend -%>
+  config.import_menu_items_from_backend!
+  <%- else -%>
+  # config.import_menu_items_from_backend!
+  <%- end -%>
+
   # Add custom paths to importmap files to be loaded.
   # config.importmap_paths << Rails.root.join("config/solidus_admin_importmap.rb")
   #
   # Configure the main navigation.
-  # See SolidusAdmin::MainNavItem for more details.
+  # See SolidusAdmin::MenuItem for more details.
   # config.menu_items << {
   #   key: :my_custom_link,
   #   route: :my_custom_link_path,

data/lib/solidus_admin/admin_resources.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SolidusAdmin::AdminResources
+  def admin_resources(resource, **options)
+    batch_actions = %i[destroy]
+    batch_actions &= options[:only] if options[:only]
+    batch_actions -= options[:except] if options[:except]
+
+    resources(resource, options) do
+      yield if block_given?
+
+      collection do
+        delete :destroy if batch_actions.include?(:destroy)
+      end
+
+      member do
+        patch :move if options[:sortable]
+      end
+
+      yield if block_given?
+    end
+  end
+end

data/lib/solidus_admin/configuration.rb

@@ -17,38 +17,6 @@ module SolidusAdmin
     # The default value is the Solidus logo that lives in the solidus_core gem.
     preference :logo_path, :string, default: "logo/solidus.svg"
 
-    # The list of paths were Tailwind CSS classes are used.
-    #
-    # You can modify this list to include your own paths:
-    #
-    #    SolidusAdmin::Config.tailwind_content << Rails.root.join("app/my/custom/path")
-    #
-    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
-    #
-    # @see https://tailwindcss.com/docs/configuration#content
-    preference :tailwind_content, :array, default: [
-      "#{ENGINE_ROOT}/app/helpers/**/*.rb",
-      "#{ENGINE_ROOT}/app/assets/javascripts/**/*.js",
-      "#{ENGINE_ROOT}/app/views/**/*.erb",
-      "#{ENGINE_ROOT}/app/components/**/*.{rb,erb,js}",
-      "#{ENGINE_ROOT}/spec/components/previews/**/*.{erb,rb}",
-
-      Rails.root&.join("public/solidus_admin/*.html"),
-      Rails.root&.join("app/helpers/solidus_admin/**/*.rb"),
-      Rails.root&.join("app/assets/javascripts/solidus_admin/**/*.js"),
-      Rails.root&.join("app/views/solidus_admin/**/*.{erb,haml,html,slim}"),
-      Rails.root&.join("app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}")
-    ].compact
-
-    # List of Tailwind CSS files to be combined into the final stylesheet.
-    #
-    # You can modify this list to include your own files:
-    #
-    #   SolidusAdmin::Config.tailwind_stylesheets << Rails.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css")
-    #
-    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
-    preference :tailwind_stylesheets, :array, default: []
-
     # List of paths to watch for changes to trigger a cache sweep forcing a regeneration of the importmap.
     #
     # @see https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
@@ -65,33 +33,20 @@ module SolidusAdmin
       "#{ENGINE_ROOT}/config/importmap.rb",
     ]
 
-    # @!attribute [rw] orders_per_page
-    #   @return [Integer] The number of orders to display per page in the admin interface.
-    #                     This preference determines the pagination limit for the order listing.
-    #                     The default value is fetched from the Spree core configuration and currently set to 15.
-    preference :orders_per_page, :integer, default: Spree::Config[:orders_per_page]
-
-    # @!attribute [rw] order_search_key
-    #   The key that specifies the attributes for searching orders within the admin interface.
-    #   This preference controls which attributes of an order are used in search queries.
-    #   By default, it is set to
-    #   'number_shipments_number_or_bill_address_name_or_email_order_promotions_promotion_code_value_cont',
-    #   enabling a search across order number, shipment number, billing address name, email, and promotion code value.
-    #   @return [String] The search key used to determine order attributes for search.
-    preference :order_search_key, :string, default: :number_or_shipments_number_or_bill_address_name_or_email_or_order_promotions_promotion_code_value_cont
-
-    # @!attribute [rw] products_per_page
-    #   @return [Integer] The number of products to display per page in the admin interface.
-    #                     This preference determines the pagination limit for the product listing.
-    #                     The default value is fetched from the Spree core configuration and currently set to 10.
-    preference :products_per_page, :integer, default: Spree::Config[:admin_products_per_page]
-
-    # @!attribute [rw] product_search_key
-    #   @return [String] The key to use when searching for products in the admin interface.
-    #                    This preference determines the product attribute to use for search.
-    #                    By default, it is set to 'name_or_variants_including_master_sku_cont',
-    #                    meaning it will search by product name or product variants sku.
-    preference :product_search_key, :string, default: :name_or_variants_including_master_sku_cont
+    # @!attribute [rw] low_stock_value
+    #   @return [Integer] The low stock value determines the threshold at which products are considered low in stock.
+    #                     Products with a count_on_hand less than or equal to this value will be considered low in stock.
+    #                     Default: 10
+    preference :low_stock_value, :integer, default: 10
+
+    # @!attribute [rw] enable_alpha_features?
+    #   @return [Boolean] Determines whether alpha features are enabled or disabled in the application.
+    #                     Setting this to `true` enables access to alpha stage features that might still be in testing or development.
+    #                     Use with caution, as these features may not be fully stable or complete.
+    #                     Default: false
+    preference :enable_alpha_features, :boolean, default: false
+
+    alias enable_alpha_features? enable_alpha_features
 
     preference :storefront_product_path_proc, :proc, default: ->(_version) {
       ->(product) { "/products/#{product.slug}" }
@@ -186,16 +141,69 @@ module SolidusAdmin
       ]
     end
 
+    def import_menu_items_from_backend!
+      menu_item_to_hash = ->(item, index) do
+        route =
+          if item.url.is_a?(Symbol)
+            -> { solidus_admin.public_send(item.url) }
+          elsif item.url.is_a?(String)
+            -> { item.url }
+          elsif item.url.is_a?(Proc)
+            item.url
+          elsif item.url.nil?
+            -> { spree.public_send(:"admin_#{item.label}_path") }
+          else
+            raise ArgumentError, "Unknown url type #{item.url.class}"
+          end
+
+        match_path =
+          case item.match_path
+          when Regexp then -> { _1 =~ item.match_path }
+          when Proc then item.match_path
+          when String then -> { _1.start_with?("/admin#{item.match_path}") }
+          when nil then -> { _1.start_with?(route.call) }
+          else raise ArgumentError, "Unknown match_path type #{item.match_path.class}"
+          end
+
+        icon =
+          case item.icon
+          when /^ri-/
+            item.icon.delete_prefix("ri-")
+          when String
+            'record-circle-line' # fallback on a generic icon
+          end
+
+        {
+          position: index,
+          key: item.label,
+          icon: icon,
+          route: route,
+          children: item.children.map.with_index(&menu_item_to_hash),
+          match_path: match_path,
+        }
+      end
+
+      @menu_items = Spree::Backend::Config.menu_items.map.with_index(&menu_item_to_hash)
+    end
+
     def components
       @components ||= Hash.new do |_h, k|
-        "solidus_admin/#{k}/component".classify.constantize
-      rescue NameError
-        prefix = "#{ENGINE_ROOT}/app/components/solidus_admin/"
-        suffix = "/component.rb"
-        dictionary = Dir["#{prefix}**#{suffix}"].map { _1.delete_prefix(prefix).delete_suffix(suffix) }
-        corrections = DidYouMean::SpellChecker.new(dictionary: dictionary).correct(k.to_s)
-
-        raise ComponentNotFoundError, "Unknown component #{k}#{DidYouMean.formatter.message_for(corrections)}"
+        const_name = "solidus_admin/#{k}/component".classify
+
+        unless Object.const_defined?(const_name)
+          prefix = "#{ENGINE_ROOT}/app/components/solidus_admin/"
+          suffix = "/component.rb"
+          dictionary = Dir["#{prefix}**#{suffix}"].map { _1.delete_prefix(prefix).delete_suffix(suffix) }
+          corrections = DidYouMean::SpellChecker.new(dictionary: dictionary).correct(k.to_s)
+
+          raise ComponentNotFoundError.new(
+            "Unknown component #{k}#{DidYouMean.formatter.message_for(corrections)}",
+            k.classify,
+            receiver: ::SolidusAdmin
+          )
+        end
+
+        const_name.constantize
       end
     end
 
@@ -211,6 +219,26 @@ module SolidusAdmin
 
     # The HTTP method used to logout the user in the admin interface.
     preference :logout_link_method, :string, default: :delete
+
+    # @!attribute [rw] themes
+    #   @return [Hash] A hash containing the themes that are available for the admin panel
+    preference :themes, :hash, default: {
+      solidus: 'solidus_admin/application',
+      solidus_dark: 'solidus_admin/dark',
+      solidus_dimmed: 'solidus_admin/dimmed',
+    }
+
+    # @!attribute [rw] theme
+    #   @return [String] Default admin theme name
+    preference :theme, :string, default: 'solidus'
+
+    # @!attribute [rw] dark_theme
+    #   @return [String] Default admin theme name
+    preference :dark_theme, :string, default: 'solidus_dark'
+
+    def theme_path(user_theme)
+      themes.fetch(user_theme&.to_sym, themes[theme.to_sym])
+    end
   end
 end