atomic_view 0.1.9 → 0.1.11

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

data/lib/atomic_view/components/submit_component.rb

@@ -1,6 +1,8 @@
 module AtomicView
   module Components
     class SubmitComponent < ViewComponent::Form::SubmitComponent
+      include AtomicView::Components::Concerns::ButtonVariants
+
       attr_reader :variant
 
       def initialize(form, value_or_options = nil, options = nil)
@@ -18,29 +20,6 @@ module AtomicView
       def html_class
         class_names(base_classes, variant_classes, @options[:class])
       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/table_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Table
+    #
+    # A thin styling wrapper around <table>. Consistent with the rest of the
+    # gem, this does not own row/column iteration -- the consuming view
+    # builds its own <thead>/<tbody> markup and calls the yielded component's
+    # #head_class / #row_class helpers to pick up the shared styling.
+    #
+    #   <%= render AtomicView::Components::TableComponent.new do |table| %>
+    #     <thead>
+    #       <tr class="<%= table.head_class %>">
+    #         <th class="px-3 py-2">Name</th>
+    #       </tr>
+    #     </thead>
+    #     <tbody>
+    #       <tr class="<%= table.row_class %>">
+    #         <td class="px-3 py-2">Riverbend</td>
+    #       </tr>
+    #     </tbody>
+    #   <% end %>
+    class TableComponent < AtomicView::Component
+      HEAD_ROW_CLASSES = "text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b border-border"
+      BODY_ROW_CLASSES = "border-b border-border hover:bg-offset"
+
+      def initialize(**options)
+        super()
+        @options = options
+      end
+
+      def call
+        tag.table(**@options.except(:class), class: class_names(base_classes, @options[:class])) { content }
+      end
+
+      def head_class(**options)
+        class_names(HEAD_ROW_CLASSES, options[:class])
+      end
+
+      def row_class(**options)
+        class_names(BODY_ROW_CLASSES, options[:class])
+      end
+
+      private
+
+      def base_classes
+        "w-full text-sm"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/tabs_component.erb

@@ -0,0 +1,5 @@
+<%= tag.div(**@html_options.except(:class), class: container_class) do %>
+  <% options.each do |option| %>
+    <%= link_to option[:label], option[:href], **tab_attributes(option) %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/tabs_component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Tabs
+    #
+    # Renders an underlined tab bar for navigating between a record's
+    # sub-pages (e.g. Overview/Invoices/Activity). Like
+    # SegmentedControlComponent's link mode, `options` are {label:, href:}
+    # hashes and `selected` is compared against each option's `label:` --
+    # the consumer already has the current tab's display value in hand
+    # (e.g. from the request path), so matching on `label:` avoids making
+    # every caller build a comparable canonical href.
+    #
+    # Unlike SegmentedControlComponent's pill track (mutually-exclusive
+    # filter chips raised on a muted background), tabs read as page-level
+    # navigation -- a plain row of links with a colored underline on the
+    # active one, sharing a bottom divider with the rest of the row.
+    #
+    # Pass `turbo_frame:` to swap tabs without a full page load: every tab
+    # link gets a matching `data-turbo-frame`. Wrap *both* this component
+    # and the content below it in the same `<turbo-frame id="...">` --
+    # not just the content -- so the newly-active tab's underline arrives
+    # in the same swap as the new content, rather than the frame updating
+    # while the tab bar outside it still shows the old tab active. The
+    # component doesn't render that frame itself -- it stays agnostic
+    # about the content underneath, the same way it doesn't know
+    # what each `href` points to.
+    class TabsComponent < AtomicView::Component
+      attr_reader :options, :selected, :turbo_frame
+
+      def initialize(options:, selected:, turbo_frame: nil, **html_options)
+        super()
+        @options = options
+        @selected = selected
+        @turbo_frame = turbo_frame
+        @html_options = html_options
+      end
+
+      def active?(option)
+        option[:label] == selected
+      end
+
+      def container_class
+        class_names("flex gap-6 border-b border-border", @html_options[:class])
+      end
+
+      def tab_attributes(option)
+        attributes = {class: tab_classes(option)}
+        attributes[:"aria-current"] = "true" if active?(option)
+        attributes[:data] = {turbo_frame: turbo_frame} if turbo_frame.present?
+        attributes
+      end
+
+      private
+
+      def tab_classes(option)
+        class_names(base_classes, active?(option) ? active_classes : inactive_classes)
+      end
+
+      def base_classes
+        "-mb-px border-b-2 pb-3 text-sm font-semibold"
+      end
+
+      def active_classes
+        "border-accent text-accent"
+      end
+
+      def inactive_classes
+        "border-transparent text-muted-foreground hover:text-foreground"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/text_area_component.rb

@@ -1,6 +1,11 @@
 module AtomicView
   module Components
     class TextAreaComponent < ViewComponent::Form::TextAreaComponent
+      include AtomicView::Components::Concerns::FieldChrome
+
+      def html_class
+        class_names(field_chrome_classes, "h-auto min-h-24 resize-y")
+      end
     end
   end
 end

data/lib/atomic_view/components/theme_toggle_component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # ThemeToggle
+    #
+    # A button that flips the `.dark` class on `<html>` -- the convention
+    # engine.css itself documents (see its "Explicit .dark class toggle
+    # only" comment) -- between light and dark, persisting the choice to
+    # `localStorage` and falling back to the OS preference
+    # (`prefers-color-scheme`) the first time a visitor arrives with no
+    # stored choice.
+    #
+    # The sun/moon crossfade is pure CSS (`dark:` utility classes, which
+    # resolve off that same `.dark` class per engine.css's
+    # `@custom-variant dark`) -- the `atomic-view--theme-toggle` Stimulus
+    # controller only toggles the class and persists it, no host app JS
+    # required, same as every other atomic_view controller (auto-pinned
+    # per config/importmap.rb).
+    #
+    # Applying `.dark` before first paint (to avoid a flash of the wrong
+    # theme) is the host app's concern -- a small inline script in
+    # `<head>`, e.g.:
+    #
+    #   <script>
+    #     try {
+    #       var t = localStorage.getItem("atomic-view-theme");
+    #       var dark = t ? t === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+    #       if (dark) document.documentElement.classList.add("dark");
+    #     } catch (e) {}
+    #   </script>
+    #
+    # This is the same FOUC-prevention step any dark-mode toggle needs,
+    # since Stimulus only connects after the DOM has already painted once.
+    class ThemeToggleComponent < AtomicView::Component
+      def initialize(**options)
+        super()
+        @options = options
+      end
+
+      def call
+        tag.button(
+          **@options.except(:class),
+          type: "button",
+          class: class_names(base_classes, @options[:class]),
+          data: {controller: "atomic-view--theme-toggle", action: "click->atomic-view--theme-toggle#toggle"},
+          aria: {label: "Toggle theme"}
+        ) { safe_join([sun_icon, moon_icon]) }
+      end
+
+      private
+
+      def base_classes
+        "relative inline-flex size-8 items-center justify-center rounded-full text-muted-foreground hover:bg-offset hover:text-foreground"
+      end
+
+      def sun_icon
+        icon("sun", options: {class: sun_classes}).to_s.html_safe
+      end
+
+      def moon_icon
+        icon("moon", options: {class: moon_classes}).to_s.html_safe
+      end
+
+      def sun_classes
+        "absolute size-4 rotate-0 scale-100 opacity-100 transition-all duration-300 dark:rotate-90 dark:scale-50 dark:opacity-0"
+      end
+
+      def moon_classes
+        "absolute size-4 -rotate-90 scale-50 opacity-0 transition-all duration-300 dark:rotate-0 dark:scale-100 dark:opacity-100"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/time_select_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class TimeSelectComponent < ViewComponent::Form::TimeSelectComponent
+      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/time_zone_select_component.rb

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

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

@@ -0,0 +1,10 @@
+<%= marker %>
+<div class="min-w-0 flex-1 pt-0.5">
+  <div class="text-sm text-foreground">
+    <%= meta %>
+    <% if time.present? %>
+      <%= local_time_ago(time, class: "ml-2 text-xs text-muted-foreground") %>
+    <% end %>
+  </div>
+  <%= content if content? %>
+</div>

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class TimelineComponent
+      # A single Timeline row: a marker (icon or avatar) plus a meta line
+      # (optional actor + description + time) and optional free-form block
+      # content. Rendered via `TimelineComponent#with_item` -- see
+      # `TimelineComponent`'s class docs.
+      #
+      # `time:` takes a real `Time`/`Date`/`DateTime`/
+      # `ActiveSupport::TimeWithZone` -- not a preformatted string -- and is
+      # rendered with the `local_time` gem's `local_time_ago` helper (see
+      # `AtomicView::Component`), which degrades gracefully to an absolute
+      # UTC timestamp server-side and upgrades to a relative "3 hours ago"
+      # (aging into a full date over time) client-side once the host app
+      # loads local_time's JS -- see `config/importmap.rb`'s "local-time"
+      # pin comment for that setup.
+      class ItemComponent < AtomicView::Component
+        attr_reader :icon_name, :avatar, :actor, :description, :time
+
+        def initialize(description:, icon: nil, avatar: nil, actor: nil, time: nil)
+          super()
+          @icon_name = icon
+          @avatar = avatar
+          @actor = actor
+          @description = description
+          @time = time
+        end
+
+        def marker
+          if avatar.present?
+            render(AvatarComponent.new(initials: avatar, class: "size-7 shrink-0 text-xs"))
+          else
+            tag.span(class: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground") do
+              icon(icon_name, options: {class: "size-3.5"}).to_s.html_safe
+            end
+          end
+        end
+
+        def meta
+          parts = []
+          parts << tag.strong(actor, class: "font-semibold") if actor.present?
+          parts << description
+          safe_join(parts, " ")
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/timeline_component.erb

@@ -0,0 +1,10 @@
+<%= tag.div(**@options.except(:class), class: container_class) do %>
+  <% items.each_with_index do |item, index| %>
+    <div class="<%= item_wrapper_class(index) %>">
+      <% if render_line?(index) %>
+        <div class="absolute left-[13px] top-7 -bottom-6 w-px bg-border"></div>
+      <% end %>
+      <%= item %>
+    </div>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/timeline_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Timeline
+    #
+    # A vertical audit/activity feed -- e.g. a record's created/changed/
+    # commented history. Each row is a `with_item` slot rather than a plain
+    # data hash: every item needs the same marker + meta-line + connecting-
+    # line layout generated consistently, and slots let each item take
+    # strongly-typed keyword arguments (with real defaults) plus optional
+    # free-form block content, instead of a loose symbol-keyed hash.
+    #
+    #   render(TimelineComponent.new) do |timeline|
+    #     timeline.with_item(icon: "flag", actor: "Karen Will", description: "created this park", time: 1.year.ago)
+    #
+    #     timeline.with_item(avatar: "KW", actor: "Karen Will", description: "commented", time: 3.hours.ago) do
+    #       tag.div("Following up...", class: "mt-2 rounded-btn bg-offset p-2 text-sm")
+    #     end
+    #   end
+    #
+    # Each item needs exactly one marker: `icon:` (a Heroicon name, shown in
+    # a plain circular badge) or `avatar:` (initials, rendered via
+    # `AvatarComponent`) -- for a system event vs. something a person did.
+    # `actor:` is optional bold text before `description:` (omit it for
+    # system-generated events, e.g. "Status changed automatically"). `time:`
+    # takes a real `Time`/`Date`/`DateTime`/`ActiveSupport::TimeWithZone`
+    # rather than a preformatted string -- see `ItemComponent`'s class docs
+    # for how it's rendered. The block passed to `with_item` is optional
+    # free-form HTML-safe content below the meta line -- a diff comparison,
+    # a badge change, a comment bubble -- since that part varies too much
+    # to model as a keyword argument. See `ItemComponent` for the per-item
+    # API.
+    class TimelineComponent < AtomicView::Component
+      renders_many :items, "ItemComponent"
+
+      def initialize(**options)
+        super()
+        @options = options
+      end
+
+      def container_class
+        class_names("flex flex-col", @options[:class])
+      end
+
+      def item_wrapper_class(index)
+        class_names("relative flex gap-3.5", "pb-6" => !last?(index))
+      end
+
+      def render_line?(index)
+        !last?(index)
+      end
+
+      private
+
+      def last?(index)
+        index == items.length - 1
+      end
+    end
+  end
+end

data/lib/atomic_view/components/toast_component.erb

@@ -0,0 +1,14 @@
+<%= tag.div(**html_options, class: html_class, data: data_attributes, role: "alert") do %>
+  <%= icon(icon_name, options: {class: icon_class}).to_s.html_safe %>
+  <div class="min-w-0 flex-1">
+    <p class="font-body text-sm font-semibold text-foreground"><%= title %></p>
+    <% if description.present? %>
+      <p class="mt-1 text-sm text-muted-foreground"><%= description %></p>
+    <% end %>
+  </div>
+  <% if dismissible %>
+    <%= tag.button(type: "button", class: "inline-flex shrink-0 items-center text-muted-foreground hover:text-foreground", data: {action: "click->atomic-view--toast#dismiss"}, aria: {label: "Dismiss"}) do %>
+      <%= icon("x-mark", variant: :mini, options: {class: "size-4"}).to_s.html_safe %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/toast_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Toast
+    #
+    # A single, self-dismissing notification. This component only renders
+    # one toast and wires it to `atomic-view--toast`, the Stimulus controller
+    # that handles its own dismiss/auto-dismiss lifecycle (see
+    # `app/assets/javascripts/atomic_view/controllers/toast_controller.js`).
+    #
+    # Stacking multiple toasts (newest on top/bottom, fixed to a screen
+    # corner) is intentionally out of scope -- wrap however many
+    # ToastComponents a consuming app renders in a plain CSS container, e.g.
+    # `fixed bottom-4 right-4 flex flex-col-reverse gap-2 z-50`.
+    class ToastComponent < AtomicView::Component
+      attr_reader :variant, :title, :description, :dismissible, :auto_dismiss_ms
+
+      VARIANTS = {
+        success: {icon: "check-circle", border: "border-l-success", icon_color: "text-success"},
+        error: {icon: "x-circle", border: "border-l-destructive", icon_color: "text-destructive"},
+        info: {icon: "information-circle", border: "border-l-primary", icon_color: "text-primary"}
+      }.freeze
+
+      def initialize(title:, variant: :info, description: nil, dismissible: true, auto_dismiss_ms: nil, **options)
+        super()
+        @variant = variant
+        @title = title
+        @description = description
+        @dismissible = dismissible
+        @auto_dismiss_ms = auto_dismiss_ms
+        @options = options
+      end
+
+      def html_options
+        @options.except(:class, :data)
+      end
+
+      def html_class
+        class_names(base_classes, variant_config[:border], @options[:class])
+      end
+
+      def icon_name
+        variant_config[:icon]
+      end
+
+      def icon_class
+        class_names("size-5 shrink-0", variant_config[:icon_color])
+      end
+
+      def data_attributes
+        attributes = (@options[:data] || {}).merge(controller: "atomic-view--toast")
+        attributes["atomic-view--toast-auto-dismiss-ms-value"] = auto_dismiss_ms if auto_dismiss_ms.present?
+        attributes
+      end
+
+      private
+
+      def variant_config
+        VARIANTS.fetch(variant, VARIANTS[:info])
+      end
+
+      def base_classes
+        "flex items-start gap-3 rounded-card border border-border border-l-4 bg-surface p-3 shadow-soft"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/week_field_component.rb

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

data/lib/atomic_view/components/weekday_select_component.rb

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

data/lib/atomic_view/form_builder.rb

@@ -3,5 +3,30 @@
 module AtomicView
   class FormBuilder < ViewComponent::Form::Builder
     namespace Components
+
+    # view_component-form's Helpers::Rails module forwards most native Rails
+    # form helpers to their ViewComponent equivalents, but it misses
+    # `weekday_select` (added natively to Rails' FormBuilder in Rails 7).
+    # Without this override, `form.weekday_select` would bypass
+    # AtomicView::Components::WeekdaySelectComponent entirely and fall back to
+    # ActionView's unstyled native helper.
+    def weekday_select(method, options = {}, html_options = {})
+      render_component(
+        :weekday_select, @object_name, method,
+        objectify_options(options), @default_html_options.merge(html_options)
+      )
+    end
+
+    # Rails 7.1 renamed `field_helpers`' entry from `:text_area` to
+    # `:textarea`, so view_component-form's dynamic method generation (which
+    # iterates `field_helpers`) now defines a component-backed `textarea`
+    # method but leaves `text_area` falling through to Rails' native,
+    # unstyled helper. Without this override, `form.text_area` would bypass
+    # AtomicView::Components::TextAreaComponent entirely.
+    def text_area(method, options = {})
+      render_component(
+        :text_area, @object_name, method, objectify_options(options)
+      )
+    end
   end
 end

data/lib/atomic_view/version.rb

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

data/lib/atomic_view.rb

@@ -6,6 +6,7 @@ require 'atomic_view/configuration'
 
 require "tailwind_merge"
 require "heroicons"
+require "local_time"
 require "view_component"
 require "view_component/form"
 require "zeitwerk"