ruby_ui 1.0.2 → 1.2.0

data/lib/ruby_ui/data_table/data_table_docs.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+class Views::Docs::DataTable < Views::Base
+  Row = Struct.new(:id, :name, :email, :salary, :status, keyword_init: true)
+
+  SAMPLE_ROWS = [
+    Row.new(id: 1, name: "Alice", email: "alice@example.com", salary: 90_000, status: "Active"),
+    Row.new(id: 2, name: "Bob", email: "bob@example.com", salary: 75_000, status: "Inactive"),
+    Row.new(id: 3, name: "Carol", email: "carol@example.com", salary: 85_000, status: "Active")
+  ].freeze
+
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      component = "DataTable"
+      render Docs::Header.new(
+        title: component,
+        description: "A Hotwire-first data table. Every interaction (sort, search, pagination) is a Rails request answered with HTML, swapped via Turbo Frame. Row selection uses form-first submission."
+      )
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Server-driven table", context: self) do
+        @@code = <<~RUBY
+          DataTable(id: "employees") do
+            DataTableToolbar do
+              DataTableSearch(path: employees_path, value: @search)
+              DataTablePerPageSelect(path: employees_path, value: @per_page)
+            end
+
+            div(class: "rounded-md border") do
+              Table do
+                TableHeader do
+                  TableRow do
+                    TableHead { "Name" }
+                    DataTableSortHead(column_key: :email, label: "Email",
+                                      sort: @sort, direction: @direction,
+                                      path: employees_path)
+                    TableHead(class: "text-right") { "Salary" }
+                  end
+                end
+                TableBody do
+                  @rows.each do |r|
+                    TableRow do
+                      TableCell { r.name }
+                      TableCell { r.email }
+                      TableCell(class: "text-right") { r.salary }
+                    end
+                  end
+                end
+              end
+            end
+
+            DataTablePaginationBar do
+              DataTableSelectionSummary(total_on_page: @rows.size)
+              DataTablePagination(page: @page, per_page: @per_page,
+                                  total_count: @total_count, path: employees_path)
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Selection + bulk actions", context: self) do
+        @@code = <<~RUBY
+          FORM_ID = "employees_form"
+
+          DataTable(id: "employees_select") do
+            DataTableToolbar do
+              DataTableSearch(path: employees_path, value: @search)
+              DataTableBulkActions do
+                Button(type: "submit", form: FORM_ID,
+                       formaction: bulk_delete_employees_path,
+                       formmethod: "post",
+                       variant: :destructive, size: :sm) { "Delete" }
+              end
+            end
+
+            DataTableForm(id: FORM_ID, action: "") do
+              div(class: "rounded-md border") do
+                Table do
+                  TableHeader do
+                    TableRow do
+                      TableHead(class: "w-10") { DataTableSelectAllCheckbox() }
+                      TableHead { "Name" }
+                      TableHead { "Email" }
+                    end
+                  end
+                  TableBody do
+                    @rows.each do |r|
+                      TableRow do
+                        TableCell { DataTableRowCheckbox(value: r.id) }
+                        TableCell { r.name }
+                        TableCell { r.email }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+
+            DataTablePaginationBar do
+              DataTableSelectionSummary(total_on_page: @rows.size)
+              DataTablePagination(page: @page, per_page: @per_page,
+                                  total_count: @total_count, path: employees_path)
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Column visibility", context: self) do
+        @@code = <<~RUBY
+          DataTable(id: "employees_cols") do
+            DataTableToolbar do
+              DataTableColumnToggle(columns: [
+                {key: :email, label: "Email"},
+                {key: :salary, label: "Salary"}
+              ])
+            end
+
+            Table do
+              TableHeader do
+                TableRow do
+                  TableHead { "Name" }
+                  TableHead(data: {column: "email"}) { "Email" }
+                  TableHead(data: {column: "salary"}) { "Salary" }
+                end
+              end
+              TableBody do
+                @rows.each do |r|
+                  TableRow do
+                    TableCell { r.name }
+                    TableCell(data: {column: "email"}) { r.email }
+                    TableCell(data: {column: "salary"}) { r.salary }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Expandable rows", context: self) do
+        @@code = <<~RUBY
+          DataTable(id: "employees_expand") do
+            Table do
+              TableHeader do
+                TableRow do
+                  TableHead(class: "w-10") { }
+                  TableHead { "Name" }
+                  TableHead { "Email" }
+                end
+              end
+              TableBody do
+                @rows.each do |r|
+                  detail_id = "row-\#{r.id}-detail"
+                  TableRow do
+                    TableCell { DataTableExpandToggle(controls: detail_id, label: "Toggle \#{r.name}") }
+                    TableCell { r.name }
+                    TableCell { r.email }
+                  end
+                  TableRow(id: detail_id, class: "hidden", role: "region") do
+                    TableCell(colspan: 3, class: "bg-muted/40") do
+                      div(class: "p-4") do
+                        p { "Salary: $\#{r.salary}" }
+                        p { "Status: \#{r.status}" }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_expand_toggle.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableExpandToggle < Base
+    def initialize(controls:, expanded: false, label: "Toggle row details", **attrs)
+      @controls = controls
+      @expanded = expanded
+      @label = label
+      super(**attrs)
+    end
+
+    def view_template
+      button(
+        type: "button",
+        aria_expanded: @expanded.to_s,
+        aria_controls: @controls,
+        aria_label: @label,
+        data: {
+          action: "click->ruby-ui--data-table#toggleRowDetail"
+        },
+        **attrs
+      ) do
+        render_icon
+      end
+    end
+
+    private
+
+    def render_icon
+      # inline chevron-right SVG (lucide)
+      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: "h-4 w-4 transition-transform duration-150 group-aria-expanded:rotate-90"
+      ) do |s|
+        s.polyline(points: "9 18 15 12 9 6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "group inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_form.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableForm < Base
+    def initialize(action: "", method: "post", id: nil, **attrs)
+      @action = action
+      @method = method
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      form_attrs = {action: @action, method: @method}
+      form_attrs[:id] = @id if @id
+      form(**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
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_kaminari_adapter.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  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/lib/ruby_ui/data_table/data_table_manual_adapter.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  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/lib/ruby_ui/data_table/data_table_pagination.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+require "cgi"
+require_relative "data_table_manual_adapter"
+require_relative "data_table_pagy_adapter"
+require_relative "data_table_kaminari_adapter"
+
+module RubyUI
+  class DataTablePagination < Base
+    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
+      super(**attrs)
+    end
+
+    def view_template
+      return if total <= 1
+
+      render RubyUI::Pagination.new(class: "mx-0 w-auto justify-end", **attrs) do
+        render RubyUI::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 RubyUI::DataTablePagyAdapter.new(pagy) if pagy
+      return RubyUI::DataTableKaminariAdapter.new(kaminari) if kaminari
+      if page && per_page && total_count
+        return RubyUI::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: "opacity-50 pointer-events-none px-3 h-9 inline-flex items-center text-sm") { @prev_label }
+        end
+      else
+        render RubyUI::PaginationItem.new(href: page_href(current - 1)) { @prev_label }
+      end
+    end
+
+    def next_item
+      if current >= total
+        li do
+          span(class: "opacity-50 pointer-events-none px-3 h-9 inline-flex items-center text-sm") { @next_label }
+        end
+      else
+        render RubyUI::PaginationItem.new(href: page_href(current + 1)) { @next_label }
+      end
+    end
+
+    def number_items
+      windowed_pages.each do |p|
+        if p == :gap
+          render RubyUI::PaginationEllipsis.new
+        else
+          render RubyUI::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/lib/ruby_ui/data_table/data_table_pagination_bar.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTablePaginationBar < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "flex items-center justify-between gap-4 py-2"}
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_pagy_adapter.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  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/lib/ruby_ui/data_table/data_table_per_page_select.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTablePerPageSelect < Base
+    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
+      super(**attrs)
+    end
+
+    def view_template
+      form_attrs = {action: @path, method: "get"}
+      form_attrs[:data] = {turbo_frame: @frame_id} if @frame_id
+
+      form(**attrs.merge(form_attrs)) do
+        render RubyUI::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
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_row_checkbox.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableRowCheckbox < Base
+    def initialize(value:, name: "ids[]", label: nil, **attrs)
+      @value = value
+      @name = name
+      @label = label
+      super(**attrs)
+    end
+
+    def view_template
+      render RubyUI::Checkbox.new(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        name: @name,
+        value: @value,
+        aria_label: @label || "Select row #{@value}",
+        data: {
+          "ruby-ui--data-table-target": "rowCheckbox",
+          action: "change->ruby-ui--data-table#toggleRow"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_search.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSearch < Base
+    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
+      super(**attrs)
+    end
+
+    def view_template
+      form_attrs = {method: "get", action: @path}
+      form_attrs[:data] = form_data
+
+      form(**attrs.merge(form_attrs)) do
+        render RubyUI::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] = "ruby-ui--data-table-search"
+        base[:"ruby-ui--data-table-search-delay-value"] = @debounce.to_i
+        base[:action] = "input->ruby-ui--data-table-search#submit"
+      end
+      base
+    end
+
+    def default_attrs
+      {class: "max-w-sm flex-1"}
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_search_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Module-level map survives controller disconnect/connect across Turbo Frame swaps.
+// Keyed by the search form's action URL.
+const PENDING_FOCUS = new Map();
+
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 300 } };
+
+  connect() {
+    this.timer = null;
+    this.beforeFrameRender = this.captureBeforeRender.bind(this);
+    document.addEventListener("turbo:before-frame-render", this.beforeFrameRender);
+    // New instance after a Turbo Frame swap — check for captured state.
+    this.restoreIfPending();
+  }
+
+  disconnect() {
+    clearTimeout(this.timer);
+    document.removeEventListener("turbo:before-frame-render", this.beforeFrameRender);
+  }
+
+  submit(event) {
+    if (event && event.type !== "input") return;
+    clearTimeout(this.timer);
+    if (this.delayValue <= 0) return;
+    this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
+  }
+
+  captureBeforeRender() {
+    const input = this.input();
+    if (!input || document.activeElement !== input) return;
+    PENDING_FOCUS.set(this.key(), {
+      selectionStart: input.selectionStart,
+      selectionEnd: input.selectionEnd
+    });
+  }
+
+  restoreIfPending() {
+    const state = PENDING_FOCUS.get(this.key());
+    if (!state) return;
+    PENDING_FOCUS.delete(this.key());
+    const input = this.input();
+    if (!input) return;
+    input.focus();
+    const len = input.value.length;
+    try {
+      input.setSelectionRange(
+        Math.min(state.selectionStart ?? len, len),
+        Math.min(state.selectionEnd ?? len, len)
+      );
+    } catch (e) {}
+  }
+
+  input() {
+    return this.element.querySelector('input[type="search"]');
+  }
+
+  key() {
+    return this.element.action || "_";
+  }
+}

data/lib/ruby_ui/data_table/data_table_select_all_checkbox.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSelectAllCheckbox < Base
+    def view_template
+      render RubyUI::Checkbox.new(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria_label: "Select all",
+        data: {
+          "ruby-ui--data-table-target": "selectAll",
+          action: "change->ruby-ui--data-table#toggleAll"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_selection_summary.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSelectionSummary < Base
+    def initialize(total_on_page: 0, **attrs)
+      @total_on_page = total_on_page
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        plain "0 of #{@total_on_page} row(s) selected."
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground",
+        data: {"ruby-ui--data-table-target": "selectionSummary"}
+      }
+    end
+  end
+end