shadcn-rails 0.1.0

data/__tests__/helpers/stimulus-test-helper.js

@@ -0,0 +1,203 @@
+import { Application } from "@hotwired/stimulus"
+
+/**
+ * Helper to set up Stimulus controller tests
+ * Creates a DOM element with the controller connected
+ */
+export function setupController(Controller, html, controllerName = 'test') {
+  const application = Application.start()
+  application.register(controllerName, Controller)
+
+  document.body.innerHTML = html
+
+  // Wait for Stimulus to connect the controller
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      const element = document.querySelector(`[data-controller="${controllerName}"]`)
+      const controller = application.getControllerForElementAndIdentifier(element, controllerName)
+      resolve({ application, element, controller })
+    })
+  })
+}
+
+/**
+ * Clean up after tests
+ */
+export function cleanupController(application) {
+  if (application) {
+    application.stop()
+  }
+  document.body.innerHTML = ''
+}
+
+/**
+ * Simulate a click event on an element
+ */
+export function click(element) {
+  element.dispatchEvent(new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  }))
+}
+
+/**
+ * Wait for a specified number of milliseconds
+ */
+export function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * Wait for an animation frame
+ */
+export function nextFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve))
+}
+
+/**
+ * Simulate a keyboard event on an element
+ * @param {Element} element - Target element
+ * @param {string} key - Key name (e.g., 'ArrowDown', 'Enter', 'Escape')
+ * @param {Object} options - Additional options (shiftKey, ctrlKey, etc.)
+ */
+export function keydown(element, key, options = {}) {
+  element.dispatchEvent(new KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true,
+    ...options
+  }))
+}
+
+/**
+ * Simulate a keyup event
+ */
+export function keyup(element, key, options = {}) {
+  element.dispatchEvent(new KeyboardEvent('keyup', {
+    key,
+    bubbles: true,
+    cancelable: true,
+    ...options
+  }))
+}
+
+/**
+ * Wait for a portal element to appear in the DOM
+ * @param {string} selector - CSS selector for the portal
+ * @param {boolean} shouldExist - Whether portal should exist (true) or not exist (false)
+ * @param {number} timeout - Maximum wait time in ms
+ */
+export async function waitForPortal(selector, shouldExist = true, timeout = 1000) {
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < timeout) {
+    const element = document.querySelector(selector)
+    if (shouldExist && element) return element
+    if (!shouldExist && !element) return null
+    await wait(10)
+  }
+
+  throw new Error(`Portal ${selector} ${shouldExist ? 'did not appear' : 'did not disappear'} within ${timeout}ms`)
+}
+
+/**
+ * Mock window.location for URL-related tests
+ * Uses jsdom's internal reconfigure or modifies location properties
+ * @param {string} url - The URL to mock
+ * @returns {Function} Cleanup function to restore original location
+ */
+export function mockLocation(url) {
+  // Store original href
+  const originalHref = window.location.href
+
+  // Use jsdom's reconfigure if available (available in newer jsdom)
+  if (typeof window._virtualConsole !== 'undefined' && window.location._setHref) {
+    window.location._setHref(url)
+    return () => {
+      if (window.location._setHref) {
+        window.location._setHref(originalHref)
+      }
+    }
+  }
+
+  // Fallback: Use history API to change URL without navigation
+  const urlObj = new URL(url, window.location.origin)
+  window.history.replaceState({}, '', urlObj.href)
+
+  return () => {
+    window.history.replaceState({}, '', originalHref)
+  }
+}
+
+/**
+ * Mock history.pushState and replaceState for URL sync tests
+ */
+export function mockHistory() {
+  const originalPushState = window.history.pushState
+  const originalReplaceState = window.history.replaceState
+
+  const calls = {
+    pushState: [],
+    replaceState: []
+  }
+
+  window.history.pushState = (state, title, url) => {
+    calls.pushState.push({ state, title, url })
+  }
+
+  window.history.replaceState = (state, title, url) => {
+    calls.replaceState.push({ state, title, url })
+  }
+
+  return {
+    calls,
+    restore: () => {
+      window.history.pushState = originalPushState
+      window.history.replaceState = originalReplaceState
+    }
+  }
+}
+
+/**
+ * Get all focusable elements within a container
+ * @param {Element} container - Container element
+ */
+export function getFocusableElements(container) {
+  return container.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  )
+}
+
+/**
+ * Dispatch a custom event
+ * @param {Element} element - Target element
+ * @param {string} eventName - Event name
+ * @param {Object} detail - Event detail object
+ */
+export function dispatchEvent(element, eventName, detail = {}) {
+  element.dispatchEvent(new CustomEvent(eventName, {
+    bubbles: true,
+    cancelable: true,
+    detail
+  }))
+}
+
+/**
+ * Wait for controller to emit a specific event
+ * @param {Element} element - Element to listen on
+ * @param {string} eventName - Event name (e.g., 'shadcn--accordion:expand')
+ * @param {number} timeout - Maximum wait time
+ */
+export function waitForEvent(element, eventName, timeout = 1000) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error(`Event ${eventName} not received within ${timeout}ms`))
+    }, timeout)
+
+    element.addEventListener(eventName, (event) => {
+      clearTimeout(timer)
+      resolve(event)
+    }, { once: true })
+  })
+}

data/app/assets/config/manifest.js

@@ -0,0 +1 @@
+//= link_tree ../stylesheets .css

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

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Accordion controller for collapsible sections
+ * Supports single and multiple expansion modes
+ */
+export default class AccordionController extends Controller {
+  static targets: ["item", "trigger", "content"];
+  static values: {
+    type: { type: "String"; default: "single" };
+    collapsible: { type: "Boolean"; default: false };
+    default: { type: "String"; default: "" };
+  };
+
+  /** Accordion item targets */
+  readonly itemTargets: HTMLElement[];
+  readonly hasItemTarget: boolean;
+
+  /** Accordion trigger targets */
+  readonly triggerTargets: HTMLElement[];
+  readonly hasTriggerTarget: boolean;
+
+  /** Accordion content targets */
+  readonly contentTargets: HTMLElement[];
+  readonly hasContentTarget: boolean;
+
+  /** Expansion type: "single" or "multiple" */
+  typeValue: "single" | "multiple";
+  readonly hasTypeValue: boolean;
+
+  /** Whether single items can be collapsed */
+  collapsibleValue: boolean;
+  readonly hasCollapsibleValue: boolean;
+
+  /** Default expanded items (comma-separated values for multiple) */
+  defaultValue: string;
+  readonly hasDefaultValue: boolean;
+
+  /** Toggle an accordion item open/closed */
+  toggle(event: Event): void;
+
+  /** Expand a specific item */
+  expandItem(item: HTMLElement): void;
+
+  /** Collapse a specific item */
+  collapseItem(item: HTMLElement): void;
+
+  /** Find an item by its value */
+  findItemByValue(value: string): HTMLElement | undefined;
+
+  /** Handle keyboard navigation */
+  handleKeydown(event: KeyboardEvent): void;
+}

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

@@ -0,0 +1,140 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Accordion controller for collapsible sections
+ * Supports single and multiple expansion modes
+ */
+export default class extends Controller {
+  static targets = ["item", "trigger", "content"]
+  static values = {
+    type: { type: String, default: "single" }, // "single" or "multiple"
+    collapsible: { type: Boolean, default: false },
+    default: { type: String, default: "" } // comma-separated values for multiple
+  }
+
+  connect() {
+    // Expand default items
+    if (this.defaultValue) {
+      const defaultValues = this.defaultValue.split(",").map(v => v.trim())
+      defaultValues.forEach(value => {
+        const item = this.findItemByValue(value)
+        if (item) {
+          this.expandItem(item)
+        }
+      })
+    }
+  }
+
+  toggle(event) {
+    const trigger = event.currentTarget
+    const item = trigger.closest('[data-shadcn--accordion-target="item"]')
+
+    if (!item) return
+
+    const isOpen = item.dataset.state === "open"
+
+    if (isOpen) {
+      if (this.collapsibleValue || this.typeValue === "multiple") {
+        this.collapseItem(item)
+      }
+    } else {
+      if (this.typeValue === "single") {
+        // Collapse all other items first
+        this.itemTargets.forEach(otherItem => {
+          if (otherItem !== item && otherItem.dataset.state === "open") {
+            this.collapseItem(otherItem)
+          }
+        })
+      }
+      this.expandItem(item)
+    }
+  }
+
+  expandItem(item) {
+    const trigger = item.querySelector('[data-shadcn--accordion-target="trigger"]')
+    const content = item.querySelector('[data-shadcn--accordion-target="content"]')
+
+    if (!trigger || !content) return
+
+    item.dataset.state = "open"
+    trigger.dataset.state = "open"
+    trigger.setAttribute("aria-expanded", "true")
+    content.dataset.state = "open"
+    content.hidden = false
+
+    // Animate height
+    const height = content.scrollHeight
+    content.style.height = "0px"
+    requestAnimationFrame(() => {
+      content.style.height = `${height}px`
+      // Remove fixed height after animation
+      setTimeout(() => {
+        content.style.height = ""
+      }, 200)
+    })
+
+    this.dispatch("expand", { detail: { value: item.dataset.value } })
+  }
+
+  collapseItem(item) {
+    const trigger = item.querySelector('[data-shadcn--accordion-target="trigger"]')
+    const content = item.querySelector('[data-shadcn--accordion-target="content"]')
+
+    if (!trigger || !content) return
+
+    // Set current height for animation
+    content.style.height = `${content.scrollHeight}px`
+
+    requestAnimationFrame(() => {
+      item.dataset.state = "closed"
+      trigger.dataset.state = "closed"
+      trigger.setAttribute("aria-expanded", "false")
+      content.dataset.state = "closed"
+      content.style.height = "0px"
+
+      setTimeout(() => {
+        content.hidden = true
+        content.style.height = ""
+      }, 200)
+    })
+
+    this.dispatch("collapse", { detail: { value: item.dataset.value } })
+  }
+
+  findItemByValue(value) {
+    return this.itemTargets.find(item => item.dataset.value === value)
+  }
+
+  // Keyboard navigation
+  handleKeydown(event) {
+    const triggers = this.triggerTargets
+    const currentIndex = triggers.findIndex(t => t === document.activeElement)
+
+    if (currentIndex === -1) return
+
+    let newIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault()
+        newIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        newIndex = currentIndex === triggers.length - 1 ? 0 : currentIndex + 1
+        break
+      case "Home":
+        event.preventDefault()
+        newIndex = 0
+        break
+      case "End":
+        event.preventDefault()
+        newIndex = triggers.length - 1
+        break
+      default:
+        return
+    }
+
+    triggers[newIndex].focus()
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Avatar controller for handling image load errors
+ */
+export default class AvatarController extends Controller {
+  static targets: ["image", "fallback"];
+
+  /** Avatar image target */
+  readonly imageTarget: HTMLImageElement;
+  readonly hasImageTarget: boolean;
+
+  /** Fallback content target */
+  readonly fallbackTarget: HTMLElement;
+  readonly hasFallbackTarget: boolean;
+
+  /** Handle image load error - shows fallback */
+  handleError(): void;
+
+  /** Handle successful image load - shows image */
+  handleLoad(): void;
+}

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

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Avatar controller for handling image load errors
+ */
+export default class extends Controller {
+  static targets = ["image", "fallback"]
+
+  handleError() {
+    if (this.hasImageTarget) {
+      this.imageTarget.hidden = true
+    }
+    if (this.hasFallbackTarget) {
+      this.fallbackTarget.classList.remove("hidden")
+    }
+  }
+
+  handleLoad() {
+    if (this.hasImageTarget) {
+      this.imageTarget.hidden = false
+    }
+    if (this.hasFallbackTarget) {
+      this.fallbackTarget.classList.add("hidden")
+    }
+  }
+}