atomic_view 0.1.8 → 0.1.10

data/lib/atomic_view/components/button_component.rb

@@ -4,6 +4,8 @@ module AtomicView
   module Components
     # Button
     class ButtonComponent < ViewComponent::Form::ButtonComponent
+      include AtomicView::Components::Concerns::ButtonVariants
+
       attr_reader :label, :variant, :size
 
       def initialize(form, label_or_options = nil, options = nil)
@@ -28,29 +30,6 @@ module AtomicView
           content_tag(:button, label, @options)
         end
       end
-
-      private
-
-      def base_classes
-        "h-8 rounded-md px-3 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-      end
-
-      def variant_classes
-        case variant
-        when :primary
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
-        when :secondary
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
-        when :destructive
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20"
-        when :muted
-          "bg-transparent text-muted-foreground hover:bg-muted"
-        when :link
-          "text-primary underline-offset-4 hover:underline"
-        else
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
-        end
-      end
     end
   end
 end

data/lib/atomic_view/components/card_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class CardComponent < AtomicView::Component
+      attr_reader :hoverable
+
+      def initialize(hoverable: false, **options)
+        super()
+        @hoverable = hoverable
+        @options = options
+      end
+
+      def call
+        tag.div(**@options.except(:class), class: class_names(base_classes, hoverable_classes, @options[:class])) { content }
+      end
+
+      private
+
+      def base_classes
+        "bg-surface rounded-card border border-border p-2.5"
+      end
+
+      def hoverable_classes
+        "hover:shadow-soft transition-shadow" if hoverable
+      end
+    end
+  end
+end

data/lib/atomic_view/components/chip_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Chip
+    #
+    # A dismissible chip is automatically wired to `atomic-view--chip`, the
+    # Stimulus controller that handles removing it from the DOM on click
+    # (see `app/assets/javascripts/atomic_view/controllers/chip_controller.js`).
+    # Pass `dismiss_button_options` only to customize that behavior, e.g. to
+    # trigger a network request instead of (or in addition to) the default
+    # remove animation.
+    class ChipComponent < AtomicView::Component
+      attr_reader :dismissible, :dismiss_button_options, :leading
+
+      def initialize(dismissible: false, dismiss_button_options: {}, leading: nil, **options)
+        super()
+        @dismissible = dismissible
+        @dismiss_button_options = dismiss_button_options
+        @leading = leading
+        @options = options
+      end
+
+      def call
+        tag.span(**@options.except(:class, :data), class: class_names(base_classes, @options[:class]), data: data_attributes) do
+          safe_join([leading, content, dismiss_button].compact)
+        end
+      end
+
+      private
+
+      def base_classes
+        "inline-flex items-center gap-1 rounded-pill bg-offset px-2 py-0.5 text-xs font-medium text-foreground border border-border"
+      end
+
+      def data_attributes
+        attributes = (@options[:data] || {}).dup
+        return attributes unless dismissible
+
+        attributes[:controller] = [attributes[:controller], "atomic-view--chip"].compact.join(" ")
+        attributes
+      end
+
+      def dismiss_button
+        return unless dismissible
+
+        options = dismiss_button_options.except(:class, :data)
+        data = {action: "click->atomic-view--chip#remove"}.merge(dismiss_button_options[:data] || {})
+
+        tag.button(**options, type: "button", data: data, class: class_names("inline-flex items-center", dismiss_button_options[:class])) do
+          icon("x-mark", variant: :mini, options: {class: "size-3.5"}).to_s.html_safe
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/collection_check_boxes_component.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, class: "flex flex-col gap-2" do %>
+  <%= collection_check_boxes_tag %>
+<% end %>

data/lib/atomic_view/components/collection_check_boxes_component.rb

@@ -1,6 +1,31 @@
 module AtomicView
   module Components
     class CollectionCheckBoxesComponent < ViewComponent::Form::CollectionCheckBoxesComponent
+      def html_class
+        "peer border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+      end
+
+      def collection_check_boxes_tag
+        item_proc = element_proc || default_element_proc
+
+        ActionView::Helpers::Tags::CollectionCheckBoxes.new(
+          object_name,
+          method_name,
+          @view_context,
+          collection,
+          value_method,
+          text_method,
+          options,
+          html_options,
+          &content
+        ).render(&item_proc)
+      end
+
+      private
+
+      def default_element_proc
+        ->(builder) { @view_context.content_tag(:div, builder.checkbox + builder.label, class: "flex items-center gap-2") }
+      end
     end
   end
 end

data/lib/atomic_view/components/collection_radio_buttons_component.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, class: "flex flex-col gap-2" do %>
+  <%= collection_radio_buttons_tag %>
+<% end %>

data/lib/atomic_view/components/collection_radio_buttons_component.rb

@@ -1,6 +1,31 @@
 module AtomicView
   module Components
     class CollectionRadioButtonsComponent < ViewComponent::Form::CollectionRadioButtonsComponent
+      def html_class
+        "peer border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+      end
+
+      def collection_radio_buttons_tag
+        item_proc = element_proc || default_element_proc
+
+        ActionView::Helpers::Tags::CollectionRadioButtons.new(
+          object_name,
+          method_name,
+          @view_context,
+          collection,
+          value_method,
+          text_method,
+          options,
+          html_options,
+          &content
+        ).render(&item_proc)
+      end
+
+      private
+
+      def default_element_proc
+        ->(builder) { @view_context.content_tag(:div, builder.radio_button + builder.label, class: "flex items-center gap-2") }
+      end
     end
   end
 end

data/lib/atomic_view/components/collection_select_component.erb

@@ -0,0 +1,25 @@
+<%= content_tag :div, class: container_html_class do %>
+  <% if left_section? %>
+    <% if left_section_addon? %>
+      <span class="inline-flex items-center rounded-l-btn border border-r-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= left_section %></span>
+    <% elsif left_section_interaction? %>
+      <%= left_section %>
+    <% else %>
+      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+        <%= left_section %>
+      </div>
+    <% end %>
+  <% end %>
+  <%= select_tag %>
+  <% if right_section? %>
+    <% if right_section_addon? %>
+      <span class="inline-flex items-center rounded-r-btn border border-l-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= right_section %></span>
+    <% elsif right_section_interaction? %>
+      <%= right_section %>
+    <% else %>
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <%= right_section %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/collection_select_component.rb

@@ -1,14 +1,31 @@
 module AtomicView
   module Components
     class CollectionSelectComponent < ViewComponent::Form::CollectionSelectComponent
+      include AtomicView::Components::Concerns::FieldChrome
+      include AtomicView::Components::Concerns::SectionSupport
+
       def html_class
         class_names(
-          *%W[block w-full h-9 min-w-0 flex-1 rounded-md border-0 py-1 text-sm shadow-xs ring-1],
-          "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
-          "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
-          "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
+          field_chrome_classes(size: :sm),
+          "pl-10" => left_section? && !(left_section_addon? || left_section_interaction?),
+          "pr-10" => right_section? && !(right_section_addon? || right_section_interaction?),
+          "shadow-none rounded-none rounded-r-btn ring-inset" => left_section_addon? || left_section_interaction?,
+          "shadow-none rounded-none rounded-l-btn ring-inset" => right_section_addon? || right_section_interaction?
         )
       end
+
+      def select_tag
+        ActionView::Helpers::Tags::CollectionSelect.new(
+          object_name,
+          method_name,
+          @view_context,
+          collection,
+          value_method,
+          text_method,
+          options,
+          html_options
+        ).render
+      end
     end
   end
 end

data/lib/atomic_view/components/color_field_component.rb

@@ -1,6 +1,9 @@
 module AtomicView
   module Components
     class ColorFieldComponent < ViewComponent::Form::ColorFieldComponent
+      def html_class
+        "rounded-well h-8 w-8 border border-border p-1 cursor-pointer"
+      end
     end
   end
 end

data/lib/atomic_view/components/command_palette_component.erb

@@ -0,0 +1,41 @@
+<%= tag.dialog(**html_options, id: id, class: html_class, data: data_attributes) do %>
+  <%= tag.input(
+    type: "search",
+    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",
+    data: input_data_attributes
+  ) %>
+
+  <div 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>
+    <% end %>
+  </div>
+
+  <% if footer? %>
+    <div class="border-t border-border bg-offset px-3 py-2 text-xs text-muted-foreground">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/command_palette_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # CommandPalette
+    #
+    # A `Cmd/Ctrl+K` search dialog built on the native `<dialog>` element
+    # (same structural trick as `ModalComponent` -- see that component for
+    # the rationale -- but wired to its own `atomic-view--command-palette`
+    # controller rather than sharing Modal's, so the two stay independently
+    # simple with no inter-component dependency). `<dialog>` gets
+    # focus-trap, `::backdrop` styling, and Esc-to-close for free; the
+    # controller layers on the global open shortcut, client-side
+    # filter-as-you-type, and arrow-key navigation.
+    #
+    # Results are supplied as plain data rather than slots:
+    #
+    #   sections: [
+    #     { label: "Pages", results: [
+    #       { label: "Dashboard", href: "/dashboard", hint: "G D" },
+    #       { label: "Settings", href: "/settings" }
+    #     ] }
+    #   ]
+    #
+    # `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.
+    #
+    # `result[:hint]`, when given, renders as a `<kbd>` -- e.g. a keyboard
+    # shortcut like "G D" -- next to the result label.
+    #
+    # `footer` is a slot for a bottom hint bar documenting shortcuts/facets
+    # (e.g. "Type # to access projects") -- free-form content, since it's
+    # typically a sentence with `KbdComponent`s mixed in rather than
+    # structured data.
+    class CommandPaletteComponent < AtomicView::Component
+      renders_one :footer
+
+      attr_reader :id, :placeholder, :sections
+
+      def initialize(id:, sections: [], placeholder: "Search...", **options)
+        super()
+        @id = id
+        @sections = sections
+        @placeholder = placeholder
+        @options = options
+      end
+
+      def html_options
+        @options.except(:class, :data)
+      end
+
+      def html_class
+        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")
+      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)
+        }
+      end
+
+      def search_text_for(result)
+        (result[:search_text] || result[:label]).to_s.downcase
+      end
+    end
+  end
+end

data/lib/atomic_view/components/concerns/button_variants.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    module Concerns
+      module ButtonVariants
+        private
+
+        def base_classes
+          "h-7 rounded-btn px-2.5 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+        end
+
+        def variant_classes
+          case variant
+          when :primary
+            "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+          when :secondary
+            "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
+          when :destructive
+            "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20"
+          when :muted
+            "bg-transparent text-muted-foreground hover:bg-muted"
+          when :link
+            "text-primary underline-offset-4 hover:underline"
+          when :outline
+            "bg-surface text-foreground border-[1.5px] border-border hover:bg-offset"
+          else
+            "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/concerns/field_chrome.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    module Concerns
+      module FieldChrome
+        private
+
+        def field_chrome_classes(size: :base)
+          class_names(
+            "block w-full appearance-none h-8 min-w-0 z-10 flex-1 rounded-btn border-0 py-1 shadow-xs ring-1",
+            (size == :sm) ? "text-sm" : "text-base",
+            "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
+            "bg-transparent dark:bg-white/5 text-foreground ring-ring/10 dark:ring-white/10 placeholder:text-placeholder focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
+            "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
+          )
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/concerns/section_support.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    module Concerns
+      module SectionSupport
+        SECTION_OPTION_KEYS = %i[
+          container_class
+          left_section
+          left_section_as_addon
+          left_section_as_interaction
+          right_section
+          right_section_as_addon
+          right_section_as_interaction
+        ].freeze
+
+        # The options hash minus the section/container keys SectionSupport
+        # itself consumes -- pass this (not the raw `options`) to whatever
+        # renders the actual `<input>`/`<select>` tag, so these keys don't
+        # leak through as literal (invalid) HTML attributes.
+        def options_without_sections
+          options.except(*SECTION_OPTION_KEYS)
+        end
+
+        def container_html_class
+          class_names(
+            "relative rounded-btn shadow-xs",
+            {"flex" => left_section_addon? || left_section_interaction? || right_section_addon? || right_section_interaction?},
+            options[:container_class]
+          )
+        end
+
+        def left_section
+          options[:left_section]
+        end
+
+        def left_section?
+          left_section.present?
+        end
+
+        def left_section_addon?
+          options[:left_section_as_addon].present?
+        end
+
+        def left_section_interaction?
+          options[:left_section_as_interaction].present?
+        end
+
+        def right_section
+          options[:right_section] || method_errors? && raw(icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-destructive"}))
+        end
+
+        def right_section?
+          right_section.present?
+        end
+
+        def right_section_addon?
+          options[:right_section_as_addon].present?
+        end
+
+        def right_section_interaction?
+          options[:right_section_as_interaction].present?
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/date_field_component.rb

@@ -1,16 +1,10 @@
 module AtomicView
   module Components
     class DateFieldComponent < ViewComponent::Form::DateFieldComponent
+      include AtomicView::Components::Concerns::FieldChrome
+
       def html_class
-        class_names(
-          class_names(
-            *%W[block w-full h-9 min-w-0 flex-1 rounded-sm border-0 py-1 text-sm shadow-xs ring-1],
-            "disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:ring-disabled-ring",
-            "bg-transparent dark:bg-white/5 text-primary ring-ring/10 dark:ring-white/10 placeholder:text-placeholder dark:text-white focus:ring-focus-ring focus:border-ring/20 dark:focus:ring-focus-ring",
-            "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
-          ),
-          options[:class]
-        )
+        class_names(field_chrome_classes(size: :sm), options[:class])
       end
     end
   end

data/lib/atomic_view/components/date_select_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class DateSelectComponent < ViewComponent::Form::DateSelectComponent
+      include AtomicView::Components::Concerns::FieldChrome
+
+      def html_class
+        field_chrome_classes(size: :sm)
+      end
+
+      def call
+        content_tag(:div, super, class: "flex gap-2")
+      end
     end
   end
 end

data/lib/atomic_view/components/datetime_local_field_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class DatetimeLocalFieldComponent < ViewComponent::Form::DatetimeLocalFieldComponent
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::DatetimeLocalField
+        )
+      end
     end
   end
 end

data/lib/atomic_view/components/datetime_select_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class DatetimeSelectComponent < ViewComponent::Form::DatetimeSelectComponent
+      include AtomicView::Components::Concerns::FieldChrome
+
+      def html_class
+        field_chrome_classes(size: :sm)
+      end
+
+      def call
+        content_tag(:div, super, class: "flex gap-2")
+      end
     end
   end
 end

data/lib/atomic_view/components/dropdown_component.erb

@@ -0,0 +1,11 @@
+<%= tag.div(**html_options, class: html_class, data: data_attributes) do %>
+  <%= tag.div(class: "inline-block", data: trigger_data_attributes) do %>
+    <%= trigger %>
+  <% end %>
+
+  <% if menu? %>
+    <%= tag.div(class: menu_class, data: menu_data_attributes) do %>
+      <%= menu %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/dropdown_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Dropdown
+    #
+    # A generic trigger + floating menu, positioned by `@floating-ui/dom` and
+    # wired to `atomic-view--dropdown` (see
+    # `app/assets/javascripts/atomic_view/controllers/dropdown_controller.js`).
+    # The controller handles opening/closing, edge-aware positioning
+    # (flip/shift so the menu stays on-screen near a viewport edge), closing
+    # on an outside click or Esc, and keeping the menu anchored to the
+    # trigger while the page scrolls or resizes.
+    #
+    # This component only provides the trigger/menu structure and wiring --
+    # it has no opinion about what's inside either slot. Both the
+    # org/park-switcher menu (grouped sections with uppercase labels,
+    # dividers, a checkmark on the current selection) and the notification
+    # bell flyout (a list of notification rows) are the *same*
+    # `DropdownComponent` with different slot content -- compose that markup
+    # with existing primitives (e.g. `Badge`/`Avatar`) inside the `menu`
+    # slot rather than teaching this component about either use case.
+    class DropdownComponent < AtomicView::Component
+      renders_one :trigger
+      renders_one :menu
+
+      def initialize(**options)
+        super()
+        @options = options
+      end
+
+      def html_options
+        @options.except(:class, :data)
+      end
+
+      def html_class
+        class_names("relative inline-block", @options[:class])
+      end
+
+      def data_attributes
+        (@options[:data] || {}).merge(controller: "atomic-view--dropdown")
+      end
+
+      def trigger_data_attributes
+        {"atomic-view--dropdown-target" => "trigger", :action => "click->atomic-view--dropdown#toggle"}
+      end
+
+      def menu_data_attributes
+        {"atomic-view--dropdown-target" => "menu"}
+      end
+
+      def menu_class
+        "hidden absolute z-50 bg-surface border border-border rounded-card shadow-panel"
+      end
+    end
+  end
+end