shadcn-rails 0.1.0 → 0.2.0

data/app/assets/javascripts/shadcn/controllers/sidebar_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { useMatchMedia } from "stimulus-use"
 
 // Constants for sidebar dimensions
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -7,6 +8,10 @@ const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 
+/**
+ * Sidebar Controller
+ * Uses stimulus-use useMatchMedia for responsive behavior
+ */
 export default class extends Controller {
   static targets = ["sidebar"]
   static values = {
@@ -26,10 +31,13 @@ export default class extends Controller {
     this.handleKeyDown = this.handleKeyDown.bind(this)
     document.addEventListener("keydown", this.handleKeyDown)
 
-    // Set up mobile detection
+    // Use stimulus-use for responsive media query detection
     this.isMobile = window.innerWidth < 768
-    this.handleResize = this.handleResize.bind(this)
-    window.addEventListener("resize", this.handleResize)
+    useMatchMedia(this, {
+      mediaQueries: {
+        mobile: "(max-width: 767px)"
+      }
+    })
 
     // Initial state sync
     this.syncState()
@@ -37,7 +45,19 @@ export default class extends Controller {
 
   disconnect() {
     document.removeEventListener("keydown", this.handleKeyDown)
-    window.removeEventListener("resize", this.handleResize)
+  }
+
+  // Called by stimulus-use when mobile media query state changes
+  mobileChanged({ matches }) {
+    const wasMobile = this.isMobile
+    this.isMobile = matches
+
+    // Close mobile sidebar when switching to desktop
+    if (wasMobile && !this.isMobile) {
+      this.openMobileValue = false
+    }
+
+    this.syncState()
   }
 
   handleKeyDown(event) {
@@ -51,16 +71,6 @@ export default class extends Controller {
     }
   }
 
-  handleResize() {
-    const wasMobile = this.isMobile
-    this.isMobile = window.innerWidth < 768
-
-    // Close mobile sidebar when switching to desktop
-    if (wasMobile && !this.isMobile) {
-      this.openMobileValue = false
-    }
-  }
-
   toggle() {
     if (this.isMobile) {
       this.openMobileValue = !this.openMobileValue

data/app/assets/javascripts/shadcn/index.js

@@ -14,6 +14,7 @@
  */
 
 // Import all controllers
+import BaseMenuController from "./controllers/base_menu_controller"
 import AccordionController from "./controllers/accordion_controller"
 import AvatarController from "./controllers/avatar_controller"
 import CalendarController from "./controllers/calendar_controller"
@@ -49,6 +50,7 @@ import SidebarController from "./controllers/sidebar_controller"
 
 // Export individual controllers
 export {
+  BaseMenuController,
   AccordionController,
   AvatarController,
   CalendarController,

data/app/assets/stylesheets/shadcn/components.css

@@ -437,6 +437,18 @@ button[data-state="off"].shadcn-toggle {
   animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
 }
 
+/* ============================================
+   Context Menu Component
+   ============================================ */
+
+.shadcn-context-menu[data-state="open"] {
+  animation: fade-in 100ms ease-out, zoom-in 100ms ease-out;
+}
+
+.shadcn-context-menu[data-state="closed"] {
+  animation: fade-out 100ms ease-in, zoom-out 100ms ease-in;
+}
+
 /* ============================================
    Drawer Component
    ============================================ */

data/app/components/shadcn/command_list_component.rb

@@ -10,19 +10,26 @@ module Shadcn
       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)
+    # Use polymorphic slots to preserve the order of groups, items, and separators
+    renders_many :list_items, types: {
+      group: {
+        renders: lambda { |heading: nil, **options, &block|
+          CommandGroupComponent.new(heading: heading, **options, &block)
+        },
+        as: :group
+      },
+      item: {
+        renders: lambda { |value: nil, disabled: false, **options, &block|
+          CommandItemComponent.new(value: value, disabled: disabled, **options, &block)
+        },
+        as: :item
+      },
+      separator: {
+        renders: lambda { |**options|
+          CommandSeparatorComponent.new(**options)
+        },
+        as: :separator
+      }
     }
 
     def call
@@ -32,7 +39,15 @@ module Shadcn
     private
 
     def list_content
-      safe_join([empty, groups, items, separators, content].flatten.compact)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order with empty at the start
+      if list_items.any?
+        safe_join([empty, list_items].flatten.compact)
+      else
+        # Otherwise render the raw block content (for backwards compatibility)
+        safe_join([empty, raw_content].flatten.compact)
+      end
     end
   end
 end

data/app/components/shadcn/context_menu_checkbox_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Checkbox Item component
+  # A menu item that can be checked/unchecked
+  class ContextMenuCheckboxItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    renders_one :shortcut, lambda { |**options|
+      ContextMenuShortcutComponent.new(**options)
+    }
+
+    # @param checked [Boolean] Whether item is checked
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        check_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def check_indicator
+      content_tag(:span, check_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def check_icon
+      return "" unless @checked
+
+      content_tag(:svg, check_svg_path, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "h-4 w-4"
+      })
+    end
+
+    def check_svg_path
+      content_tag(:polyline, "", points: "20 6 9 17 4 12")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemcheckbox",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-shadcn--context-menu-target": "item",
+        "data-action": "click->shadcn--context-menu#selectItem"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/context_menu_content_component.rb

@@ -3,16 +3,40 @@
 module Shadcn
   # Context Menu Content component
   class ContextMenuContentComponent < BaseComponent
-    BASE_CLASSES = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-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"
+    BASE_CLASSES = "shadcn-context-menu z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
 
-    renders_many :items, lambda { |**options, &block|
-      ContextMenuItemComponent.new(**options, &block)
-    }
-    renders_many :labels, lambda { |**options, &block|
-      ContextMenuLabelComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      ContextMenuSeparatorComponent.new(**options)
+    # Use polymorphic slots to preserve the order of items, labels, and separators
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          ContextMenuItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      checkbox_item: {
+        renders: lambda { |**options, &block|
+          ContextMenuCheckboxItemComponent.new(**options, &block)
+        },
+        as: :checkbox_item
+      },
+      radio_group: {
+        renders: lambda { |**options, &block|
+          ContextMenuRadioGroupComponent.new(**options, &block)
+        },
+        as: :radio_group
+      },
+      label: {
+        renders: lambda { |**options, &block|
+          ContextMenuLabelComponent.new(**options, &block)
+        },
+        as: :label
+      },
+      separator: {
+        renders: lambda { |**options|
+          ContextMenuSeparatorComponent.new(**options)
+        },
+        as: :separator
+      }
     }
 
     def call
@@ -22,11 +46,10 @@ module Shadcn
     private
 
     def menu_content
-      if items.any? || labels.any? || separators.any?
-        safe_join([labels, items, separators, content].flatten.compact)
-      else
-        content
-      end
+      # Trigger slot evaluation first
+      content
+      # Render all menu items in the order they were added
+      safe_join(menu_items)
     end
 
     def menu_attributes

data/app/components/shadcn/context_menu_item_component.rb

@@ -3,11 +3,11 @@
 module Shadcn
   # Context Menu Item component
   class ContextMenuItemComponent < BaseComponent
-    BASE_CLASSES = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0"
+    BASE_CLASSES = "relative flex cursor-default select-none items-center gap-2 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0"
 
     VARIANTS = {
       default: "",
-      destructive: "text-destructive focus:bg-destructive focus:text-destructive-foreground"
+      destructive: "text-destructive hover:bg-destructive hover:text-destructive-foreground focus:bg-destructive focus:text-destructive-foreground"
     }.freeze
 
     renders_one :shortcut, lambda { |**options|
@@ -53,6 +53,7 @@ module Shadcn
         tabindex: @disabled ? nil : "-1",
         href: @href,
         "data-disabled": @disabled ? "" : nil,
+        "data-shadcn--context-menu-target": "item",
         "data-action": "click->shadcn--context-menu#selectItem"
       }
       attrs.merge!(html_options)

data/app/components/shadcn/context_menu_radio_group_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Radio Group component
+  # Group of mutually exclusive radio items
+  class ContextMenuRadioGroupComponent < BaseComponent
+    renders_many :items, lambda { |**options, &block|
+      ContextMenuRadioItemComponent.new(**options, &block)
+    }
+
+    # @param value [String] Currently selected value
+    def initialize(value: nil, **options, &block)
+      super(**options, &block)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      if items.any?
+        safe_join(items)
+      else
+        content
+      end
+    end
+
+    def group_attributes
+      attrs = {
+        class: class_name,
+        role: "group",
+        "data-value": @value
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/context_menu_radio_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Radio Item component
+  # A radio button within a radio group
+  class ContextMenuRadioItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    renders_one :shortcut, lambda { |**options|
+      ContextMenuShortcutComponent.new(**options)
+    }
+
+    # @param value [String] Value of this radio item
+    # @param checked [Boolean] Whether item is selected
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(value: nil, checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @value = value
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        radio_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def radio_indicator
+      content_tag(:span, radio_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def radio_icon
+      return "" unless @checked
+
+      content_tag(:svg, circle_svg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        stroke: "none",
+        class: "h-4 w-4"
+      })
+    end
+
+    def circle_svg
+      content_tag(:circle, "", cx: "12", cy: "12", r: "6")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemradio",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-value": @value,
+        "data-shadcn--context-menu-target": "item",
+        "data-action": "click->shadcn--context-menu#selectItem"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_checkbox_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Checkbox Item component
+  # A menu item that can be checked/unchecked
+  class DropdownMenuCheckboxItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    renders_one :shortcut, lambda { |**options|
+      DropdownMenuShortcutComponent.new(**options)
+    }
+
+    # @param checked [Boolean] Whether item is checked
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        check_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def check_indicator
+      content_tag(:span, check_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def check_icon
+      return "" unless @checked
+
+      content_tag(:svg, check_svg_path, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "h-4 w-4"
+      })
+    end
+
+    def check_svg_path
+      content_tag(:polyline, "", points: "20 6 9 17 4 12")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemcheckbox",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-shadcn--dropdown-target": "item",
+        "data-action": "click->shadcn--dropdown#toggleCheckbox"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_content_component.rb

@@ -5,17 +5,44 @@ module Shadcn
   class DropdownMenuContentComponent < BaseComponent
     BASE_CLASSES = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-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"
 
-    renders_many :items, lambda { |**options, &block|
-      DropdownMenuItemComponent.new(**options, &block)
-    }
-    renders_many :labels, lambda { |**options, &block|
-      DropdownMenuLabelComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      DropdownMenuSeparatorComponent.new(**options)
-    }
-    renders_many :groups, lambda { |**options, &block|
-      DropdownMenuGroupComponent.new(**options, &block)
+    # Use polymorphic slots to preserve the order of items, labels, separators, groups, etc.
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          DropdownMenuItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      label: {
+        renders: lambda { |**options, &block|
+          DropdownMenuLabelComponent.new(**options, &block)
+        },
+        as: :label
+      },
+      separator: {
+        renders: lambda { |**options|
+          DropdownMenuSeparatorComponent.new(**options)
+        },
+        as: :separator
+      },
+      group: {
+        renders: lambda { |**options, &block|
+          DropdownMenuGroupComponent.new(**options, &block)
+        },
+        as: :group
+      },
+      checkbox_item: {
+        renders: lambda { |**options, &block|
+          DropdownMenuCheckboxItemComponent.new(**options, &block)
+        },
+        as: :checkbox_item
+      },
+      radio_group: {
+        renders: lambda { |**options, &block|
+          DropdownMenuRadioGroupComponent.new(**options, &block)
+        },
+        as: :radio_group
+      }
     }
 
     def call
@@ -25,12 +52,14 @@ module Shadcn
     private
 
     def menu_content
-      # If items/labels/separators are used, render them
-      # Otherwise render the block content
-      if items.any? || labels.any? || separators.any? || groups.any?
-        safe_join([labels, items, separators, groups, content].flatten.compact)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order
+      if menu_items.any?
+        safe_join(menu_items)
       else
-        content
+        # Otherwise render the raw block content (for backwards compatibility)
+        raw_content
       end
     end
 

data/app/components/shadcn/dropdown_menu_radio_group_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Radio Group component
+  # Group of mutually exclusive radio items
+  class DropdownMenuRadioGroupComponent < BaseComponent
+    renders_many :items, lambda { |**options, &block|
+      DropdownMenuRadioItemComponent.new(**options, &block)
+    }
+
+    # @param value [String] Currently selected value
+    def initialize(value: nil, **options, &block)
+      super(**options, &block)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      if items.any?
+        safe_join(items)
+      else
+        content
+      end
+    end
+
+    def group_attributes
+      attrs = {
+        class: class_name,
+        role: "group",
+        "data-value": @value
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end