maquina-components 0.3.0 → 0.3.1

data/app/javascript/controllers/calendar_controller.js

@@ -0,0 +1,394 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["day", "input", "inputEnd", "prevButton", "nextButton", "grid", "caption"]
+
+  static values = {
+    month: Number,
+    year: Number,
+    selected: String,
+    selectedEnd: String,
+    minDate: String,
+    maxDate: String,
+    mode: { type: String, default: "single" },
+    weekStartsOn: { type: String, default: "sunday" }
+  }
+
+  connect() {
+    this.updateNavigationState()
+    this.updateDayStates()
+  }
+
+  previousMonth() {
+    let newMonth = this.monthValue - 1
+    let newYear = this.yearValue
+
+    if (newMonth < 1) {
+      newMonth = 12
+      newYear -= 1
+    }
+
+    this.navigateToMonth(newMonth, newYear)
+  }
+
+  nextMonth() {
+    let newMonth = this.monthValue + 1
+    let newYear = this.yearValue
+
+    if (newMonth > 12) {
+      newMonth = 1
+      newYear += 1
+    }
+
+    this.navigateToMonth(newMonth, newYear)
+  }
+
+  navigateToMonth(month, year) {
+    this.monthValue = month
+    this.yearValue = year
+
+    this.rebuildCalendar()
+    this.updateNavigationState()
+
+    this.dispatch("navigate", {
+      detail: {
+        month,
+        year,
+        selected: this.selectedValue,
+        selectedEnd: this.selectedEndValue
+      }
+    })
+  }
+
+  rebuildCalendar() {
+    const grid = this.element.querySelector("[data-calendar-part='grid']")
+    const caption = this.element.querySelector("[data-calendar-part='caption']")
+    if (!grid) return
+
+    const year = this.yearValue
+    const month = this.monthValue
+    const firstOfMonth = new Date(year, month - 1, 1)
+    const lastOfMonth = new Date(year, month, 0)
+
+    // Update caption
+    if (caption) {
+      caption.textContent = firstOfMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+    }
+
+    // Calculate start of calendar grid
+    const weekStart = this.weekStartsOnValue === "monday" ? 1 : 0
+    const daysBefore = (firstOfMonth.getDay() - weekStart + 7) % 7
+    const calendarStart = new Date(firstOfMonth)
+    calendarStart.setDate(calendarStart.getDate() - daysBefore)
+
+    // Calculate weeks needed
+    const totalDays = daysBefore + lastOfMonth.getDate()
+    const weeksNeeded = Math.min(Math.ceil(totalDays / 7), 6)
+
+    // Build weeks
+    const weeks = []
+    const currentDate = new Date(calendarStart)
+    for (let w = 0; w < weeksNeeded; w++) {
+      const week = []
+      for (let d = 0; d < 7; d++) {
+        week.push(new Date(currentDate))
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+      weeks.push(week)
+    }
+
+    // Parse dates for comparison
+    const selectedDate = this.selectedValue ? new Date(this.selectedValue) : null
+    const selectedEndDate = this.selectedEndValue ? new Date(this.selectedEndValue) : null
+    const minDate = this.minDateValue ? new Date(this.minDateValue) : null
+    const maxDate = this.maxDateValue ? new Date(this.maxDateValue) : null
+
+    // Rebuild grid HTML
+    grid.innerHTML = weeks.map(week => this.buildWeekHTML(week, month, selectedDate, selectedEndDate, minDate, maxDate)).join('')
+  }
+
+  buildWeekHTML(days, displayMonth, selectedDate, selectedEndDate, minDate, maxDate) {
+    // Use string comparisons for range to avoid timezone issues
+    const selectedStr = this.selectedValue || ""
+    const selectedEndStr = this.selectedEndValue || ""
+
+    const daysHTML = days.map(day => {
+      const dateStr = this.formatDate(day)
+      const isOutside = day.getMonth() + 1 !== displayMonth
+      const isToday = this.isSameDate(day, new Date())
+      const isSelected = selectedStr && dateStr === selectedStr
+      const isRangeEnd = selectedEndStr && dateStr === selectedEndStr
+      // ISO date strings are lexicographically sortable
+      const isRangeMiddle = selectedStr && selectedEndStr && dateStr > selectedStr && dateStr < selectedEndStr
+      const isDisabled = (minDate && day < minDate) || (maxDate && day > maxDate)
+
+      let dayState = null
+      if (isSelected && this.modeValue === "range" && selectedEndStr) {
+        dayState = "range-start"
+      } else if (isRangeEnd) {
+        dayState = "range-end"
+      } else if (isRangeMiddle) {
+        dayState = "range-middle"
+      } else if (isSelected) {
+        dayState = "selected"
+      }
+
+      const attrs = [
+        'type="button"',
+        'data-calendar-part="day"',
+        'data-calendar-target="day"',
+        `data-date="${dateStr}"`,
+        `data-action="click->calendar#selectDay keydown->calendar#handleKeydown"`,
+        `tabindex="${isToday ? '0' : '-1'}"`,
+      ]
+
+      if (dayState) {
+        attrs.push(`data-state="${dayState}"`)
+        attrs.push('aria-selected="true"')
+      }
+      if (isOutside) attrs.push('data-outside')
+      if (isToday) attrs.push('data-today aria-current="date"')
+      if (isDisabled) attrs.push('disabled')
+
+      return `<button ${attrs.join(' ')}>${day.getDate()}</button>`
+    }).join('')
+
+    return `<div data-calendar-part="week" role="row">${daysHTML}</div>`
+  }
+
+  isSameDate(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+           date1.getMonth() === date2.getMonth() &&
+           date1.getDate() === date2.getDate()
+  }
+
+  selectDay(event) {
+    const button = event.currentTarget
+    if (button.disabled) return
+
+    const dateStr = button.dataset.date
+
+    if (this.modeValue === "range") {
+      this.handleRangeSelection(dateStr)
+    } else {
+      this.handleSingleSelection(dateStr)
+    }
+  }
+
+  handleSingleSelection(dateStr) {
+    if (this.selectedValue === dateStr) {
+      this.selectedValue = ""
+    } else {
+      this.selectedValue = dateStr
+    }
+
+    this.updateDayStates()
+    this.updateInputs()
+    this.dispatchChange()
+  }
+
+  handleRangeSelection(dateStr) {
+    // Use string comparisons to avoid timezone issues
+    // ISO date strings are lexicographically sortable
+    const selectedStr = this.selectedValue || ""
+    const selectedEndStr = this.selectedEndValue || ""
+
+    if (!selectedStr || (selectedStr && selectedEndStr)) {
+      // No selection or complete range - start new selection
+      this.selectedValue = dateStr
+      this.selectedEndValue = ""
+    } else {
+      // Have start but no end
+      if (dateStr < selectedStr) {
+        // Clicked before start - swap
+        this.selectedEndValue = this.selectedValue
+        this.selectedValue = dateStr
+      } else if (dateStr === selectedStr) {
+        // Clicked same date - clear
+        this.selectedValue = ""
+        this.selectedEndValue = ""
+      } else {
+        // Clicked after start - set end
+        this.selectedEndValue = dateStr
+      }
+    }
+
+    this.updateDayStates()
+    this.updateInputs()
+    this.dispatchChange()
+  }
+
+  handleKeydown(event) {
+    const currentButton = event.currentTarget
+    const currentDate = new Date(currentButton.dataset.date)
+    let targetDate = null
+
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault()
+        targetDate = new Date(currentDate)
+        targetDate.setDate(targetDate.getDate() + 1)
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        targetDate = new Date(currentDate)
+        targetDate.setDate(targetDate.getDate() - 1)
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        targetDate = new Date(currentDate)
+        targetDate.setDate(targetDate.getDate() + 7)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        targetDate = new Date(currentDate)
+        targetDate.setDate(targetDate.getDate() - 7)
+        break
+      case "Home":
+        event.preventDefault()
+        targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
+        break
+      case "End":
+        event.preventDefault()
+        targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
+        break
+      case "Enter":
+      case " ":
+        return
+      default:
+        return
+    }
+
+    if (targetDate) {
+      this.focusDate(targetDate)
+    }
+  }
+
+  focusDate(date) {
+    const dateStr = this.formatDate(date)
+    const targetButton = this.dayTargets.find(btn => btn.dataset.date === dateStr)
+
+    if (targetButton && !targetButton.disabled) {
+      targetButton.focus()
+    } else {
+      this.navigateToMonth(date.getMonth() + 1, date.getFullYear())
+      requestAnimationFrame(() => {
+        const newButton = this.dayTargets.find(btn => btn.dataset.date === dateStr)
+        if (newButton && !newButton.disabled) {
+          newButton.focus()
+        }
+      })
+    }
+  }
+
+  updateDayStates() {
+    // Use string comparisons to avoid timezone issues
+    const selectedStr = this.selectedValue || ""
+    const selectedEndStr = this.selectedEndValue || ""
+
+    this.dayTargets.forEach(button => {
+      const dateStr = button.dataset.date
+      let state = null
+
+      if (this.modeValue === "range" && selectedStr && selectedEndStr) {
+        if (dateStr === selectedStr) {
+          state = "range-start"
+        } else if (dateStr === selectedEndStr) {
+          state = "range-end"
+        } else if (dateStr > selectedStr && dateStr < selectedEndStr) {
+          // ISO date strings are lexicographically sortable
+          state = "range-middle"
+        }
+      } else if (this.modeValue === "range" && selectedStr && !selectedEndStr) {
+        if (dateStr === selectedStr) {
+          state = "range-start"
+        }
+      } else if (selectedStr && dateStr === selectedStr) {
+        state = "selected"
+      }
+
+      if (state) {
+        button.dataset.state = state
+        button.setAttribute("aria-selected", "true")
+      } else {
+        delete button.dataset.state
+        button.removeAttribute("aria-selected")
+      }
+    })
+  }
+
+  updateInputs() {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = this.selectedValue || ""
+    }
+    if (this.hasInputEndTarget) {
+      this.inputEndTarget.value = this.selectedEndValue || ""
+    }
+  }
+
+  updateNavigationState() {
+    if (this.minDateValue && this.hasPrevButtonTarget) {
+      const minDate = new Date(this.minDateValue)
+      const firstOfMonth = new Date(this.yearValue, this.monthValue - 1, 1)
+      this.prevButtonTarget.disabled = firstOfMonth <= minDate
+    }
+
+    if (this.maxDateValue && this.hasNextButtonTarget) {
+      const maxDate = new Date(this.maxDateValue)
+      const lastOfMonth = new Date(this.yearValue, this.monthValue, 0)
+      this.nextButtonTarget.disabled = lastOfMonth >= maxDate
+    }
+  }
+
+  dispatchChange() {
+    const detail = {
+      mode: this.modeValue,
+      selected: this.selectedValue || null,
+      selectedEnd: this.selectedEndValue || null
+    }
+
+    this.dispatch("change", { detail })
+
+    this.element.dispatchEvent(new CustomEvent("calendar:change", {
+      bubbles: true,
+      detail
+    }))
+  }
+
+  formatDate(date) {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, "0")
+    const day = String(date.getDate()).padStart(2, "0")
+    return `${year}-${month}-${day}`
+  }
+
+  getValue() {
+    return {
+      selected: this.selectedValue || null,
+      selectedEnd: this.selectedEndValue || null
+    }
+  }
+
+  select(date) {
+    const dateStr = date instanceof Date ? this.formatDate(date) : date
+
+    if (this.modeValue === "single") {
+      this.selectedValue = dateStr
+    } else {
+      this.handleRangeSelection(dateStr)
+      return
+    }
+
+    this.updateDayStates()
+    this.updateInputs()
+    this.dispatchChange()
+  }
+
+  clear() {
+    this.selectedValue = ""
+    this.selectedEndValue = ""
+    this.updateDayStates()
+    this.updateInputs()
+    this.dispatchChange()
+  }
+}

data/app/javascript/controllers/date_picker_controller.js

@@ -0,0 +1,261 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * DatePicker Controller
+ *
+ * Coordinates the trigger button, popover, and calendar.
+ * Uses native Popover API - minimal JS needed.
+ *
+ * @example Single date
+ *   <div data-controller="date-picker"
+ *        data-date-picker-mode-value="single">
+ *     <button popovertarget="popover-id">Pick date</button>
+ *     <div id="popover-id" popover>
+ *       <!-- Calendar component -->
+ *     </div>
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["trigger", "popover", "calendar", "input", "inputEnd", "display"]
+
+  static values = {
+    mode: { type: String, default: "single" },
+    selected: String,
+    selectedEnd: String,
+    format: { type: String, default: "long" },
+    placeholder: String,
+    placeholderRange: String
+  }
+
+  connect() {
+    this.setupPopoverEvents()
+    this.updateDisplay()
+  }
+
+  disconnect() {
+    this.teardownPopoverEvents()
+  }
+
+  /**
+   * Setup popover toggle events for aria-expanded
+   */
+  setupPopoverEvents() {
+    if (this.hasPopoverTarget) {
+      this.boundHandleToggle = this.handlePopoverToggle.bind(this)
+      this.popoverTarget.addEventListener("toggle", this.boundHandleToggle)
+    }
+  }
+
+  teardownPopoverEvents() {
+    if (this.hasPopoverTarget && this.boundHandleToggle) {
+      this.popoverTarget.removeEventListener("toggle", this.boundHandleToggle)
+    }
+  }
+
+  /**
+   * Handle popover toggle event
+   * Updates aria-expanded on trigger
+   */
+  handlePopoverToggle(event) {
+    const isOpen = event.newState === "open"
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", isOpen.toString())
+    }
+
+    if (isOpen && this.hasCalendarTarget) {
+      // Focus first focusable element in calendar after opening
+      requestAnimationFrame(() => {
+        const focusable = this.calendarTarget.querySelector("[data-today], [data-calendar-part='day']")
+        focusable?.focus()
+      })
+    }
+  }
+
+  /**
+   * Handle calendar change event
+   * @param {CustomEvent} event - calendar:change event
+   */
+  handleChange(event) {
+    const { selected, selectedEnd } = event.detail
+
+    this.selectedValue = selected || ""
+    this.selectedEndValue = selectedEnd || ""
+
+    this.updateInputs()
+    this.updateDisplay()
+
+    // Close popover after selection in single mode
+    // In range mode, close after both dates selected
+    if (this.modeValue === "single" && selected) {
+      this.closePopover()
+    } else if (this.modeValue === "range" && selected && selectedEnd) {
+      this.closePopover()
+    }
+
+    // Dispatch change event
+    this.dispatch("change", {
+      detail: {
+        selected: this.selectedValue || null,
+        selectedEnd: this.selectedEndValue || null
+      }
+    })
+  }
+
+  /**
+   * Handle calendar navigate event
+   * Can be used to fetch events for the new month
+   */
+  handleNavigate(event) {
+    this.dispatch("navigate", { detail: event.detail })
+  }
+
+  /**
+   * Update hidden input values
+   */
+  updateInputs() {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = this.selectedValue || ""
+    }
+    if (this.hasInputEndTarget) {
+      this.inputEndTarget.value = this.selectedEndValue || ""
+    }
+  }
+
+  /**
+   * Update display text
+   */
+  updateDisplay() {
+    if (!this.hasDisplayTarget) return
+
+    const selected = this.selectedValue
+    const selectedEnd = this.selectedEndValue
+
+    let displayText = ""
+
+    if (this.modeValue === "range") {
+      if (selected && selectedEnd) {
+        displayText = `${this.formatDate(selected, "short")} - ${this.formatDate(selectedEnd, "short")}`
+      } else if (selected) {
+        displayText = `${this.formatDate(selected, "short")} - ...`
+      } else {
+        displayText = this.placeholderRangeValue || "Select date range"
+      }
+    } else {
+      if (selected) {
+        displayText = this.formatDate(selected, this.formatValue)
+      } else {
+        displayText = this.placeholderValue || "Select date"
+      }
+    }
+
+    this.displayTarget.textContent = displayText
+
+    // Toggle placeholder styling
+    const placeholderIndicator = this.triggerTarget?.querySelector("[data-date-picker-part='placeholder-indicator']")
+    if (placeholderIndicator) {
+      placeholderIndicator.remove()
+    }
+
+    if (!selected) {
+      const indicator = document.createElement("span")
+      indicator.setAttribute("data-date-picker-part", "placeholder-indicator")
+      this.displayTarget.after(indicator)
+    }
+  }
+
+  /**
+   * Format date for display
+   */
+  formatDate(dateStr, format = "long") {
+    if (!dateStr) return ""
+
+    try {
+      const date = new Date(dateStr + "T00:00:00")
+      const options = format === "short"
+        ? { month: "short", day: "numeric", year: "numeric" }
+        : { weekday: "long", month: "long", day: "numeric", year: "numeric" }
+
+      return date.toLocaleDateString(undefined, options)
+    } catch {
+      return dateStr
+    }
+  }
+
+  /**
+   * Close the popover
+   */
+  closePopover() {
+    if (this.hasPopoverTarget) {
+      this.popoverTarget.hidePopover()
+    }
+  }
+
+  /**
+   * Open the popover
+   */
+  openPopover() {
+    if (this.hasPopoverTarget) {
+      this.popoverTarget.showPopover()
+    }
+  }
+
+  /**
+   * Toggle the popover
+   */
+  toggle() {
+    if (this.hasPopoverTarget) {
+      this.popoverTarget.togglePopover()
+    }
+  }
+
+  /**
+   * Clear the selection
+   */
+  clear() {
+    this.selectedValue = ""
+    this.selectedEndValue = ""
+    this.updateInputs()
+    this.updateDisplay()
+
+    // Also clear the calendar
+    if (this.hasCalendarTarget) {
+      const calendarController = this.application.getControllerForElementAndIdentifier(
+        this.calendarTarget,
+        "calendar"
+      )
+      calendarController?.clear()
+    }
+
+    this.dispatch("change", {
+      detail: { selected: null, selectedEnd: null }
+    })
+  }
+
+  /**
+   * Get current value(s)
+   */
+  getValue() {
+    return {
+      selected: this.selectedValue || null,
+      selectedEnd: this.selectedEndValue || null
+    }
+  }
+
+  /**
+   * Programmatically set value
+   */
+  setValue(selected, selectedEnd = null) {
+    this.selectedValue = selected || ""
+    this.selectedEndValue = selectedEnd || ""
+    this.updateInputs()
+    this.updateDisplay()
+
+    this.dispatch("change", {
+      detail: {
+        selected: this.selectedValue || null,
+        selectedEnd: this.selectedEndValue || null
+      }
+    })
+  }
+}