ruby_ui 1.1.0 → 1.3.0

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

data/lib/ruby_ui/data_table/data_table_sort_head.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module RubyUI
+  class DataTableSortHead < Base
+    def initialize(column_key:, label:, sort: nil, direction: nil, sort_param: "sort", direction_param: "direction", page_param: "page", path: "", query: {}, **attrs)
+      @column_key = column_key
+      @label = label
+      @sort = sort
+      @direction = direction
+      @sort_param = sort_param
+      @direction_param = direction_param
+      @page_param = page_param
+      @path = path
+      @query = query.to_h.transform_keys(&:to_s)
+      super(**attrs)
+    end
+
+    def view_template
+      render RubyUI::TableHead.new(class: "text-foreground whitespace-nowrap", **attrs) do
+        a(href: sort_href, class: "inline-flex items-center gap-1 text-inherit no-underline hover:text-foreground transition-colors") do
+          plain @label
+          sort_icon
+        end
+      end
+    end
+
+    private
+
+    def current_direction
+      (@sort.to_s == @column_key.to_s) ? @direction : nil
+    end
+
+    def next_params
+      next_dir = {nil => "asc", "asc" => "desc", "desc" => nil}[current_direction]
+      base = @query.except(@sort_param, @direction_param, @page_param)
+      next_dir ? base.merge(@sort_param => @column_key.to_s, @direction_param => next_dir) : base
+    end
+
+    def sort_href
+      qs = build_query(next_params)
+      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 sort_icon
+      icon_name = case current_direction
+      when "asc" then :chevron_up
+      when "desc" then :chevron_down
+      else :chevrons_up_down
+      end
+      icon_class = current_direction ? "inline-block w-3 h-3" : "inline-block w-3 h-3 opacity-30"
+      render_sort_svg(icon_name, icon_class)
+    end
+
+    def render_sort_svg(icon_name, icon_class)
+      case icon_name
+      when :chevron_up
+        # chevron-up: polyline pointing up
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "18 15 12 9 6 15") }
+      when :chevron_down
+        # chevron-down: polyline pointing down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      else
+        # chevrons-up-down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) do |s|
+          s.polyline(points: "8 15 12 19 16 15")
+          s.polyline(points: "8 9 12 5 16 9")
+        end
+      end
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_toolbar.rb

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

data/lib/ruby_ui/date_picker/date_picker.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module RubyUI
+  class DatePicker < Base
+    def initialize(
+      id: nil,
+      name: nil,
+      label: "Select a date",
+      value: nil,
+      placeholder: "Select a date",
+      selected_date: value,
+      date_format: "yyyy-MM-dd",
+      popover_options: {},
+      input_attrs: {},
+      calendar_attrs: {},
+      trigger_attrs: {},
+      content_attrs: {},
+      **attrs
+    )
+      @id = id || "date-picker-#{SecureRandom.hex(4)}"
+      @name = name
+      @label = label
+      @value = value || selected_date&.to_s
+      @placeholder = placeholder
+      @selected_date = selected_date
+      @date_format = date_format
+      @popover_options = {trigger: "click"}.merge(popover_options)
+      @input_attrs = input_attrs
+      @calendar_attrs = calendar_attrs
+      @trigger_attrs = trigger_attrs
+      @content_attrs = content_attrs
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        RubyUI.Popover(options: @popover_options) do
+          RubyUI.PopoverTrigger(**trigger_attrs) do
+            div(class: "grid w-full max-w-sm items-center gap-1.5") do
+              label(for: @id) { @label } if @label
+              RubyUI.Input(**input_attrs)
+            end
+          end
+          RubyUI.PopoverContent(**content_attrs) do
+            RubyUI.Calendar(input_id: "##{@id}", selected_date: @selected_date, date_format: @date_format, **calendar_attrs)
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "space-y-4 w-[260px]"
+      }
+    end
+
+    def trigger_attrs
+      mix({class: "w-full"}, @trigger_attrs)
+    end
+
+    def input_attrs
+      mix({
+        type: "string",
+        placeholder: @placeholder,
+        id: @id,
+        name: @name,
+        value: @value,
+        data_controller: "ruby-ui--calendar-input",
+        class: "rounded-md border shadow"
+      }.compact, @input_attrs)
+    end
+
+    def calendar_attrs
+      mix({}, @calendar_attrs)
+    end
+
+    def content_attrs
+      mix({}, @content_attrs)
+    end
+  end
+end

data/lib/ruby_ui/date_picker/date_picker_docs.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Views::Docs::DatePicker < Views::Base
+  def view_template
+    component = "DatePicker"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Date Picker", description: "A date picker component with input.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Single Date", context: self) do
+        <<~RUBY
+          DatePicker(id: "date")
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelect < Base
+    def initialize(size: :default, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+      ) do
+        select(**attrs, &block)
+        render RubyUI::NativeSelectIcon.new
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: [
+          "border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0",
+          "placeholder:text-muted-foreground",
+          "selection:bg-primary selection:text-primary-foreground",
+          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2",
+          (@size == :sm) ? "h-7 rounded-md py-0.5" : "h-9"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_docs.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class Views::Docs::NativeSelect < Views::Base
+  def view_template
+    component = "NativeSelect"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Native Select", description: "A styled native HTML select element with consistent design system integration.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+              NativeSelectOption(value: "pineapple") { "Pineapple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Groups", description: "Use NativeSelectGroup to organize options into categories.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a department" }
+              NativeSelectGroup(label: "Engineering") do
+                NativeSelectOption(value: "frontend") { "Frontend" }
+                NativeSelectOption(value: "backend") { "Backend" }
+                NativeSelectOption(value: "devops") { "DevOps" }
+              end
+              NativeSelectGroup(label: "Sales") do
+                NativeSelectOption(value: "account_executive") { "Account Executive" }
+                NativeSelectOption(value: "sales_development") { "Sales Development" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", description: "Add the disabled attribute to the NativeSelect component to disable the select.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(disabled: true) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Invalid", description: "Use aria-invalid to show validation errors.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(aria: {invalid: "true"}) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Native Select vs Select" }
+
+      div(class: "space-y-2 text-sm text-muted-foreground") do
+        p { "NativeSelect: Choose for native browser behavior, superior performance, or mobile-optimized dropdowns." }
+        p { "Select: Choose for custom styling, animations, or complex interactions." }
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectGroup < Base
+    def view_template(&)
+      optgroup(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_icon.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "size-4",
+        aria_hidden: "true"
+      ) do |s|
+        s.path(d: "m6 9 6 6 6-6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+      }
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_option.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectOption < Base
+    def view_template(&)
+      option(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/select/select_value.rb

@@ -9,7 +9,8 @@ module RubyUI
 
     def view_template(&block)
       span(**attrs) do
-        block ? block.call : @placeholder
+        value = block ? block.call : @placeholder
+        value || @placeholder
       end
     end
 

data/lib/ruby_ui/sheet/sheet.rb

@@ -2,6 +2,11 @@
 
 module RubyUI
   class Sheet < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
     def view_template(&)
       div(**attrs, &)
     end
@@ -10,7 +15,10 @@ module RubyUI
 
     def default_attrs
       {
-        data: {controller: "ruby-ui--sheet"}
+        data: {
+          controller: "ruby-ui--sheet",
+          ruby_ui__sheet_open_value: @open.to_s
+        }
       }
     end
   end

data/lib/ruby_ui/sheet/sheet_controller.js

@@ -3,6 +3,12 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["content"]
 
+  static values = { open: false }
+
+  connect() {
+    if (this.openValue) this.open()
+  }
+
   open() {
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
   }

data/lib/ruby_ui/theme_toggle/theme_toggle.rb

@@ -2,8 +2,20 @@
 
 module RubyUI
   class ThemeToggle < Base
-    def view_template(&)
-      div(**attrs, &)
+    def view_template(&block)
+      RubyUI.Toggle(
+        variant: :default,
+        size: :default,
+        aria: {label: "Toggle theme"},
+        wrapper: {
+          data: {
+            controller: "ruby-ui--theme-toggle",
+            action: "ruby-ui--toggle:change->ruby-ui--theme-toggle#apply"
+          }
+        },
+        **attrs,
+        &block
+      )
     end
   end
 end

data/lib/ruby_ui/theme_toggle/theme_toggle_controller.js

@@ -1,30 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Connects to data-controller="ruby-ui--theme-toggle"
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
+// ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
-  initialize() {
-    this.setTheme()
+  connect() {
+    this.applyTheme(this.currentTheme())
   }
 
-  setTheme() {
-    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.remove('dark')
-      document.documentElement.classList.add('light')
-    }
+  apply(event) {
+    const pressed = event.detail?.pressed
+    const theme = pressed ? "dark" : "light"
+    localStorage.theme = theme
+    this.applyTheme(theme)
   }
 
-  setLightTheme() {
-    // Whenever the user explicitly chooses light mode
-    localStorage.theme = 'light'
-    this.setTheme()
+  currentTheme() {
+    if (localStorage.theme === "dark") return "dark"
+    if (localStorage.theme === "light") return "light"
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }
 
-  setDarkTheme() {
-    // Whenever the user explicitly chooses dark mode
-    localStorage.theme = 'dark'
-    this.setTheme()
+  applyTheme(theme) {
+    const html = document.documentElement
+    if (theme === "dark") {
+      html.classList.add("dark")
+      html.classList.remove("light")
+    } else {
+      html.classList.add("light")
+      html.classList.remove("dark")
+    }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
+    const dark = theme === "dark"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }