ruby_ui 1.0.2 → 1.2.0

data/lib/ruby_ui/clipboard/clipboard_docs.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Views::Docs::Clipboard < Views::Base
+  def view_template
+    component = "Clipboard"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Clipboard", description: "A control to allow you to copy content to the clipboard.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
+            ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
+
+            ClipboardTrigger do
+              Link(href: "#", class: "gap-1") do
+                Text(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
+              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/codeblock/codeblock_docs.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class Views::Docs::Codeblock < Views::Base
+  def view_template
+    component = "Codeblock"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Codeblock", description: "A component for displaying highlighted code.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "With clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Without clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard: false)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom message", description: "Copy the code to see the message", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard_success: "Nice one!")
+          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/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.rb

@@ -19,7 +19,13 @@ module RubyUI
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
-          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
+          action: %w[
+            turbo:morph@window->ruby-ui--combobox#updateTriggerContent
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
+          ]
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_badge.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadge < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_badge_trigger.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadgeTrigger < Base
+    def initialize(placeholder: "", clear_button: false, **)
+      @placeholder = placeholder
+      @clear_button = clear_button
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "hidden")
+        input(
+          type: "text",
+          class: "flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          placeholder: @placeholder,
+          data: {
+            ruby_ui__combobox_target: "badgeInput",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems keydown.backspace->ruby-ui--combobox#handleBadgeInputBackspace"
+          }
+        )
+        render ComboboxClearButton.new if @clear_button
+      end
+    end
+
+    private
+
+    # JS-toggled classes (referenced here so Tailwind compiles them): h-auto min-h-9 pt-1.5
+    def default_attrs
+      {
+        class: "flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -10,13 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "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"
-        ],
+        class: "peer sr-only",
         data: {
           ruby_ui__combobox_target: "input",
           action: "ruby-ui--combobox#inputChanged"

data/lib/ruby_ui/combobox/combobox_clear_button.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxClearButton < Base
+    def view_template
+      button(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-3.5"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden",
+        aria: {label: "Clear selection"},
+        data: {
+          ruby_ui__combobox_target: "clearButton",
+          # JS implementation in combobox_controller.js
+          action: "ruby-ui--combobox#clearAll"
+        }
+      }
+    end
+  end
+end