atomic_view 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c4d7794fbf6c54fdf00e69c51b02457c2af6c82da59d3e2c7590057b5e8d1ef
-  data.tar.gz: 0d72d579d96ab8d334ff8423bbe83ebbd9f16a97ad3022d4a45c0ba6bec6d6be
+  metadata.gz: bada6883ff0ebcfb57bb0cf9f153c8c978bd32601b3371d0a5db2db02a57fab3
+  data.tar.gz: 59a99dd072921000d4dc906eafcc2d51b4638a7f78b625fd53e8c82dfe1017e6
 SHA512:
-  metadata.gz: 3c1faa4585db6c8002ff72cf6c746894d03061a4b57d846200a380d11b7403ea32c55d176131d65a0e702a3f944da8375fa62e53a9a2c38a2945e3dcac803070
-  data.tar.gz: 5a55bd375c66d433c226caf9f23edf7c84307d4eb131ee3cb719428f47c783ae6f156a61a25a9f6b528bd3112f957b9f61020801434f64ee7e899edb4c737251
+  metadata.gz: 2bd3d154f20a387d44c6fd2fbf30c6c00ca790ae8a4531d92c69291ed0a1f1c0cad1313a0807c9d576bec552e4faa297d3acab6be83feb7c14e4227440a228c6
+  data.tar.gz: 77657284d3f55f498dda813f30542b65077c979804ef0d64fed520162ab0e154c6b58a7719ef345d516e4d58f66e013adc6b839ec5b180570a74b9c1658f1bfd

data/lib/atomic_view/components/command_palette_component/row_component.html.erb

@@ -0,0 +1,19 @@
+<%= link_to(
+  href,
+  class: "flex items-center justify-between gap-3 px-3 py-1.5 text-sm text-foreground hover:bg-offset",
+  data: data_attributes
+) do %>
+  <span class="flex items-center gap-2">
+    <% if icon_name.present? %>
+      <%= icon(icon_name, options: {class: "size-4 shrink-0 text-muted-foreground"}).to_s.html_safe %>
+    <% end %>
+    <%= label %>
+  </span>
+  <% if hint.present? %>
+    <span class="inline-flex items-center gap-0.5">
+      <% Array(hint).each do |key| %>
+        <%= render(AtomicView::Components::KbdComponent.new) { key } %>
+      <% end %>
+    </span>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/command_palette_component/row_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class CommandPaletteComponent
+      # A single CommandPalette result: a link carrying the JS hooks --
+      # `[data-atomic-view--command-palette-target="row"]` and
+      # `data-search-text` -- the filter/keyboard-nav controller relies on.
+      # Rendered via `CommandPaletteComponent#with_section`'s `results:`
+      # sugar, or `SectionComponent#with_row` directly -- see
+      # `CommandPaletteComponent`'s class docs.
+      #
+      # `icon:`, when given, renders a Heroicon before the label -- same
+      # `icon:` convention as `NavigationTreeComponent::ItemComponent`.
+      class RowComponent < AtomicView::Component
+        attr_reader :label, :href, :hint, :icon_name
+
+        def initialize(label:, href: "#", hint: nil, search_text: nil, icon: nil, **options)
+          super()
+          @label = label
+          @href = href
+          @hint = hint
+          @search_text = search_text
+          @icon_name = icon
+          @options = options
+        end
+
+        def data_attributes
+          (@options[:data] || {}).merge(
+            "atomic-view--command-palette-target" => "row",
+            "search_text" => (@search_text || label).to_s.downcase
+          )
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/command_palette_component/section_component.html.erb

@@ -0,0 +1,7 @@
+<div role="group">
+  <p class="px-3 pb-1 pt-2 text-xs font-semibold uppercase text-muted-foreground select-none"><%= label %></p>
+
+  <% rows.each do |row| %>
+    <%= row %>
+  <% end %>
+</div>

data/lib/atomic_view/components/command_palette_component/section_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class CommandPaletteComponent
+      # A labeled group of `RowComponent` results within a CommandPalette.
+      # Rendered via `CommandPaletteComponent#with_section`, or standalone
+      # (e.g. from a Turbo Stream response updating `results_id`) -- see
+      # `CommandPaletteComponent`'s class docs.
+      class SectionComponent < AtomicView::Component
+        renders_many :rows, "AtomicView::Components::CommandPaletteComponent::RowComponent"
+
+        attr_reader :label
+
+        def initialize(label:, results: [], **options)
+          super()
+          @label = label
+          @options = options
+          results.each { |result| with_row(**result) }
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/command_palette_component.html.erb

@@ -4,32 +4,13 @@
     placeholder: placeholder,
     autocomplete: "off",
     autofocus: true,
-    class: "w-full border-0 bg-transparent px-3 py-2 text-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0",
+    class: "w-full border-0 bg-transparent px-3 py-2 text-sm text-foreground placeholder:text-placeholder focus:outline-none focus:ring-0",
     data: input_data_attributes
   ) %>
 
-  <div class="max-h-80 overflow-y-auto border-t border-border py-2">
+  <div id="<%= results_id %>" class="max-h-80 overflow-y-auto border-t border-border py-2">
     <% sections.each do |section| %>
-      <div role="group">
-        <p class="px-3 pb-1 pt-2 text-xs uppercase text-muted-foreground"><%= section[:label] %></p>
-
-        <% section[:results].each do |result| %>
-          <%= link_to(
-            result[:href] || "#",
-            class: "flex items-center justify-between gap-3 px-3 py-1.5 text-sm text-foreground hover:bg-offset",
-            data: row_data_attributes(result)
-          ) do %>
-            <span><%= result[:label] %></span>
-            <% if result[:hint].present? %>
-              <span class="inline-flex items-center gap-0.5">
-                <% Array(result[:hint]).each do |key| %>
-                  <%= render(AtomicView::Components::KbdComponent.new) { key } %>
-                <% end %>
-              </span>
-            <% end %>
-          <% end %>
-        <% end %>
-      </div>
+      <%= section %>
     <% end %>
   </div>
 

data/lib/atomic_view/components/command_palette_component.rb

@@ -24,15 +24,31 @@ module AtomicView
     #
     # `SegmentedControlComponent` and `PaginationComponent` already use this
     # array-of-hashes shape for link collections, and it's the better fit
-    # here (over slots, `DropdownComponent`'s approach): every row needs the
-    # same two JS hooks -- a `[data-atomic-view--command-palette-target="row"]`
-    # marker and a `data-search-text` attribute -- generated consistently so
-    # the filter/keyboard-nav controller can rely on them, which a
-    # free-form slot would push onto every consumer to wire up by hand. The
-    # component stays agnostic about what a result *links to* (any `href`
-    # works -- a path, an external URL, a `turbo_frame`-aware route, etc.),
-    # which is the same kind of agnosticism `DropdownComponent` keeps about
-    # its menu content, just expressed as data instead of markup.
+    # here (over slots, `DropdownComponent`'s approach) as the *default*
+    # entry point: every row needs the same two JS hooks -- a
+    # `[data-atomic-view--command-palette-target="row"]` marker and a
+    # `data-search-text` attribute -- generated consistently so the
+    # filter/keyboard-nav controller can rely on them, which a free-form
+    # slot would push onto every consumer to wire up by hand. The component
+    # stays agnostic about what a result *links to* (any `href` works -- a
+    # path, an external URL, a `turbo_frame`-aware route, etc.), which is
+    # the same kind of agnosticism `DropdownComponent` keeps about its menu
+    # content, just expressed as data instead of markup.
+    #
+    # Under the hood, `sections:`/`results:` are sugar over real
+    # `SectionComponent`/`RowComponent` slots -- `with_section`/`with_row`
+    # accept the same keyword shape:
+    #
+    #   render(CommandPaletteComponent.new(id: "x")) do |palette|
+    #     palette.with_section(label: "Campers") do |section|
+    #       section.with_row(label: "Joel", href: "/campers/1")
+    #     end
+    #   end
+    #
+    # Because they're real components, `SectionComponent` and `RowComponent`
+    # are independently renderable outside the dialog -- e.g. from a Turbo
+    # Stream response that re-renders `results_id` while server-side
+    # filtering, without forking this markup. See those classes' docs.
     #
     # `result[:hint]`, when given, renders as a `<kbd>` -- e.g. a keyboard
     # shortcut like "G D" -- next to the result label.
@@ -43,15 +59,21 @@ module AtomicView
     # structured data.
     class CommandPaletteComponent < AtomicView::Component
       renders_one :footer
+      renders_many :sections, "AtomicView::Components::CommandPaletteComponent::SectionComponent"
 
-      attr_reader :id, :placeholder, :sections
+      attr_reader :id, :placeholder
 
-      def initialize(id:, sections: [], placeholder: "Search...", **options)
+      def self.results_id(id)
+        "#{id}-results"
+      end
+
+      def initialize(id:, sections: [], placeholder: "Search...", input_data: {}, **options)
         super()
         @id = id
-        @sections = sections
         @placeholder = placeholder
+        @input_data = input_data
         @options = options
+        sections.each { |section| with_section(**section) }
       end
 
       def html_options
@@ -62,26 +84,18 @@ module AtomicView
         class_names("mx-auto mt-[15vh] w-full max-w-lg overflow-hidden rounded-card bg-surface p-0 text-foreground shadow-panel backdrop:bg-backdrop", @options[:class])
       end
 
-      def data_attributes
-        (@options[:data] || {}).merge(controller: "atomic-view--command-palette")
+      def results_id
+        self.class.results_id(id)
       end
 
-      def input_data_attributes
-        {
-          "atomic-view--command-palette-target" => "input",
-          :action => "input->atomic-view--command-palette#filter keydown->atomic-view--command-palette#navigate"
-        }
-      end
-
-      def row_data_attributes(result)
-        {
-          "atomic-view--command-palette-target" => "row",
-          :search_text => search_text_for(result)
-        }
+      def data_attributes
+        controllers = ["atomic-view--command-palette", @options.dig(:data, :controller)].compact.join(" ")
+        (@options[:data] || {}).except(:controller).merge(controller: controllers)
       end
 
-      def search_text_for(result)
-        (result[:search_text] || result[:label]).to_s.downcase
+      def input_data_attributes
+        actions = ["input->atomic-view--command-palette#filter", "keydown->atomic-view--command-palette#navigate", @input_data[:action]].compact.join(" ")
+        {"atomic-view--command-palette-target" => "input", **@input_data.except(:action), "action" => actions}
       end
     end
   end

data/lib/atomic_view/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.1.15
 platform: ruby
 authors:
 - Joel Warrington
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-07 00:00:00.000000000 Z
+date: 2026-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -181,6 +181,10 @@ files:
 - lib/atomic_view/components/color_field_component.rb
 - lib/atomic_view/components/command_palette_component.html.erb
 - lib/atomic_view/components/command_palette_component.rb
+- lib/atomic_view/components/command_palette_component/row_component.html.erb
+- lib/atomic_view/components/command_palette_component/row_component.rb
+- lib/atomic_view/components/command_palette_component/section_component.html.erb
+- lib/atomic_view/components/command_palette_component/section_component.rb
 - lib/atomic_view/components/concerns/button_variants.rb
 - lib/atomic_view/components/concerns/field_chrome.rb
 - lib/atomic_view/components/concerns/section_support.rb