shadcn-rails 0.1.0

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

@@ -0,0 +1,272 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Resizable Panel Controller
+ * Handles resizable panel layouts with keyboard and mouse support
+ */
+export default class extends Controller {
+  static targets = ["panel", "handle"]
+  static values = {
+    direction: { type: String, default: "horizontal" },
+    autoSaveId: String
+  }
+
+  connect() {
+    this.isDragging = false
+    this.currentHandle = null
+    this.startPosition = 0
+    this.startSizes = []
+
+    // Bind methods
+    this.boundResize = this.resize.bind(this)
+    this.boundStopResize = this.stopResize.bind(this)
+
+    // Load saved sizes if autoSaveId is set
+    if (this.hasAutoSaveIdValue) {
+      this.loadSavedSizes()
+    }
+
+    // Add keyboard support
+    this.handleTargets.forEach(handle => {
+      handle.addEventListener('keydown', this.handleKeydown.bind(this))
+    })
+  }
+
+  disconnect() {
+    document.removeEventListener('mousemove', this.boundResize)
+    document.removeEventListener('mouseup', this.boundStopResize)
+    document.removeEventListener('touchmove', this.boundResize)
+    document.removeEventListener('touchend', this.boundStopResize)
+  }
+
+  startResize(event) {
+    event.preventDefault()
+
+    this.isDragging = true
+    this.currentHandle = event.currentTarget
+    this.currentHandle.dataset.state = "dragging"
+
+    // Get the position based on event type
+    const position = event.type.includes('touch')
+      ? (this.isHorizontal ? event.touches[0].clientX : event.touches[0].clientY)
+      : (this.isHorizontal ? event.clientX : event.clientY)
+
+    this.startPosition = position
+
+    // Find adjacent panels
+    this.findAdjacentPanels()
+
+    // Store initial sizes
+    this.storePanelSizes()
+
+    // Add document listeners
+    document.addEventListener('mousemove', this.boundResize)
+    document.addEventListener('mouseup', this.boundStopResize)
+    document.addEventListener('touchmove', this.boundResize, { passive: false })
+    document.addEventListener('touchend', this.boundStopResize)
+
+    // Prevent text selection during drag
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = this.isHorizontal ? 'col-resize' : 'row-resize'
+  }
+
+  resize(event) {
+    if (!this.isDragging) return
+
+    event.preventDefault()
+
+    const position = event.type.includes('touch')
+      ? (this.isHorizontal ? event.touches[0].clientX : event.touches[0].clientY)
+      : (this.isHorizontal ? event.clientX : event.clientY)
+
+    const delta = position - this.startPosition
+    const containerSize = this.isHorizontal
+      ? this.element.offsetWidth
+      : this.element.offsetHeight
+
+    const deltaPercent = (delta / containerSize) * 100
+
+    if (this.prevPanel && this.nextPanel) {
+      const prevSize = this.prevPanelStartSize + deltaPercent
+      const nextSize = this.nextPanelStartSize - deltaPercent
+
+      // Get min/max constraints
+      const prevMin = parseFloat(this.prevPanel.dataset.minSize) || 0
+      const prevMax = parseFloat(this.prevPanel.dataset.maxSize) || 100
+      const nextMin = parseFloat(this.nextPanel.dataset.minSize) || 0
+      const nextMax = parseFloat(this.nextPanel.dataset.maxSize) || 100
+
+      // Apply constraints
+      if (prevSize >= prevMin && prevSize <= prevMax &&
+          nextSize >= nextMin && nextSize <= nextMax) {
+        this.setPanelSize(this.prevPanel, prevSize)
+        this.setPanelSize(this.nextPanel, nextSize)
+      }
+    }
+  }
+
+  stopResize() {
+    if (!this.isDragging) return
+
+    this.isDragging = false
+
+    if (this.currentHandle) {
+      this.currentHandle.dataset.state = ""
+    }
+
+    document.removeEventListener('mousemove', this.boundResize)
+    document.removeEventListener('mouseup', this.boundStopResize)
+    document.removeEventListener('touchmove', this.boundResize)
+    document.removeEventListener('touchend', this.boundStopResize)
+
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+
+    // Save sizes if autoSaveId is set
+    if (this.hasAutoSaveIdValue) {
+      this.saveSizes()
+    }
+
+    this.currentHandle = null
+  }
+
+  handleKeydown(event) {
+    const handle = event.currentTarget
+    const step = event.shiftKey ? 10 : 1
+
+    let delta = 0
+
+    if (this.isHorizontal) {
+      if (event.key === 'ArrowLeft') delta = -step
+      if (event.key === 'ArrowRight') delta = step
+    } else {
+      if (event.key === 'ArrowUp') delta = -step
+      if (event.key === 'ArrowDown') delta = step
+    }
+
+    if (delta !== 0) {
+      event.preventDefault()
+      this.currentHandle = handle
+      this.findAdjacentPanels()
+      this.storePanelSizes()
+
+      if (this.prevPanel && this.nextPanel) {
+        const prevSize = this.prevPanelStartSize + delta
+        const nextSize = this.nextPanelStartSize - delta
+
+        // Get min/max constraints
+        const prevMin = parseFloat(this.prevPanel.dataset.minSize) || 0
+        const prevMax = parseFloat(this.prevPanel.dataset.maxSize) || 100
+        const nextMin = parseFloat(this.nextPanel.dataset.minSize) || 0
+        const nextMax = parseFloat(this.nextPanel.dataset.maxSize) || 100
+
+        if (prevSize >= prevMin && prevSize <= prevMax &&
+            nextSize >= nextMin && nextSize <= nextMax) {
+          this.setPanelSize(this.prevPanel, prevSize)
+          this.setPanelSize(this.nextPanel, nextSize)
+        }
+      }
+
+      if (this.hasAutoSaveIdValue) {
+        this.saveSizes()
+      }
+    }
+
+    // Home/End keys
+    if (event.key === 'Home') {
+      event.preventDefault()
+      this.collapsePanel('prev')
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      this.collapsePanel('next')
+    }
+  }
+
+  findAdjacentPanels() {
+    const allElements = Array.from(this.element.children)
+    const handleIndex = allElements.indexOf(this.currentHandle)
+
+    // Find the panel before the handle
+    this.prevPanel = null
+    for (let i = handleIndex - 1; i >= 0; i--) {
+      if (allElements[i].dataset.panel !== undefined) {
+        this.prevPanel = allElements[i]
+        break
+      }
+    }
+
+    // Find the panel after the handle
+    this.nextPanel = null
+    for (let i = handleIndex + 1; i < allElements.length; i++) {
+      if (allElements[i].dataset.panel !== undefined) {
+        this.nextPanel = allElements[i]
+        break
+      }
+    }
+  }
+
+  storePanelSizes() {
+    if (this.prevPanel) {
+      this.prevPanelStartSize = this.getPanelSize(this.prevPanel)
+    }
+    if (this.nextPanel) {
+      this.nextPanelStartSize = this.getPanelSize(this.nextPanel)
+    }
+  }
+
+  getPanelSize(panel) {
+    const containerSize = this.isHorizontal
+      ? this.element.offsetWidth
+      : this.element.offsetHeight
+    const panelSize = this.isHorizontal
+      ? panel.offsetWidth
+      : panel.offsetHeight
+    return (panelSize / containerSize) * 100
+  }
+
+  setPanelSize(panel, percent) {
+    panel.style.flexBasis = `${percent}%`
+    panel.dataset.panelSize = percent
+  }
+
+  collapsePanel(which) {
+    this.findAdjacentPanels()
+    this.storePanelSizes()
+
+    if (which === 'prev' && this.prevPanel && this.nextPanel) {
+      const prevMin = parseFloat(this.prevPanel.dataset.minSize) || 0
+      this.setPanelSize(this.prevPanel, prevMin)
+      this.setPanelSize(this.nextPanel, this.prevPanelStartSize + this.nextPanelStartSize - prevMin)
+    } else if (which === 'next' && this.prevPanel && this.nextPanel) {
+      const nextMin = parseFloat(this.nextPanel.dataset.minSize) || 0
+      this.setPanelSize(this.nextPanel, nextMin)
+      this.setPanelSize(this.prevPanel, this.prevPanelStartSize + this.nextPanelStartSize - nextMin)
+    }
+  }
+
+  saveSizes() {
+    const sizes = this.panelTargets.map(panel => this.getPanelSize(panel))
+    localStorage.setItem(`resizable-${this.autoSaveIdValue}`, JSON.stringify(sizes))
+  }
+
+  loadSavedSizes() {
+    const saved = localStorage.getItem(`resizable-${this.autoSaveIdValue}`)
+    if (saved) {
+      try {
+        const sizes = JSON.parse(saved)
+        this.panelTargets.forEach((panel, index) => {
+          if (sizes[index] !== undefined) {
+            this.setPanelSize(panel, sizes[index])
+          }
+        })
+      } catch (e) {
+        console.warn('Failed to load saved panel sizes:', e)
+      }
+    }
+  }
+
+  get isHorizontal() {
+    return this.directionValue === 'horizontal'
+  }
+}

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

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Scroll Area controller for custom scrollbars
+ */
+export default class ScrollAreaController extends Controller {
+  static targets: ["viewport", "scrollbar", "thumb"];
+  static values: {
+    orientation: { type: "String"; default: "vertical" };
+    type: { type: "String"; default: "hover" };
+  };
+
+  /** Scrollable viewport target */
+  readonly viewportTarget: HTMLElement;
+  readonly hasViewportTarget: boolean;
+
+  /** Scrollbar container targets */
+  readonly scrollbarTargets: HTMLElement[];
+  readonly hasScrollbarTarget: boolean;
+
+  /** Scrollbar thumb target */
+  readonly thumbTarget: HTMLElement;
+  readonly hasThumbTarget: boolean;
+
+  /** Scroll orientation: "vertical", "horizontal", "both" */
+  orientationValue: "vertical" | "horizontal" | "both";
+  readonly hasOrientationValue: boolean;
+
+  /** Scrollbar visibility type: "hover", "scroll", "always" */
+  typeValue: "hover" | "scroll" | "always";
+  readonly hasTypeValue: boolean;
+
+  /** Handle scroll events */
+  handleScroll(): void;
+
+  /** Update scrollbar thumb position and size */
+  updateScrollbar(): void;
+
+  /** Show the scrollbar */
+  showScrollbar(): void;
+
+  /** Hide the scrollbar */
+  hideScrollbar(): void;
+}

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

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Scroll Area controller for custom scrollbars
+ */
+export default class extends Controller {
+  static targets = ["viewport", "scrollbar", "thumb"]
+  static values = {
+    orientation: { type: String, default: "vertical" },
+    type: { type: String, default: "hover" }
+  }
+
+  connect() {
+    this.updateScrollbar()
+
+    if (this.hasViewportTarget) {
+      this.viewportTarget.addEventListener("scroll", this.handleScroll.bind(this))
+    }
+
+    // Show scrollbar based on type
+    if (this.typeValue === "always") {
+      this.showScrollbar()
+    }
+  }
+
+  disconnect() {
+    if (this.hasViewportTarget) {
+      this.viewportTarget.removeEventListener("scroll", this.handleScroll.bind(this))
+    }
+  }
+
+  handleScroll() {
+    this.updateScrollbar()
+  }
+
+  updateScrollbar() {
+    if (!this.hasViewportTarget || !this.hasThumbTarget) return
+
+    const viewport = this.viewportTarget
+    const thumb = this.thumbTarget
+
+    if (this.orientationValue === "vertical" || this.orientationValue === "both") {
+      const scrollRatio = viewport.scrollTop / (viewport.scrollHeight - viewport.clientHeight)
+      const thumbHeight = Math.max((viewport.clientHeight / viewport.scrollHeight) * 100, 10)
+      const thumbTop = scrollRatio * (100 - thumbHeight)
+
+      thumb.style.height = `${thumbHeight}%`
+      thumb.style.top = `${thumbTop}%`
+    }
+
+    if (this.orientationValue === "horizontal" || this.orientationValue === "both") {
+      const scrollRatio = viewport.scrollLeft / (viewport.scrollWidth - viewport.clientWidth)
+      const thumbWidth = Math.max((viewport.clientWidth / viewport.scrollWidth) * 100, 10)
+      const thumbLeft = scrollRatio * (100 - thumbWidth)
+
+      thumb.style.width = `${thumbWidth}%`
+      thumb.style.left = `${thumbLeft}%`
+    }
+  }
+
+  showScrollbar() {
+    this.scrollbarTargets.forEach(scrollbar => {
+      scrollbar.style.opacity = "1"
+    })
+  }
+
+  hideScrollbar() {
+    if (this.typeValue !== "always") {
+      this.scrollbarTargets.forEach(scrollbar => {
+        scrollbar.style.opacity = "0"
+      })
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Select controller for custom select dropdowns
+ */
+export default class SelectController extends Controller {
+  static targets: ["trigger", "content", "input", "item", "display", "checkIcon"];
+  static values: {
+    value: "String";
+  };
+
+  /** Select trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Select content/dropdown target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Hidden input target */
+  readonly inputTarget: HTMLInputElement;
+  readonly hasInputTarget: boolean;
+
+  /** Select option item targets */
+  readonly itemTargets: HTMLElement[];
+  readonly hasItemTarget: boolean;
+
+  /** Display element for selected value */
+  readonly displayTarget: HTMLElement;
+  readonly hasDisplayTarget: boolean;
+
+  /** Check icon targets */
+  readonly checkIconTargets: HTMLElement[];
+  readonly hasCheckIconTarget: boolean;
+
+  /** Currently selected value */
+  valueValue: string;
+  readonly hasValueValue: boolean;
+
+  /** Whether the select is currently open */
+  isOpen: boolean;
+
+  /** Currently focused item index */
+  focusedIndex: number;
+
+  /** Toggle select open/closed */
+  toggle(event?: Event): void;
+
+  /** Open the select dropdown */
+  open(): void;
+
+  /** Close the select dropdown */
+  close(): void;
+
+  /** Select an item */
+  select(event: Event): void;
+
+  /** Select by value programmatically */
+  selectByValue(value: string, dispatch?: boolean): void;
+
+  /** Handle clicks outside the select */
+  handleClickOutside(event: MouseEvent): void;
+
+  /** Handle keyboard navigation */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Focus next item */
+  focusNextItem(): void;
+
+  /** Focus previous item */
+  focusPreviousItem(): void;
+
+  /** Focus first item */
+  focusFirstItem(): void;
+
+  /** Focus last item */
+  focusLastItem(): void;
+
+  /** Select the currently focused item */
+  selectFocusedItem(): void;
+
+  /** Get enabled (non-disabled) items */
+  readonly enabledItems: HTMLElement[];
+}

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

@@ -0,0 +1,222 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Select controller for custom select dropdowns
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "item", "display", "checkIcon"]
+  static values = {
+    value: String
+  }
+
+  connect() {
+    this.isOpen = false
+    this.focusedIndex = -1
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+
+    // Set initial value display
+    if (this.valueValue) {
+      this.selectByValue(this.valueValue, false)
+    }
+  }
+
+  disconnect() {
+    this.close()
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    this.isOpen = true
+
+    // Set trigger width as CSS variable for dropdown sizing
+    if (this.hasTriggerTarget && this.hasContentTarget) {
+      const triggerWidth = this.triggerTarget.offsetWidth
+      this.contentTarget.style.setProperty('--radix-select-trigger-width', `${triggerWidth}px`)
+    }
+
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = false
+      this.contentTarget.dataset.state = "open"
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "true")
+    }
+
+    document.addEventListener("click", this.boundHandleClickOutside)
+
+    // Focus current value or first item
+    this.focusedIndex = -1
+    const currentItem = this.itemTargets.find(item => item.dataset.value === this.valueValue)
+    if (currentItem) {
+      this.focusedIndex = this.itemTargets.indexOf(currentItem)
+      currentItem.focus()
+    } else {
+      this.focusNextItem()
+    }
+
+    this.dispatch("opened")
+  }
+
+  close() {
+    if (!this.isOpen) return
+
+    this.isOpen = false
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      setTimeout(() => {
+        if (!this.isOpen) {
+          this.contentTarget.hidden = true
+        }
+      }, 150)
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false")
+    }
+
+    document.removeEventListener("click", this.boundHandleClickOutside)
+    this.focusedIndex = -1
+
+    this.dispatch("closed")
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    const value = item.dataset.value
+    this.selectByValue(value)
+    this.close()
+    this.triggerTarget?.focus()
+  }
+
+  selectByValue(value, dispatch = true) {
+    this.valueValue = value
+
+    // Update hidden input
+    if (this.hasInputTarget) {
+      this.inputTarget.value = value
+    }
+
+    // Update display
+    const selectedItem = this.itemTargets.find(item => item.dataset.value === value)
+    if (this.hasDisplayTarget && selectedItem) {
+      this.displayTarget.textContent = selectedItem.textContent.trim()
+    }
+
+    // Update aria-selected and check icons
+    this.itemTargets.forEach(item => {
+      const isSelected = item.dataset.value === value
+      item.setAttribute("aria-selected", isSelected.toString())
+
+      const checkIcon = item.querySelector('[data-shadcn--select-target="checkIcon"]')
+      if (checkIcon) {
+        checkIcon.style.opacity = isSelected ? "1" : "0"
+      }
+    })
+
+    if (dispatch) {
+      this.dispatch("change", { detail: { value } })
+    }
+  }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleKeydown(event) {
+    if (!this.isOpen) {
+      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+        event.preventDefault()
+        this.open()
+      }
+      return
+    }
+
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault()
+        this.close()
+        this.triggerTarget?.focus()
+        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)
+  }
+}