shadcn-rails 0.1.0

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

@@ -0,0 +1,141 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Command controller for command palette functionality
+ * Handles filtering, keyboard navigation, and item selection
+ */
+export default class extends Controller {
+  static targets = ["input", "list", "empty", "group", "item"]
+  static values = {
+    selectedIndex: { type: Number, default: -1 }
+  }
+
+  connect() {
+    this.updateSelection()
+  }
+
+  /**
+   * Filter items based on input value
+   */
+  filter() {
+    const query = this.hasInputTarget ? this.inputTarget.value.toLowerCase().trim() : ""
+    let visibleCount = 0
+
+    // Filter items
+    this.itemTargets.forEach((item) => {
+      const value = item.dataset.value?.toLowerCase() || item.textContent.toLowerCase()
+      const matches = query === "" || value.includes(query)
+      item.hidden = !matches
+      if (matches) visibleCount++
+    })
+
+    // Filter groups - hide if all items are hidden
+    this.groupTargets.forEach((group) => {
+      const visibleItems = group.querySelectorAll('[data-shadcn--command-target="item"]:not([hidden])')
+      group.hidden = visibleItems.length === 0
+    })
+
+    // Show/hide empty state
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.hidden = visibleCount > 0
+    }
+
+    // Reset selection
+    this.selectedIndexValue = -1
+    this.updateSelection()
+  }
+
+  /**
+   * Handle keyboard navigation
+   */
+  handleKeydown(event) {
+    const visibleItems = this.getVisibleItems()
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.selectedIndexValue = Math.min(this.selectedIndexValue + 1, visibleItems.length - 1)
+        this.updateSelection()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.selectedIndexValue = Math.max(this.selectedIndexValue - 1, 0)
+        this.updateSelection()
+        break
+      case "Enter":
+        event.preventDefault()
+        if (this.selectedIndexValue >= 0 && visibleItems[this.selectedIndexValue]) {
+          this.selectItem(visibleItems[this.selectedIndexValue])
+        }
+        break
+      case "Escape":
+        if (this.hasInputTarget && this.inputTarget.value) {
+          event.preventDefault()
+          this.inputTarget.value = ""
+          this.filter()
+        }
+        break
+    }
+  }
+
+  /**
+   * Select an item via click
+   */
+  select(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled === "true") return
+    this.selectItem(item)
+  }
+
+  /**
+   * Handle item selection
+   */
+  selectItem(item) {
+    if (!item || item.dataset.disabled === "true") return
+
+    const value = item.dataset.value || item.textContent.trim()
+
+    // Dispatch custom event
+    this.dispatch("select", {
+      detail: { value, item }
+    })
+
+    // Execute onSelect if provided
+    if (item.dataset.onSelect) {
+      new Function(item.dataset.onSelect)()
+    }
+  }
+
+  /**
+   * Update visual selection state
+   */
+  updateSelection() {
+    const visibleItems = this.getVisibleItems()
+
+    visibleItems.forEach((item, index) => {
+      const isSelected = index === this.selectedIndexValue
+      item.dataset.selected = isSelected
+      if (isSelected) {
+        item.scrollIntoView({ block: "nearest" })
+      }
+    })
+  }
+
+  /**
+   * Get all visible (non-hidden, non-disabled) items
+   */
+  getVisibleItems() {
+    return this.itemTargets.filter(
+      (item) => !item.hidden && item.dataset.disabled !== "true"
+    )
+  }
+
+  /**
+   * Focus the input when connecting
+   */
+  focusInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.focus()
+    }
+  }
+}

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

@@ -0,0 +1,162 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Command Dialog controller for command palette in modal
+ * Extends dialog functionality with keyboard shortcut support
+ */
+export default class extends Controller {
+  static targets = ["trigger", "template", "overlay", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    shortcut: { type: String, default: "" }
+  }
+
+  connect() {
+    this.portal = null
+    this.previousActiveElement = null
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.boundHandleShortcut = this.handleShortcut.bind(this)
+
+    // Listen for keyboard shortcut
+    if (this.shortcutValue) {
+      document.addEventListener("keydown", this.boundHandleShortcut)
+    }
+
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    this.close()
+    if (this.portal) {
+      this.portal.remove()
+    }
+    document.removeEventListener("keydown", this.boundHandleShortcut)
+  }
+
+  /**
+   * Handle global keyboard shortcut (e.g., Cmd+K)
+   */
+  handleShortcut(event) {
+    if (!this.shortcutValue) return
+
+    const key = this.shortcutValue.toLowerCase()
+    if (event.key.toLowerCase() === key && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
+  open() {
+    if (this.openValue) return
+
+    this.previousActiveElement = document.activeElement
+    this.openValue = true
+
+    // Move template content to body
+    if (this.hasTemplateTarget && !this.portal) {
+      this.portal = document.createElement("div")
+      this.portal.className = "shadcn-command-dialog-portal"
+      this.portal.innerHTML = this.templateTarget.innerHTML
+      document.body.appendChild(this.portal)
+
+      // Re-query targets from portal
+      this.portalOverlay = this.portal.querySelector('[data-shadcn--command-dialog-target="overlay"]')
+      this.portalContent = this.portal.querySelector('[data-shadcn--command-dialog-target="content"]')
+
+      // Setup overlay click to close
+      if (this.portalOverlay) {
+        this.portalOverlay.addEventListener("click", () => this.close())
+      }
+    }
+
+    // Show overlay and content
+    requestAnimationFrame(() => {
+      if (this.portalOverlay) {
+        this.portalOverlay.dataset.state = "open"
+        this.portalOverlay.removeAttribute("hidden")
+      }
+      if (this.portalContent) {
+        this.portalContent.dataset.state = "open"
+        this.portalContent.removeAttribute("hidden")
+      }
+
+      // Setup event listeners
+      document.addEventListener("keydown", this.boundHandleKeydown)
+
+      // Focus the command input
+      this.focusInput()
+
+      // Prevent body scroll
+      document.body.style.overflow = "hidden"
+    })
+
+    this.dispatch("opened")
+  }
+
+  close() {
+    if (!this.openValue) return
+
+    this.openValue = false
+
+    if (this.portalOverlay) {
+      this.portalOverlay.dataset.state = "closed"
+    }
+    if (this.portalContent) {
+      this.portalContent.dataset.state = "closed"
+    }
+
+    // Remove event listeners
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
+    // Restore body scroll
+    document.body.style.overflow = ""
+
+    // Return focus
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus()
+    }
+
+    // Remove portal after animation
+    setTimeout(() => {
+      if (this.portal) {
+        this.portal.remove()
+        this.portal = null
+      }
+    }, 200)
+
+    this.dispatch("closed")
+  }
+
+  toggle() {
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  focusInput() {
+    if (!this.portalContent) return
+
+    const input = this.portalContent.querySelector('input[data-shadcn--command-target="input"]')
+    if (input) {
+      setTimeout(() => input.focus(), 50)
+    }
+  }
+
+  openValueChanged() {
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+}

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

@@ -0,0 +1,202 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Context Menu controller for right-click menus
+ * Handles opening at mouse position, closing, keyboard navigation, and item selection
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "item"]
+  static values = {
+    open: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.focusedIndex = -1
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+  }
+
+  disconnect() {
+    this.hide()
+  }
+
+  show(event) {
+    event?.preventDefault()
+
+    // Store mouse position for positioning
+    this.mouseX = event?.clientX || 0
+    this.mouseY = event?.clientY || 0
+
+    this.openValue = true
+
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = false
+      this.contentTarget.dataset.state = "open"
+      this.positionContent()
+    }
+
+    // Add event listeners
+    document.addEventListener("click", this.boundHandleClickOutside)
+    document.addEventListener("contextmenu", this.boundHandleClickOutside)
+    document.addEventListener("keydown", this.boundHandleKeydown)
+
+    // Focus first item
+    this.focusedIndex = -1
+    this.focusNextItem()
+
+    this.dispatch("opened")
+  }
+
+  hide() {
+    if (!this.openValue) return
+
+    this.openValue = false
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      // Hide after animation
+      setTimeout(() => {
+        if (!this.openValue) {
+          this.contentTarget.hidden = true
+        }
+      }, 150)
+    }
+
+    // Remove event listeners
+    document.removeEventListener("click", this.boundHandleClickOutside)
+    document.removeEventListener("contextmenu", this.boundHandleClickOutside)
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
+    // Reset focus index
+    this.focusedIndex = -1
+
+    this.dispatch("closed")
+  }
+
+  close() {
+    this.hide()
+  }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    this.dispatch("select", { detail: { item } })
+    this.hide()
+  }
+
+  handleClickOutside(event) {
+    // Don't close if clicking inside the content
+    if (this.hasContentTarget && this.contentTarget.contains(event.target)) {
+      return
+    }
+    this.hide()
+  }
+
+  handleKeydown(event) {
+    switch (event.key) {
+      case "Escape":
+        this.hide()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.focusNextItem()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.focusPreviousItem()
+        break
+      case "Home":
+        event.preventDefault()
+        this.focusFirstItem()
+        break
+      case "End":
+        event.preventDefault()
+        this.focusLastItem()
+        break
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        this.selectFocusedItem()
+        break
+    }
+  }
+
+  focusNextItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = (this.focusedIndex + 1) % items.length
+    items[this.focusedIndex].focus()
+  }
+
+  focusPreviousItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1
+    items[this.focusedIndex].focus()
+  }
+
+  focusFirstItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = 0
+    items[0].focus()
+  }
+
+  focusLastItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = items.length - 1
+    items[this.focusedIndex].focus()
+  }
+
+  selectFocusedItem() {
+    const items = this.enabledItems
+    if (this.focusedIndex >= 0 && this.focusedIndex < items.length) {
+      items[this.focusedIndex].click()
+    }
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter(item => item.dataset.disabled === undefined)
+  }
+
+  positionContent() {
+    if (!this.hasContentTarget) return
+
+    const content = this.contentTarget
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    // Reset position to measure actual size
+    content.style.left = "0"
+    content.style.top = "0"
+
+    const contentRect = content.getBoundingClientRect()
+
+    // Calculate position, keeping menu within viewport
+    let x = this.mouseX
+    let y = this.mouseY
+
+    // Adjust if menu would overflow right edge
+    if (x + contentRect.width > viewportWidth) {
+      x = viewportWidth - contentRect.width - 8
+    }
+
+    // Adjust if menu would overflow bottom edge
+    if (y + contentRect.height > viewportHeight) {
+      y = viewportHeight - contentRect.height - 8
+    }
+
+    // Ensure menu doesn't go off left or top edge
+    x = Math.max(8, x)
+    y = Math.max(8, y)
+
+    content.style.left = `${x}px`
+    content.style.top = `${y}px`
+  }
+}