ruby_ui 1.2.0 → 1.4.0

data/lib/ruby_ui/command/command_dialog_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--command-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static outlets = ["ruby-ui--command"];
+
+  rubyUiCommandOutletConnected(controller) {
+    this.openOutlet = controller;
+  }
+
+  rubyUiCommandOutletDisconnected() {
+    this.openOutlet = null;
+  }
+
+  open(e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!this.hasContentTarget) {
+      return;
+    }
+
+    if (this.openOutlet) {
+      this.openOutlet.focusInput();
+      return;
+    }
+
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+}

data/lib/ruby_ui/command/command_dialog_trigger.rb

@@ -8,7 +8,7 @@ module RubyUI
     ].freeze
 
     def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
-      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command#open" }
+      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command-dialog#open" }
       super(**attrs)
     end
 
@@ -21,7 +21,7 @@ module RubyUI
     def default_attrs
       {
         data: {
-          action: ["click->ruby-ui--command#open", @keybindings.join(" ")]
+          action: ["click->ruby-ui--command-dialog#open", @keybindings.join(" ")]
         }
       }
     end

data/lib/ruby_ui/data_table/data_table_docs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Views::Docs::DataTable < Views::Base
-  Row = Struct.new(:id, :name, :email, :salary, :status, keyword_init: true)
+  Row = Struct.new(:id, :name, :email, :salary, :status)
 
   SAMPLE_ROWS = [
     Row.new(id: 1, name: "Alice", email: "alice@example.com", salary: 90_000, status: "Active"),

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/dialog/dialog_content.rb

@@ -17,14 +17,9 @@ module RubyUI
     end
 
     def view_template
-      template(data: {ruby_ui__dialog_target: "content"}) do
-        div(data_controller: "ruby-ui--dialog") do
-          backdrop
-          div(**attrs) do
-            yield
-            close_button
-          end
-        end
+      dialog(**attrs) do
+        yield
+        close_button
       end
     end
 
@@ -32,9 +27,10 @@ module RubyUI
 
     def default_attrs
       {
-        data_state: "open",
+        data_ruby_ui__dialog_target: "dialog",
+        data_action: "click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -43,7 +39,7 @@ module RubyUI
     def close_button
       button(
         type: "button",
-        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(
@@ -65,13 +61,5 @@ module RubyUI
         span(class: "sr-only") { "Close" }
       end
     end
-
-    def backdrop
-      div(
-        data_state: "open",
-        data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0"
-      )
-    end
   end
 end

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="dialog"
+// Connects to data-controller="ruby-ui--dialog"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["dialog"]
   static values = {
     open: {
       type: Boolean,
@@ -11,22 +11,34 @@ export default class extends Controller {
   }
 
   connect() {
+    this.dialogTarget.addEventListener("close", this.handleClose)
     if (this.openValue) {
       this.open()
     }
   }
 
+  disconnect() {
+    this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.body.classList.remove("overflow-hidden")
+  }
+
   open(e) {
-    e?.preventDefault();
-    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
-    // prevent scroll on body
-    document.body.classList.add('overflow-hidden')
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    document.body.classList.add("overflow-hidden")
   }
 
   dismiss() {
-    // allow scroll on body
-    document.body.classList.remove('overflow-hidden')
-    // remove the element
-    this.element.remove()
+    this.dialogTarget.close()
+  }
+
+  backdropClick(e) {
+    if (e.target === this.dialogTarget) {
+      this.dismiss()
+    }
+  }
+
+  handleClose = () => {
+    document.body.classList.remove("overflow-hidden")
   }
 }

data/lib/ruby_ui/dropdown_menu/dropdown_menu_item.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class DropdownMenuItem < Base
-    def initialize(href: "#", **attrs)
+    def initialize(as: :a, href: "#", **attrs)
+      @as = as
       @href = href
       super(**attrs)
     end
 
     def view_template(&)
-      a(**attrs, &)
+      if @as == :div
+        div(**attrs, &)
+      else
+        a(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        href: @href,
+      base = {
         role: "menuitem",
         class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data_action: "click->ruby-ui--dropdown-menu#close",
@@ -23,6 +27,8 @@ module RubyUI
         tabindex: "-1",
         data_orientation: "vertical"
       }
+      base[:href] = @href unless @as == :div
+      base
     end
   end
 end

data/lib/ruby_ui/form/form_docs.rb

@@ -170,6 +170,95 @@ class Views::Docs::Form < Views::Base
         RUBY
       end
 
+      Heading(level: 2) { "Rails Integration" }
+
+      Text do
+        plain "RubyUI Form components are plain HTML — they work with any form submission strategy. "
+        plain "The recommended approach for Rails apps is to use "
+        InlineLink(href: "https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with", target: "_blank") { "form_with" }
+        plain " to generate the "
+        code(class: "font-mono text-sm") { "action" }
+        plain " URL and CSRF token, then pass explicit "
+        code(class: "font-mono text-sm") { "name" }
+        plain " / "
+        code(class: "font-mono text-sm") { "id" }
+        plain " attributes to each RubyUI input so the browser serialises them correctly. "
+        plain "Server-side errors can be surfaced by rendering "
+        code(class: "font-mono text-sm") { "FormFieldError" }
+        plain " with content from "
+        code(class: "font-mono text-sm") { "model.errors.full_messages_for(:attr)" }
+        plain "."
+      end
+
+      Heading(level: 3) { "Minimal Rails form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # In your Phlex view, call form_with via helpers:
+        # form_with(url: users_path, method: :post) passes action + CSRF automatically.
+        #
+        # You can also set action and the CSRF token manually:
+        Form(action: helpers.users_path, method: "post", class: "w-2/3 space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "user_email") { "Email" }
+            Input(
+              type: "email",
+              id: "user_email",
+              name: "user[email]",
+              placeholder: "you@example.com",
+              required: true
+            )
+            FormFieldError()
+          end
+
+          Button(type: "submit") { "Continue" }
+        end
+      RUBY
+
+      Heading(level: 3) { "Devise-style login form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # Full sign-in form mirroring Devise session[email] / session[password] params.
+        # Pass backend errors (e.g. "Invalid email or password") into FormFieldError.
+        Form(action: helpers.user_session_path, method: "post", class: "space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "session_email") { "Email" }
+            Input(
+              type: "email",
+              id: "session_email",
+              name: "session[email]",
+              placeholder: "you@example.com",
+              autocomplete: "email",
+              required: true
+            )
+            FormFieldError { @error_message }
+          end
+
+          FormField do
+            FormFieldLabel(for: "session_password") { "Password" }
+            Input(
+              type: "password",
+              id: "session_password",
+              name: "session[password]",
+              autocomplete: "current-password",
+              required: true,
+              minlength: "8"
+            )
+            FormFieldError()
+          end
+
+          FormField do
+            div(class: "flex items-center gap-2") do
+              Checkbox(id: "session_remember_me", name: "session[remember_me]", value: "1")
+              FormFieldLabel(for: "session_remember_me") { "Remember me" }
+            end
+          end
+
+          Button(type: "submit", class: "w-full") { "Sign in" }
+        end
+      RUBY
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -2,18 +2,8 @@
 
 module RubyUI
   class MaskedInput < Base
-    def initialize(save_unmasked: false, **attrs)
-      @save_unmasked = save_unmasked
-      super(**attrs)
-    end
-
     def view_template
-      if @save_unmasked
-        Input(type: "text", **attrs.merge(name: "#{attrs[:name]}-masked"))
-        input(type: "hidden", name: attrs[:name], value: attrs[:value])
-      else
-        Input(type: "text", **attrs)
-      end
+      Input(type: "text", **attrs)
     end
 
     private

data/lib/ruby_ui/masked_input/masked_input_controller.js

@@ -5,18 +5,5 @@ import { MaskInput } from "maska";
 export default class extends Controller {
   connect() {
     new MaskInput(this.element)
-    this.#boundSync = this.#sync.bind(this);
-    this.element.addEventListener("maska", this.#boundSync);
-  }
-
-  disconnect() {
-    this.element.removeEventListener("maska", this.#boundSync);
-  }
-
-  #boundSync = null;
-
-  #sync(event) {
-    const hidden = this.element.nextElementSibling;
-    if (hidden?.type === "hidden") hidden.value = event.detail.unmasked;
   }
 }

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/table/table_docs.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 class Views::Docs::Table < Views::Base
-  Invoice = Struct.new(:identifier, :status, :method, :amount, keyword_init: true)
-  User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true)
+  Invoice = Struct.new(:identifier, :status, :method, :amount)
+  User = Struct.new(:avatar_url, :name, :username, :commits, :github_url)
 
   def view_template
     component = "Table"

data/lib/ruby_ui/tabs/tabs_docs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Views::Docs::Tabs < Views::Base
-  Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true)
+  Repo = Struct.new(:github_url, :name, :stars, :version)
 
   def view_template
     component = "Tabs"

data/lib/ruby_ui/tabs/tabs_trigger.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class TabsTrigger < Base
-    def initialize(value:, **attrs)
+    def initialize(value:, as: :button, **attrs)
       @value = value
+      @as = as
       super(**attrs)
     end
 
     def view_template(&)
-      button(**attrs, &)
+      if @as == :a
+        a(**attrs, &)
+      else
+        button(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        type: :button,
+      base = {
         data: {
           ruby_ui__tabs_target: "trigger",
           action: "click->ruby-ui--tabs#show",
@@ -29,6 +33,8 @@ module RubyUI
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]
       }
+      base[:type] = :button unless @as == :a
+      base
     end
   end
 end

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")
   }
 }