lightning_ui_kit 0.3.5 → 0.4.1

data/app/components/lightning_ui_kit/slider_component.rb

@@ -0,0 +1,56 @@
+class LightningUiKit::SliderComponent < LightningUiKit::BaseComponent
+  def initialize(name: nil, min: 0, max: 100, step: 1, value: nil, disabled: false, form: nil, **options)
+    @name = name
+    @min = min
+    @max = max
+    @step = step
+    @value = value.nil? ? min : value
+    @disabled = disabled
+    @form = form
+    @options = options
+  end
+
+  attr_reader :min, :max, :step, :value, :disabled
+
+  def percent
+    range = (@max - @min).to_f
+    return 0 if range <= 0
+
+    (((@value - @min) / range) * 100).clamp(0, 100)
+  end
+
+  def input_name
+    return @name unless @form && @name
+
+    "#{@form.object_name}[#{@name}]"
+  end
+
+  def classes
+    merge_classes([
+      "lui:relative lui:flex lui:h-5 lui:w-full lui:touch-none lui:select-none lui:items-center",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def fill_style
+    "width: #{formatted_percent}%;"
+  end
+
+  def thumb_style
+    "left: #{formatted_percent}%;"
+  end
+
+  def data
+    {
+      controller: "lui-slider",
+      action: "input->lui-slider#update"
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def formatted_percent
+    p = percent
+    (p % 1).zero? ? p.to_i : p.round(2)
+  end
+end

data/app/components/lightning_ui_kit/table/column_component.rb

@@ -1,11 +1,28 @@
 class LightningUiKit::Table::ColumnComponent < LightningUiKit::BaseComponent
-  attr_reader :title
+  attr_reader :title, :sort_key, :align
 
-  def initialize(title, &block)
+  def initialize(title, sort_key: nil, align: :left, &block)
     @title = title
+    @sort_key = sort_key
+    @align = align
     @block = block
   end
 
+  def sortable?
+    !@sort_key.nil?
+  end
+
+  def alignment_classes
+    case @align
+    when :right
+      "lui:text-right"
+    when :center
+      "lui:text-center"
+    else
+      "lui:text-left"
+    end
+  end
+
   def call(row)
     @block.call(row)
   end

data/app/components/lightning_ui_kit/table_component.html.erb

@@ -1,40 +1,133 @@
-<div class="lui:border-border-subtle lui:border lui:rounded-lg">
-  <table class="lui:w-full lui:text-left lui:text-sm/6 lui:text-foreground lui:border-collapse lui:border-inherit">
-    <thead class="lui:text-foreground-muted">
-      <tr class="">
-        <% columns.each do |column| %>
-          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
-        <% end %>
-        <% if actions.present? %>
-          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
-        <% end %>
-      </tr>
-    </thead>
-    <tbody>
-      <% if @data.empty? %>
+<div <% if interactive? %>data-controller="lui-table"<% end %> class="lui:relative lui:border-border-subtle lui:border lui:rounded-lg">
+  <% if selectable? && bulk_actions? %>
+    <div
+      data-lui-table-target="bulkBar"
+      class="lui:absolute lui:inset-x-0 lui:top-0 lui:z-10 lui:hidden lui:h-[calc(2.5rem+1px)] lui:items-center lui:gap-4 lui:rounded-t-[calc(var(--lui-radius-lg)-1px)] lui:border-b lui:border-b-border lui:bg-surface lui:pl-4 lui:pr-4"
+      >
+      <span class="lui:group/cb lui:relative lui:inline-flex lui:items-center lui:justify-center">
+        <input
+          type="checkbox"
+          class="<%= checkbox_input_classes %>"
+          aria-label="Select all"
+          data-lui-table-target="selectAll"
+          data-action="change->lui-table#toggleAll"
+          >
+        <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+          <path class="lui:group-has-[:indeterminate]/cb:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+          <path class="lui:opacity-0 lui:group-has-[:indeterminate]/cb:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </span>
+      <span class="lui:text-sm/6 lui:font-medium lui:text-foreground lui:whitespace-nowrap">
+        <span data-lui-table-target="count">0</span> <%= @selected_label %>
+      </span>
+      <div class="lui:flex lui:flex-wrap lui:items-center lui:gap-2">
+        <%= bulk_actions %>
+      </div>
+    </div>
+  <% end %>
+  <div class="lui:overflow-x-auto lui:rounded-[calc(var(--lui-radius-lg)-1px)] lui:border-inherit">
+    <table class="lui:w-full lui:text-left lui:text-sm/6 lui:text-foreground lui:border-collapse lui:border-inherit">
+      <thead class="lui:text-foreground-muted">
         <tr>
-          <td class="lui:p-4 lui:text-center" colspan="<%= columns.size + (actions.present? ? 1 : 0) %>">
-            <p class="lui:font-medium"><%= @empty_message %></p>
-          </td>
+          <% if selectable? %>
+            <th scope="col" class="lui:w-px lui:border-b lui:border-b-border lui:py-2 lui:pl-4 lui:pr-2">
+              <span class="lui:group/cb lui:relative lui:inline-flex lui:items-center lui:justify-center lui:align-middle">
+                <input
+                  type="checkbox"
+                  class="<%= checkbox_input_classes %>"
+                  aria-label="Select all"
+                  data-lui-table-target="selectAll"
+                  data-action="change->lui-table#toggleAll"
+                  >
+                <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+                  <path class="lui:group-has-[:indeterminate]/cb:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  <path class="lui:opacity-0 lui:group-has-[:indeterminate]/cb:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+              </span>
+            </th>
+          <% end %>
+          <% columns.each do |column| %>
+            <th
+              scope="col"
+              class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium lui:whitespace-nowrap <%= column.alignment_classes %>"
+              <% if aria_sort(column) %>aria-sort="<%= aria_sort(column) %>"<% end %>
+              >
+              <% if column.sortable? %>
+                <a
+                  href="<%= sort_url(column) %>"
+                  class="lui:group/sort lui:inline-flex lui:items-center lui:gap-1 lui:hover:text-foreground <%= "lui:text-foreground" if sorted_by?(column) %>"
+                  >
+                  <%= column.title %>
+                  <%= heroicon(sort_icon(column), variant: :outline, options: {class: "lui:size-3.5 lui:shrink-0 #{"lui:text-foreground-faint lui:group-hover/sort:text-foreground-muted" unless sorted_by?(column)}"}) %>
+                </a>
+              <% else %>
+                <%= column.title %>
+              <% end %>
+            </th>
+          <% end %>
+          <% if actions.present? %>
+            <th scope="col" class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium lui:whitespace-nowrap"><%= @actions_title %></th>
+          <% end %>
         </tr>
-      <% else %>
-        <% @data.each do |row| %>
-          <tr class="lui:group">
-            <% columns.each do |column| %>
-              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
-                <%= column.call(row) %>
-              </td>
-            <% end %>
-            <% if actions.present? %>
-              <td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
-                <% actions.each do |action| %>
-                  <%= action.call(row) %>
-                <% end %>
-              </td>
-            <% end %>
+      </thead>
+      <tbody>
+        <% if @data.empty? %>
+          <tr>
+            <td class="lui:p-4 lui:text-center lui:break-words" colspan="<%= colspan %>">
+              <p class="lui:font-medium"><%= @empty_message %></p>
+            </td>
           </tr>
+        <% else %>
+          <% @data.each do |row| %>
+            <% url = row_url_for(row) %>
+            <tr
+              class="lui:group lui:data-selected:bg-surface-hover <%= "lui:cursor-pointer lui:hover:bg-surface-hover" if url || selectable? %>"
+              <% if url %>
+                data-url="<%= url %>"
+                data-action="click->lui-table#visitRow"
+              <% elsif selectable? %>
+                data-action="click->lui-table#toggleRow"
+              <% end %>
+              >
+              <% if selectable? %>
+                <td
+                  class="lui:w-px lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:py-4 lui:pl-4 lui:pr-2"
+                  data-action="click->lui-table#toggleCell"
+                  >
+                  <span class="lui:relative lui:inline-flex lui:items-center lui:justify-center lui:align-middle">
+                    <input
+                      type="checkbox"
+                      name="<%= @select_name %>"
+                      value="<%= row_value(row) %>"
+                      class="<%= checkbox_input_classes %>"
+                      aria-label="Select row"
+                      data-lui-table-target="rowCheckbox"
+                      data-action="change->lui-table#update"
+                      >
+                    <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                  </span>
+                </td>
+              <% end %>
+              <% columns.each do |column| %>
+                <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:whitespace-nowrap <%= column.alignment_classes %>">
+                  <%= column.call(row) %>
+                </td>
+              <% end %>
+              <% if actions.present? %>
+                <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:whitespace-nowrap">
+                  <div class="lui:flex lui:gap-3">
+                    <% actions.each do |action| %>
+                      <%= action.call(row) %>
+                    <% end %>
+                  </div>
+                </td>
+              <% end %>
+            </tr>
+          <% end %>
         <% end %>
-      <% end %>
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </div>
 </div>

data/app/components/lightning_ui_kit/table_component.rb

@@ -1,14 +1,170 @@
 class LightningUiKit::TableComponent < LightningUiKit::BaseComponent
-  renders_many :columns, ->(title, &block) do
-    LightningUiKit::Table::ColumnComponent.new(title, &block)
+  renders_many :columns, ->(title, sort_key: nil, align: :left, cell: nil) do
+    LightningUiKit::Table::ColumnComponent.new(title, sort_key: sort_key, align: align) { |row| capture_cell(row, &cell) }
   end
-  renders_many :actions, ->(&block) do
-    LightningUiKit::Table::ActionComponent.new(&block)
+  renders_many :actions, ->(cell: nil) do
+    LightningUiKit::Table::ActionComponent.new { |row| capture_cell(row, &cell) }
   end
+  renders_one :bulk_actions
 
-  def initialize(data:, actions_title: "Actions", empty_message: "No data available")
+  # ViewComponent funnels slot blocks through Rails' `capture`, which discards
+  # non-String return values (Integers, Dates, ...), rendering blank cells.
+  # Route blocks around that wrapper via the cell: argument so capture_cell
+  # can evaluate them instead.
+  alias_method :__with_column_slot, :with_column
+  def with_column(title, sort_key: nil, align: :left, &block)
+    __with_column_slot(title, sort_key: sort_key, align: align, cell: block)
+  end
+
+  alias_method :__with_action_slot, :with_action
+  def with_action(&block)
+    __with_action_slot(cell: block)
+  end
+
+  def initialize(
+    data:,
+    selectable: false,
+    select_name: "ids[]",
+    row_id: :id,
+    row_url: nil,
+    sort_key: nil,
+    sort_direction: nil,
+    sort_param: :sort,
+    direction_param: :direction,
+    selected_label: "selected",
+    actions_title: "Actions",
+    empty_message: "No data available"
+  )
     @data = data
+    @selectable = selectable
+    @select_name = select_name
+    @row_id = row_id
+    @row_url = row_url
+    @sort_key = sort_key
+    @sort_direction = sort_direction
+    @sort_param = sort_param
+    @direction_param = direction_param
+    @selected_label = selected_label
     @actions_title = actions_title
     @empty_message = empty_message
   end
+
+  def selectable?
+    @selectable
+  end
+
+  def interactive?
+    selectable? || !@row_url.nil?
+  end
+
+  def row_value(row)
+    case @row_id
+    when Proc
+      @row_id.call(row)
+    else
+      if row.is_a?(Hash)
+        row[@row_id] || row[@row_id.to_s]
+      elsif row.respond_to?(@row_id)
+        row.public_send(@row_id)
+      elsif row.respond_to?(:[])
+        row[@row_id] || row[@row_id.to_s]
+      end
+    end
+  end
+
+  def row_url_for(row)
+    @row_url&.call(row)
+  end
+
+  def sorted_by?(column)
+    column.sortable? && column.sort_key.to_s == current_sort_key
+  end
+
+  def sort_url(column)
+    direction = (sorted_by?(column) && current_sort_direction == "asc") ? "desc" : "asc"
+    query = current_query_parameters.merge(
+      @sort_param.to_s => column.sort_key.to_s,
+      @direction_param.to_s => direction
+    )
+    "#{current_path}?#{query.to_query}"
+  end
+
+  def sort_icon(column)
+    return "chevron-up-down" unless sorted_by?(column)
+
+    (current_sort_direction == "desc") ? "chevron-down" : "chevron-up"
+  end
+
+  def aria_sort(column)
+    return unless sorted_by?(column)
+
+    (current_sort_direction == "desc") ? "descending" : "ascending"
+  end
+
+  # Current sort state: the sort/direction request params when present
+  # (validated), otherwise the explicit sort_key:/sort_direction: defaults.
+  def current_sort_key
+    sort_state[0]
+  end
+
+  def current_sort_direction
+    sort_state[1]
+  end
+
+  def colspan
+    columns.size + (selectable? ? 1 : 0) + (actions.present? ? 1 : 0)
+  end
+
+  def checkbox_input_classes
+    <<~CLASSES.squish
+      lui:peer lui:size-[1.125rem] lui:shrink-0 lui:cursor-pointer lui:appearance-none
+      lui:rounded-[0.3125rem] lui:border lui:border-border-strong lui:bg-surface-input lui:shadow-sm
+      lui:hover:border-border-hover lui:sm:size-4
+      lui:checked:border-border-invert lui:checked:bg-surface-invert lui:checked:hover:border-border-invert
+      lui:indeterminate:border-border-invert lui:indeterminate:bg-surface-invert lui:indeterminate:hover:border-border-invert
+      lui:focus-visible:outline lui:focus-visible:outline-2 lui:focus-visible:outline-offset-2 lui:focus-visible:outline-focus
+      lui:disabled:cursor-not-allowed lui:disabled:opacity-50
+    CLASSES
+  end
+
+  def checkbox_icon_classes
+    <<~CLASSES.squish
+      lui:pointer-events-none lui:absolute lui:inset-0 lui:m-auto lui:size-4
+      lui:stroke-foreground-invert lui:opacity-0
+      lui:peer-checked:opacity-100 lui:peer-indeterminate:opacity-100 lui:sm:size-3.5
+    CLASSES
+  end
+
+  private
+
+  # Like Rails' `capture`, but preserves non-String block values so ERB can
+  # `to_s` them: buffered markup wins, otherwise the raw value passes through.
+  def capture_cell(row, &block)
+    value = nil
+    buffer = view_context.with_output_buffer { value = block.call(row) }
+    buffer.presence || value
+  end
+
+  def sort_state
+    @sort_state ||= begin
+      url_key = current_query_parameters[@sort_param.to_s].to_s
+      if url_key.empty?
+        [@sort_key.to_s, normalize_direction(@sort_direction.to_s)]
+      else
+        [url_key, normalize_direction(current_query_parameters[@direction_param.to_s].to_s)]
+      end
+    end
+  end
+
+  def normalize_direction(direction)
+    LightningUiKit::Sorting::DIRECTIONS.include?(direction) ? direction : "asc"
+  end
+
+  def current_query_parameters
+    request&.query_parameters || {}
+  end
+
+  def current_path
+    request&.path || ""
+  end
 end

data/app/components/lightning_ui_kit/toggle_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.button(type: "button", class: classes, disabled: disabled?, data: data, "data-state": state, "aria-pressed": pressed) do %>
+  <%= content %>
+<% end %>

data/app/components/lightning_ui_kit/toggle_component.rb

@@ -0,0 +1,53 @@
+class LightningUiKit::ToggleComponent < LightningUiKit::BaseComponent
+  VARIANTS = %i[default outline].freeze
+  SIZES = %i[default sm lg].freeze
+
+  def initialize(pressed: false, variant: :default, size: :default, disabled: false, **options)
+    @pressed = pressed
+    @variant = VARIANTS.include?(variant) ? variant : :default
+    @size = SIZES.include?(size) ? size : :default
+    @disabled = disabled
+    @options = options
+  end
+
+  def classes
+    base = "lui:inline-flex lui:items-center lui:justify-center lui:gap-2 lui:rounded-md lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer lui:select-none lui:transition-colors " \
+      "lui:text-foreground-muted lui:hover:bg-surface-hover lui:hover:text-foreground " \
+      "lui:data-[state=on]:bg-surface-hover lui:data-[state=on]:text-foreground " \
+      "lui:focus-visible:outline-2 lui:focus-visible:outline-offset-2 lui:focus-visible:outline-focus " \
+      "lui:disabled:pointer-events-none lui:disabled:opacity-50"
+    merge_classes([base, variant_classes, size_classes, @options[:class]].compact.join(" "))
+  end
+
+  def state
+    @pressed ? "on" : "off"
+  end
+
+  def disabled?
+    @disabled
+  end
+
+  attr_reader :pressed
+
+  def data
+    {
+      controller: "lui-toggle",
+      lui_toggle_pressed_value: @pressed,
+      action: "click->lui-toggle#toggle"
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def variant_classes
+    (@variant == :outline) ? "lui:border lui:border-border lui:bg-transparent" : "lui:bg-transparent"
+  end
+
+  def size_classes
+    case @size
+    when :sm then "lui:h-8 lui:min-w-8 lui:px-1.5"
+    when :lg then "lui:h-10 lui:min-w-10 lui:px-2.5"
+    else "lui:h-9 lui:min-w-9 lui:px-2"
+    end
+  end
+end

data/app/components/lightning_ui_kit/toggle_group/item_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/lightning_ui_kit/toggle_group/item_component.rb

@@ -0,0 +1,8 @@
+class LightningUiKit::ToggleGroup::ItemComponent < LightningUiKit::BaseComponent
+  attr_reader :value
+
+  def initialize(value:, **options)
+    @value = value
+    @options = options
+  end
+end

data/app/components/lightning_ui_kit/toggle_group_component.html.erb

@@ -0,0 +1,15 @@
+<%= tag.div(class: classes, data: data, role: "group") do %>
+  <% items.each do |item| %>
+    <button
+      type="button"
+      class="<%= item_classes %>"
+      data-lui-toggle-group-target="item"
+      data-value="<%= item.value %>"
+      data-state="<%= state(item.value) %>"
+      aria-pressed="<%= selected?(item.value) %>"
+      data-action="click->lui-toggle-group#toggle"
+    >
+      <%= item %>
+    </button>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/toggle_group_component.rb

@@ -0,0 +1,57 @@
+class LightningUiKit::ToggleGroupComponent < LightningUiKit::BaseComponent
+  renders_many :items, LightningUiKit::ToggleGroup::ItemComponent
+
+  TYPES = %i[single multiple].freeze
+  VARIANTS = %i[default outline].freeze
+  SIZES = %i[default sm lg].freeze
+
+  def initialize(type: :single, variant: :default, size: :default, value: nil, **options)
+    @type = TYPES.include?(type) ? type : :single
+    @variant = VARIANTS.include?(variant) ? variant : :default
+    @size = SIZES.include?(size) ? size : :default
+    @value = Array(value).map(&:to_s)
+    @options = options
+  end
+
+  def selected?(item_value)
+    @value.include?(item_value.to_s)
+  end
+
+  def state(item_value)
+    selected?(item_value) ? "on" : "off"
+  end
+
+  def classes
+    merge_classes(["lui:inline-flex lui:items-center lui:gap-1", @options[:class]].compact.join(" "))
+  end
+
+  def item_classes
+    base = "lui:inline-flex lui:items-center lui:justify-center lui:gap-2 lui:rounded-md lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer lui:select-none lui:transition-colors " \
+      "lui:text-foreground-muted lui:hover:bg-surface-hover lui:hover:text-foreground " \
+      "lui:data-[state=on]:bg-surface-hover lui:data-[state=on]:text-foreground " \
+      "lui:focus-visible:outline-2 lui:focus-visible:outline-offset-2 lui:focus-visible:outline-focus " \
+      "lui:disabled:pointer-events-none lui:disabled:opacity-50"
+    [base, variant_classes, size_classes].join(" ")
+  end
+
+  def data
+    {
+      controller: "lui-toggle-group",
+      lui_toggle_group_type_value: @type.to_s
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def variant_classes
+    (@variant == :outline) ? "lui:border lui:border-border lui:bg-transparent" : "lui:bg-transparent"
+  end
+
+  def size_classes
+    case @size
+    when :sm then "lui:h-8 lui:min-w-8 lui:px-1.5"
+    when :lg then "lui:h-10 lui:min-w-10 lui:px-2.5"
+    else "lui:h-9 lui:min-w-9 lui:px-2"
+    end
+  end
+end

data/app/components/lightning_ui_kit/tooltip_component.html.erb

@@ -7,7 +7,7 @@
   <%= content %>
 
   <%= tag.div(data: { "lui-tooltip-target" => "template" }, class: "lui:hidden") do %>
-    <%= tag.div( class: "lui:absolute lui:z-50 lui:px-3 lui:py-2 lui:text-sm lui:font-medium lui:text-tooltip-text lui:bg-tooltip-bg lui:rounded-lg lui:shadow-sm lui:opacity-0 lui:transition-opacity lui:duration-200 lui:ease-in-out") do %>
+    <%= tag.div( class: "lui:absolute lui:z-50 lui:px-3 lui:py-1.5 lui:text-xs lui:text-tooltip-text lui:bg-tooltip-bg lui:rounded-lg lui:shadow-sm lui:opacity-0 lui:transition-opacity lui:duration-200 lui:ease-in-out") do %>
       <%= @text %>
       <%= tag.div( class: "tooltip-arrow lui:absolute lui:w-2 lui:h-2 lui:bg-tooltip-bg lui:transform lui:rotate-45", data: { "tooltip-arrow" => "true" }) %>
     <% end %>

data/app/controllers/concerns/lightning_ui_kit/sortable.rb

@@ -0,0 +1,18 @@
+module LightningUiKit
+  # Controller mixin for server-side table sorting:
+  #
+  #   class OrdersController < ApplicationController
+  #     include LightningUiKit::Sortable
+  #
+  #     def index
+  #       @orders = lui_sort(Order.all, allowed: %w[number total created_at], default: :created_at)
+  #     end
+  #   end
+  module Sortable
+    private
+
+    def lui_sort(scope, **options)
+      LightningUiKit::Sorting.apply(scope, params, **options)
+    end
+  end
+end