solidus_admin 0.0.0 → 0.0.1

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

@@ -0,0 +1,3 @@
+/*
+ * = require solidus_admin/tailwind.css
+*/

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

@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .body-tiny {
+    @apply font-sans font-normal text-xs leading-5;
+  }
+
+  .body-tiny-bold {
+    @apply font-sans font-semibold text-xs leading-5;
+  }
+
+  .body-small {
+    @apply font-sans font-normal text-sm leading-6;
+  }
+
+  .body-small-bold {
+    @apply font-sans font-semibold text-sm leading-6;
+  }
+
+  .body-text {
+    @apply font-sans font-normal text-base leading-6;
+  }
+
+  .body-text-bold {
+    @apply font-sans font-semibold text-base leading-6;
+  }
+
+  .body-title {
+    @apply font-sans font-semibold text-xl leading-5;
+  }
+}
+
+<%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %>

data/app/components/solidus_admin/base_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SolidusAdmin
+  # BaseComponent is the base class for all components in Solidus Admin.
+  class BaseComponent < ViewComponent::Base
+    include SolidusAdmin::ComponentsHelper
+    include Turbo::FramesHelper
+
+    def icon_tag(name, **attrs)
+      render component("ui/icon").new(name: name, **attrs)
+    end
+
+    def missing_translation(key, options)
+      keys = I18n.normalize_keys(options[:locale] || I18n.locale, key, options[:scope])
+
+      logger.debug "  [#{self.class}] Missing translation: #{keys.join('.')}"
+
+      if options[:locale] != :en
+        t(key, **options, locale: :en)
+      else
+        "translation missing: #{keys.join('.')}"
+      end
+    end
+
+    def self.stimulus_id
+      @stimulus_id ||= name.underscore
+        .sub(/^solidus_admin\/(.*)\/component$/, '\1')
+        .gsub("/", "--")
+        .tr("_", "-")
+    end
+
+    delegate :stimulus_id, to: :class
+
+    def spree
+      @spree ||= Spree::Core::Engine.routes.url_helpers
+    end
+
+    def solidus_admin
+      @solidus_admin ||= SolidusAdmin::Engine.routes.url_helpers
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<span class="max-w-xs text-xs text-right text-gray-600 hidden lg:block">
+  <%= t(".feedback_description") %>
+</span>
+<%= render component("ui/button").new(
+  tag: :a,
+  text: t(".give_feedback"),
+  href: "https://solidus.io/feedback?category=solidus-admin",
+  icon: "feedback-line",
+  scheme: :secondary,
+  target: :_blank,
+) %>

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

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

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

@@ -0,0 +1,5 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  give_feedback: 'Give feedback'
+  feedback_description: 'We are constantly trying to improve. Please let us know what you think about this admin page.'

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

@@ -0,0 +1,31 @@
+<div class="<%= stimulus_id %> px-4">
+  <header class="py-6 flex items-center">
+    <h1 class="body-title">
+      <%= title %>
+    </h1>
+
+    <div class="ml-auto flex gap-2 items-center">
+      <%= render component("feedback").new %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        text: t('.create_order'),
+        href: spree.new_admin_order_path,
+        icon: "add-line",
+      ) %>
+    </div>
+  </header>
+
+  <%= render component('ui/table').new(
+    id: 'orders-list',
+    model_class: Spree::Order,
+    rows: @page.records,
+    fade_row_proc: fade_row_proc,
+    search_key: SolidusAdmin::Config[:order_search_key],
+    search_url: solidus_admin.orders_path,
+    batch_actions: batch_actions,
+    filters: filters,
+    columns: columns,
+    prev_page_link: prev_page_link,
+    next_page_link: next_page_link,
+  ) %>
+</div>

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

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
+  def initialize(page:)
+    @page = page
+  end
+
+  class_attribute :fade_row_proc, default: ->(order) { order.paid? && order.shipped? }
+
+  def title
+    Spree::Order.model_name.human.pluralize
+  end
+
+  def prev_page_link
+    @page.first? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.number - 1)
+  end
+
+  def next_page_link
+    @page.last? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.next_param)
+  end
+
+  def batch_actions
+    []
+  end
+
+  def filters
+    [
+      {
+        name: 'q[completed_at_not_null]',
+        value: 1,
+        label: t('.filters.only_show_complete_orders'),
+      },
+    ]
+  end
+
+  def columns
+    [
+      number_column,
+      date_column,
+      customer_column,
+      total_column,
+      items_column,
+      payment_column,
+      shipment_column,
+    ]
+  end
+
+  def number_column
+    {
+      header: :order,
+      data: ->(order) do
+        order_path = spree.edit_admin_order_path(order)
+
+        if !fade_row_proc.call(order)
+          link_to order.number, order_path, class: 'font-semibold'
+        else
+          link_to order.number, order_path
+        end
+      end
+    }
+  end
+
+  def date_column
+    {
+      header: :date,
+      data: ->(order) do
+        content_tag :div, l(order.created_at, format: :short)
+      end
+    }
+  end
+
+  def customer_column
+    {
+      class_name: "w-[400px]",
+      header: :customer,
+      data: ->(order) do
+        customer_email = order.user&.email
+        content_tag :div, String(customer_email)
+      end
+    }
+  end
+
+  def total_column
+    {
+      header: :total,
+      data: ->(order) do
+        content_tag :div, number_to_currency(order.total)
+      end
+    }
+  end
+
+  def items_column
+    {
+      header: :items,
+      data: ->(order) do
+        content_tag :div, t('.columns.items', count: order.line_items.sum(:quantity))
+      end
+    }
+  end
+
+  def payment_column
+    {
+      header: :payment,
+      data: ->(order) do
+        component('ui/badge').new(name: order.payment_state&.humanize, color: order.paid? ? :green : :yellow)
+      end
+    }
+  end
+
+  def shipment_column
+    {
+      header: :shipment,
+      data: ->(order) do
+        component('ui/badge').new(name: order.shipment_state&.humanize, color: order.shipped? ? :green : :yellow)
+      end
+    }
+  end
+end

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

@@ -0,0 +1,13 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  create_order: 'Create Order'
+  columns:
+    items:
+      one: 1 Item
+      other: '%{count} Items'
+  filters:
+    only_show_complete_orders: Only show complete orders
+  date:
+    formats:
+      short: '%d %b %y'

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

@@ -0,0 +1,30 @@
+<div class="<%= stimulus_id %> px-4">
+  <header class="py-6 flex items-center">
+    <h1 class="body-title">
+      <%= title %>
+    </h1>
+
+    <div class="ml-auto flex gap-2 items-center">
+      <%= render component("feedback").new %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        text: t('.add_product'),
+        href: spree.new_admin_product_path,
+        icon: "add-line",
+      ) %>
+    </div>
+  </header>
+
+  <%= render component('ui/table').new(
+    id: 'products-list',
+    model_class: Spree::Product,
+    rows: @page.records,
+    search_key: SolidusAdmin::Config[:product_search_key],
+    search_url: solidus_admin.products_path,
+    batch_actions: batch_actions,
+    filters: filters,
+    columns: columns,
+    prev_page_link: prev_page_link,
+    next_page_link: next_page_link,
+  ) %>
+</div>

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

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Products::Index::Component < SolidusAdmin::BaseComponent
+  def initialize(page:)
+    @page = page
+  end
+
+  def title
+    Spree::Product.model_name.human.pluralize
+  end
+
+  def prev_page_link
+    @page.first? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.number - 1)
+  end
+
+  def next_page_link
+    @page.last? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.next_param)
+  end
+
+  def batch_actions
+    [
+      {
+        display_name: t('.batch_actions.delete'),
+        action: solidus_admin.products_path,
+        method: :delete,
+        icon: 'delete-bin-7-line',
+      },
+      {
+        display_name: t('.batch_actions.discontinue'),
+        action: solidus_admin.discontinue_products_path,
+        method: :put,
+        icon: 'pause-circle-line',
+      },
+      {
+        display_name: t('.batch_actions.activate'),
+        action: solidus_admin.activate_products_path,
+        method: :put,
+        icon: 'play-circle-line',
+      },
+    ]
+  end
+
+  def filters
+    [
+      {
+        name: 'q[with_discarded]',
+        value: true,
+        label: t('.filters.with_deleted'),
+      },
+    ]
+  end
+
+  def columns
+    [
+      image_column,
+      name_column,
+      status_column,
+      price_column,
+      stock_column,
+    ]
+  end
+
+  def image_column
+    {
+      class_name: "w-[72px]",
+      header: tag.span('aria-label': t('.product_image'), role: 'text'),
+      data: ->(product) do
+        image = product.gallery.images.first or return
+
+        link_to(
+          image_tag(image.url(:small), class: 'h-10 w-10 max-w-min rounded border border-gray-100', alt: product.name),
+          solidus_admin.product_path(product),
+          class: 'inline-flex overflow-hidden',
+          tabindex: -1,
+        )
+      end
+    }
+  end
+
+  def name_column
+    {
+      header: :name,
+      data: ->(product) do
+        link_to product.name, solidus_admin.product_path(product)
+      end
+    }
+  end
+
+  def status_column
+    {
+      header: :status,
+      data: ->(product) { component('products/status').new(product: product) }
+    }
+  end
+
+  def stock_column
+    {
+      header: :stock,
+      data: ->(product) do
+        stock_info =
+          case (on_hand = product.total_on_hand)
+          when Float::INFINITY
+            content_tag :span, t('.stock.in_stock', on_hand: t('.stock.infinity')), class: 'text-forest'
+          when 1..Float::INFINITY
+            content_tag :span, t('.stock.in_stock', on_hand: on_hand), class: 'text-forest'
+          else
+            content_tag :span, t('.stock.in_stock', on_hand: on_hand), class: 'text-red-500'
+          end
+
+        variant_info =
+          t('.for_variants', count: product.variants.count)
+
+        content_tag :div, safe_join([stock_info, variant_info], ' ')
+      end
+    }
+  end
+
+  def price_column
+    {
+      header: :price,
+      data: ->(product) do
+        content_tag :div, product.master.display_price.to_html
+      end
+    }
+  end
+end

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

@@ -0,0 +1,13 @@
+en:
+  product_image: 'Image'
+  add_product: 'Add Product'
+  stock:
+    infinity: '∞'
+    in_stock: '%{on_hand} in stock'
+  for_variants: 'for %{count} variants'
+  batch_actions:
+    delete: 'Delete'
+    discontinue: 'Discontinue'
+    activate: 'Activate'
+  filters:
+    with_deleted: Include deleted

data/app/components/solidus_admin/products/show/component.html.erb

@@ -0,0 +1,149 @@
+<div class="px-4 relative" data-controller="<%= stimulus_id %>">
+  <header class="py-6 flex items-center gap-4">
+    <%= render component("ui/button").new(
+      tag: :a,
+      title: t(".back"),
+      icon: "arrow-left-line",
+      scheme: :secondary,
+      href: solidus_admin.products_path
+    ) %>
+    <h1 class="flex items-center gap-2">
+      <span class="body-title"><%= @product.name %></span>
+      <%= render component("products/status").new(product: @product) %>
+    </h1>
+
+    <div class="ml-auto flex gap-2 items-center">
+      <%= render component("feedback").new %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        text: t(".duplicate"),
+        href: spree.clone_admin_product_path(@product),
+        scheme: :ghost
+      ) %>
+
+      <%= render component("ui/button").new(
+        tag: :a,
+        text: t(".view"),
+        href: SolidusAdmin::Config.storefront_product_path(@product),
+        target: :_blank,
+        scheme: :ghost
+      ) %>
+      <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
+    </div>
+  </header>
+
+  <%= form_for @product, url: solidus_admin.product_path(@product), html: { id: form_id } do |f| %>
+    <div class="flex gap-4 items-start pb-4">
+      <div class="justify-center items-start gap-4 flex flex-col w-full">
+        <%= render component('ui/panel').new do %>
+          <%= render component("ui/forms/field").text_field(f, :name) %>
+          <%= render component("ui/forms/field").text_field(f, :slug) %>
+          <%= render component("ui/forms/field").text_area(f, :description) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: 'SEO', title_hint: 'Search Engine Optimization') do %>
+          <%= render component("ui/forms/field").text_field(f, :meta_title) %>
+          <%= render component("ui/forms/field").text_field(f, :meta_description) %>
+          <%= render component("ui/forms/field").text_area(f, :meta_keywords) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: "Media") do |panel| %>
+          <% panel.with_action(
+            name: t(".manage_images"),
+            href: spree.admin_product_images_path(@product)
+          ) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: 'Pricing') do %>
+          <%= render component("ui/forms/field").text_field(f, :price) %>
+          <div class="flex gap-4 justify-items-stretch">
+            <%= render component("ui/forms/field").text_field(f, :cost_price) %>
+            <%= render component("ui/forms/field").text_field(f, :cost_currency) %>
+          </div>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: 'Stock') do |panel| %>
+          <%= render component("ui/forms/field").text_field(f, :sku) %>
+
+          <% panel.with_action(
+            name: t(".manage_stock"),
+            href: spree.admin_product_stock_path(@product)
+          ) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: 'Shipping') do %>
+          <%= render component("ui/forms/field").select(
+            f,
+            :shipping_category_id,
+            [[t(".none"), nil]] + Spree::ShippingCategory.order(:name).pluck(:name, :id),
+            tip: t(".hints.shipping_category_html"),
+          ) %>
+          <%= render component("ui/forms/field").select(
+            f,
+            :tax_category_id,
+            [[t(".none"), nil]] + Spree::TaxCategory.order(:name).pluck(:name, :id),
+            tip: t(
+              ".hints.tax_category_html",
+              default_tax_category: Spree::TaxCategory.default&.name
+            ),
+          ) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: "Options") do %>
+          <%= render component("ui/forms/field").select(
+            f,
+            :option_type_ids,
+            option_type_options,
+            multiple: true,
+            "size" => option_type_options.size,
+          ) %>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: "Specifications") do |panel| %>
+          <% panel.with_action(
+            name: t(".manage_properties"),
+            href: spree.admin_product_product_properties_path(@product)
+          ) %>
+        <% end %>
+      </div>
+
+      <aside class="justify-center items-start gap-4 flex flex-col w-full max-w-sm">
+        <%= render component('ui/panel').new(title: "Publishing") do %>
+          <%= render component("ui/forms/field").text_field(f, :available_on, tip: t(".hints.available_on_html"), type: :date) %>
+          <%= render component("ui/forms/field").text_field(f, :discontinue_on, tip: t(".hints.discontinue_on_html"), type: :date) %>
+
+          <label class="flex gap-2 items-center">
+            <%= render component("ui/forms/checkbox").new(
+              name: "#{f.object_name}[promotionable]",
+              checked: f.object.promotionable
+            ) %>
+            <span class="body-text-sm"><%= Spree::Product.human_attribute_name :promotionable %></span>
+            <%= render component("ui/toggletip").new(
+              text: t(".hints.promotionable_html"),
+              position: :left
+            ) %>
+          </label>
+        <% end %>
+
+        <%= render component('ui/panel').new(title: "Product organization") do %>
+          <%= render component("ui/forms/field").select(f, :taxon_ids, taxon_options, multiple: true, "size" => taxon_options.size) %>
+        <% end %>
+      </aside>
+    </div>
+  <% end %>
+
+  <div class="mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex">
+    <div class="flex gap-2 grow">
+      <%= form_for @product, url: solidus_admin.product_path(@product), method: :delete do %>
+        <%= render component("ui/button").new(
+          tag: :button,
+          text: t(".delete"),
+          scheme: :danger,
+          "data-action": "click->#{stimulus_id}#confirmDelete",
+          "data-#{stimulus_id}-message-param": t(".delete_confirmation"),
+        ) %>
+      <% end %>
+    </div>
+    <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
+  </div>
+</div>

data/app/components/solidus_admin/products/show/component.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  confirmDelete(event) {
+    if (!confirm(event.params.message)) {
+      event.preventDefault()
+    }
+  }
+}

data/app/components/solidus_admin/products/show/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Products::Show::Component < SolidusAdmin::BaseComponent
+  def initialize(product:)
+    @product = product
+  end
+
+  def form_id
+    @form_id ||= "#{stimulus_id}--form-#{@product.id}"
+  end
+
+  private
+
+  def taxon_options
+    @taxon_options ||= Spree::Taxon.order(:lft).pluck(:name, :id, :lft, :depth).map do
+      name, id, _lft, depth = _1
+      ["#{'    ' * depth} → #{name}", id]
+    end
+  end
+
+  def option_type_options
+    @option_type_options ||= Spree::OptionType.order(:presentation).pluck(:presentation, :name, :id).map do
+      ["#{_1} (#{_2})", _3]
+    end
+  end
+end

data/app/components/solidus_admin/products/show/component.yml

@@ -0,0 +1,17 @@
+en:
+  save: "Save"
+  back: "Back"
+  duplicate: "Duplicate"
+  view: "View online"
+  delete: "Delete"
+  none: "None"
+  manage_images: "Manage images"
+  manage_properties: "Manage product specifications"
+  manage_stock: "Manage stock"
+  delete_confirmation: "Are you sure you want to delete this product?"
+  hints:
+    available_on_html: This sets the availability date for the product. If this value is not set, or it is set to a date in the future, then the product is not available on the storefront.
+    discontinue_on_html: This sets the discontinue date for the product. If this value is set to a date, then the product is not available on the storefront from that day on anymore.
+    promotionable_html: 'This determines whether or not promotions can apply to this product.<br>Default: Checked'
+    shipping_category_html: 'This determines what kind of shipping this product requires.<br> Default: Default'
+    tax_category_html: 'This determines what kind of taxation is applied to this product.<br> Default: %{default_tax_category}'

data/app/components/solidus_admin/products/status/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Products::Status::Component < SolidusAdmin::BaseComponent
+  COLORS = {
+    available: :green,
+    discontinued: :red
+  }.freeze
+
+  # @param product [Spree::Product]
+  def initialize(product:)
+    @product = product
+  end
+
+  def call
+    render component('ui/badge').new(
+      name: t(".#{status}"),
+      color: COLORS.fetch(status)
+    )
+  end
+
+  # @return [Symbol]
+  #   :available when the product is available
+  #   :discontinued when the product is not available
+  def status
+    if @product.available?
+      :available
+    else
+      :discontinued
+    end
+  end
+end

data/app/components/solidus_admin/products/status/component.yml

@@ -0,0 +1,3 @@
+en:
+  available: 'Available'
+  discontinued: 'Discontinued'