shadcn-rails 0.1.0

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

@@ -0,0 +1,251 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Navigation Menu Controller
+ * Handles navigation menu interactions with dropdown content areas
+ */
+export default class extends Controller {
+  static targets = ["list", "item", "trigger", "content", "viewport"]
+  static values = {
+    openIndex: { type: Number, default: -1 },
+    delayDuration: { type: Number, default: 200 },
+    skipDelayDuration: { type: Number, default: 300 }
+  }
+
+  connect() {
+    this.isOpen = false
+    this.previousIndex = -1
+    this.openTimer = null
+    this.closeTimer = null
+    this.wasClickOpened = false
+
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+  }
+
+  disconnect() {
+    this.closeAll()
+    this.clearTimers()
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    const trigger = event.currentTarget
+    const item = trigger.closest("[data-shadcn--navigation-menu-target='item']")
+    const index = this.itemTargets.indexOf(item)
+
+    this.clearTimers()
+
+    if (this.openIndexValue === index) {
+      this.closeAll()
+    } else {
+      this.wasClickOpened = true
+      this.openItem(index)
+    }
+  }
+
+  hoverOpen(event) {
+    // If opened by click, require click to close
+    if (this.wasClickOpened && this.isOpen) return
+
+    const trigger = event.currentTarget
+    const item = trigger.closest("[data-shadcn--navigation-menu-target='item']")
+    const index = this.itemTargets.indexOf(item)
+
+    this.clearTimers()
+
+    if (this.isOpen) {
+      // Already open, switch immediately
+      if (this.openIndexValue !== index) {
+        this.openItem(index)
+      }
+    } else {
+      // Not open, delay before opening
+      this.openTimer = setTimeout(() => {
+        this.openItem(index)
+      }, this.delayDurationValue)
+    }
+  }
+
+  hoverClose(event) {
+    // If opened by click, require click to close
+    if (this.wasClickOpened) return
+
+    this.clearTimers()
+
+    this.closeTimer = setTimeout(() => {
+      this.closeAll()
+    }, this.skipDelayDurationValue)
+  }
+
+  contentHover() {
+    // Cancel close timer when hovering content
+    this.clearTimers()
+  }
+
+  openItem(index) {
+    if (index < 0 || index >= this.itemTargets.length) return
+
+    // Close previous if different
+    if (this.openIndexValue !== -1 && this.openIndexValue !== index) {
+      this.closeItem(this.openIndexValue)
+    }
+
+    const item = this.itemTargets[index]
+    const trigger = item.querySelector("[data-shadcn--navigation-menu-target='trigger']")
+    const content = item.querySelector("[data-shadcn--navigation-menu-target='content']")
+
+    if (!trigger || !content) return
+
+    this.previousIndex = this.openIndexValue
+    this.openIndexValue = index
+
+    // Update trigger state
+    trigger.setAttribute("aria-expanded", "true")
+    trigger.dataset.state = "open"
+
+    // Show content
+    content.hidden = false
+    content.dataset.state = "open"
+
+    // Set motion direction for animation
+    if (this.previousIndex !== -1 && this.previousIndex !== index) {
+      content.dataset.motion = this.previousIndex < index ? "from-end" : "from-start"
+    } else {
+      content.dataset.motion = "from-start"
+    }
+
+    // Update viewport
+    if (this.hasViewportTarget) {
+      this.viewportTarget.hidden = false
+      this.viewportTarget.dataset.state = "open"
+      this.viewportTarget.innerHTML = content.innerHTML
+      this.positionViewport(item)
+    }
+
+    this.isOpen = true
+
+    // Add event listeners
+    document.addEventListener("click", this.boundHandleClickOutside)
+    document.addEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  closeItem(index) {
+    if (index < 0 || index >= this.itemTargets.length) return
+
+    const item = this.itemTargets[index]
+    const trigger = item.querySelector("[data-shadcn--navigation-menu-target='trigger']")
+    const content = item.querySelector("[data-shadcn--navigation-menu-target='content']")
+
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false")
+      trigger.dataset.state = "closed"
+    }
+
+    if (content) {
+      content.dataset.state = "closed"
+      content.dataset.motion = this.previousIndex < index ? "to-end" : "to-start"
+      setTimeout(() => {
+        if (content.dataset.state === "closed") {
+          content.hidden = true
+        }
+      }, 150)
+    }
+  }
+
+  closeAll() {
+    this.triggerTargets.forEach(trigger => {
+      trigger.setAttribute("aria-expanded", "false")
+      trigger.dataset.state = "closed"
+    })
+
+    this.contentTargets.forEach(content => {
+      content.dataset.state = "closed"
+      setTimeout(() => {
+        if (content.dataset.state === "closed") {
+          content.hidden = true
+        }
+      }, 150)
+    })
+
+    if (this.hasViewportTarget) {
+      this.viewportTarget.dataset.state = "closed"
+      setTimeout(() => {
+        if (this.viewportTarget.dataset.state === "closed") {
+          this.viewportTarget.hidden = true
+          this.viewportTarget.innerHTML = ""
+        }
+      }, 150)
+    }
+
+    this.openIndexValue = -1
+    this.previousIndex = -1
+    this.isOpen = false
+    this.wasClickOpened = false
+
+    document.removeEventListener("click", this.boundHandleClickOutside)
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.closeAll()
+    }
+  }
+
+  handleKeydown(event) {
+    switch (event.key) {
+      case "Escape":
+        this.closeAll()
+        if (this.openIndexValue >= 0) {
+          this.triggerTargets[this.openIndexValue]?.focus()
+        }
+        break
+      case "ArrowRight":
+        event.preventDefault()
+        this.navigateToNextItem()
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        this.navigateToPreviousItem()
+        break
+    }
+  }
+
+  navigateToNextItem() {
+    const nextIndex = (this.openIndexValue + 1) % this.itemTargets.length
+    this.openItem(nextIndex)
+    const trigger = this.itemTargets[nextIndex].querySelector("[data-shadcn--navigation-menu-target='trigger']")
+    trigger?.focus()
+  }
+
+  navigateToPreviousItem() {
+    const prevIndex = this.openIndexValue <= 0 ? this.itemTargets.length - 1 : this.openIndexValue - 1
+    this.openItem(prevIndex)
+    const trigger = this.itemTargets[prevIndex].querySelector("[data-shadcn--navigation-menu-target='trigger']")
+    trigger?.focus()
+  }
+
+  clearTimers() {
+    if (this.openTimer) {
+      clearTimeout(this.openTimer)
+      this.openTimer = null
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer)
+      this.closeTimer = null
+    }
+  }
+
+  positionViewport(item) {
+    if (!this.hasViewportTarget) return
+
+    const content = item.querySelector("[data-shadcn--navigation-menu-target='content']")
+    if (content) {
+      // Set CSS custom properties for width/height based on content
+      const rect = content.getBoundingClientRect()
+      this.viewportTarget.style.setProperty("--radix-navigation-menu-viewport-width", `${rect.width}px`)
+      this.viewportTarget.style.setProperty("--radix-navigation-menu-viewport-height", `${rect.height}px`)
+    }
+  }
+}

data/app/assets/javascripts/shadcn/controllers/popover_controller.d.ts

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Popover controller for rich content overlays
+ */
+export default class PopoverController extends Controller {
+  static targets: ["trigger", "content"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    side: { type: "String"; default: "bottom" };
+    align: { type: "String"; default: "center" };
+    modal: { type: "Boolean"; default: false };
+  };
+
+  /** Popover trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Popover content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Whether the popover is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Side to display: "top", "bottom", "left", "right" */
+  sideValue: "top" | "bottom" | "left" | "right";
+  readonly hasSideValue: boolean;
+
+  /** Horizontal alignment: "start", "center", "end" */
+  alignValue: "start" | "center" | "end";
+  readonly hasAlignValue: boolean;
+
+  /** Whether the popover is modal */
+  modalValue: boolean;
+  readonly hasModalValue: boolean;
+
+  /** Toggle popover open/closed */
+  toggle(event?: Event): void;
+
+  /** Show the popover */
+  show(): void;
+
+  /** Hide the popover */
+  hide(): void;
+
+  /** Close the popover (alias for hide) */
+  close(): void;
+
+  /** Handle clicks outside the popover */
+  handleClickOutside(event: MouseEvent): void;
+
+  /** Position the popover content */
+  positionContent(): void;
+}

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

@@ -0,0 +1,141 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Popover controller for rich content overlays
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" },
+    modal: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+
+    if (this.openValue) {
+      this.show()
+    }
+  }
+
+  disconnect() {
+    this.hide()
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    if (this.openValue) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  show() {
+    if (this.openValue) return
+
+    this.openValue = true
+
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = false
+      this.contentTarget.dataset.state = "open"
+      this.contentTarget.dataset.side = this.sideValue
+      this.positionContent()
+    }
+
+    document.addEventListener("click", this.boundHandleClickOutside)
+
+    if (this.modalValue) {
+      document.body.style.pointerEvents = "none"
+      this.contentTarget.style.pointerEvents = "auto"
+    }
+
+    this.dispatch("opened")
+  }
+
+  hide() {
+    if (!this.openValue) return
+
+    this.openValue = false
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      setTimeout(() => {
+        if (!this.openValue) {
+          this.contentTarget.hidden = true
+        }
+      }, 150)
+    }
+
+    document.removeEventListener("click", this.boundHandleClickOutside)
+
+    if (this.modalValue) {
+      document.body.style.pointerEvents = ""
+    }
+
+    this.dispatch("closed")
+  }
+
+  close() {
+    this.hide()
+  }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.hide()
+    }
+  }
+
+  positionContent() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    const trigger = this.triggerTarget.getBoundingClientRect()
+    const content = this.contentTarget
+
+    content.style.position = "absolute"
+
+    const gap = 8
+
+    switch (this.sideValue) {
+      case "top":
+        content.style.bottom = "100%"
+        content.style.top = "auto"
+        content.style.marginBottom = `${gap}px`
+        break
+      case "bottom":
+        content.style.top = "100%"
+        content.style.bottom = "auto"
+        content.style.marginTop = `${gap}px`
+        break
+      case "left":
+        content.style.right = "100%"
+        content.style.left = "auto"
+        content.style.marginRight = `${gap}px`
+        break
+      case "right":
+        content.style.left = "100%"
+        content.style.right = "auto"
+        content.style.marginLeft = `${gap}px`
+        break
+    }
+
+    switch (this.alignValue) {
+      case "start":
+        content.style.left = "0"
+        content.style.right = "auto"
+        break
+      case "center":
+        if (this.sideValue === "top" || this.sideValue === "bottom") {
+          content.style.left = "50%"
+          content.style.transform = "translateX(-50%)"
+        }
+        break
+      case "end":
+        content.style.right = "0"
+        content.style.left = "auto"
+        break
+    }
+  }
+}

data/app/assets/javascripts/shadcn/controllers/radio_group_controller.d.ts

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Radio Group Controller
+ * Handles radio group selection with keyboard navigation
+ */
+export default class RadioGroupController extends Controller {
+  static targets: ["item", "indicator"];
+  static values: {
+    name: "String";
+    value: "String";
+  };
+
+  /** Radio item targets */
+  readonly itemTargets: HTMLElement[];
+  readonly hasItemTarget: boolean;
+
+  /** Visual indicator targets */
+  readonly indicatorTargets: HTMLElement[];
+  readonly hasIndicatorTarget: boolean;
+
+  /** Input name for form submission */
+  nameValue: string;
+  readonly hasNameValue: boolean;
+
+  /** Currently selected value */
+  valueValue: string;
+  readonly hasValueValue: boolean;
+
+  /** Select a radio item */
+  select(event: Event): void;
+
+  /** Handle keyboard navigation */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Update selection state visuals */
+  updateSelection(): void;
+
+  /** Dispatch change event */
+  dispatchChange(value: string): void;
+
+  /** Get enabled (non-disabled) items */
+  readonly enabledItems: HTMLElement[];
+
+  /** Called when valueValue changes */
+  valueValueChanged(): void;
+}

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

@@ -0,0 +1,108 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Radio Group Controller
+ *
+ * Handles radio group selection with keyboard navigation
+ *
+ * Targets:
+ * - item: Individual radio buttons
+ * - indicator: Visual indicator element
+ *
+ * Values:
+ * - name: Input name for form submission
+ * - value: Currently selected value
+ */
+export default class extends Controller {
+  static targets = ["item", "indicator"]
+  static values = {
+    name: String,
+    value: String
+  }
+
+  connect() {
+    this.updateSelection()
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    const value = item.dataset.value
+    this.valueValue = value
+    this.updateSelection()
+    this.dispatchChange(value)
+  }
+
+  handleKeydown(event) {
+    const items = this.enabledItems
+    const currentIndex = items.indexOf(event.currentTarget)
+    let newIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault()
+        newIndex = (currentIndex + 1) % items.length
+        break
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault()
+        newIndex = (currentIndex - 1 + items.length) % items.length
+        break
+      case " ":
+      case "Enter":
+        event.preventDefault()
+        this.select(event)
+        return
+      default:
+        return
+    }
+
+    const newItem = items[newIndex]
+    newItem.focus()
+    // Auto-select on arrow navigation (standard radio behavior)
+    this.valueValue = newItem.dataset.value
+    this.updateSelection()
+    this.dispatchChange(newItem.dataset.value)
+  }
+
+  updateSelection() {
+    this.itemTargets.forEach(item => {
+      const isSelected = item.dataset.value === this.valueValue
+      item.setAttribute("aria-checked", isSelected.toString())
+      item.dataset.state = isSelected ? "checked" : "unchecked"
+      item.tabIndex = isSelected ? 0 : -1
+
+      // Update indicator visibility
+      const indicator = item.querySelector("[data-shadcn--radio-group-target='indicator']")
+      if (indicator) {
+        indicator.classList.toggle("opacity-0", !isSelected)
+      }
+    })
+
+    // Ensure at least one item is focusable if nothing selected
+    if (!this.valueValue && this.itemTargets.length > 0) {
+      this.enabledItems[0]?.setAttribute("tabindex", "0")
+    }
+  }
+
+  dispatchChange(value) {
+    this.dispatch("change", {
+      detail: { value, name: this.nameValue }
+    })
+
+    // Also dispatch a native input event for form compatibility
+    const event = new Event("input", { bubbles: true })
+    this.element.dispatchEvent(event)
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter(item => !item.disabled)
+  }
+
+  // Allow programmatic value setting
+  valueValueChanged() {
+    this.updateSelection()
+  }
+}