atomic_view 0.3.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35571b6bf96da5419dcc5d10709fb6e391bc3d47991b0914934099003d4e2873
-  data.tar.gz: '09145bc057a978d84c5d21c98fe3c86b5e3db12c52d3726480eb79025a9c0d93'
+  metadata.gz: f37c405116dc18595f21f9f7b3a45223edef67c921c991a7c1523a93b594cf39
+  data.tar.gz: 3ce7216ee4b6327f57dec679651d507ba799023f4b2eb3b865ef61bfa3781c1a
 SHA512:
-  metadata.gz: 26248796be4512d71197dae22674290aeab4c8b1b13dbaa4bc220e4c779858369f11e82ed9c645da13f101e8c9da130c8529694543426ff6c84bff0a73677072
-  data.tar.gz: 7220d17e20fca18bff3896b2a31e65846b499a2a453e315af1625c9d181bb118f63659e276bfa0cc3e20766be564525d1d02dec1c12c50d8310d51037c1f8202
+  metadata.gz: a550e6749f5c77da2336b475b69d59d24d09be6e5dfb321bc9c2e73af3968d1b308e0d26962e728f8f0c5dfcd4a341e0d6e63a753ec5986943deba90db4223c7
+  data.tar.gz: 05477662ea7b03cd022ca121c0c1b30967cdf99feae9166209aabf64f531ef1902b3a5c746e76dca92cc107e2a7caa05705a36f91f2fd9bdb3e941270eb49e07

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

@@ -0,0 +1,8 @@
+<% if next_page? %>
+  <%= tag.turbo_frame(id: id, loading: :lazy, src: next_page_path, class: "flex items-center justify-center gap-2 py-3") do %>
+    <span class="size-3.5 animate-spin rounded-full border-2 border-border border-t-foreground motion-reduce:animate-none" aria-hidden="true"></span>
+    <span class="sr-only">Loading more…</span>
+  <% end %>
+<% else %>
+  <%= tag.turbo_frame(id: id) %>
+<% end %>

data/lib/atomic_view/components/lazy_pagination_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # LazyPagination
+    #
+    # The infinite-scroll counterpart to PaginationComponent's page-number
+    # links -- use PaginationComponent for numbered pages, this one for a
+    # list that loads its next page automatically as the user scrolls.
+    # Stays equally pagination-gem agnostic: the caller resolves both
+    # `next_page` (any presence-checkable value, e.g. a Pagy `next` page
+    # number) and `next_page_path` (the URL that lazily loaded page comes
+    # from) themselves.
+    #
+    #   render(AtomicView::Components::LazyPaginationComponent.new(
+    #     next_page: @pagy.next,
+    #     next_page_path: @pagy.next && bookings_path(page: @pagy.next)
+    #   ))
+    #
+    # Renders a `<turbo-frame loading="lazy" src="...">` (the same
+    # `tag.turbo_frame` technique GanttComponent's row/date pagination
+    # uses -- see that class's docs -- rather than a hard dependency on
+    # turbo-rails' view helpers) wrapping a spinner while `next_page` is
+    # present. Once there's no next page, it renders an empty
+    # `<turbo-frame>` with the same `id` instead of nothing at all, so a
+    # later `turbo_stream.replace(id, ...)` response from the last real
+    # page's fetch always has a target to replace.
+    class LazyPaginationComponent < AtomicView::Component
+      attr_reader :next_page, :next_page_path, :id
+
+      def initialize(next_page:, next_page_path: nil, id: :pagination)
+        super()
+        @next_page = next_page
+        @next_page_path = next_page_path
+        @id = id
+      end
+
+      def next_page?
+        next_page.present?
+      end
+    end
+  end
+end

data/lib/atomic_view/components/table_component/cell_component.html.erb

@@ -0,0 +1,6 @@
+<%= tag.td(**html_options, class: html_class) do %>
+  <% if linked? %>
+    <%= link_to "", path, class: "absolute inset-0", tabindex: (first ? 0 : -1), "aria-hidden": (first ? nil : "true"), "aria-label": (first ? label : nil), data: {row_link: true} %>
+  <% end %>
+  <%= tag.span(content, class: content_class) %>
+<% end %>

data/lib/atomic_view/components/table_component/cell_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class TableComponent
+      # TableComponent::Cell
+      #
+      # One <td> within a RowComponent -- see that class's docs for the
+      # standalone-render requirement and the per-cell stretched-link
+      # design. `first` and `clickable` are set by RowComponent's `cells`
+      # slot from the row itself, not passed by the caller.
+      #
+      # Visible content renders as a sibling of the (empty, transparent)
+      # stretched `<a>`, wrapped in a `pointer-events-none` span so plain
+      # content (the common case -- a name, a badge) doesn't sit in the
+      # way of clicks meant for the row-wide overlay underneath it. Pass
+      # `interactive: true` on a cell that renders a real, more specific
+      # link/button of its own (e.g. an "Edit" action) to flip that span
+      # back to `pointer-events-auto`, so that cell's own content takes
+      # the click instead of falling through to the row link.
+      class CellComponent < AtomicView::Component
+        attr_reader :path, :label, :first, :align, :clickable, :interactive
+
+        def initialize(path:, label:, first:, align: :left, clickable: true, interactive: false, **options)
+          super()
+          @path = path
+          @label = label
+          @first = first
+          @align = align
+          @clickable = clickable
+          @interactive = interactive
+          @options = options
+        end
+
+        def linked?
+          clickable && path.present?
+        end
+
+        def html_class
+          class_names(base_classes, align_classes, @options[:class])
+        end
+
+        def html_options
+          @options.except(:class)
+        end
+
+        def content_class
+          interactive ? "relative pointer-events-auto" : "relative pointer-events-none"
+        end
+
+        private
+
+        def base_classes
+          "relative px-2.5 py-2.5 border-b border-border/5"
+        end
+
+        def align_classes
+          case align
+          when :center then "text-center font-semibold"
+          when :right then "text-right"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/table_component/column_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class TableComponent
+      # TableComponent::Column
+      #
+      # One <th> in the header row TableComponent auto-renders once at
+      # least one `with_column` is given -- see TableComponent's docs.
+      #
+      # `label` defaults to `model.human_attribute_name(attribute)`
+      # (mirroring Rails' own form label defaulting) when a `model:` is
+      # given -- TableComponent passes its own `model:` through to every
+      # column automatically, so callers only need `attribute:`. Pass
+      # `label:` directly instead for a column with no backing
+      # attribute (e.g. a blank header over a row of "Edit" links).
+      class ColumnComponent < AtomicView::Component
+        attr_reader :model, :attribute, :align, :width
+
+        def initialize(model: nil, attribute: nil, label: nil, align: :left, width: nil)
+          super()
+          raise ArgumentError, "label is required when model is not given" if model.nil? && label.nil?
+
+          @model = model
+          @attribute = attribute
+          @label = label
+          @align = align
+          @width = width
+        end
+
+        def label
+          @label || model.human_attribute_name(attribute)
+        end
+
+        def call
+          tag.th(label, scope: "col", class: header_class)
+        end
+
+        private
+
+        def header_class
+          class_names("p-2 font-medium", align_class, width)
+        end
+
+        def align_class
+          case align
+          when :center then "text-center"
+          when :right then "text-right"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.tr(**html_options, class: html_class) do %>
+  <%= safe_join(cells) %>
+<% end %>

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class TableComponent
+      # TableComponent::Row
+      #
+      # A single <tr>, renderable standalone -- no parent TableComponent
+      # instance required. That matters because a turbo_stream
+      # `append`/`update` response renders exactly one row outside of any
+      # table context, e.g.:
+      #
+      #   turbo_stream.append(:bookings_body, AtomicView::Components::TableComponent::RowComponent.new(
+      #     record: @booking, label: @booking.camper_name, path: booking_path(@booking)
+      #   ) { |row| row.with_cell { @booking.camper_name } })
+      #
+      # `path` defaults to `record` itself so `path_to(record)`-style route
+      # helpers resolve it via `to_model`/`to_param` the same way `link_to`
+      # would; pass `path:` explicitly when the row's destination isn't
+      # just `record`'s own show page.
+      #
+      # Each `with_cell` becomes its own stretched link to `path` -- a
+      # single `<a>` can't span multiple `<td>` siblings the way it could
+      # wrap a `<div>` row -- but only the first cell's link stays in the
+      # tab order (`tabindex="0"`; the rest are `tabindex="-1"` and
+      # `aria-hidden`), so a keyboard/screen-reader user hits one focus
+      # stop per row rather than one per cell. `label` is that first
+      # link's accessible name. Pass `clickable: false` for a row that
+      # shouldn't navigate anywhere -- cells then render as plain,
+      # unlinked content.
+      class RowComponent < AtomicView::Component
+        renders_many :cells, ->(**kwargs) { CellComponent.new(path: path, label: label, first: cells.empty?, clickable: clickable, **kwargs) }
+
+        attr_reader :record, :label, :path, :clickable
+
+        def initialize(record:, label:, path: nil, clickable: true, **options)
+          super()
+          @record = record
+          @label = label
+          @path = path || record
+          @clickable = clickable
+          @options = options
+        end
+
+        def html_class
+          class_names(clickable ? "hover:bg-offset" : nil, @options[:class])
+        end
+
+        def html_options
+          @options.except(:class)
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/table_component.rb

@@ -4,10 +4,10 @@ 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.
+    # A thin styling wrapper around <table>. By default this owns no
+    # row/column concept -- 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>
@@ -21,17 +21,63 @@ module AtomicView
     #       </tr>
     #     </tbody>
     #   <% end %>
+    #
+    # `with_column` is an opt-in alternative to hand-building the <thead>:
+    # give it at least one column and TableComponent renders the header row
+    # itself, from `<th>`s built by TableComponent::ColumnComponent -- and
+    # wraps the block's return value in a <tbody> for you too, so the block
+    # only has to render rows (typically TableComponent::RowComponent),
+    # same as it would for a turbo_stream append/update elsewhere:
+    #
+    #   <%= render AtomicView::Components::TableComponent.new(model: Booking) do |table| %>
+    #     <% table.with_column(attribute: :camper_name) %>
+    #     <% table.with_column(attribute: :status, align: :center) %>
+    #     <% table.with_column(label: "") %>
+    #
+    #     <% @bookings.each do |booking| %>
+    #       <%= render(AtomicView::Components::TableComponent::RowComponent.new(record: booking, label: booking.camper_name, path: booking_path(booking))) do |row| %>
+    #         <% row.with_cell { booking.camper_name } %>
+    #         <% row.with_cell(align: :center) { render(BadgeComponent.new) { booking.status } } %>
+    #         <% row.with_cell(interactive: true) { render(LinkComponent.new(edit_booking_path(booking), variant: :outline)) { "Edit" } } %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # The <tbody>'s `id` defaults to `model.model_name.plural` (e.g.
+    # "bookings") so a turbo_stream response can target it directly with
+    # no extra bookkeeping -- pass `body_id:` to override it (a nested
+    # resource sharing a differently-named frame, say).
+    #
+    # A table with no columns given renders exactly as before -- `with_column`
+    # is opt-in, not a second required API, and in that raw mode you still
+    # own the whole `<thead>`/`<tbody>` yourself. `model:` is passed through
+    # to each column so `with_column(attribute: :camper_name)` can default
+    # its label via `model.human_attribute_name(:camper_name)`; a column
+    # with no backing attribute (like the blank "" header above, for an
+    # actions column) just passes `label:` directly instead.
     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)
+      renders_many :columns, ->(**kwargs) { ColumnComponent.new(model: model, **kwargs) }
+
+      attr_reader :model
+
+      def initialize(model: nil, body_id: nil, **options)
         super()
+        @model = model
+        @body_id = body_id
         @options = options
       end
 
       def call
-        tag.table(**@options.except(:class), class: class_names(base_classes, @options[:class])) { content }
+        tag.table(**@options.except(:class), class: class_names(base_classes, @options[:class])) do
+          if columns?
+            safe_join([columns_header, tag.tbody(content, id: body_id)])
+          else
+            content
+          end
+        end
       end
 
       def head_class(**options)
@@ -44,6 +90,19 @@ module AtomicView
 
       private
 
+      def columns_header
+        return unless columns?
+        tag.thead { tag.tr(class: head_class) { safe_join(columns) } }
+      end
+
+      def columns?
+        columns.any?
+      end
+
+      def body_id
+        @body_id || model&.model_name&.plural
+      end
+
       def base_classes
         "w-full text-sm"
       end

data/lib/atomic_view/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Joel Warrington
@@ -219,6 +219,8 @@ files:
 - lib/atomic_view/components/index_page_component.rb
 - lib/atomic_view/components/kbd_component.rb
 - lib/atomic_view/components/label_component.rb
+- lib/atomic_view/components/lazy_pagination_component.html.erb
+- lib/atomic_view/components/lazy_pagination_component.rb
 - lib/atomic_view/components/link_component.html.erb
 - lib/atomic_view/components/link_component.rb
 - lib/atomic_view/components/modal_component.html.erb
@@ -245,6 +247,11 @@ files:
 - lib/atomic_view/components/show_page_component.rb
 - lib/atomic_view/components/submit_component.rb
 - lib/atomic_view/components/table_component.rb
+- lib/atomic_view/components/table_component/cell_component.html.erb
+- lib/atomic_view/components/table_component/cell_component.rb
+- lib/atomic_view/components/table_component/column_component.rb
+- lib/atomic_view/components/table_component/row_component.html.erb
+- lib/atomic_view/components/table_component/row_component.rb
 - lib/atomic_view/components/tabs_component.html.erb
 - lib/atomic_view/components/tabs_component.rb
 - lib/atomic_view/components/telephone_field_component.rb