Add component preview for the sidebar item component

We mock the url helpers so the dummy route we use points to the
current page.

At the same time, we change the item component to get the fullpath on
initialization so we can mock and set the active state from outside.

Closes #5221

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

@@ -27,7 +27,7 @@
   <% end %>
   <nav data-controller="main-nav" class="mt-2">
     <ul>
-      <%= render @item_component.with_collection(items) %>
+      <%= render @item_component.with_collection(items, fullpath: request.fullpath) %>
     </ul>
   </nav>
 </aside>

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

@@ -4,12 +4,17 @@
 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 name
@@ -59,11 +64,11 @@ def nested_items
     tag.nav(
       class: nested_nav_active_classes
     ) do
-      render self.class.with_collection(@item.children, url_helpers: @url_helpers)
+      render self.class.with_collection(@item.children, url_helpers: @url_helpers, fullpath: @fullpath)
     end
   end
 
   def active?
-    @item.active?(@url_helpers, request.fullpath)
+    @item.active?(@url_helpers, @fullpath)
   end
 end

admin/spec/components/previews/solidus_admin/sidebar/component_preview.rb

@@ -16,6 +16,20 @@ def active?
     end
   end
 
+  # The item component is used to render main navigation items, which are
+  # rendered within the sidebar.
+  #
+  # It needs to be passed a {SolidusAdmin::MainNavItem} instance, which
+  # represents the data for a main navigation item.
+  #
+  # ```ruby
+  # item = SolidusAdmin::MainNavItem.new(
+  #   key: :overview,
+  #   position: 80
+  # )
+  # render component("sidebar/item", item: item)
+  # ```
+  #
   # @param store_name text
   # @param store_url url
   # @param logo_path text { description: "Asset path to the store logo" }

admin/spec/components/previews/solidus_admin/sidebar/item/component_preview.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+require "solidus_admin/main_nav_item"
+
+# @component "sidebar/item"
+class SolidusAdmin::Sidebar::Item::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  DUMMY_ROUTE = :foo_path
+
+  DUMMY_PATH = "#"
+
+  # @param active toggle { description: "Whether the item is active" }
+  # @param key text { description: "ID also used for i18n" }
+  # @param icon text { description: "RemixIcon name (https://remixicon.com/)" }
+  def overview(active: false, key: "orders", icon: "inbox-line")
+    item = SolidusAdmin::MainNavItem.new(
+      key: key,
+      icon: icon,
+      position: 1,
+      route: DUMMY_ROUTE
+    )
+
+    render_with_template(
+      locals: {
+        item: item,
+        url_helpers: url_helpers,
+        fullpath: fullpath(active)
+      }
+    )
+  end
+
+  private
+
+  # solidus_admin.foo_path => "#"
+  def url_helpers
+    Struct.new(:solidus_admin).new(
+      Struct.new(DUMMY_ROUTE).new(DUMMY_PATH)
+    )
+  end
+
+  def fullpath(active)
+    active ? DUMMY_PATH : ""
+  end
+end

admin/spec/components/previews/solidus_admin/sidebar/item/component_preview/overview.html.erb

@@ -0,0 +1,7 @@
+<ul class="w-[17.78rem]">
+  <%= render current_component.new(
+    item: item,
+    url_helpers: url_helpers,
+    fullpath: fullpath
+  ) %>
+</ul>

admin/spec/components/solidus_admin/sidebar/item/component_spec.rb

@@ -10,6 +10,10 @@ def url_helpers(solidus_admin: {}, spree: {})
     )
   end
 
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+
   it "renders the item" do
     item = SolidusAdmin::MainNavItem.new(key: "orders", route: :orders_path, position: 1)
     component = described_class.new(
@@ -61,13 +65,14 @@ def url_helpers(solidus_admin: {}, spree: {})
                   .new(key: "products", route: :products_path, position: 1)
     inactive_component = described_class.new(
       item: inactive_item,
-      url_helpers: url_helpers(solidus_admin: { orders_path: "/admin/orders" })
+      url_helpers: url_helpers(solidus_admin: { orders_path: "/admin/orders" }),
+      fullpath: "/admin/products"
     )
     active_component = described_class.new(
       item: active_item,
-      url_helpers: url_helpers(solidus_admin: { products_path: "/admin/products" })
+      url_helpers: url_helpers(solidus_admin: { products_path: "/admin/products" }),
+      fullpath: "/admin/products"
     )
-    allow_any_instance_of(ActionDispatch::Request).to receive(:fullpath).and_return("/admin/products")
 
     render_inline(inactive_component)
     inactive_classes = page.find("a", text: "Orders")[:class]