ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -21,11 +21,17 @@ module RubyUI
     def default_attrs
       {
         type: "button",
-        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between",
+        class: [
+          "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-9 px-4 py-2 justify-between",
+          "hover:bg-accent hover:text-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ],
         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_controller.js

@@ -34,7 +34,6 @@ export default class extends Controller {
     // allow scroll on body
     document.body.classList.remove("overflow-hidden");
     // remove the element
-    console.log("this.element", this.element);
     this.element.remove();
   }
 

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_content.rb

@@ -34,7 +34,7 @@ module RubyUI
       {
         data_state: "open",
         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=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] 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 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -70,8 +70,7 @@ module RubyUI
       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=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        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

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -17,7 +17,7 @@ export default class extends Controller {
   }
 
   open(e) {
-    e.preventDefault()
+    e?.preventDefault();
     document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
     // prevent scroll on body
     document.body.classList.add('overflow-hidden')

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

data/lib/ruby_ui/docs/base.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Views
+  class Base < Phlex::HTML
+    def Heading(level:, &)
+      tag = :"h#{level}"
+      send(tag, &)
+    end
+
+    def component_files(component_name)
+      []
+    end
+
+    # Text helper for wrapping paragraphs
+    def Text(&)
+      p(&)
+    end
+
+    # InlineLink helper for documentation links
+    def InlineLink(href:, target: nil, class: nil, &)
+      a(href: href, target: target, class: binding.local_variable_get(:class), &)
+    end
+
+    # Alert component helpers
+    def Alert(&)
+      div(&)
+    end
+
+    def AlertTitle(&)
+      h4(&)
+    end
+
+    def AlertDescription(&)
+      p(&)
+    end
+
+    # Route helper stubs - return "#" as placeholder
+    def docs_sheet_path
+      "#"
+    end
+
+    def docs_separator_path
+      "#"
+    end
+
+    def docs_accordion_path
+      "#"
+    end
+
+    def docs_alert_path
+      "#"
+    end
+
+    def docs_alert_dialog_path
+      "#"
+    end
+
+    def docs_aspect_ratio_path
+      "#"
+    end
+
+    def docs_avatar_path
+      "#"
+    end
+
+    def docs_badge_path
+      "#"
+    end
+
+    def docs_installation_path
+      "#"
+    end
+
+    # InlineCode helper for typography examples
+    def InlineCode(&)
+      code(&)
+    end
+  end
+end
+
+# Module-level components stub
+module Components
+  def self.Heading(level:, &block)
+    # Stub for module-level Heading calls
+  end
+
+  def self.TypographyList(items:, numbered: false)
+    # Stub for TypographyList component
+  end
+end

data/lib/ruby_ui/docs/component_setup_tabs.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Components
+  module ComponentSetup
+    class Tabs < Phlex::HTML
+      def initialize(component_name:)
+        @component_name = component_name
+      end
+
+      def view_template
+        # Minimal stub - empty by default
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/components_table.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentsTable < Phlex::HTML
+    def initialize(files)
+      @files = files
+    end
+
+    def view_template
+      # Minimal stub - empty by default
+    end
+  end
+end

data/lib/ruby_ui/docs/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Docs
+  class Header < Phlex::HTML
+    def initialize(title:, description: nil)
+      @title = title
+      @description = description
+    end
+
+    def view_template
+      div do
+        h1 { @title }
+        p { @description } if @description
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/sidebar_examples.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Stub constants for sidebar documentation examples
+# These are replaced with actual implementations in the web app
+
+module Views
+  module Docs
+    class Sidebar < Views::Base
+      class Example
+        CODE = <<~RUBY
+          # Sidebar example code placeholder
+        RUBY
+      end
+
+      class InsetExample
+        CODE = <<~RUBY
+          # Sidebar inset example code placeholder
+        RUBY
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/visual_code_example.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Docs
+  class VisualCodeExample < Phlex::HTML
+    def initialize(title:, context:, description: nil, src: nil)
+      @title = title
+      @context = context
+      @description = description
+      @src = src
+    end
+
+    def view_template(&block)
+      code = block.call
+      div do
+        h3 { @title }
+        p { @description } if @description
+        pre { code }
+        @context.instance_eval(code)
+      end
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu.rb

@@ -15,6 +15,11 @@ module RubyUI
 
     def default_attrs
       {
+        class: [
+          "z-50",
+          "group/dropdown-menu",
+          (strategy == "absolute") ? "is-absolute" : "is-fixed"
+        ],
         data: {
           controller: "ruby-ui--dropdown-menu",
           action: "click@window->ruby-ui--dropdown-menu#onClickOutside",
@@ -22,5 +27,9 @@ module RubyUI
         }
       }
     end
+
+    def strategy
+      @_strategy ||= @options[:strategy] || "absolute"
+    end
   end
 end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_content.rb

@@ -3,7 +3,7 @@
 module RubyUI
   class DropdownMenuContent < Base
     def view_template(&block)
-      div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
+      div(**wrapper_attrs) do
         div(**attrs, &block)
       end
     end
@@ -15,7 +15,22 @@ module RubyUI
         data: {
           state: :open
         },
-        class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
+        class: "z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
+      }
+    end
+
+    def wrapper_attrs
+      {
+        class: [
+          "z-50 hidden group-[.is-absolute]/dropdown-menu:absolute",
+          "group-[.is-fixed]/dropdown-menu:fixed"
+        ],
+        data: {ruby_ui__dropdown_menu_target: "content"},
+        style: {
+          width: "max-content",
+          top: "0",
+          left: "0"
+        }
       }
     end
   end