ruby_ui 1.1.0 → 1.2.0

data/lib/ruby_ui/data_table/data_table_column_toggle.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableColumnToggle < Base
+    def initialize(columns:, **attrs)
+      @columns = columns
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        render RubyUI::DropdownMenu.new do
+          render RubyUI::DropdownMenuTrigger.new do
+            render RubyUI::Button.new(variant: :outline, size: :sm) do
+              plain "Columns"
+              # inline chevron-down SVG (lucide 24px, 1px stroke)
+              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: "w-4 h-4 ml-1"
+              ) do |s|
+                s.polyline(points: "6 9 12 15 18 9")
+              end
+            end
+          end
+          render RubyUI::DropdownMenuContent.new do
+            @columns.each do |col|
+              label(class: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent") do
+                input(
+                  type: "checkbox",
+                  checked: true,
+                  class: "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                  data: {
+                    column_key: col[:key].to_s,
+                    action: "change->ruby-ui--data-table-column-visibility#toggle"
+                  }
+                )
+                span { plain col[:label] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative",
+        data: {controller: "ruby-ui--data-table-column-visibility"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_column_visibility_controller.js

@@ -0,0 +1,14 @@
+// app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  toggle(event) {
+    const key = event.target.dataset.columnKey;
+    const visible = event.target.checked;
+    const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
+    if (!root) return;
+    root
+      .querySelectorAll(`[data-column="${key}"]`)
+      .forEach((el) => el.classList.toggle("hidden", !visible));
+  }
+}

data/lib/ruby_ui/data_table/data_table_controller.js

@@ -0,0 +1,57 @@
+// app/javascript/controllers/ruby_ui/data_table_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "selectAll",
+    "rowCheckbox",
+    "selectionSummary",
+    "selectionBar",
+    "bulkActions",
+  ];
+
+  connect() {
+    this.updateState();
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked;
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = checked;
+    });
+    this.updateState();
+  }
+
+  toggleRow() {
+    this.updateState();
+  }
+
+  toggleRowDetail(event) {
+    const button = event.currentTarget;
+    const id = button.getAttribute("aria-controls");
+    if (!id) return;
+    const target = document.getElementById(id);
+    if (!target) return;
+    const expanded = button.getAttribute("aria-expanded") === "true";
+    button.setAttribute("aria-expanded", String(!expanded));
+    target.classList.toggle("hidden", expanded);
+  }
+
+  updateState() {
+    const total = this.rowCheckboxTargets.length;
+    const selected = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = total > 0 && selected === total;
+      this.selectAllTarget.indeterminate = selected > 0 && selected < total;
+    }
+
+    if (this.hasSelectionSummaryTarget) {
+      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+    }
+
+    if (this.hasBulkActionsTarget) {
+      this.bulkActionsTarget.classList.toggle("hidden", selected === 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