atomic_view 0.1.8 → 0.1.10

data/lib/atomic_view/components/empty_state_component.erb

@@ -0,0 +1,10 @@
+<%= tag.div(**@options.except(:class), class: html_class) do %>
+  <%= icon if icon? %>
+  <p class="font-body font-semibold text-base"><%= title %></p>
+  <% if description.present? %>
+    <p class="text-muted-foreground text-sm"><%= description %></p>
+  <% end %>
+  <% if content? %>
+    <%= content %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/empty_state_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class EmptyStateComponent < AtomicView::Component
+      renders_one :icon
+
+      attr_reader :title, :description
+
+      def initialize(title:, description: nil, **options)
+        super()
+        @title = title
+        @description = description
+        @options = options
+      end
+
+      private
+
+      def html_class
+        class_names(base_classes, @options[:class])
+      end
+
+      def base_classes
+        "flex flex-col items-center text-center gap-2 p-6"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/field_component.erb

@@ -1,7 +1,7 @@
 <%= content_tag :div, class: container_html_class do %>
   <% if left_section? %>
     <% if left_section_addon? %>
-      <span class="inline-flex items-center rounded-l-lg bg-transparent dark:bg-white/5 ring-1 ring-ring/10 dark:ring-white/10 px-3 text-primary dark:text-white sm:text-sm"><%= left_section %></span>
+      <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 %>
@@ -10,10 +10,10 @@
       </div>
     <% end %>
   <% end %>
-  <%= tag_klass.new(@object_name, @method_name, @view_context, @options).render %>
+  <%= tag_klass.new(@object_name, @method_name, @view_context, options_without_sections).render %>
   <% if right_section? %>
     <% if right_section_addon? %>
-      <span class="inline-flex items-center rounded-r-lg bg-transparent dark:bg-white/5 ring-1 ring-ring/10 dark:ring-white/10 px-3 text-primary dark:text-white sm:text-sm"><%= right_section %></span>
+      <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 %>

data/lib/atomic_view/components/field_component.rb

@@ -1,6 +1,9 @@
 module AtomicView
   module Components
     class FieldComponent < ViewComponent::Form::FieldComponent
+      include AtomicView::Components::Concerns::FieldChrome
+      include AtomicView::Components::Concerns::SectionSupport
+
       attr_reader :tag_klass
 
       def initialize(form, object_name, method_name, options = {}, tag_klass = ActionView::Helpers::Tags::TextField)
@@ -10,56 +13,13 @@ module AtomicView
 
       def html_class
         class_names(
-          "block w-full appearance-none h-9 min-w-0 z-10 flex-1 rounded-lg border-0 py-1 text-base 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",
+          field_chrome_classes,
           "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-lg" => left_section_addon? || left_section_interaction?,
-          "shadow-none rounded-none rounded-l-lg" => right_section_addon? || right_section_interaction?,
-          "text-error ring-error-ring placeholder:text-error-placeholder focus:ring-error-focus-ring" => method_errors?
-        )
-      end
-
-      def container_html_class
-        class_names(
-          "relative rounded-lg shadow-xs",
-          {"flex" => left_section_addon? || left_section_interaction? || right_section_addon? || right_section_interaction?},
-          options[:container_class]
+          "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 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

data/lib/atomic_view/components/grouped_collection_select_component.rb

@@ -1,6 +1,11 @@
 module AtomicView
   module Components
     class GroupedCollectionSelectComponent < ViewComponent::Form::GroupedCollectionSelectComponent
+      include AtomicView::Components::Concerns::FieldChrome
+
+      def html_class
+        field_chrome_classes(size: :sm)
+      end
     end
   end
 end

data/lib/atomic_view/components/kbd_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Kbd
+    #
+    # A single keyboard "keycap" token -- a modifier symbol (⌘), a letter
+    # (K), or a named key (Esc). It's a generic, content-based primitive
+    # (like BadgeComponent/ChipComponent) rather than something that knows
+    # about multi-key shortcuts -- to show a full chord, render several
+    # inside a flex container with a small gap, adding a `+` between them
+    # if the convention calls for it (see CommandPaletteComponent for an
+    # example, or the preview's "Composing a shortcut" examples).
+    class KbdComponent < AtomicView::Component
+      def initialize(**options)
+        super()
+        @options = options
+      end
+
+      def call
+        tag.kbd(**@options.except(:class), class: class_names(base_classes, @options[:class])) { content }
+      end
+
+      private
+
+      def base_classes
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-well border border-border bg-offset px-1 font-mono text-xs text-muted-foreground"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/label_component.rb

@@ -1,8 +1,23 @@
 module AtomicView
   module Components
     class LabelComponent < ViewComponent::Form::LabelComponent
+      attr_reader :variant
+
+      def initialize(form, object_name, method_name, content_or_options = nil, options = nil)
+        super
+
+        @variant = @options.delete(:variant) || :default
+      end
+
       def html_class
-        "block text-primary text-sm font-medium leading-6 mb-2"
+        case variant
+        when :caption
+          "block text-muted-foreground text-xs font-bold uppercase tracking-wide mb-1"
+        when :inline
+          "text-foreground text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+        else
+          "block text-foreground text-sm font-medium leading-6 mb-2"
+        end
       end
     end
   end

data/lib/atomic_view/components/modal_component.erb

@@ -0,0 +1,24 @@
+<%= tag.dialog(**html_options, id: id, class: html_class, data: data_attributes) do %>
+  <div class="p-4">
+    <% if title.present? || danger %>
+      <div class="flex items-center gap-2">
+        <% if danger %>
+          <%= danger_icon %>
+        <% end %>
+        <% if title.present? %>
+          <h2 class="font-body text-lg font-semibold text-foreground"><%= title %></h2>
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="mt-3 text-sm text-muted-foreground">
+      <%= content %>
+    </div>
+
+    <% if footer? %>
+      <div class="mt-4 flex justify-end gap-2">
+        <%= footer %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/lib/atomic_view/components/modal_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Modal
+    #
+    # A confirmation dialog / modal built on the native `<dialog>` element,
+    # wired to `atomic-view--modal` (see
+    # `app/assets/javascripts/atomic_view/controllers/modal_controller.js`).
+    # Using `<dialog>` gets focus-trap, `::backdrop` styling, and Esc-to-close
+    # for free -- the controller only adds `open`/`close`, plus closing when
+    # the backdrop itself (not the content box) is clicked.
+    #
+    # Body content is the component's default slot (the block passed to
+    # `render`). The footer -- typically a Cancel/Confirm button pair -- is a
+    # `renders_one :footer` slot, since ViewComponent's slot API is the
+    # simplest correct way to give this component two independent content
+    # areas without inventing a bespoke keyword-based content API.
+    #
+    # Opening the dialog is the host app's concern: either call
+    # `document.getElementById("<id>").showModal()` directly, or wire a
+    # trigger element with `data-action="click->atomic-view--modal#open"`
+    # (Stimulus resolves the action against the nearest matching controller,
+    # which works from inside the dialog's own footer, e.g. a "Cancel"
+    # button using `#close`, but not from an unrelated part of the page --
+    # see the preview for both patterns).
+    class ModalComponent < AtomicView::Component
+      renders_one :footer
+
+      attr_reader :id, :title, :danger
+
+      def initialize(id:, title: nil, danger: false, **options)
+        super()
+        @id = id
+        @title = title
+        @danger = danger
+        @options = options
+      end
+
+      def html_options
+        @options.except(:class, :data)
+      end
+
+      def html_class
+        class_names("m-auto bg-surface text-foreground rounded-card shadow-panel p-0 backdrop:bg-backdrop", @options[:class])
+      end
+
+      def data_attributes
+        (@options[:data] || {}).merge(controller: "atomic-view--modal")
+      end
+
+      def danger_icon
+        icon("exclamation-triangle", options: {class: "size-6 text-error"}).to_s.html_safe
+      end
+    end
+  end
+end

data/lib/atomic_view/components/month_field_component.rb

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

data/lib/atomic_view/components/nav_item_component.erb

@@ -0,0 +1,6 @@
+<%= 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

@@ -0,0 +1,36 @@
+# 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

data/lib/atomic_view/components/pagination_component.erb

@@ -0,0 +1,19 @@
+<nav class="flex items-center gap-1" aria-label="Pagination">
+  <% if first_page? %>
+    <span class="<%= disabled_control_classes %>" aria-disabled="true">Previous</span>
+  <% else %>
+    <%= link_to "Previous", path_for(current_page - 1), class: control_classes %>
+  <% end %>
+
+  <div class="flex items-center gap-1">
+    <% page_numbers.each do |page| %>
+      <%= link_to page, path_for(page), **page_link_attributes(page) %>
+    <% end %>
+  </div>
+
+  <% if last_page? %>
+    <span class="<%= disabled_control_classes %>" aria-disabled="true">Next</span>
+  <% else %>
+    <%= link_to "Next", path_for(current_page + 1), class: control_classes %>
+  <% end %>
+</nav>

data/lib/atomic_view/components/pagination_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Pagination
+    #
+    # Plain <a href> pagination -- no JS/Turbo/AJAX. `path_for_page` is a
+    # Proc/lambda supplied by the consumer (e.g. ->(page) { parks_path(page: page) })
+    # so this component stays router/pagination-gem agnostic.
+    #
+    # The prev/next control on a boundary (page 1's "Previous", the last
+    # page's "Next") renders as a <span> rather than a link, since there is
+    # no page to navigate to and a "disabled" <a href> would still be
+    # clickable/focusable in most browsers -- a plain non-interactive span is
+    # the simpler, unambiguous option.
+    class PaginationComponent < AtomicView::Component
+      include AtomicView::Components::Concerns::ButtonVariants
+
+      attr_reader :current_page, :total_pages, :path_for_page
+
+      def initialize(current_page:, total_pages:, path_for_page:)
+        super()
+        @current_page = current_page
+        @total_pages = total_pages
+        @path_for_page = path_for_page
+      end
+
+      def page_numbers
+        (1..total_pages).to_a
+      end
+
+      def first_page?
+        current_page <= 1
+      end
+
+      def last_page?
+        current_page >= total_pages
+      end
+
+      def path_for(page)
+        path_for_page.call(page)
+      end
+
+      def control_classes
+        class_names(base_classes, variant_classes)
+      end
+
+      def disabled_control_classes
+        class_names(control_classes, "pointer-events-none opacity-50")
+      end
+
+      def page_link_classes(page)
+        class_names(page_base_classes, (page == current_page) ? active_page_classes : inactive_page_classes)
+      end
+
+      def page_link_attributes(page)
+        attributes = {class: page_link_classes(page)}
+        attributes[:"aria-current"] = "page" if page == current_page
+        attributes
+      end
+
+      private
+
+      def variant
+        :outline
+      end
+
+      def page_base_classes
+        "flex size-7 items-center justify-center rounded-btn text-sm font-medium"
+      end
+
+      def active_page_classes
+        "bg-secondary text-secondary-foreground"
+      end
+
+      def inactive_page_classes
+        "text-muted-foreground hover:bg-offset"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/radio_button_component.rb

@@ -1,6 +1,9 @@
 module AtomicView
   module Components
     class RadioButtonComponent < ViewComponent::Form::RadioButtonComponent
+      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
     end
   end
 end

data/lib/atomic_view/components/range_field_component.rb

@@ -1,6 +1,9 @@
 module AtomicView
   module Components
     class RangeFieldComponent < ViewComponent::Form::RangeFieldComponent
+      def html_class
+        "accent-primary h-2 rounded-pill bg-offset"
+      end
     end
   end
 end

data/lib/atomic_view/components/segmented_control_component.erb

@@ -0,0 +1,14 @@
+<%= tag.div(**@html_options.except(:class), class: track_class) do %>
+  <% if link_mode? %>
+    <% options.each do |option| %>
+      <%= link_to option[:label], option[:href], **link_attributes(option) %>
+    <% end %>
+  <% else %>
+    <% options.each do |option| %>
+      <%= tag.span(class: "contents") do %>
+        <%= tag.input(**radio_attributes(option)) %>
+        <%= tag.label(option[:label], for: radio_id(option), class: label_classes(option)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/segmented_control_component.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # SegmentedControl
+    #
+    # Renders a "pill track" of mutually-exclusive segments. Which of two
+    # modes is used is inferred from the shape of `options`:
+    #
+    # - Link mode: options are {label:, href:} hashes, rendered as <a> tags.
+    #   Meant for plain filter tabs where the "selected" state is just the
+    #   current request's query string, not a form value (e.g. tabs above a
+    #   table driven by `?filter=`). `selected` is compared against each
+    #   option's `label:` rather than its `href:` -- the consumer already
+    #   has the current filter's display value in hand (e.g.
+    #   `params[:filter]`), so matching on `label:` avoids making every
+    #   caller build a comparable canonical href just to find the active
+    #   tab.
+    #
+    # - Radio mode: options are {label:, value:} hashes, rendered as native
+    #   <input type="radio"> + <label> pairs so the control can participate
+    #   in a real form submission. `name:` is required in this mode and
+    #   becomes every radio's `name` attribute. `selected` is compared
+    #   against each option's `value:`. The checked state is styled purely
+    #   with CSS: each radio gets a `peer` marker class (hidden via
+    #   `sr-only`) and its label uses `peer-checked:` utilities -- the same
+    #   technique `check_box_component.rb` and `radio_button_component.rb`
+    #   use for their checked states, just applied to a sibling label
+    #   instead of the input itself, since the checked state lives on the
+    #   input.
+    #
+    # Both modes share the same visual: an inline-flex, rounded, muted
+    # track (`bg-offset`) with the active/checked segment raised via
+    # `bg-surface` + `shadow-sm`.
+    class SegmentedControlComponent < AtomicView::Component
+      attr_reader :options, :selected, :name
+
+      def initialize(options:, selected:, name: nil, **html_options)
+        super()
+        @options = options
+        @selected = selected
+        @name = name
+        @html_options = html_options
+      end
+
+      def link_mode?
+        options.first&.key?(:href)
+      end
+
+      def active?(option)
+        link_mode? ? (option[:label] == selected) : (option[:value] == selected)
+      end
+
+      def track_class
+        class_names("inline-flex items-center gap-1 rounded-btn bg-offset p-1", @html_options[:class])
+      end
+
+      def link_attributes(option)
+        attributes = {class: segment_classes(option)}
+        attributes[:"aria-current"] = "true" if active?(option)
+        attributes
+      end
+
+      def radio_id(option)
+        "#{name}_#{option[:value]}"
+      end
+
+      def radio_attributes(option)
+        {
+          type: "radio",
+          name: name,
+          value: option[:value],
+          id: radio_id(option),
+          checked: active?(option),
+          class: "peer sr-only"
+        }
+      end
+
+      def label_classes(_option)
+        class_names(segment_base_classes, "cursor-pointer peer-checked:bg-surface peer-checked:text-foreground peer-checked:shadow-sm", inactive_classes)
+      end
+
+      private
+
+      def segment_classes(option)
+        class_names(segment_base_classes, active?(option) ? active_classes : inactive_classes)
+      end
+
+      def segment_base_classes
+        "rounded-btn px-2.5 py-1 text-sm font-medium transition-colors"
+      end
+
+      def active_classes
+        "bg-surface text-foreground shadow-sm"
+      end
+
+      def inactive_classes
+        "text-muted-foreground"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/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/select_component.rb

@@ -1,17 +1,31 @@
 module AtomicView
   module Components
     class SelectComponent < ViewComponent::Form::SelectComponent
+      include AtomicView::Components::Concerns::FieldChrome
+      include AtomicView::Components::Concerns::SectionSupport
+
       def html_class
         class_names(
-          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?
-          ),
-          options[:class]
+          field_chrome_classes(size: :sm),
+          options[:class],
+          "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::Select.new(
+          object_name,
+          method_name,
+          @view_context,
+          choices,
+          options,
+          html_options,
+          &content
+        ).render
+      end
     end
   end
 end