feat(data_table): Hotwire-first DataTable component family

.gitignore

@@ -6,6 +6,7 @@
 
 # Ignore bundler config.
 /.bundle
+/vendor/bundle
 
 # Ignore all logfiles and tempfiles.
 /log/*
@@ -46,3 +47,6 @@ yarn-error.log
 
 # Pnpm
 .pnpm-store
+
+# Local design artifacts (not checked in)
+/docs/superpowers/

app/components/docs/visual_code_example.rb

@@ -78,16 +78,16 @@ def render_preview_tab(&block)
       end
 
       def iframe_preview
-        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
-          div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do
+        div(class: "relative min-h-[500px] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
+          div(class: "absolute inset-0 hidden w-full bg-background md:block") do
             iframe(src: @src, class: "size-full", data: {iframe_theme_target: "iframe"})
           end
         end
       end
 
       def raw_preview
         div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
-          div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
+          div(class: "preview min-h-[350px] w-full p-6") do
             decoded_code = CGI.unescapeHTML(@display_code)
             @context.instance_eval(decoded_code)
           end

app/components/ruby_ui/data_table/data_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTable < Base
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**attrs) do
+          yield if block
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full space-y-4",
+        data: {controller: "ruby-ui--data-table"}
+      }
+    end
+  end
+end

app/components/ruby_ui/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableBulkActions < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden items-center gap-2",
+        data: {"ruby-ui--data-table-target": "bulkActions"}
+      }
+    end
+  end
+end

app/components/ruby_ui/data_table/data_table_column_toggle.rb

@@ -0,0 +1,48 @@
+# 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"
+              raw view_context.lucide_icon("chevron-down", class: "w-4 h-4 ml-1")
+            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

app/components/ruby_ui/data_table/data_table_expand_toggle.rb

@@ -0,0 +1,39 @@
+# 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
+      raw view_context.lucide_icon("chevron-right", class: "h-4 w-4 transition-transform duration-150 group-aria-expanded:rotate-90")
+    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

app/components/ruby_ui/data_table/data_table_form.rb

@@ -0,0 +1,31 @@
+# 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
+      view_context.form_authenticity_token
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

app/components/ruby_ui/data_table/data_table_pagination.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+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, **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
+      super(**attrs)
+    end
+
+    def view_template
+      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::DataTablePaginationAdapters::Pagy.new(pagy) if pagy
+      return RubyUI::DataTablePaginationAdapters::Kaminari.new(kaminari) if kaminari
+      if page && per_page && total_count
+        return RubyUI::DataTablePaginationAdapters::Manual.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 = @query.merge(@page_param => p.to_s).to_query
+      qs.empty? ? @path : "#{@path}?#{qs}"
+    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") { plain "Previous" }
+        end
+      else
+        render RubyUI::PaginationItem.new(href: page_href(current - 1)) { plain "Previous" }
+      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") { plain "Next" }
+        end
+      else
+        render RubyUI::PaginationItem.new(href: page_href(current + 1)) { plain "Next" }
+      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

app/components/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

app/components/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

app/components/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