ruby_ui 1.0.2 → 1.1.0

data/lib/ruby_ui/collapsible/collapsible_docs.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+class Views::Docs::Collapsible < Views::Base
+  def view_template
+    component = "Collapsible"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Collapsible", description: "An interactive component which expands/collapses a panel.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Collapsible do
+            div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
+              h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
+                  chevron_icon
+                  span(class: "sr-only") { "Toggle" }
+                end
+              end
+            end
+
+            div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+              "phlex-ruby/phlex"
+            end
+
+            CollapsibleContent do
+              div(class: 'space-y-2 mt-2') do
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "phlex-ruby/phlex-rails"
+                end
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "ruby-ui/ruby_ui"
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Open", context: self) do
+        <<~RUBY
+          Collapsible(open: true) do
+            div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
+              h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
+                  chevron_icon
+                  span(class: "sr-only") { "Toggle" }
+                end
+              end
+            end
+
+            div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+              "phlex-ruby/phlex"
+            end
+
+            CollapsibleContent do
+              div(class: 'space-y-2 mt-2') do
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "phlex-ruby/phlex-rails"
+                end
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "ruby-ui/ruby_ui"
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def chevron_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: "w-4 h-4"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -28,6 +28,11 @@ export default class extends Controller {
     if (this.cleanup) { this.cleanup() }
   }
 
+  handlePopoverToggle(event) {
+    // Keep ariaExpanded in sync with the actual popover state
+    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
+  }
+
   inputChanged(e) {
     this.updateTriggerContent()
 
@@ -62,9 +67,19 @@ export default class extends Controller {
     }
   }
 
-  openPopover(event) {
+  togglePopover(event) {
     event.preventDefault()
 
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+
     this.updatePopoverPosition()
     this.updatePopoverWidth()
     this.triggerTarget.ariaExpanded = "true"

data/lib/ruby_ui/combobox/combobox_docs.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+class Views::Docs::Combobox < Views::Base
+  @@code_example = nil
+
+  def view_template
+    component = "Combobox"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: component, description: "Autocomplete input and command palette with a list of suggestions.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Single option", context: self) do
+        <<~RUBY
+          div class: "w-96" do
+            Combobox do
+              ComboboxTrigger placeholder: "Pick value"
+
+              ComboboxPopover do
+                ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                ComboboxList do
+                  ComboboxEmptyState { "No result" }
+
+                  ComboboxListGroup(label: "Fruits") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "apple")
+                      span { "Apple" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "banana")
+                      span { "Banana" }
+                    end
+                  end
+
+                  ComboboxListGroup(label: "Vegetable") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "brocoli")
+                      span { "Broccoli" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "carrot")
+                      span { "Carrot" }
+                    end
+                  end
+
+                  ComboboxListGroup(label: "Others") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "chocolate")
+                      span { "Chocolate" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "milk")
+                      span { "Milk" }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Multiple options", context: self) do
+        <<~RUBY
+          div class: "w-96" do
+            Combobox term: "things" do
+              ComboboxTrigger placeholder: "Pick value"
+
+              ComboboxPopover do
+                ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                ComboboxList do
+                  ComboboxEmptyState { "No result" }
+
+                  ComboboxItem(class: "mt-3") do
+                    ComboboxToggleAllCheckbox(name: "all", value: "all")
+                    span { "Select all" }
+                  end
+
+                  ComboboxListGroup label: "Fruits" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "apple")
+                      span { "Apple" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "banana")
+                      span { "Banana" }
+                    end
+                  end
+
+                  ComboboxListGroup label: "Vegetable" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "brocoli")
+                      span { "Broccoli" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "carrot")
+                      span { "Carrot" }
+                    end
+                  end
+
+                  ComboboxListGroup label: "Others" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "chocolate")
+                      span { "Chocolate" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "milk")
+                      span { "Milk" }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxTrigger(disabled: true, placeholder: "Pick value")
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxTrigger(aria: {disabled: "true"}, placeholder: "Pick value")
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: "Combobox")
+
+      render Docs::ComponentsTable.new(component_files("Combobox"))
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -17,10 +17,11 @@ module RubyUI
         data: {
           ruby_ui__combobox_target: "popover",
           action: %w[
+            toggle->ruby-ui--combobox#handlePopoverToggle
             keydown.down->ruby-ui--combobox#keyDownPressed
             keydown.up->ruby-ui--combobox#keyUpPressed
             keydown.enter->ruby-ui--combobox#keyEnterPressed
-            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -12,9 +12,10 @@ module RubyUI
       {
         class: [
           "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ],
         data: {
           ruby_ui__combobox_target: "toggleAll",

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -31,7 +31,7 @@ module RubyUI
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#openPopover"
+          action: "ruby-ui--combobox#togglePopover"
         },
         aria: {
           haspopup: "listbox",

data/lib/ruby_ui/command/command_docs.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+class Views::Docs::Command < Views::Base
+  def view_template
+    component = "Command"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Command", description: "Fast, composable, unstyled command menu for Phlex.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          CommandDialog do
+            CommandDialogTrigger do
+              Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do
+                div(class: "flex items-center space-x-1") do
+                  search_icon
+                  span(class: "text-muted-foreground font-normal") do
+                    plain "Search"
+                  end
+                end
+                ShortcutKey do
+                  span(class: "text-xs") { "⌘" }
+                  plain "K"
+                end
+              end
+            end
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
+                    components_list.each do |component|
+                      CommandItem(value: component[:name], href: component[:path]) do
+                        default_icon
+                        plain component[:name]
+                      end
+                    end
+                  end
+                  CommandGroup(title: "Settings") do
+                    settings_list.each do |setting|
+                      CommandItem(value: setting[:name], href: setting[:path]) do
+                        default_icon
+                        plain setting[:name]
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With keybinding", context: self) do
+        <<~RUBY
+          CommandDialog do
+            CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do
+              p(class: "text-sm text-muted-foreground") do
+                span(class: 'mr-1') { "Press" }
+                ShortcutKey do
+                  span(class: "text-xs") { "⌘" }
+                  plain "J"
+                end
+              end
+            end
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
+                    components_list.each do |component|
+                      CommandItem(value: component[:name], href: component[:path]) do
+                        default_icon
+                        plain component[:name]
+                      end
+                    end
+                  end
+                  CommandGroup(title: "Settings") do
+                    settings_list.each do |setting|
+                      CommandItem(value: setting[:name], href: setting[:path]) do
+                        default_icon
+                        plain setting[:name]
+                      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
+
+  private
+
+  def search_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: "w-4 h-4 mr-1.5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def default_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def components_list
+    [
+      {name: "Accordion", path: docs_accordion_path},
+      {name: "Alert", path: docs_alert_path},
+      {name: "Alert Dialog", path: docs_alert_dialog_path},
+      {name: "Aspect Ratio", path: docs_aspect_ratio_path},
+      {name: "Avatar", path: docs_avatar_path},
+      {name: "Badge", path: docs_badge_path}
+    ]
+  end
+
+  def settings_list
+    [
+      {name: "Profile", path: "#"},
+      {name: "Mail", path: "#"},
+      {name: "Settings", path: "#"}
+    ]
+  end
+end

data/lib/ruby_ui/context_menu/context_menu.rb

@@ -18,7 +18,7 @@ module RubyUI
       {
         data: {
           controller: "ruby-ui--context-menu",
-          popover_options_value: @options.to_json
+          ruby_ui__context_menu_options_value: @options.to_json
         }
       }
     end

data/lib/ruby_ui/context_menu/context_menu_docs.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+class Views::Docs::ContextMenu < Views::Base
+  def view_template
+    component = "ContextMenu"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Context Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a right click.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          ContextMenu do
+            ContextMenuTrigger(class: 'flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') { "Right click here" }
+            ContextMenuContent(class: 'w-64') do
+              ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+              ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+              ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+              ContextMenuItem(href: '#') { "Show Full URLs" }
+              ContextMenuSeparator
+              ContextMenuLabel(inset: true) { "More Tools" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#') { "Developer Tools" }
+              ContextMenuItem(href: '#') { "Task Manager" }
+              ContextMenuItem(href: '#') { "Extensions" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Placement", context: self) do
+        <<~RUBY
+          div(class: 'space-y-4') do
+            ContextMenu(options: { placement: 'right' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+                plain "Right click here"
+                Badge(variant: :primary) { "right" }
+              end
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
+              end
+            end
+            ContextMenu(options: { placement: 'left' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+                plain "Right click here"
+                Badge(variant: :primary) { "left" }
+              end
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
+              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/dialog/dialog_docs.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+class Views::Docs::Dialog < Views::Base
+  def view_template
+    component = "Dialog"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Dialog", description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Dialog do
+            DialogTrigger do
+              Button { "Open Dialog" }
+            end
+            DialogContent do
+              DialogHeader do
+                DialogTitle { "RubyUI to the rescue" }
+                DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+              end
+              DialogMiddle do
+                AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                  img(
+                    alt: "Placeholder",
+                    loading: "lazy",
+                    src: image_path("pattern.jpg")
+                  )
+                end
+              end
+              DialogFooter do
+                Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                Button { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Size", description: "Applicable for wider screens", context: self) do
+        <<~RUBY
+          div(class: 'flex flex-wrap justify-center gap-2') do
+            Dialog do
+              DialogTrigger do
+                Button { "Small Dialog" }
+              end
+              DialogContent(size: :sm) do
+                DialogHeader do
+                  DialogTitle { "RubyUI to the rescue" }
+                  DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+                end
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                    img(
+                      alt: "Placeholder",
+                      loading: "lazy",
+                      src: image_path("pattern.jpg")
+                    )
+                  end
+                end
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                  Button { "Save" }
+                end
+              end
+            end
+
+            Dialog do
+              DialogTrigger do
+                Button { "Large Dialog" }
+              end
+              DialogContent(size: :lg) do
+                DialogHeader do
+                  DialogTitle { "RubyUI to the rescue" }
+                  DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+                end
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                    img(
+                      alt: "Placeholder",
+                      loading: "lazy",
+                      src: image_path("pattern.jpg")
+                    )
+                  end
+                end
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                  Button { "Save" }
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end