shadcn-rails 0.1.0

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

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Sheet controller for slide-out panels
+ */
+export default class SheetController extends Controller {
+  static targets: ["trigger", "template", "overlay", "content"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    side: { type: "String"; default: "right" };
+  };
+
+  /** Sheet trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Template containing sheet content */
+  readonly templateTarget: HTMLTemplateElement;
+  readonly hasTemplateTarget: boolean;
+
+  /** Sheet overlay target */
+  readonly overlayTarget: HTMLElement;
+  readonly hasOverlayTarget: boolean;
+
+  /** Sheet content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Whether the sheet is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Side to display: "top", "right", "bottom", "left" */
+  sideValue: "top" | "right" | "bottom" | "left";
+  readonly hasSideValue: boolean;
+
+  /** Portal element (created dynamically) */
+  portal: HTMLDivElement | null;
+
+  /** Previously focused element */
+  previousActiveElement: Element | null;
+
+  /** Open the sheet */
+  open(): void;
+
+  /** Close the sheet */
+  close(): void;
+
+  /** Toggle sheet open/closed */
+  toggle(): void;
+
+  /** Handle keydown events (Escape to close, Tab for focus trapping) */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Focus the first focusable element in the sheet */
+  focusFirstElement(): void;
+
+  /** Trap focus within the sheet */
+  trapFocus(event: KeyboardEvent): void;
+}

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

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Sheet controller for slide-out panels
+ */
+export default class extends Controller {
+  static targets = ["trigger", "template", "overlay", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    side: { type: String, default: "right" }
+  }
+
+  connect() {
+    this.portal = null
+    this.previousActiveElement = null
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    this.close()
+    if (this.portal) {
+      this.portal.remove()
+    }
+  }
+
+  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-sheet-portal"
+      this.portal.innerHTML = this.templateTarget.innerHTML
+      document.body.appendChild(this.portal)
+
+      this.portalOverlay = this.portal.querySelector('[data-shadcn--sheet-target="overlay"]')
+      this.portalContent = this.portal.querySelector('[data-shadcn--sheet-target="content"]')
+
+      // Re-attach event listeners for close buttons
+      const closeButtons = this.portal.querySelectorAll('[data-action*="shadcn--sheet#close"]')
+      closeButtons.forEach(btn => {
+        btn.addEventListener("click", () => this.close())
+      })
+    }
+
+    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")
+      }
+
+      document.addEventListener("keydown", this.boundHandleKeydown)
+      document.body.style.overflow = "hidden"
+
+      this.focusFirstElement()
+    })
+
+    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"
+    }
+
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+    document.body.style.overflow = ""
+
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus()
+    }
+
+    setTimeout(() => {
+      if (this.portal) {
+        this.portal.remove()
+        this.portal = null
+      }
+    }, 300)
+
+    this.dispatch("closed")
+  }
+
+  toggle() {
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+    } else if (event.key === "Tab") {
+      this.trapFocus(event)
+    }
+  }
+
+  focusFirstElement() {
+    if (!this.portalContent) return
+
+    const focusable = this.portalContent.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      this.portalContent.focus()
+    }
+  }
+
+  trapFocus(event) {
+    if (!this.portalContent) return
+
+    const focusable = this.portalContent.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstFocusable = focusable[0]
+    const lastFocusable = focusable[focusable.length - 1]
+
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        lastFocusable.focus()
+        event.preventDefault()
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        firstFocusable.focus()
+        event.preventDefault()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,148 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Constants for sidebar dimensions
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+
+export default class extends Controller {
+  static targets = ["sidebar"]
+  static values = {
+    open: { type: Boolean, default: true },
+    openMobile: { type: Boolean, default: false },
+    keyboardShortcut: { type: String, default: "b" }
+  }
+
+  connect() {
+    // Set initial state from cookie if available
+    const savedState = this.getCookie(SIDEBAR_COOKIE_NAME)
+    if (savedState !== null) {
+      this.openValue = savedState === "true"
+    }
+
+    // Set up keyboard shortcut
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    document.addEventListener("keydown", this.handleKeyDown)
+
+    // Set up mobile detection
+    this.isMobile = window.innerWidth < 768
+    this.handleResize = this.handleResize.bind(this)
+    window.addEventListener("resize", this.handleResize)
+
+    // Initial state sync
+    this.syncState()
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeyDown)
+    window.removeEventListener("resize", this.handleResize)
+  }
+
+  handleKeyDown(event) {
+    // Check for Cmd/Ctrl + keyboard shortcut
+    if (
+      (event.metaKey || event.ctrlKey) &&
+      event.key.toLowerCase() === this.keyboardShortcutValue.toLowerCase()
+    ) {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
+  handleResize() {
+    const wasMobile = this.isMobile
+    this.isMobile = window.innerWidth < 768
+
+    // Close mobile sidebar when switching to desktop
+    if (wasMobile && !this.isMobile) {
+      this.openMobileValue = false
+    }
+  }
+
+  toggle() {
+    if (this.isMobile) {
+      this.openMobileValue = !this.openMobileValue
+    } else {
+      this.openValue = !this.openValue
+    }
+  }
+
+  setOpen(open) {
+    if (this.isMobile) {
+      this.openMobileValue = open
+    } else {
+      this.openValue = open
+    }
+  }
+
+  openValueChanged() {
+    this.syncState()
+    // Save to cookie
+    this.setCookie(SIDEBAR_COOKIE_NAME, String(this.openValue), SIDEBAR_COOKIE_MAX_AGE)
+  }
+
+  openMobileValueChanged() {
+    this.syncState()
+  }
+
+  syncState() {
+    const state = this.isMobile ? (this.openMobileValue ? "expanded" : "collapsed") : (this.openValue ? "expanded" : "collapsed")
+
+    // Update data attributes on the provider element
+    this.element.dataset.state = state
+    this.element.dataset.mobile = this.isMobile
+
+    // Update sidebar targets if they exist
+    if (this.hasSidebarTarget) {
+      this.sidebarTargets.forEach(sidebar => {
+        sidebar.dataset.state = state
+        sidebar.dataset.mobile = this.isMobile
+      })
+    }
+
+    // Dispatch custom event for other components to listen to
+    this.element.dispatchEvent(new CustomEvent("sidebar:state-change", {
+      bubbles: true,
+      detail: {
+        open: this.isMobile ? this.openMobileValue : this.openValue,
+        isMobile: this.isMobile,
+        state: state
+      }
+    }))
+  }
+
+  // Cookie helpers
+  getCookie(name) {
+    const value = `; ${document.cookie}`
+    const parts = value.split(`; ${name}=`)
+    if (parts.length === 2) {
+      return parts.pop().split(";").shift()
+    }
+    return null
+  }
+
+  setCookie(name, value, maxAge) {
+    document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax`
+  }
+
+  // Actions for external triggers
+  open() {
+    this.setOpen(true)
+  }
+
+  close() {
+    this.setOpen(false)
+  }
+
+  // Handle clicking outside on mobile to close
+  clickOutside(event) {
+    if (this.isMobile && this.openMobileValue) {
+      const sidebar = this.sidebarTargets[0]
+      if (sidebar && !sidebar.contains(event.target)) {
+        this.openMobileValue = false
+      }
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Slider Controller
+ * Handles slider value selection with drag and keyboard support
+ */
+export default class SliderController extends Controller {
+  static targets: ["track", "range", "thumb", "input", "output"];
+  static values: {
+    min: { type: "Number"; default: 0 };
+    max: { type: "Number"; default: 100 };
+    step: { type: "Number"; default: 1 };
+    value: { type: "Number"; default: 0 };
+    name: "String";
+    disabled: { type: "Boolean"; default: false };
+    outputFormat: { type: "String"; default: "{value}" };
+  };
+
+  /** Slider track target */
+  readonly trackTarget: HTMLElement;
+  readonly hasTrackTarget: boolean;
+
+  /** Filled range target */
+  readonly rangeTarget: HTMLElement;
+  readonly hasRangeTarget: boolean;
+
+  /** Draggable thumb target */
+  readonly thumbTarget: HTMLElement;
+  readonly hasThumbTarget: boolean;
+
+  /** Hidden input target */
+  readonly inputTarget: HTMLInputElement;
+  readonly hasInputTarget: boolean;
+
+  /** Output display target */
+  readonly outputTarget: HTMLElement;
+  readonly hasOutputTarget: boolean;
+
+  /** Minimum value */
+  minValue: number;
+  readonly hasMinValue: boolean;
+
+  /** Maximum value */
+  maxValue: number;
+  readonly hasMaxValue: boolean;
+
+  /** Step increment */
+  stepValue: number;
+  readonly hasStepValue: boolean;
+
+  /** Current value */
+  valueValue: number;
+  readonly hasValueValue: boolean;
+
+  /** Input name for form submission */
+  nameValue: string;
+  readonly hasNameValue: boolean;
+
+  /** Whether slider is disabled */
+  disabledValue: boolean;
+  readonly hasDisabledValue: boolean;
+
+  /** Format string for output (use {value} for value, {percent} for percentage) */
+  outputFormatValue: string;
+  readonly hasOutputFormatValue: boolean;
+
+  /** Whether currently dragging */
+  isDragging: boolean;
+
+  /** Start drag operation */
+  startDrag(event: MouseEvent | TouchEvent): void;
+
+  /** Handle drag movement */
+  handleDrag(event: MouseEvent | TouchEvent): void;
+
+  /** Stop drag operation */
+  stopDrag(): void;
+
+  /** Handle keyboard navigation */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Snap value to step */
+  snapToStep(value: number): number;
+
+  /** Update visual elements */
+  updateVisuals(): void;
+
+  /** Update output element */
+  updateOutput(): void;
+
+  /** Dispatch change event */
+  dispatchChange(): void;
+
+  /** Get current percentage */
+  readonly percentage: number;
+
+  /** Called when valueValue changes */
+  valueValueChanged(): void;
+
+  /** Update style for native input range element */
+  updateStyle(event: Event): void;
+}