shadcn-rails 0.1.0

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

@@ -0,0 +1,282 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Date Picker controller
+ * Handles opening/closing the calendar popover and date selection
+ *
+ * API inspired by React DayPicker (https://daypicker.dev/)
+ *
+ * Disabled dates:
+ * - minDate/maxDate: Disable dates outside a range
+ * - disabledDates: Comma-separated list of YYYY-MM-DD dates
+ * - disabledDaysOfWeek: Comma-separated list of day numbers (0=Sun, 6=Sat)
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "grid", "monthYear", "day", "displayValue", "hiddenInput"]
+  static values = {
+    open: { type: Boolean, default: false },
+    month: String,
+    selected: String,
+    format: { type: String, default: "medium" },
+    placeholder: { type: String, default: "Pick a date" },
+    minDate: String,
+    maxDate: String,
+    disabledDates: String, // comma-separated YYYY-MM-DD
+    disabledDaysOfWeek: String, // comma-separated 0-6
+    showOutsideDays: { type: Boolean, default: true },
+    weekStartsOn: { type: Number, default: 0 } // 0 = Sunday, 1 = Monday, etc.
+  }
+
+  static MONTHS = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ]
+
+  connect() {
+    this.currentMonth = this.monthValue ? this.parseLocalDate(this.monthValue) : new Date()
+    this.selectedDate = this.selectedValue ? this.parseLocalDate(this.selectedValue) : null
+  }
+
+  /**
+   * Parse a date string (YYYY-MM-DD) as local date, not UTC
+   * This prevents timezone issues where "2024-11-26" becomes Nov 25 in western timezones
+   */
+  parseLocalDate(dateStr) {
+    if (!dateStr) return null
+    const [year, month, day] = dateStr.split('-').map(Number)
+    return new Date(year, month - 1, day)
+  }
+
+  /**
+   * Format a date as YYYY-MM-DD using local date components
+   */
+  formatDateString(date) {
+    if (!date) return ''
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+  }
+
+  /**
+   * Check if a date is disabled
+   */
+  isDateDisabled(date) {
+    const dateStr = this.formatDateString(date)
+
+    // Check min/max date
+    if (this.minDateValue) {
+      const minDate = this.parseLocalDate(this.minDateValue)
+      if (date < minDate) return true
+    }
+    if (this.maxDateValue) {
+      const maxDate = this.parseLocalDate(this.maxDateValue)
+      if (date > maxDate) return true
+    }
+
+    // Check disabled dates list
+    if (this.disabledDatesValue) {
+      const disabledDates = this.disabledDatesValue.split(",").map(d => d.trim())
+      if (disabledDates.includes(dateStr)) return true
+    }
+
+    // Check disabled days of week
+    if (this.disabledDaysOfWeekValue) {
+      const disabledDays = this.disabledDaysOfWeekValue.split(",").map(d => parseInt(d.trim(), 10))
+      if (disabledDays.includes(date.getDay())) return true
+    }
+
+    return false
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  open() {
+    this.openValue = true
+  }
+
+  close() {
+    this.openValue = false
+  }
+
+  openValueChanged() {
+    if (this.hasContentTarget) {
+      this.contentTarget.style.display = this.openValue ? "block" : "none"
+    }
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", this.openValue.toString())
+    }
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.openValue) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  previousMonth() {
+    this.currentMonth.setMonth(this.currentMonth.getMonth() - 1)
+    this.render()
+  }
+
+  nextMonth() {
+    this.currentMonth.setMonth(this.currentMonth.getMonth() + 1)
+    this.render()
+  }
+
+  selectDay(event) {
+    const dateStr = event.currentTarget.dataset.date
+    if (!dateStr) return
+
+    const date = this.parseLocalDate(dateStr)
+
+    // Check if disabled
+    if (this.isDateDisabled(date)) return
+
+    this.selectedDate = date
+    this.selectedValue = dateStr
+
+    // Update hidden input
+    if (this.hasHiddenInputTarget) {
+      this.hiddenInputTarget.value = dateStr
+    }
+
+    // Update display value
+    if (this.hasDisplayValueTarget) {
+      this.displayValueTarget.textContent = this.formatDate(this.selectedDate)
+      this.displayValueTarget.classList.remove("text-muted-foreground")
+    }
+
+    // Re-render calendar to update selection styling
+    this.render()
+
+    // Close the popover
+    this.close()
+
+    // Dispatch custom event
+    this.dispatch("select", {
+      detail: {
+        date: this.selectedDate,
+        dateString: dateStr
+      }
+    })
+  }
+
+  formatDate(date) {
+    switch (this.formatValue) {
+      case "short":
+        return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`
+      case "long":
+        return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })
+      case "iso":
+        // Use local date components to avoid timezone issues
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+      case "medium":
+      default:
+        return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+    }
+  }
+
+  render() {
+    // Update month/year label
+    if (this.hasMonthYearTarget) {
+      const monthName = this.constructor.MONTHS[this.currentMonth.getMonth()]
+      const year = this.currentMonth.getFullYear()
+      this.monthYearTarget.textContent = `${monthName} ${year}`
+    }
+
+    // Render days grid
+    if (this.hasGridTarget) {
+      this.gridTarget.innerHTML = this.renderDays()
+    }
+  }
+
+  renderDays() {
+    const year = this.currentMonth.getFullYear()
+    const month = this.currentMonth.getMonth()
+
+    // Get first and last day of month
+    const firstDay = new Date(year, month, 1)
+    const lastDay = new Date(year, month + 1, 0)
+
+    // Get start date based on weekStartsOn
+    const startDate = new Date(firstDay)
+    const dayOffset = (firstDay.getDay() - this.weekStartsOnValue + 7) % 7
+    startDate.setDate(firstDay.getDate() - dayOffset)
+
+    // Get end date (complete the last week)
+    const endDate = new Date(lastDay)
+    const endDayOffset = (6 - lastDay.getDay() + this.weekStartsOnValue) % 7
+    endDate.setDate(lastDay.getDate() + endDayOffset)
+
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    let html = ""
+    const currentDate = new Date(startDate)
+
+    while (currentDate <= endDate) {
+      const isOutside = currentDate.getMonth() !== month
+      const isToday = currentDate.getTime() === today.getTime()
+      const isSelected = this.selectedDate &&
+        currentDate.toDateString() === this.selectedDate.toDateString()
+      const isDisabled = this.isDateDisabled(currentDate)
+
+      // Use local date components to avoid timezone issues with toISOString()
+      const dateStr = this.formatDateString(currentDate)
+
+      // Skip outside days if showOutsideDays is false
+      if (isOutside && !this.showOutsideDaysValue) {
+        html += '<div class="h-8 w-8"></div>'
+        currentDate.setDate(currentDate.getDate() + 1)
+        continue
+      }
+
+      let classes = "h-8 w-8 text-center text-sm p-0 relative flex items-center justify-center rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+
+      if (isDisabled) {
+        classes += " text-muted-foreground opacity-50 cursor-not-allowed"
+      } else if (isSelected) {
+        classes += " bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground cursor-pointer"
+      } else if (isToday) {
+        classes += " bg-accent text-accent-foreground cursor-pointer hover:bg-accent hover:text-accent-foreground"
+      } else {
+        classes += " cursor-pointer hover:bg-accent hover:text-accent-foreground"
+      }
+
+      if (isOutside && !isDisabled) {
+        classes += " text-muted-foreground opacity-50"
+      }
+
+      const ariaAttrs = []
+      if (isSelected) ariaAttrs.push('aria-selected="true"')
+      if (isDisabled) {
+        ariaAttrs.push('aria-disabled="true"')
+        ariaAttrs.push('disabled')
+      }
+
+      // Only add click action for non-disabled days
+      const dataAction = isDisabled
+        ? ''
+        : 'data-action="click->shadcn--date-picker#selectDay"'
+
+      html += `<button type="button" class="${classes}" data-date="${dateStr}" data-shadcn--date-picker-target="day" ${dataAction} ${ariaAttrs.join(" ")}>${currentDate.getDate()}</button>`
+
+      currentDate.setDate(currentDate.getDate() + 1)
+    }
+
+    return html
+  }
+
+  monthValueChanged() {
+    if (this.monthValue) {
+      this.currentMonth = this.parseLocalDate(this.monthValue)
+    }
+  }
+
+  selectedValueChanged() {
+    if (this.selectedValue) {
+      this.selectedDate = this.parseLocalDate(this.selectedValue)
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Dialog controller for modal dialogs
+ * Handles opening, closing, focus trapping, and keyboard navigation
+ */
+export default class DialogController extends Controller {
+  static targets: ["trigger", "template", "overlay", "content"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    modal: { type: "Boolean"; default: true };
+  };
+
+  /** Dialog trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Template containing dialog content */
+  readonly templateTarget: HTMLTemplateElement;
+  readonly hasTemplateTarget: boolean;
+
+  /** Dialog overlay target */
+  readonly overlayTarget: HTMLElement;
+  readonly hasOverlayTarget: boolean;
+
+  /** Dialog content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Whether the dialog is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Whether the dialog is modal (traps focus, prevents body scroll) */
+  modalValue: boolean;
+  readonly hasModalValue: boolean;
+
+  /** Portal element (created dynamically) */
+  portal: HTMLDivElement | null;
+
+  /** Previously focused element */
+  previousActiveElement: Element | null;
+
+  /** Open the dialog */
+  open(): void;
+
+  /** Close the dialog */
+  close(): void;
+
+  /** Toggle dialog open/closed */
+  toggle(): void;
+
+  /** Handle keydown events (Escape to close, Tab for focus trapping) */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Handle clicks outside the dialog content */
+  handleClickOutside(event: MouseEvent): void;
+
+  /** Focus the first focusable element in the dialog */
+  focusFirstElement(): void;
+
+  /** Trap focus within the dialog */
+  trapFocus(event: KeyboardEvent): void;
+
+  /** Called when openValue changes */
+  openValueChanged(): void;
+}

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

@@ -0,0 +1,187 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Dialog controller for modal dialogs
+ * Handles opening, closing, focus trapping, and keyboard navigation
+ */
+export default class extends Controller {
+  static targets = ["trigger", "template", "overlay", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    modal: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.portal = null
+    this.previousActiveElement = null
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.boundHandleClickOutside = this.handleClickOutside.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-dialog-portal"
+      this.portal.innerHTML = this.templateTarget.innerHTML
+      document.body.appendChild(this.portal)
+
+      // Re-query targets from portal
+      this.portalOverlay = this.portal.querySelector('[data-shadcn--dialog-target="overlay"]')
+      this.portalContent = this.portal.querySelector('[data-shadcn--dialog-target="content"]')
+
+      // Wire up close actions on portal elements (since they're outside controller scope)
+      this.portal.querySelectorAll('[data-action*="shadcn--dialog#close"]').forEach(el => {
+        el.addEventListener("click", (e) => {
+          e.preventDefault()
+          this.close()
+        })
+      })
+
+      // Also handle overlay click
+      if (this.portalOverlay) {
+        this.portalOverlay.addEventListener("click", () => this.close())
+      }
+    }
+
+    // Show overlay and content
+    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")
+      }
+
+      // Setup event listeners
+      document.addEventListener("keydown", this.boundHandleKeydown)
+
+      // Focus first focusable element
+      this.focusFirstElement()
+
+      // Prevent body scroll
+      if (this.modalValue) {
+        document.body.style.overflow = "hidden"
+      }
+    })
+
+    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"
+    }
+
+    // Remove event listeners
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
+    // Restore body scroll
+    document.body.style.overflow = ""
+
+    // Return focus
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus()
+    }
+
+    // Remove portal after animation
+    setTimeout(() => {
+      if (this.portal) {
+        this.portal.remove()
+        this.portal = null
+      }
+    }, 200)
+
+    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.modalValue) {
+      this.trapFocus(event)
+    }
+  }
+
+  handleClickOutside(event) {
+    if (this.portalContent && !this.portalContent.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  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()
+      }
+    }
+  }
+
+  openValueChanged() {
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Drawer Controller
+ * Handles opening/closing drawer panels
+ */
+export default class DrawerController extends Controller {
+  static targets: ["trigger", "template", "overlay", "content"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    direction: { type: "String"; default: "bottom" };
+  };
+
+  /** Drawer trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Template containing drawer content */
+  readonly templateTarget: HTMLTemplateElement;
+  readonly hasTemplateTarget: boolean;
+
+  /** Drawer overlay target */
+  readonly overlayTarget: HTMLElement;
+  readonly hasOverlayTarget: boolean;
+
+  /** Drawer content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Whether the drawer is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Direction the drawer slides from: "top", "right", "bottom", "left" */
+  directionValue: "top" | "right" | "bottom" | "left";
+  readonly hasDirectionValue: boolean;
+
+  /** Portal element (created dynamically) */
+  portal: HTMLDivElement | null;
+
+  /** Open the drawer */
+  open(): void;
+
+  /** Close the drawer */
+  close(): void;
+
+  /** Toggle drawer open/closed */
+  toggle(): void;
+
+  /** Handle keydown events (Escape to close) */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Remove the portal from the DOM */
+  removePortal(): void;
+
+  /** Called when openValue changes */
+  openValueChanged(): void;
+}

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

@@ -0,0 +1,112 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Drawer Controller
+ * Handles opening/closing drawer panels with swipe support
+ */
+export default class extends Controller {
+  static targets = ["trigger", "template", "overlay", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    direction: { type: String, default: "bottom" }
+  }
+
+  connect() {
+    this.portal = null
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    this.removePortal()
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  open() {
+    if (!this.hasTemplateTarget) return
+
+    // Create portal at body level
+    this.portal = document.createElement("div")
+    this.portal.innerHTML = this.templateTarget.innerHTML
+    document.body.appendChild(this.portal)
+
+    // Get references to portal elements
+    const overlay = this.portal.querySelector("[data-shadcn--drawer-target='overlay']")
+    const content = this.portal.querySelector("[data-shadcn--drawer-target='content']")
+
+    // Add click handler to overlay
+    if (overlay) {
+      overlay.addEventListener("click", () => this.close())
+    }
+
+    // Set open state
+    requestAnimationFrame(() => {
+      if (overlay) overlay.setAttribute("data-state", "open")
+      if (content) {
+        content.setAttribute("data-state", "open")
+        content.focus()
+      }
+    })
+
+    // Prevent body scroll
+    document.body.style.overflow = "hidden"
+    document.addEventListener("keydown", this.boundHandleKeydown)
+
+    this.openValue = true
+    this.dispatch("open")
+  }
+
+  close() {
+    if (!this.portal) return
+
+    const overlay = this.portal.querySelector("[data-shadcn--drawer-target='overlay']")
+    const content = this.portal.querySelector("[data-shadcn--drawer-target='content']")
+
+    // Set closing state
+    if (overlay) overlay.setAttribute("data-state", "closed")
+    if (content) content.setAttribute("data-state", "closed")
+
+    // Wait for animation then remove portal
+    setTimeout(() => {
+      this.removePortal()
+    }, 200)
+
+    document.body.style.overflow = ""
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
+    this.openValue = false
+    this.dispatch("close")
+  }
+
+  toggle() {
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  removePortal() {
+    if (this.portal) {
+      this.portal.remove()
+      this.portal = null
+    }
+  }
+
+  openValueChanged() {
+    if (this.openValue && !this.portal) {
+      this.open()
+    } else if (!this.openValue && this.portal) {
+      this.close()
+    }
+  }
+}