atomic_view 0.1.10 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d4e1219dbfa172625d237cc3d8d164e89d5ea07970aba2d3ef7eeff274641b2
-  data.tar.gz: d247639eefd01fe823d75ba0dcf38424f2479275a2e1c616c7bfebd54e0e751d
+  metadata.gz: 205025ff313e6a3303b0b163adb40754247e189320e839fa949cf6c419fd41a8
+  data.tar.gz: 8b62841b297e0bb48e4a536e0dd6d74ac3cff1d1aa956975a547012354900bed
 SHA512:
-  metadata.gz: 0c3c20d67269e91d589827053856626a38c7e03bc649b11a3ff3090f6f94576a2b044e79644926e2b02d13aa23a756c91e1ce34d0e4841d6b08b5e802af1f90d
-  data.tar.gz: 2ab75bf246557bc2fcc9db8f09945eea2010bb8f6c2290398b2e4b6507891b5f7c308e917cd79d2b65a8161af835dc99138ca3d4a72b761bd70eeeb096e1a39e
+  metadata.gz: 3c79d5697e7eaa4153b7b5b1087f31bc3b3a85032316784329b45ca6c6330f6f706901ffa2d5abf078d4b53d2e3ee2baca1317874fd79d54eac77b74984024e1
+  data.tar.gz: f67f35c7dcfc88d43cfd3d716f10bec7ce3c351f556d2c1eb1a3446a8582d85ef0cd4e9af3a2f129507e07d758659267f8253cc6bc6d6622d8e45a8baa844286

data/lib/atomic_view/components/navigation_tree_component/item_component.erb

@@ -0,0 +1,23 @@
+<% if group? %>
+  <%= tag.details(**@options.except(:class), open: open?, class: "[&[open]>summary_svg:last-child]:rotate-90") do %>
+    <%= tag.summary(class: html_class) do %>
+      <% if icon_name.present? %>
+        <%= icon(icon_name, options: {class: "size-4 shrink-0"}).to_s.html_safe %>
+      <% end %>
+      <%= label %>
+      <%= icon("chevron-right", options: {class: "ml-auto size-4 shrink-0 transition-transform"}).to_s.html_safe %>
+    <% end %>
+    <div class="ml-6 mt-1 flex flex-col gap-1">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  <% end %>
+<% else %>
+  <%= tag.a(**@options.except(:class), href: href, class: html_class) do %>
+    <% if icon_name.present? %>
+      <%= icon(icon_name, options: {class: "size-4 shrink-0"}).to_s.html_safe %>
+    <% end %>
+    <%= label %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/navigation_tree_component/item_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class NavigationTreeComponent
+      # A single NavigationTree row: a link when `href:` is given, or a
+      # collapsible disclosure (native `<details>`/`<summary>`, no JS) when
+      # it's not -- its own `with_item` children then render nested inside
+      # it. Rendered via `NavigationTreeComponent#with_item` -- see
+      # `NavigationTreeComponent`'s class docs.
+      class ItemComponent < AtomicView::Component
+        renders_many :items, "AtomicView::Components::NavigationTreeComponent::ItemComponent"
+
+        attr_reader :label, :href, :icon_name, :active
+
+        def initialize(label:, href: nil, icon: nil, active: false, **options)
+          super()
+          @label = label
+          @href = href
+          @icon_name = icon
+          @active = active
+          @options = options
+        end
+
+        def group?
+          href.nil?
+        end
+
+        # A group opens by default when it (or any descendant) is active.
+        def open?
+          active || items.any? { |item| item.active || item.open? }
+        end
+
+        def html_class
+          class_names(base_classes, group? ? "cursor-pointer list-none" : nil, active ? active_classes : inactive_classes, @options[:class])
+        end
+
+        private
+
+        def base_classes
+          "flex items-center gap-2 rounded-btn px-2.5 py-1.5 text-sm font-medium"
+        end
+
+        def active_classes
+          "bg-secondary text-secondary-foreground"
+        end
+
+        def inactive_classes
+          "text-muted-foreground hover:bg-offset hover:text-foreground"
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/navigation_tree_component.erb

@@ -0,0 +1,8 @@
+<%= tag.nav(**@options.except(:class), class: container_class) do %>
+  <% if label.present? %>
+    <div class="px-2.5 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><%= label %></div>
+  <% end %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/navigation_tree_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # NavigationTree
+    #
+    # A sidebar navigation list -- flat links plus collapsible sections with
+    # nested sub-items (native `<details>`/`<summary>`, no JS). Each row is a
+    # `with_item` slot so items can nest arbitrarily:
+    #
+    #   render(NavigationTreeComponent.new(label: "Products")) do |tree|
+    #     tree.with_item(label: "Overview", href: "#", icon: "home", active: true)
+    #
+    #     tree.with_item(label: "Connect", icon: "square-3-stack-3d") do |connect|
+    #       connect.with_item(label: "Overview", href: "#")
+    #       connect.with_item(label: "Connected accounts", href: "#")
+    #     end
+    #   end
+    #
+    # An item given `href:` renders as a link; an item without `href:` renders
+    # as a disclosure (a `<summary>` row with a trailing chevron) whose own
+    # `with_item` children render nested inside it once open -- see
+    # `ItemComponent` for the per-item API.
+    class NavigationTreeComponent < AtomicView::Component
+      renders_many :items, "ItemComponent"
+
+      attr_reader :label
+
+      def initialize(label: nil, **options)
+        super()
+        @label = label
+        @options = options
+      end
+
+      def container_class
+        class_names("flex flex-col gap-1", @options[:class])
+      end
+    end
+  end
+end

data/lib/atomic_view/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AtomicView
-  VERSION = "0.1.10"
+  VERSION = "0.1.11"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 0.1.11
 platform: ruby
 authors:
 - Joel Warrington
@@ -195,8 +195,10 @@ files:
 - lib/atomic_view/components/modal_component.erb
 - lib/atomic_view/components/modal_component.rb
 - lib/atomic_view/components/month_field_component.rb
-- lib/atomic_view/components/nav_item_component.erb
-- lib/atomic_view/components/nav_item_component.rb
+- lib/atomic_view/components/navigation_tree_component.erb
+- lib/atomic_view/components/navigation_tree_component.rb
+- lib/atomic_view/components/navigation_tree_component/item_component.erb
+- lib/atomic_view/components/navigation_tree_component/item_component.rb
 - lib/atomic_view/components/number_field_component.rb
 - lib/atomic_view/components/pagination_component.erb
 - lib/atomic_view/components/pagination_component.rb

data/lib/atomic_view/components/nav_item_component.erb

@@ -1,6 +0,0 @@
-<%= tag.a(**@options.except(:class), href: href, class: html_class) do %>
-  <% if icon_name.present? %>
-    <%= icon(icon_name, options: {class: "size-4 shrink-0"}).to_s.html_safe %>
-  <% end %>
-  <%= label %>
-<% end %>

data/lib/atomic_view/components/nav_item_component.rb

@@ -1,36 +0,0 @@
-# frozen_string_literal: true
-
-module AtomicView
-  module Components
-    class NavItemComponent < AtomicView::Component
-      attr_reader :label, :href, :icon_name, :active
-
-      def initialize(label:, href:, icon: nil, active: false, **options)
-        super()
-        @label = label
-        @href = href
-        @icon_name = icon
-        @active = active
-        @options = options
-      end
-
-      private
-
-      def html_class
-        class_names(base_classes, active ? active_classes : inactive_classes, @options[:class])
-      end
-
-      def base_classes
-        "flex items-center gap-2 rounded-btn px-2.5 py-1.5 text-sm font-medium"
-      end
-
-      def active_classes
-        "bg-secondary text-secondary-foreground"
-      end
-
-      def inactive_classes
-        "text-muted-foreground hover:bg-offset hover:text-foreground"
-      end
-    end
-  end
-end