shadcn-rails 0.1.0

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

@@ -0,0 +1,263 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Carousel controller for sliding content
+ * Handles navigation, autoplay, keyboard navigation, and touch/swipe
+ */
+export default class extends Controller {
+  static targets = ["viewport", "content", "item", "prevButton", "nextButton"]
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    loop: { type: Boolean, default: false },
+    autoplay: { type: Boolean, default: false },
+    autoplayInterval: { type: Number, default: 4000 },
+    align: { type: String, default: "start" },
+    selectedIndex: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.element.addEventListener("keydown", this.boundHandleKeydown)
+
+    // Touch/swipe support
+    this.touchStartX = 0
+    this.touchStartY = 0
+    this.boundHandleTouchStart = this.handleTouchStart.bind(this)
+    this.boundHandleTouchEnd = this.handleTouchEnd.bind(this)
+
+    if (this.hasViewportTarget) {
+      this.viewportTarget.addEventListener("touchstart", this.boundHandleTouchStart, { passive: true })
+      this.viewportTarget.addEventListener("touchend", this.boundHandleTouchEnd, { passive: true })
+    }
+
+    // Set initial state
+    this.updateButtonStates()
+    this.scrollToIndex(this.selectedIndexValue, false)
+
+    // Start autoplay if enabled
+    if (this.autoplayValue) {
+      this.startAutoplay()
+    }
+  }
+
+  disconnect() {
+    this.element.removeEventListener("keydown", this.boundHandleKeydown)
+
+    if (this.hasViewportTarget) {
+      this.viewportTarget.removeEventListener("touchstart", this.boundHandleTouchStart)
+      this.viewportTarget.removeEventListener("touchend", this.boundHandleTouchEnd)
+    }
+
+    this.stopAutoplay()
+  }
+
+  previous() {
+    const newIndex = this.selectedIndexValue - 1
+
+    if (newIndex < 0) {
+      if (this.loopValue) {
+        this.selectedIndexValue = this.itemTargets.length - 1
+      }
+    } else {
+      this.selectedIndexValue = newIndex
+    }
+
+    this.scrollToIndex(this.selectedIndexValue)
+    this.dispatch("select", { detail: { index: this.selectedIndexValue } })
+  }
+
+  next() {
+    const newIndex = this.selectedIndexValue + 1
+    const maxIndex = this.itemTargets.length - 1
+
+    if (newIndex > maxIndex) {
+      if (this.loopValue) {
+        this.selectedIndexValue = 0
+      }
+    } else {
+      this.selectedIndexValue = newIndex
+    }
+
+    this.scrollToIndex(this.selectedIndexValue)
+    this.dispatch("select", { detail: { index: this.selectedIndexValue } })
+  }
+
+  goToSlide(event) {
+    const index = parseInt(event.currentTarget.dataset.index, 10)
+    if (!isNaN(index) && index >= 0 && index < this.itemTargets.length) {
+      this.selectedIndexValue = index
+      this.scrollToIndex(index)
+      this.dispatch("select", { detail: { index } })
+    }
+  }
+
+  scrollToIndex(index, animate = true) {
+    if (!this.hasContentTarget || !this.itemTargets.length) return
+
+    const item = this.itemTargets[index]
+    if (!item) return
+
+    const isHorizontal = this.orientationValue === "horizontal"
+
+    // Calculate scroll position
+    let scrollPosition
+    if (isHorizontal) {
+      scrollPosition = item.offsetLeft - this.getAlignOffset(item, "width")
+    } else {
+      scrollPosition = item.offsetTop - this.getAlignOffset(item, "height")
+    }
+
+    // Apply scroll
+    if (animate) {
+      this.contentTarget.style.transition = "transform 0.3s ease-out"
+    } else {
+      this.contentTarget.style.transition = "none"
+    }
+
+    if (isHorizontal) {
+      this.contentTarget.style.transform = `translateX(-${scrollPosition}px)`
+    } else {
+      this.contentTarget.style.transform = `translateY(-${scrollPosition}px)`
+    }
+
+    // Update ARIA attributes
+    this.itemTargets.forEach((target, i) => {
+      target.setAttribute("aria-hidden", i !== index)
+      target.inert = i !== index
+    })
+
+    this.updateButtonStates()
+  }
+
+  getAlignOffset(item, dimension) {
+    if (this.alignValue === "center") {
+      const viewportSize = dimension === "width"
+        ? this.viewportTarget.offsetWidth
+        : this.viewportTarget.offsetHeight
+      const itemSize = dimension === "width"
+        ? item.offsetWidth
+        : item.offsetHeight
+      return (viewportSize - itemSize) / 2
+    } else if (this.alignValue === "end") {
+      const viewportSize = dimension === "width"
+        ? this.viewportTarget.offsetWidth
+        : this.viewportTarget.offsetHeight
+      const itemSize = dimension === "width"
+        ? item.offsetWidth
+        : item.offsetHeight
+      return viewportSize - itemSize
+    }
+    return 0 // start alignment
+  }
+
+  updateButtonStates() {
+    const atStart = this.selectedIndexValue === 0
+    const atEnd = this.selectedIndexValue === this.itemTargets.length - 1
+
+    if (this.hasPrevButtonTarget) {
+      this.prevButtonTarget.disabled = !this.loopValue && atStart
+    }
+
+    if (this.hasNextButtonTarget) {
+      this.nextButtonTarget.disabled = !this.loopValue && atEnd
+    }
+  }
+
+  handleKeydown(event) {
+    const isHorizontal = this.orientationValue === "horizontal"
+
+    if (isHorizontal) {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        this.previous()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        this.next()
+      }
+    } else {
+      if (event.key === "ArrowUp") {
+        event.preventDefault()
+        this.previous()
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault()
+        this.next()
+      }
+    }
+  }
+
+  handleTouchStart(event) {
+    this.touchStartX = event.touches[0].clientX
+    this.touchStartY = event.touches[0].clientY
+
+    // Pause autoplay on interaction
+    if (this.autoplayValue) {
+      this.stopAutoplay()
+    }
+  }
+
+  handleTouchEnd(event) {
+    const touchEndX = event.changedTouches[0].clientX
+    const touchEndY = event.changedTouches[0].clientY
+
+    const deltaX = touchEndX - this.touchStartX
+    const deltaY = touchEndY - this.touchStartY
+
+    const isHorizontal = this.orientationValue === "horizontal"
+    const threshold = 50
+
+    if (isHorizontal) {
+      if (Math.abs(deltaX) > threshold && Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (deltaX > 0) {
+          this.previous()
+        } else {
+          this.next()
+        }
+      }
+    } else {
+      if (Math.abs(deltaY) > threshold && Math.abs(deltaY) > Math.abs(deltaX)) {
+        if (deltaY > 0) {
+          this.previous()
+        } else {
+          this.next()
+        }
+      }
+    }
+
+    // Resume autoplay after interaction
+    if (this.autoplayValue) {
+      this.startAutoplay()
+    }
+  }
+
+  startAutoplay() {
+    this.stopAutoplay()
+    this.autoplayTimer = setInterval(() => {
+      this.next()
+    }, this.autoplayIntervalValue)
+  }
+
+  stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer)
+      this.autoplayTimer = null
+    }
+  }
+
+  // Pause autoplay when mouse enters
+  mouseEnter() {
+    if (this.autoplayValue) {
+      this.stopAutoplay()
+    }
+  }
+
+  // Resume autoplay when mouse leaves
+  mouseLeave() {
+    if (this.autoplayValue) {
+      this.startAutoplay()
+    }
+  }
+
+  selectedIndexValueChanged() {
+    this.scrollToIndex(this.selectedIndexValue)
+  }
+}

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

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Checkbox controller for custom checkboxes
+ */
+export default class CheckboxController extends Controller {
+  static values: {
+    checked: { type: "Boolean"; default: false };
+    name: "String";
+  };
+
+  /** Whether the checkbox is checked */
+  checkedValue: boolean;
+  readonly hasCheckedValue: boolean;
+
+  /** Input name for form submission */
+  nameValue: string;
+  readonly hasNameValue: boolean;
+
+  /** Toggle the checkbox state */
+  toggle(): void;
+
+  /** Update the visual state */
+  updateState(): void;
+
+  /** Update hidden input value */
+  updateHiddenInput(): void;
+
+  /** Called when checkedValue changes */
+  checkedValueChanged(): void;
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Checkbox controller for custom checkboxes
+ */
+export default class extends Controller {
+  static values = {
+    checked: { type: Boolean, default: false },
+    name: String
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  toggle() {
+    this.checkedValue = !this.checkedValue
+    this.updateState()
+    this.updateHiddenInput()
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+  }
+
+  updateState() {
+    const state = this.checkedValue ? "checked" : "unchecked"
+    this.element.dataset.state = state
+    this.element.setAttribute("aria-checked", this.checkedValue.toString())
+
+    // Update checkmark visibility
+    const checkIcon = this.element.querySelector("svg")
+    if (checkIcon) {
+      checkIcon.style.opacity = this.checkedValue ? "1" : "0"
+    }
+  }
+
+  updateHiddenInput() {
+    if (!this.nameValue) return
+
+    // Find or create hidden input
+    let input = this.element.parentElement.querySelector(`input[name="${this.nameValue}"]`)
+    if (input) {
+      input.value = this.checkedValue ? "1" : "0"
+    }
+  }
+
+  checkedValueChanged() {
+    this.updateState()
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Collapsible controller for expandable content
+ */
+export default class CollapsibleController extends Controller {
+  static targets: ["trigger", "content"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    disabled: { type: "Boolean"; default: false };
+  };
+
+  /** Trigger element target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Content element target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Whether the collapsible is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Whether the collapsible is disabled */
+  disabledValue: boolean;
+  readonly hasDisabledValue: boolean;
+
+  /** Toggle open/closed state */
+  toggle(): void;
+
+  /** Open the collapsible */
+  open(): void;
+
+  /** Close the collapsible */
+  close(): void;
+
+  /** Update the visual state */
+  updateState(): void;
+
+  /** Called when openValue changes */
+  openValueChanged(): void;
+}

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

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Collapsible controller for expandable content
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+
+    this.openValue = !this.openValue
+    this.updateState()
+  }
+
+  open() {
+    if (this.disabledValue) return
+
+    this.openValue = true
+    this.updateState()
+  }
+
+  close() {
+    this.openValue = false
+    this.updateState()
+  }
+
+  updateState() {
+    const state = this.openValue ? "open" : "closed"
+    this.element.dataset.state = state
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = state
+
+      if (this.openValue) {
+        this.contentTarget.hidden = false
+        // Animate open
+        const height = this.contentTarget.scrollHeight
+        this.contentTarget.style.height = "0px"
+        requestAnimationFrame(() => {
+          this.contentTarget.style.height = `${height}px`
+          setTimeout(() => {
+            this.contentTarget.style.height = ""
+          }, 200)
+        })
+      } else {
+        // Animate close
+        this.contentTarget.style.height = `${this.contentTarget.scrollHeight}px`
+        requestAnimationFrame(() => {
+          this.contentTarget.style.height = "0px"
+          setTimeout(() => {
+            this.contentTarget.hidden = true
+            this.contentTarget.style.height = ""
+          }, 200)
+        })
+      }
+    }
+
+    this.dispatch(this.openValue ? "opened" : "closed")
+  }
+
+  openValueChanged() {
+    this.updateState()
+  }
+}

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

@@ -0,0 +1,234 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Combobox controller for searchable select dropdown
+ * Handles open/close, filtering, keyboard navigation, and item selection
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "list", "item", "empty", "displayValue", "hiddenInput"]
+  static values = {
+    open: { type: Boolean, default: false },
+    value: { type: String, default: "" },
+    selectedIndex: { type: Number, default: -1 }
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  toggle() {
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.openValue) return
+
+    this.openValue = true
+    this.contentTarget.hidden = false
+    this.contentTarget.dataset.state = "open"
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+
+    // Focus the input
+    requestAnimationFrame(() => {
+      if (this.hasInputTarget) {
+        this.inputTarget.focus()
+      }
+    })
+
+    // Add keyboard listener
+    document.addEventListener("keydown", this.boundHandleKeydown)
+
+    // Reset selection index
+    this.selectedIndexValue = -1
+    this.updateSelection()
+  }
+
+  close() {
+    if (!this.openValue) return
+
+    this.openValue = false
+    this.contentTarget.dataset.state = "closed"
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+
+    // Hide after animation completes, then reset filter state
+    const hideAndReset = () => {
+      this.contentTarget.hidden = true
+      // Reset search and filter state after hiding to avoid flash
+      if (this.hasInputTarget) {
+        this.inputTarget.value = ""
+      }
+      // Reset all items to visible for next open
+      this.itemTargets.forEach((item) => {
+        item.style.display = ""
+      })
+      // Hide empty state
+      if (this.hasEmptyTarget) {
+        this.emptyTarget.hidden = true
+      }
+    }
+
+    // Listen for animation end, with fallback timeout
+    const onAnimationEnd = () => {
+      this.contentTarget.removeEventListener("animationend", onAnimationEnd)
+      hideAndReset()
+    }
+    this.contentTarget.addEventListener("animationend", onAnimationEnd)
+
+    // Fallback in case animation doesn't fire (e.g., no animation defined)
+    setTimeout(() => {
+      this.contentTarget.removeEventListener("animationend", onAnimationEnd)
+      if (!this.contentTarget.hidden) {
+        hideAndReset()
+      }
+    }, 200)
+
+    // Remove keyboard listener
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  /**
+   * Filter items based on input value
+   */
+  filter() {
+    const query = this.hasInputTarget ? this.inputTarget.value.toLowerCase().trim() : ""
+    let visibleCount = 0
+
+    this.itemTargets.forEach((item) => {
+      const label = item.dataset.label?.toLowerCase() || item.textContent.toLowerCase()
+      const value = item.dataset.value?.toLowerCase() || ""
+      const matches = query === "" || label.includes(query) || value.includes(query)
+      // Use style.display instead of hidden attribute to avoid Tailwind flex override
+      item.style.display = matches ? "" : "none"
+      if (matches) visibleCount++
+    })
+
+    // Show/hide empty state - only show when there's a query AND no results
+    if (this.hasEmptyTarget) {
+      const shouldHide = query === "" || visibleCount > 0
+      this.emptyTarget.hidden = shouldHide
+    }
+
+    // Reset selection
+    this.selectedIndexValue = -1
+    this.updateSelection()
+  }
+
+  /**
+   * Select an item
+   */
+  select(event) {
+    const item = event.currentTarget
+    const value = item.dataset.value
+    const label = item.dataset.label
+
+    // Update value
+    this.valueValue = value
+
+    // Update hidden input for form submission
+    if (this.hasHiddenInputTarget) {
+      this.hiddenInputTarget.value = value
+    }
+
+    // Update display value
+    if (this.hasDisplayValueTarget) {
+      this.displayValueTarget.textContent = label
+      this.displayValueTarget.classList.remove("text-muted-foreground")
+    }
+
+    // Update selected state on items
+    this.itemTargets.forEach((i) => {
+      const isSelected = i.dataset.value === value
+      i.dataset.selected = isSelected
+      // Update check icon opacity
+      const checkIcon = i.querySelector("svg")
+      if (checkIcon) {
+        if (isSelected) {
+          checkIcon.classList.remove("opacity-0")
+          checkIcon.classList.add("opacity-100")
+        } else {
+          checkIcon.classList.remove("opacity-100")
+          checkIcon.classList.add("opacity-0")
+        }
+      }
+    })
+
+    // Dispatch change event
+    this.dispatch("change", { detail: { value, label } })
+
+    // Close the dropdown
+    this.close()
+  }
+
+  /**
+   * 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]) {
+          // Simulate click on the selected item
+          visibleItems[this.selectedIndexValue].click()
+        }
+        break
+      case "Escape":
+        event.preventDefault()
+        this.close()
+        break
+    }
+  }
+
+  /**
+   * Update visual selection state
+   */
+  updateSelection() {
+    const visibleItems = this.getVisibleItems()
+
+    visibleItems.forEach((item, index) => {
+      if (index === this.selectedIndexValue) {
+        item.classList.add("bg-accent", "text-accent-foreground")
+        item.scrollIntoView({ block: "nearest" })
+      } else {
+        item.classList.remove("bg-accent", "text-accent-foreground")
+      }
+    })
+  }
+
+  /**
+   * Get all visible items
+   */
+  getVisibleItems() {
+    return this.itemTargets.filter((item) => item.style.display !== "none")
+  }
+
+  /**
+   * Handle click outside to close
+   */
+  handleClickOutside(event) {
+    if (!this.openValue) return
+
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+}