phlex_kit 0.2.0

data/app/components/phlex_kit/data_table/data_table.css

@@ -0,0 +1,110 @@
+/* Co-located with data_table.rb — UI::DataTable. ruby_ui's structure + Stimulus
+   kept (turbo-frame shell, selection/bulk/expand controller, debounced search,
+   column-visibility dropdown); Tailwind replaced with vanilla CSS on the palette
+   tokens. The composed parts (Table, DropdownMenu, Input, Pagination, Checkbox,
+   NativeSelect) bring their own styles. Theme tokens come from the global
+   stylesheet. */
+.pk-data-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pk-data-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .5rem;
+}
+
+.pk-data-table-search { max-width: 24rem; flex: 1; }
+
+/* "Columns" dropdown rows. */
+.pk-data-table-column-toggle { position: relative; }
+.pk-data-table-column-toggle-icon { width: 1rem; height: 1rem; margin-left: .25rem; }
+.pk-data-table-column-option {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .375rem .5rem;
+  font-size: .875rem;
+  cursor: pointer;
+}
+.pk-data-table-column-option:hover { background: var(--pk-accent); }
+
+/* Sortable header link. */
+.pk-data-table-sort-head { color: var(--pk-text); white-space: nowrap; }
+.pk-data-table-sort-link {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  color: inherit;
+  text-decoration: none;
+  transition: color .15s ease;
+}
+.pk-data-table-sort-link:hover { color: var(--pk-text); }
+.pk-data-table-sort-icon { display: inline-block; width: .75rem; height: .75rem; }
+.pk-data-table-sort-icon.unsorted { opacity: .3; }
+
+/* Bulk actions cluster (revealed by the controller while rows are selected). */
+.pk-data-table-bulk-actions {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+.pk-data-table-selection-summary {
+  font-size: .875rem;
+  color: var(--pk-muted);
+}
+
+/* Row-detail chevron. */
+.pk-data-table-expand-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-text);
+  cursor: pointer;
+  transition: background-color .15s ease;
+}
+.pk-data-table-expand-toggle:hover { background: var(--pk-accent); }
+.pk-data-table-expand-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-data-table-expand-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  transition: transform .15s ease;
+}
+.pk-data-table-expand-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
+
+/* Footer bar. */
+.pk-data-table-pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: .5rem 0;
+}
+.pk-data-table-pagination { margin: 0; width: auto; justify-content: flex-end; }
+/* the per-page <select> sizes intrinsically; border-box needs it wider than
+   its longest option + chevron padding or the text clips */
+.pk-data-table-per-page .pk-native-select-field { min-width: 4.5rem; }
+.pk-data-table-page-disabled {
+  display: inline-flex;
+  align-items: center;
+  height: 2.25rem;
+  padding: 0 .75rem;
+  font-size: .875rem;
+  opacity: .5;
+  pointer-events: none;
+}

data/app/components/phlex_kit/data_table/data_table.rb

@@ -0,0 +1,25 @@
+module PhlexKit
+  # Data table, ported from ruby_ui's RubyUI::DataTable: a server-driven
+  # sortable/searchable table living in a <turbo-frame>, built on the kit's
+  # Table / DropdownMenu / Input / Pagination parts. Row selection, bulk-action
+  # visibility and row-detail expansion live in the phlex-kit--data-table
+  # controller; search debounce and column visibility in their own controllers.
+  # Compose DataTable(id:) > DataTableToolbar(DataTableSearch +
+  # DataTableColumnToggle) + Table(DataTableSortHead, DataTableRowCheckbox …) +
+  # DataTablePaginationBar(DataTableSelectionSummary + DataTablePerPageSelect +
+  # DataTablePagination). Tailwind → vanilla `.pk-data-table*` (data_table.css).
+  class DataTable < BaseComponent
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**mix({ class: "pk-data-table", data: { controller: "phlex-kit--data-table" } }, @attrs), &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Action cluster revealed while rows are selected. See data_table.rb.
+  class DataTableBulkActions < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-data-table-bulk-actions pk-hidden",
+        data: { phlex_kit__data_table_target: "bulkActions" }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_column_toggle.rb

@@ -0,0 +1,61 @@
+module PhlexKit
+  # "Columns" dropdown of checkboxes toggling cells that carry a matching
+  # data-column attribute. `columns:` is an array of { key:, label: } hashes.
+  # See data_table.rb.
+  class DataTableColumnToggle < BaseComponent
+    def initialize(columns:, **attrs)
+      @columns = columns
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-data-table-column-toggle",
+        data: { controller: "phlex-kit--data-table-column-visibility" }
+      }, @attrs)) do
+        render DropdownMenu.new do
+          render DropdownMenuTrigger.new do
+            render Button.new(variant: :outline, size: :sm) do
+              plain "Columns"
+              chevron_icon
+            end
+          end
+          render DropdownMenuContent.new do
+            @columns.each do |col|
+              label(class: "pk-data-table-column-option") do
+                input(
+                  type: :checkbox,
+                  checked: true,
+                  class: "pk-checkbox",
+                  data: {
+                    column_key: col[:key].to_s,
+                    action: "change->phlex-kit--data-table-column-visibility#toggle"
+                  }
+                )
+                span { plain col[:label] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def chevron_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-data-table-column-toggle-icon",
+        "aria-hidden": "true"
+      ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_expand_toggle.rb

@@ -0,0 +1,40 @@
+module PhlexKit
+  # Chevron button toggling a row-detail element (pass its id as `controls:`);
+  # the chevron rotates via [aria-expanded] CSS. See data_table.rb.
+  class DataTableExpandToggle < BaseComponent
+    def initialize(controls:, expanded: false, label: "Toggle row details", **attrs)
+      @controls = controls
+      @expanded = expanded
+      @label = label
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        class: "pk-data-table-expand-toggle",
+        aria: { expanded: @expanded.to_s, controls: @controls, label: @label },
+        data: { action: "click->phlex-kit--data-table#toggleRowDetail" }
+      }, @attrs)) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      ) { |s| s.polyline(points: "9 18 15 12 9 6") }
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_form.rb

@@ -0,0 +1,36 @@
+module PhlexKit
+  # POST form wrapping the table for bulk actions (row checkboxes submit
+  # through it). Includes the Rails CSRF token when a view context is around.
+  # See data_table.rb.
+  class DataTableForm < BaseComponent
+    def initialize(action: "", method: "post", id: nil, **attrs)
+      @action = action
+      @method = method
+      @id = id
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      form_attrs = { action: @action, method: @method }
+      form_attrs[:id] = @id if @id
+      form(**mix(form_attrs, @attrs)) do
+        input(type: :hidden, name: "authenticity_token", value: csrf_token)
+        yield if block
+      end
+    end
+
+    private
+
+    def csrf_token
+      # In a Rails app, view_context provides a real CSRF token.
+      # Outside Rails (gem tests), fall back to a placeholder.
+      if respond_to?(:helpers, true) && helpers.respond_to?(:form_authenticity_token)
+        helpers.form_authenticity_token
+      elsif respond_to?(:view_context, true) && view_context.respond_to?(:form_authenticity_token)
+        view_context.form_authenticity_token
+      else
+        "csrf-token-placeholder"
+      end
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_kaminari_adapter.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  # Adapter exposing a Kaminari collection to PhlexKit::DataTablePagination (the
+  # gem is the host's dependency, not ours). Ported from ruby_ui.
+  class DataTableKaminariAdapter
+    def initialize(collection)
+      @collection = collection
+    end
+
+    def current_page = @collection.current_page
+
+    def total_pages = @collection.total_pages
+
+    def total_count = @collection.total_count
+
+    def per_page = @collection.limit_value
+  end
+end

data/app/components/phlex_kit/data_table/data_table_manual_adapter.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Adapter for plain page/per_page/total_count pagination (no gem). Not a
+  # component — just the current_page/total_pages interface
+  # PhlexKit::DataTablePagination consumes. Ported from ruby_ui.
+  class DataTableManualAdapter
+    attr_reader :current_page, :per_page, :total_count
+
+    def initialize(page:, per_page:, total_count:)
+      @current_page = page.to_i
+      @per_page = [ per_page.to_i, 1 ].max
+      @total_count = total_count.to_i
+    end
+
+    def total_pages
+      [ (@total_count.to_f / @per_page).ceil, 1 ].max
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_pagination.rb

@@ -0,0 +1,98 @@
+module PhlexKit
+  # Windowed page navigation built on the kit's Pagination parts. Feed it a
+  # paginated collection via one of the adapters — `pagy:`, `kaminari:`, plain
+  # `page:`/`per_page:`/`total_count:`, or any `with:` object responding to
+  # current_page/total_pages. Renders nothing for a single page.
+  # See data_table.rb.
+  class DataTablePagination < BaseComponent
+    def initialize(with: nil, pagy: nil, kaminari: nil, page: nil, per_page: nil, total_count: nil, page_param: "page", path: "", query: {}, window: 1, prev_label: "<", next_label: ">", **attrs)
+      @adapter = resolve_adapter(with:, pagy:, kaminari:, page:, per_page:, total_count:)
+      @page_param = page_param
+      @path = path
+      @query = query.to_h.transform_keys(&:to_s)
+      @window = window
+      @prev_label = prev_label
+      @next_label = next_label
+      @attrs = attrs
+    end
+
+    def view_template
+      return if total <= 1
+
+      render Pagination.new(**mix({ class: "pk-data-table-pagination" }, @attrs)) do
+        render PaginationContent.new do
+          prev_item
+          number_items
+          next_item
+        end
+      end
+    end
+
+    private
+
+    def resolve_adapter(with:, pagy:, kaminari:, page:, per_page:, total_count:)
+      return with if with
+      return DataTablePagyAdapter.new(pagy) if pagy
+      return DataTableKaminariAdapter.new(kaminari) if kaminari
+      if page && per_page && total_count
+        return DataTableManualAdapter.new(page:, per_page:, total_count:)
+      end
+      raise ArgumentError, "DataTablePagination requires one of: with:, pagy:, kaminari:, or page:+per_page:+total_count:"
+    end
+
+    def current = @adapter.current_page
+
+    def total = @adapter.total_pages
+
+    def page_href(p)
+      qs = build_query(@query.merge(@page_param => p.to_s))
+      qs.empty? ? @path : "#{@path}?#{qs}"
+    end
+
+    def build_query(hash)
+      hash.flat_map { |k, v|
+        Array(v).map { |val| "#{CGI.escape(k.to_s)}=#{CGI.escape(val.to_s)}" }
+      }.join("&")
+    end
+
+    def prev_item
+      if current <= 1
+        li do
+          span(class: "pk-data-table-page-disabled") { @prev_label }
+        end
+      else
+        render PaginationItem.new(href: page_href(current - 1)) { @prev_label }
+      end
+    end
+
+    def next_item
+      if current >= total
+        li do
+          span(class: "pk-data-table-page-disabled") { @next_label }
+        end
+      else
+        render PaginationItem.new(href: page_href(current + 1)) { @next_label }
+      end
+    end
+
+    def number_items
+      windowed_pages.each do |p|
+        if p == :gap
+          render PaginationEllipsis.new
+        else
+          render PaginationItem.new(href: page_href(p), active: p == current) { plain p.to_s }
+        end
+      end
+    end
+
+    def windowed_pages
+      return (1..total).to_a if total <= 7
+      pages = [ 1 ]
+      pages << :gap if current - @window > 2
+      ((current - @window)..(current + @window)).each { |p| pages << p if p > 1 && p < total }
+      pages << :gap if current + @window < total - 1
+      pages << total
+      pages
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_pagination_bar.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Footer row holding the selection summary, per-page select and pagination.
+  # See data_table.rb.
+  class DataTablePaginationBar < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-data-table-pagination-bar" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_pagy_adapter.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  # Adapter exposing a Pagy object to PhlexKit::DataTablePagination (the gem is
+  # the host's dependency, not ours). Ported from ruby_ui.
+  class DataTablePagyAdapter
+    def initialize(pagy)
+      @pagy = pagy
+    end
+
+    def current_page = @pagy.page
+
+    def total_pages = @pagy.pages
+
+    def total_count = @pagy.count
+
+    def per_page = @pagy.items
+  end
+end

data/app/components/phlex_kit/data_table/data_table_per_page_select.rb

@@ -0,0 +1,29 @@
+module PhlexKit
+  # Per-page NativeSelect in a GET form that self-submits on change (targeting
+  # the table's turbo-frame when `frame_id:` is given). See data_table.rb.
+  class DataTablePerPageSelect < BaseComponent
+    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], **attrs)
+      @path = path
+      @name = name
+      @value = value
+      @frame_id = frame_id
+      @options = options
+      @attrs = attrs
+    end
+
+    def view_template
+      form_attrs = { class: "pk-data-table-per-page", action: @path, method: "get" }
+      form_attrs[:data] = { turbo_frame: @frame_id } if @frame_id
+
+      form(**mix(form_attrs, @attrs)) do
+        render NativeSelect.new(name: @name, onchange: safe("this.form.requestSubmit()")) do
+          @options.each do |opt|
+            option_attrs = { value: opt.to_s }
+            option_attrs[:selected] = true if opt.to_s == @value.to_s
+            option(**option_attrs) { plain opt.to_s }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_row_checkbox.rb

@@ -0,0 +1,24 @@
+module PhlexKit
+  # Per-row selection checkbox (a PhlexKit::Checkbox submitting `ids[]`).
+  # See data_table.rb.
+  class DataTableRowCheckbox < BaseComponent
+    def initialize(value:, name: "ids[]", label: nil, **attrs)
+      @value = value
+      @name = name
+      @label = label
+      @attrs = attrs
+    end
+
+    def view_template
+      render Checkbox.new(**mix({
+        name: @name,
+        value: @value,
+        aria: { label: @label || "Select row #{@value}" },
+        data: {
+          phlex_kit__data_table_target: "rowCheckbox",
+          action: "change->phlex-kit--data-table#toggleRow"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_search.rb

@@ -0,0 +1,51 @@
+module PhlexKit
+  # Debounced GET search form targeting the table's turbo-frame. Extra filter
+  # params survive via `preserved_params:` hidden inputs; focus/caret survive the
+  # frame swap (see the search controller). See data_table.rb.
+  class DataTableSearch < BaseComponent
+    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, **attrs)
+      @path = path
+      @name = name
+      @value = value
+      @frame_id = frame_id
+      @placeholder = placeholder
+      @debounce = debounce
+      @preserved_params = preserved_params
+      @attrs = attrs
+    end
+
+    def view_template
+      form(**mix({ class: "pk-data-table-search", method: "get", action: @path, data: form_data }, @attrs)) do
+        render Input.new(
+          type: :search,
+          name: @name,
+          value: @value,
+          placeholder: @placeholder,
+          autocomplete: "off"
+        )
+        @preserved_params.each do |k, v|
+          next if v.nil? || (v.respond_to?(:empty?) && v.empty?)
+          next if k.to_s == @name
+          input(type: :hidden, name: k.to_s, value: v.to_s)
+        end
+      end
+    end
+
+    private
+
+    def debounce_enabled?
+      @debounce && @debounce.to_i > 0
+    end
+
+    def form_data
+      base = {}
+      base[:turbo_frame] = @frame_id if @frame_id
+      if debounce_enabled?
+        base[:controller] = "phlex-kit--data-table-search"
+        base[:"phlex-kit--data-table-search-delay-value"] = @debounce.to_i
+        base[:action] = "input->phlex-kit--data-table-search#submit"
+      end
+      base
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_select_all_checkbox.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Header checkbox selecting every DataTableRowCheckbox on the page (the
+  # controller sets indeterminate for partial selections). See data_table.rb.
+  class DataTableSelectAllCheckbox < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Checkbox.new(**mix({
+        aria: { label: "Select all" },
+        data: {
+          phlex_kit__data_table_target: "selectAll",
+          action: "change->phlex-kit--data-table#toggleAll"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_selection_summary.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # "N of M row(s) selected." line, kept current by the controller.
+  # See data_table.rb.
+  class DataTableSelectionSummary < BaseComponent
+    def initialize(total_on_page: 0, **attrs)
+      @total_on_page = total_on_page
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-data-table-selection-summary",
+        data: { phlex_kit__data_table_target: "selectionSummary" }
+      }, @attrs)) do
+        plain "0 of #{@total_on_page} row(s) selected."
+      end
+    end
+  end
+end