maquina-components 0.2.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/combobox_controller.js

@@ -0,0 +1,325 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Combobox Controller
+ *
+ * Handles autocomplete/search functionality with:
+ * - HTML5 Popover API for light-dismiss
+ * - Type-ahead filtering
+ * - Single selection with toggle
+ * - Keyboard navigation
+ * - Focus management
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "option", "empty", "label"]
+
+  static values = {
+    value: { type: String, default: "" },
+    name: String,
+    placeholder: { type: String, default: "Select..." }
+  }
+
+  connect() {
+    this.handlePopoverToggle = this.handlePopoverToggle.bind(this)
+    this.handleContentKeydown = this.handleContentKeydown.bind(this)
+
+    if (this.hasContentTarget) {
+      this.contentTarget.addEventListener("toggle", this.handlePopoverToggle)
+      this.contentTarget.addEventListener("keydown", this.handleContentKeydown)
+    }
+
+    // Set initial selection if value is provided
+    if (this.valueValue) {
+      this.updateSelectionFromValue()
+    }
+
+    // Update trigger state
+    this.updateTriggerState()
+  }
+
+  disconnect() {
+    if (this.hasContentTarget) {
+      this.contentTarget.removeEventListener("toggle", this.handlePopoverToggle)
+      this.contentTarget.removeEventListener("keydown", this.handleContentKeydown)
+    }
+  }
+
+  // Popover toggle handling
+  toggle(event) {
+    // Popover API handles toggle via popovertarget attribute
+    // This method is here for programmatic control if needed
+  }
+
+  handlePopoverToggle(event) {
+    const isOpen = event.newState === "open"
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", isOpen)
+    }
+
+    if (isOpen) {
+      // Position the popover relative to the trigger
+      this.positionPopover()
+
+      // Focus input when opened
+      if (this.hasInputTarget) {
+        requestAnimationFrame(() => {
+          this.inputTarget.focus()
+          this.inputTarget.value = ""
+          this.resetFilter()
+        })
+      }
+    }
+  }
+
+  positionPopover() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return
+
+    const trigger = this.triggerTarget
+    const content = this.contentTarget
+    const triggerRect = trigger.getBoundingClientRect()
+
+    // Get alignment from data attribute
+    const align = content.dataset.align || "start"
+
+    // Calculate position
+    let left = triggerRect.left
+    const top = triggerRect.bottom + 4 // 4px gap
+
+    // Adjust for alignment
+    if (align === "end") {
+      left = triggerRect.right - content.offsetWidth
+    } else if (align === "center") {
+      left = triggerRect.left + (triggerRect.width / 2) - (content.offsetWidth / 2)
+    }
+
+    // Ensure popover doesn't go off-screen horizontally
+    const viewportWidth = window.innerWidth
+    if (left + content.offsetWidth > viewportWidth - 8) {
+      left = viewportWidth - content.offsetWidth - 8
+    }
+    if (left < 8) {
+      left = 8
+    }
+
+    // Apply position
+    content.style.position = "fixed"
+    content.style.top = `${top}px`
+    content.style.left = `${left}px`
+    content.style.margin = "0"
+
+    // Set width to match trigger if content width is "default"
+    const width = content.dataset.width
+    if (width === "default" || !width) {
+      content.style.minWidth = `${triggerRect.width}px`
+    }
+  }
+
+  // Filtering
+  filter() {
+    if (!this.hasInputTarget) return
+
+    const query = this.inputTarget.value.toLowerCase().trim()
+    let visibleCount = 0
+
+    this.optionTargets.forEach(option => {
+      const text = option.textContent.toLowerCase()
+      const matches = query === "" || text.includes(query)
+      option.hidden = !matches
+      if (matches) visibleCount++
+    })
+
+    // Show/hide empty state
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.hidden = visibleCount > 0
+    }
+  }
+
+  resetFilter() {
+    this.optionTargets.forEach(option => {
+      option.hidden = false
+    })
+
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.hidden = true
+    }
+  }
+
+  // Selection
+  select(event) {
+    const option = event.currentTarget
+    const value = option.dataset.value
+    const label = this.getOptionLabel(option)
+
+    // Toggle selection (clicking selected item deselects)
+    if (this.valueValue === value) {
+      this.valueValue = ""
+      this.updateLabel(this.placeholderValue)
+    } else {
+      this.valueValue = value
+      this.updateLabel(label)
+    }
+
+    this.updateSelection()
+    this.updateTriggerState()
+
+    // Close popover
+    if (this.hasContentTarget) {
+      this.contentTarget.hidePopover()
+    }
+
+    // Dispatch change event for external listeners
+    this.dispatch("change", {
+      detail: {
+        value: this.valueValue,
+        label: this.valueValue ? label : null
+      }
+    })
+  }
+
+  getOptionLabel(option) {
+    // Get text content excluding the check icon
+    const clone = option.cloneNode(true)
+    const check = clone.querySelector('[data-combobox-part="check"]')
+    if (check) check.remove()
+    return clone.textContent.trim()
+  }
+
+  updateSelection() {
+    this.optionTargets.forEach(option => {
+      const isSelected = option.dataset.value === this.valueValue
+      option.dataset.selected = isSelected
+      option.setAttribute("aria-selected", isSelected)
+
+      const check = option.querySelector('[data-combobox-part="check"]')
+      if (check) {
+        check.classList.toggle("invisible", !isSelected)
+      }
+    })
+  }
+
+  updateSelectionFromValue() {
+    const selectedOption = this.optionTargets.find(
+      option => option.dataset.value === this.valueValue
+    )
+
+    if (selectedOption) {
+      const label = this.getOptionLabel(selectedOption)
+      this.updateLabel(label)
+      this.updateSelection()
+    }
+  }
+
+  updateLabel(text) {
+    if (this.hasLabelTarget) {
+      this.labelTarget.textContent = text || this.placeholderValue
+    }
+  }
+
+  updateTriggerState() {
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.dataset.hasValue = this.valueValue !== ""
+    }
+  }
+
+  // Keyboard navigation from input field
+  keydown(event) {
+    this.handleKeyboardNavigation(event)
+  }
+
+  // Keyboard navigation from content (options)
+  handleContentKeydown(event) {
+    this.handleKeyboardNavigation(event)
+  }
+
+  handleKeyboardNavigation(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.focusNextOption()
+        break
+
+      case "ArrowUp":
+        event.preventDefault()
+        this.focusPreviousOption()
+        break
+
+      case "Enter":
+        event.preventDefault()
+        this.selectFocusedOption()
+        break
+
+      case "Home":
+        event.preventDefault()
+        this.focusFirstOption()
+        break
+
+      case "End":
+        event.preventDefault()
+        this.focusLastOption()
+        break
+
+      case "Escape":
+        event.preventDefault()
+        if (this.hasContentTarget) {
+          this.contentTarget.hidePopover()
+        }
+        break
+    }
+  }
+
+  get visibleOptions() {
+    return this.optionTargets.filter(opt => !opt.hidden && !opt.hasAttribute("aria-disabled"))
+  }
+
+  get focusedOptionIndex() {
+    const options = this.visibleOptions
+    const focused = document.activeElement
+    return options.indexOf(focused)
+  }
+
+  focusFirstOption() {
+    const options = this.visibleOptions
+    if (options.length > 0) {
+      options[0].focus()
+    }
+  }
+
+  focusLastOption() {
+    const options = this.visibleOptions
+    if (options.length > 0) {
+      options[options.length - 1].focus()
+    }
+  }
+
+  focusNextOption() {
+    const options = this.visibleOptions
+    if (options.length === 0) return
+
+    const currentIndex = this.focusedOptionIndex
+    const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0
+    options[nextIndex].focus()
+  }
+
+  focusPreviousOption() {
+    const options = this.visibleOptions
+    if (options.length === 0) return
+
+    const currentIndex = this.focusedOptionIndex
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1
+    options[prevIndex].focus()
+  }
+
+  selectFocusedOption() {
+    const focused = document.activeElement
+    if (this.optionTargets.includes(focused)) {
+      this.select({ currentTarget: focused })
+    }
+  }
+
+  // Value change callback
+  valueValueChanged() {
+    this.updateSelection()
+    this.updateTriggerState()
+  }
+}