atomic_view 0.1.17 → 0.2.0

data/lib/atomic_view/components/gantt_component/month_band_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class GanttComponent
+      # One "September 2026"-style segment in the `GanttComponent`'s month
+      # band strip (see `GanttComponent#month_band_id`), above the
+      # day/weekday header row. `#{gantt_id}_month_band` is a single-row CSS
+      # Grid sharing the same `grid-auto-columns` as `#{gantt_id}_dates` (see
+      # `GanttComponent#column_grid_style`), so a segment carries no pixel
+      # width of its own -- just `grid-column: span #{span}`, `span` day-wide
+      # tracks stretched together automatically. That also means a segment
+      # never needs resizing once rendered: appending/prepending more days
+      # elsewhere in the same grid doesn't touch its track sizing, so it's
+      # exactly as correct after ten more `prepend`s as it was on the first
+      # render.
+      #
+      # `GanttComponent` renders one of these per distinct month present in
+      # `dates:` on the initial render (see `GanttComponent#month_segments`).
+      #
+      # == Loading more days
+      #
+      # A `next_dates_path`/`prev_dates_path` Turbo Stream response that
+      # `append`s/`prepend`s new `DateHeaderComponent` cells to
+      # `#{gantt_id}_dates` (see `GanttComponent`'s class docs) should do the
+      # same here, to `#{gantt_id}_month_band`. Simplest when each batch of
+      # newly-loaded dates is itself exactly one calendar month (see
+      # `RentalsController` in this gem's dummy app for a worked example) --
+      # then every response adds exactly one new segment, always with a real
+      # label, no chunking needed. A batch that can straddle a month
+      # boundary needs to chunk its own dates by month the same way
+      # `GanttComponent#month_segments` does, and skip the label (`label:
+      # nil`) on whichever chunk continues the month a previous segment
+      # already labeled.
+      #
+      # Order matters the same way it does for date cells: `append` new
+      # segments in chronological order; `prepend` them in *reverse*
+      # chronological order (latest chunk first), since each prepend pushes
+      # the previous one further right.
+      class MonthBandComponent < AtomicView::Component
+        attr_reader :id, :label, :span
+
+        # @param id [String, nil] DOM id for this segment.
+        # @param label [String, nil] the text to show, e.g. `"September 2026"`
+        #   -- `nil` renders a blank (unlabeled) segment, for a batch of
+        #   newly-loaded dates that continue a month whose label an earlier
+        #   segment already shows (see "Loading more days" above).
+        # @param span [Integer] how many day columns this segment covers --
+        #   becomes `grid-column: span #{span}`.
+        def initialize(span:, label: nil, id: nil, **options)
+          super()
+          @id = id
+          @label = label
+          @span = span
+          @options = options
+        end
+
+        def html_options
+          @options.except(:class)
+        end
+
+        def html_class
+          class_names(base_classes, @options[:class])
+        end
+
+        def style
+          "grid-column: span #{span}"
+        end
+
+        private
+
+        def base_classes
+          "flex items-center overflow-hidden whitespace-nowrap px-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<%= tag.div(id: id, **html_options, class: html_class) do %>
+  <div class="sticky left-0 z-10 flex-none border-r border-b border-border bg-surface px-3 py-2" style="width: <%= label_width %>px">
+    <% if href.present? %>
+      <%= link_to label, href, class: "block truncate text-sm font-semibold text-foreground hover:underline" %>
+    <% else %>
+      <div class="truncate text-sm font-semibold text-foreground"><%= label %></div>
+    <% end %>
+    <% if sublabel.present? %>
+      <div class="truncate text-xs text-muted-foreground"><%= sublabel %></div>
+    <% end %>
+  </div>
+
+  <div id="<%= track_id %>" class="relative flex-1 border-b border-border" style="<%= track_style %>">
+    <% if today_offset_px %>
+      <div class="absolute inset-y-0 bg-primary/5" data-atomic-view--gantt-target="originAnchored" style="left: <%= today_offset_px %>px; width: <%= cell_width %>px"></div>
+    <% end %>
+
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class GanttComponent
+      # A single resource row within a `GanttComponent` -- a label (e.g. a
+      # site code) plus a horizontally-scrolling track that its `ItemComponent`
+      # bars position themselves within. Rendered via `GanttComponent#with_row`
+      # -- see that class's docs for the full picture, including what
+      # `origin:` means and why it has to stay consistent across requests.
+      #
+      # `track_id` is the id a `next_dates_path`/`prev_dates_path` Turbo
+      # Stream response `append`s/`prepend`s new bars to once more date
+      # columns load -- this row's own markup doesn't otherwise get
+      # re-rendered when that happens.
+      class RowComponent < AtomicView::Component
+        renders_many :items, "AtomicView::Components::GanttComponent::ItemComponent"
+
+        attr_reader :id, :label, :sublabel, :href, :origin, :cell_width, :label_width, :lanes, :today
+
+        # @param id [String] unique DOM id for this row.
+        # @param label [String] primary label (e.g. a site code).
+        # @param sublabel [String, nil] secondary label under it (e.g. a park name).
+        # @param href [String, nil] wraps the label in a link when given.
+        # @param origin [Date] must match the `origin:` given to every
+        #   `ItemComponent` in this row (and every other row in this grid) --
+        #   used here only for the optional `today:` highlight strip.
+        # @param cell_width [Integer] must match the parent `GanttComponent`'s.
+        # @param label_width [Integer] must match the parent `GanttComponent`'s.
+        # @param lanes [Integer] how many horizontal lanes of overlapping
+        #   items this row's track should reserve height for -- `1` (the
+        #   default) fits a row with no overlaps. See
+        #   `ItemComponent#lane`/`GanttComponent.pack_lanes`.
+        # @param today [Date, nil] renders a highlighted strip at this date's
+        #   column, when given (typically threaded through from the parent
+        #   `GanttComponent#today`).
+        def initialize(
+          id:,
+          label:,
+          origin:,
+          sublabel: nil,
+          href: nil,
+          cell_width: GanttComponent::DEFAULT_CELL_WIDTH,
+          label_width: GanttComponent::DEFAULT_LABEL_WIDTH,
+          lanes: 1,
+          today: nil,
+          **options
+        )
+          super()
+          @id = id
+          @label = label
+          @sublabel = sublabel
+          @href = href
+          @origin = origin
+          @cell_width = cell_width
+          @label_width = label_width
+          @lanes = lanes
+          @today = today
+          @options = options
+        end
+
+        def track_id = "#{id}_track"
+
+        def html_options
+          @options.except(:class)
+        end
+
+        def html_class
+          class_names("flex", @options[:class])
+        end
+
+        def track_style
+          min_height = GanttComponent::LANE_TOP_PADDING * 2 + (lanes * GanttComponent::LANE_HEIGHT)
+          "background-image: repeating-linear-gradient(to right, var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent #{cell_width}px); min-height: #{min_height}px"
+        end
+
+        def today_offset_px
+          return nil unless today
+          GanttComponent.offset_px(today, origin: origin, cell_width: cell_width)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+<%= tag.div(id: id, **html_options, class: html_class, data: data_attributes) do %>
+  <% if paginated_dates_backward? %>
+    <div class="flex items-center border-b border-border px-3 py-1.5">
+      <button
+        type="button"
+        id="<%= date_start_trigger_id %>"
+        class="flex items-center gap-1.5 rounded-btn px-2 py-1 text-xs font-semibold text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        data-atomic-view--gantt-target="dateStartTrigger"
+        data-action="click->atomic-view--gantt#loadEarlierDates"
+        data-prev-page="<%= prev_dates_path %>"
+      >
+        <span id="<%= date_start_loader_id %>" class="size-3.5 flex-none animate-spin rounded-full border-2 border-border border-t-foreground motion-reduce:animate-none" data-atomic-view--gantt-target="dateStartLoader" hidden aria-hidden="true"></span>
+        Load earlier days
+      </button>
+    </div>
+  <% end %>
+
+  <div id="<%= scroller_id %>" class="overflow-x-auto" data-atomic-view--gantt-target="scroller">
+    <div class="w-max min-w-full">
+      <div class="flex">
+        <div class="sticky left-0 top-0 z-30 flex-none border-b border-r border-border bg-surface" style="width: <%= label_width %>px"></div>
+
+        <div class="flex flex-col">
+          <div id="<%= month_band_id %>" class="grid h-5 flex-none grid-flow-col border-b border-border/60 bg-surface" style="<%= column_grid_style %>">
+            <% month_segments.each do |segment| %>
+              <%= render(AtomicView::Components::GanttComponent::MonthBandComponent.new(
+                    id: "#{month_band_id}_#{segment[:month_start].strftime("%Y-%m")}",
+                    label: segment[:month_start].strftime("%B %Y"),
+                    span: segment[:count]
+                  )) %>
+            <% end %>
+          </div>
+
+          <div id="<%= dates_id %>" class="grid grid-flow-col" style="<%= column_grid_style %>" data-atomic-view--gantt-target="dates">
+            <% dates.each do |date| %>
+              <%= render(AtomicView::Components::GanttComponent::DateHeaderComponent.new(date: date, today: today)) %>
+            <% end %>
+          </div>
+        </div>
+
+        <div id="<%= date_loader_id %>" class="flex flex-none items-center justify-center px-3" data-atomic-view--gantt-target="dateLoader" hidden>
+          <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 days…</span>
+        </div>
+
+        <% if paginated_dates_forward? %>
+          <div
+            id="<%= date_sentinel_id %>"
+            class="w-px flex-none self-stretch"
+            data-atomic-view--gantt-target="dateSentinel"
+            data-next-page="<%= next_dates_path %>"
+          ></div>
+        <% end %>
+      </div>
+
+      <div id="<%= rows_id %>" class="flex flex-col">
+        <% rows.each do |row| %>
+          <%= row %>
+        <% end %>
+      </div>
+
+      <% if empty? %>
+        <p class="px-4 py-6 text-center text-sm text-muted-foreground"><%= empty_message %></p>
+      <% end %>
+    </div>
+  </div>
+
+  <% if paginated_rows? %>
+    <%= tag.turbo_frame(id: row_pagination_id, src: next_rows_path, loading: :lazy, class: "flex items-center justify-center gap-2 border-t border-border 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 rows…</span>
+    <% end %>
+  <% else %>
+    <%= tag.turbo_frame(id: row_pagination_id) %>
+  <% end %>
+<% end %>