shadcn-rails 0.1.0

data/app/components/shadcn/combobox_component.rb

@@ -0,0 +1,322 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Combobox component - autocomplete input with searchable dropdown
+  # Composes Popover and Command components for a searchable select
+  #
+  # @example Basic combobox
+  #   <%= render Shadcn::ComboboxComponent.new(
+  #     items: [
+  #       { value: "next", label: "Next.js" },
+  #       { value: "remix", label: "Remix" },
+  #       { value: "rails", label: "Ruby on Rails" }
+  #     ],
+  #     placeholder: "Select framework...",
+  #     search_placeholder: "Search framework..."
+  #   ) %>
+  #
+  # @example With selected value
+  #   <%= render Shadcn::ComboboxComponent.new(
+  #     items: frameworks,
+  #     value: "rails",
+  #     placeholder: "Select framework..."
+  #   ) %>
+  #
+  # @example With name for form submission
+  #   <%= render Shadcn::ComboboxComponent.new(
+  #     items: frameworks,
+  #     name: "project[framework]",
+  #     placeholder: "Select framework..."
+  #   ) %>
+  #
+  class ComboboxComponent < BaseComponent
+    TRIGGER_CLASSES = "w-[200px] justify-between"
+    POPOVER_CONTENT_CLASSES = "w-[200px] p-0"
+    CHEVRON_CLASSES = "ml-2 h-4 w-4 shrink-0 opacity-50"
+    CHECK_CLASSES = "mr-2 h-4 w-4"
+
+    # @param items [Array<Hash>] Array of items with :value and :label keys
+    # @param value [String, nil] Currently selected value
+    # @param placeholder [String] Placeholder text when no value selected
+    # @param search_placeholder [String] Placeholder text for search input
+    # @param empty_text [String] Text shown when no results found
+    # @param name [String, nil] Form field name for hidden input
+    # @param disabled [Boolean] Whether the combobox is disabled
+    # @param width [String] Width class for the component
+    def initialize(
+      items: [],
+      value: nil,
+      placeholder: "Select option...",
+      search_placeholder: "Search...",
+      empty_text: "No results found.",
+      name: nil,
+      disabled: false,
+      width: "w-[200px]",
+      **options
+    )
+      super(**options)
+      @items = items
+      @value = value
+      @placeholder = placeholder
+      @search_placeholder = search_placeholder
+      @empty_text = empty_text
+      @name = name
+      @disabled = disabled
+      @width = width
+    end
+
+    def call
+      content_tag(:div, combobox_content, **combobox_attributes)
+    end
+
+    private
+
+    def combobox_content
+      safe_join([
+        hidden_input,
+        trigger_button,
+        popover_content_template
+      ].compact)
+    end
+
+    def hidden_input
+      return unless @name
+
+      tag.input(
+        type: "hidden",
+        name: @name,
+        value: @value,
+        data: { "shadcn--combobox-target": "hiddenInput" }
+      )
+    end
+
+    def trigger_button
+      content_tag(:button, button_content, **trigger_attributes)
+    end
+
+    def button_content
+      safe_join([
+        display_value,
+        chevron_icon
+      ])
+    end
+
+    def display_value
+      label = selected_label
+      content_tag(:span, label || @placeholder,
+        class: label ? nil : "text-muted-foreground",
+        data: { "shadcn--combobox-target": "displayValue" }
+      )
+    end
+
+    def selected_label
+      return nil unless @value
+
+      item = @items.find { |i| i[:value].to_s == @value.to_s }
+      item&.dig(:label)
+    end
+
+    def chevron_icon
+      content_tag(:svg,
+        class: CHEVRON_CLASSES,
+        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"
+      ) do
+        safe_join([
+          tag.path(d: "m7 15 5 5 5-5"),
+          tag.path(d: "m7 9 5-5 5 5")
+        ])
+      end
+    end
+
+    def trigger_attributes
+      {
+        type: "button",
+        role: "combobox",
+        class: cn(
+          "inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "h-9 px-4 py-2",
+          @width,
+          "justify-between"
+        ),
+        disabled: @disabled || nil,
+        "aria-expanded": "false",
+        data: {
+          "shadcn--combobox-target": "trigger",
+          action: "click->shadcn--combobox#toggle"
+        }
+      }
+    end
+
+    def popover_content_template
+      content_tag(:div, popover_inner_content, **popover_content_attributes)
+    end
+
+    def popover_inner_content
+      content_tag(:div, command_content, **command_wrapper_attributes)
+    end
+
+    def command_content
+      safe_join([
+        search_input,
+        items_list
+      ])
+    end
+
+    def search_input
+      content_tag(:div, class: "flex items-center border-b px-3") do
+        safe_join([
+          search_icon,
+          tag.input(
+            type: "text",
+            placeholder: @search_placeholder,
+            class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            data: {
+              "shadcn--combobox-target": "input",
+              action: "input->shadcn--combobox#filter"
+            }
+          )
+        ])
+      end
+    end
+
+    def search_icon
+      content_tag(:svg,
+        class: "mr-2 h-4 w-4 shrink-0 opacity-50",
+        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"
+      ) do
+        safe_join([
+          tag.circle(cx: "11", cy: "11", r: "8"),
+          tag.path(d: "m21 21-4.3-4.3")
+        ])
+      end
+    end
+
+    def items_list
+      content_tag(:div, items_content, class: "max-h-[300px] overflow-y-auto overflow-x-hidden", data: { "shadcn--combobox-target": "list" })
+    end
+
+    def items_content
+      safe_join([
+        empty_state,
+        items_group
+      ])
+    end
+
+    def empty_state
+      # Always start hidden - will show only when user types and no results match
+      content_tag(:div, @empty_text,
+        class: "py-6 text-center text-sm text-muted-foreground",
+        hidden: true,
+        data: { "shadcn--combobox-target": "empty" }
+      )
+    end
+
+    def items_group
+      content_tag(:div, class: "overflow-hidden p-1 text-foreground") do
+        safe_join(@items.map { |item| render_item(item) })
+      end
+    end
+
+    def render_item(item)
+      is_selected = @value.to_s == item[:value].to_s
+
+      content_tag(:div, **item_attributes(item, is_selected)) do
+        safe_join([
+          check_icon(is_selected),
+          item[:label]
+        ])
+      end
+    end
+
+    def check_icon(is_selected)
+      content_tag(:svg,
+        class: cn(CHECK_CLASSES, is_selected ? "opacity-100" : "opacity-0"),
+        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"
+      ) do
+        tag.path(d: "M20 6 9 17l-5-5")
+      end
+    end
+
+    def item_attributes(item, is_selected)
+      {
+        class: cn(
+          "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+          "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+          "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+          "hover:bg-accent hover:text-accent-foreground cursor-pointer"
+        ),
+        role: "option",
+        tabindex: "0",
+        data: {
+          "shadcn--combobox-target": "item",
+          value: item[:value],
+          label: item[:label],
+          selected: is_selected,
+          action: "click->shadcn--combobox#select"
+        }
+      }
+    end
+
+    def popover_content_attributes
+      {
+        class: cn(
+          "absolute z-50 mt-1 rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+          "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",
+          @width,
+          "p-0"
+        ),
+        hidden: true,
+        data: {
+          "shadcn--combobox-target": "content",
+          state: "closed"
+        }
+      }
+    end
+
+    def command_wrapper_attributes
+      {
+        class: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground"
+      }
+    end
+
+    def combobox_attributes
+      {
+        class: cn("relative inline-block", class_name),
+        data: {
+          controller: "shadcn--combobox",
+          "shadcn--combobox-value-value": @value,
+          action: "keydown.escape->shadcn--combobox#close click@window->shadcn--combobox#handleClickOutside"
+        }
+      }.merge(html_options).merge(build_data)
+    end
+  end
+end

data/app/components/shadcn/command_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command component - a command palette for searching and selecting items
+  # Matches shadcn/ui Command component (cmdk pattern)
+  #
+  # @example Basic command
+  #   <%= render Shadcn::CommandComponent.new do |command| %>
+  #     <% command.with_input(placeholder: "Type a command...") %>
+  #     <% command.with_list do |list| %>
+  #       <% list.with_empty { "No results found." } %>
+  #       <% list.with_group(heading: "Suggestions") do |group| %>
+  #         <% group.with_item(value: "calendar") { "Calendar" } %>
+  #         <% group.with_item(value: "search") { "Search" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class CommandComponent < BaseComponent
+    BASE_CLASSES = "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground"
+
+    # Input slot for search
+    renders_one :input, lambda { |placeholder: "Type a command or search...", **options|
+      CommandInputComponent.new(placeholder: placeholder, **options)
+    }
+
+    # List slot containing groups and items
+    renders_one :list, lambda { |**options|
+      CommandListComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, command_content, **command_attributes)
+    end
+
+    private
+
+    def command_content
+      safe_join([input, list, content].compact)
+    end
+
+    def command_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        data: {
+          controller: "shadcn--command",
+          action: "keydown->shadcn--command#handleKeydown"
+        }
+      }.merge(html_options).merge(build_data)
+    end
+  end
+end

data/app/components/shadcn/command_dialog_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Dialog component - command palette in a modal dialog
+  # Combines Dialog and Command components
+  #
+  # @example Basic command dialog
+  #   <%= render Shadcn::CommandDialogComponent.new do |dialog| %>
+  #     <% dialog.with_trigger do %>
+  #       <button>Open Command</button>
+  #     <% end %>
+  #     <% dialog.with_command do |command| %>
+  #       <% command.with_input(placeholder: "Type a command...") %>
+  #       <% command.with_list do |list| %>
+  #         <% list.with_empty { "No results found." } %>
+  #         <% list.with_group(heading: "Suggestions") do |group| %>
+  #           <% group.with_item(value: "calendar") { "Calendar" } %>
+  #         <% end %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class CommandDialogComponent < BaseComponent
+    OVERLAY_CLASSES = "fixed inset-0 z-50 bg-black/80"
+    CONTENT_CLASSES = "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] shadow-lg"
+    COMMAND_CLASSES = "[&_[data-shadcn--command-target='input']]:h-12"
+
+    # Trigger slot - simple wrapper that renders content
+    renders_one :trigger, lambda { |**options, &block|
+      content_tag(:div, data: { "shadcn--command-dialog-target": "trigger", action: "click->shadcn--command-dialog#open" }, **options, &block)
+    }
+
+    # Command slot
+    renders_one :command, lambda { |**options|
+      CommandComponent.new(class_name: "rounded-lg border shadow-md md:min-w-[450px] #{COMMAND_CLASSES}", **options)
+    }
+
+    # @param shortcut [String] Keyboard shortcut to open (e.g., "k" for Cmd+K)
+    def initialize(shortcut: nil, **options)
+      super(**options)
+      @shortcut = shortcut
+    end
+
+    def call
+      content_tag(:div, dialog_content, **dialog_attributes)
+    end
+
+    private
+
+    def dialog_content
+      safe_join([
+        trigger,
+        dialog_template
+      ].compact)
+    end
+
+    def dialog_template
+      content_tag(:template, data: { "shadcn--command-dialog-target": "template" }) do
+        safe_join([
+          content_tag(:div, "", class: OVERLAY_CLASSES, data: { "shadcn--command-dialog-target": "overlay", action: "click->shadcn--command-dialog#close" }),
+          content_tag(:div, command || content, class: CONTENT_CLASSES, data: { "shadcn--command-dialog-target": "content" })
+        ])
+      end
+    end
+
+    def dialog_attributes
+      attrs = {
+        data: {
+          controller: "shadcn--command-dialog",
+          "shadcn--command-dialog-shortcut-value": @shortcut
+        }.compact
+      }
+      attrs.merge(html_options).merge(build_data)
+    end
+  end
+end

data/app/components/shadcn/command_empty_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Empty component - shown when no results match
+  class CommandEmptyComponent < BaseComponent
+    BASE_CLASSES = "py-6 text-center text-sm text-muted-foreground"
+
+    def call
+      content_tag(:div, content.presence || "No results found.", class: merge_classes(BASE_CLASSES), data: { "shadcn--command-target": "empty" }, **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/command_group_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Group component - groups related command items
+  class CommandGroupComponent < BaseComponent
+    BASE_CLASSES = "overflow-hidden p-1 text-foreground"
+    HEADING_CLASSES = "px-2 py-1.5 text-xs font-medium text-muted-foreground"
+
+    # Items in this group
+    renders_many :items, lambda { |value: nil, disabled: false, **options|
+      CommandItemComponent.new(value: value, disabled: disabled, **options)
+    }
+
+    # @param heading [String, nil] Optional heading for the group
+    def initialize(heading: nil, **options)
+      super(**options)
+      @heading = heading
+    end
+
+    def call
+      content_tag(:div, group_content, class: merge_classes(BASE_CLASSES), role: "group", data: { "shadcn--command-target": "group" }, **html_options.merge(build_data))
+    end
+
+    private
+
+    def group_content
+      parts = []
+      parts << content_tag(:div, @heading, class: HEADING_CLASSES, "aria-hidden": true) if @heading.present?
+      parts << safe_join(items)
+      parts << content
+      safe_join(parts.compact)
+    end
+  end
+end

data/app/components/shadcn/command_input_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Input component - search input for command palette
+  class CommandInputComponent < BaseComponent
+    WRAPPER_CLASSES = "flex items-center border-b px-3"
+    INPUT_CLASSES = "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+    ICON_CLASSES = "mr-2 h-4 w-4 shrink-0 opacity-50"
+
+    # @param placeholder [String] Placeholder text
+    # @param autofocus [Boolean] Whether to autofocus the input
+    def initialize(placeholder: "Type a command or search...", autofocus: false, **options)
+      super(**options)
+      @placeholder = placeholder
+      @autofocus = autofocus
+    end
+
+    def call
+      content_tag(:div, class: WRAPPER_CLASSES) do
+        safe_join([
+          search_icon,
+          tag.input(
+            type: "text",
+            placeholder: @placeholder,
+            autofocus: @autofocus || nil,
+            class: merge_classes(INPUT_CLASSES),
+            data: {
+              "shadcn--command-target": "input",
+              action: "input->shadcn--command#filter"
+            },
+            **html_options.except(:class)
+          )
+        ])
+      end
+    end
+
+    private
+
+    def search_icon
+      content_tag(:svg,
+        class: ICON_CLASSES,
+        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"
+      ) do
+        safe_join([
+          tag.circle(cx: "11", cy: "11", r: "8"),
+          tag.path(d: "m21 21-4.3-4.3")
+        ])
+      end
+    end
+  end
+end

data/app/components/shadcn/command_item_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Item component - individual selectable command
+  class CommandItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+
+    # Shortcut slot
+    renders_one :shortcut, lambda { |**options|
+      CommandShortcutComponent.new(**options)
+    }
+
+    # @param value [String, nil] The searchable value (defaults to content text)
+    # @param disabled [Boolean] Whether the item is disabled
+    # @param on_select [String] JavaScript to execute on select
+    def initialize(value: nil, disabled: false, on_select: nil, **options)
+      super(**options)
+      @value = value
+      @disabled = disabled
+      @on_select = on_select
+    end
+
+    def call
+      content_tag(:div, item_content, **item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([content, shortcut].compact)
+    end
+
+    def item_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "option",
+        tabindex: @disabled ? nil : "0",
+        data: {
+          "shadcn--command-target": "item",
+          value: @value,
+          disabled: @disabled || nil,
+          selected: false,
+          action: @disabled ? nil : "click->shadcn--command#select"
+        }.compact
+      }.merge(html_options).merge(build_data)
+    end
+  end
+end

data/app/components/shadcn/command_list_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command List component - container for command groups and items
+  class CommandListComponent < BaseComponent
+    BASE_CLASSES = "max-h-[300px] overflow-y-auto overflow-x-hidden"
+
+    # Empty state slot
+    renders_one :empty, lambda { |**options|
+      CommandEmptyComponent.new(**options)
+    }
+
+    # Groups of items
+    renders_many :groups, lambda { |heading: nil, **options|
+      CommandGroupComponent.new(heading: heading, **options)
+    }
+
+    # Direct items (without group)
+    renders_many :items, lambda { |value: nil, disabled: false, **options|
+      CommandItemComponent.new(value: value, disabled: disabled, **options)
+    }
+
+    # Separators
+    renders_many :separators, lambda { |**options|
+      CommandSeparatorComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, list_content, class: merge_classes(BASE_CLASSES), data: { "shadcn--command-target": "list" }, **html_options.merge(build_data))
+    end
+
+    private
+
+    def list_content
+      safe_join([empty, groups, items, separators, content].flatten.compact)
+    end
+  end
+end

data/app/components/shadcn/command_separator_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Separator component - visual divider between groups
+  class CommandSeparatorComponent < BaseComponent
+    BASE_CLASSES = "-mx-1 h-px bg-border"
+
+    def call
+      content_tag(:div, "", class: merge_classes(BASE_CLASSES), role: "separator", **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/command_shortcut_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Command Shortcut component - displays keyboard shortcut hint
+  class CommandShortcutComponent < BaseComponent
+    BASE_CLASSES = "ml-auto text-xs tracking-widest text-muted-foreground"
+
+    def call
+      content_tag(:span, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end