maquina-components 0.2.0 → 0.3.1

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
+      }
+    })
+  }
+}

data/app/javascript/controllers/toast_controller.js

@@ -0,0 +1,115 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toast Controller
+ *
+ * Manages individual toast lifecycle:
+ * - Auto-dismiss timer
+ * - Pause on hover
+ * - Dismiss animation
+ * - Action button callback
+ */
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 5000 },
+    dismissible: { type: Boolean, default: true },
+    actionCallback: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.timeoutId = null
+    this.remainingTime = this.durationValue
+    this.startTime = null
+
+    // Bind event handlers
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+
+    // Add hover listeners
+    this.element.addEventListener("mouseenter", this.handleMouseEnter)
+    this.element.addEventListener("mouseleave", this.handleMouseLeave)
+
+    // Start animation, then start timer
+    requestAnimationFrame(() => {
+      // Wait for enter animation to complete
+      setTimeout(() => {
+        this.element.dataset.state = "visible"
+        this.startTimer()
+      }, 200) // Match CSS animation duration
+    })
+  }
+
+  disconnect() {
+    this.clearTimer()
+    this.element.removeEventListener("mouseenter", this.handleMouseEnter)
+    this.element.removeEventListener("mouseleave", this.handleMouseLeave)
+  }
+
+  startTimer() {
+    if (this.durationValue <= 0) return // No auto-dismiss
+
+    this.startTime = Date.now()
+    this.timeoutId = setTimeout(() => {
+      this.dismiss()
+    }, this.remainingTime)
+  }
+
+  clearTimer() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+  }
+
+  pauseTimer() {
+    if (this.durationValue <= 0) return
+
+    this.clearTimer()
+
+    // Calculate remaining time
+    if (this.startTime) {
+      const elapsed = Date.now() - this.startTime
+      this.remainingTime = Math.max(0, this.remainingTime - elapsed)
+    }
+  }
+
+  resumeTimer() {
+    if (this.durationValue <= 0) return
+    if (this.remainingTime <= 0) return
+
+    this.startTimer()
+  }
+
+  handleMouseEnter() {
+    this.pauseTimer()
+  }
+
+  handleMouseLeave() {
+    this.resumeTimer()
+  }
+
+  dismiss() {
+    this.clearTimer()
+
+    // Start exit animation
+    this.element.dataset.state = "exiting"
+
+    // Remove after animation completes
+    setTimeout(() => {
+      this.element.remove()
+    }, 150) // Match CSS animation duration
+  }
+
+  handleAction(event) {
+    // If this toast was created via JS API with an action callback,
+    // the callback is stored on the toaster controller or needs to be
+    // dispatched as an event for the parent to handle
+    this.dispatch("action", {
+      detail: { toastId: this.element.id },
+      bubbles: true
+    })
+
+    // Dismiss after action
+    this.dismiss()
+  }
+}

data/app/javascript/controllers/toaster_controller.js

@@ -0,0 +1,226 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toaster Controller
+ *
+ * Manages the toast container and provides a global JavaScript API
+ * for creating toasts programmatically.
+ *
+ * Usage:
+ *   Toast.success("Message saved!")
+ *   Toast.error("Something went wrong", { description: "Please try again" })
+ *   Toast.info("New update available", { duration: 10000 })
+ *   Toast.warning("Session expiring soon")
+ *   Toast.show("Custom message", { variant: "default" })
+ *   Toast.dismiss(toastId)
+ *   Toast.dismissAll()
+ */
+export default class extends Controller {
+  static targets = ["container"]
+
+  static values = {
+    maxVisible: { type: Number, default: 5 }
+  }
+
+  connect() {
+    // Expose global Toast API
+    this.setupGlobalApi()
+  }
+
+  disconnect() {
+    // Clean up global API
+    if (window.Toast && window.Toast._controller === this) {
+      delete window.Toast
+    }
+  }
+
+  setupGlobalApi() {
+    const controller = this
+
+    window.Toast = {
+      _controller: controller,
+
+      show(title, options = {}) {
+        return controller.createToast({ title, ...options })
+      },
+
+      success(title, options = {}) {
+        return controller.createToast({ title, variant: "success", ...options })
+      },
+
+      info(title, options = {}) {
+        return controller.createToast({ title, variant: "info", ...options })
+      },
+
+      warning(title, options = {}) {
+        return controller.createToast({ title, variant: "warning", ...options })
+      },
+
+      error(title, options = {}) {
+        return controller.createToast({ title, variant: "error", ...options })
+      },
+
+      dismiss(toastId) {
+        controller.dismissToast(toastId)
+      },
+
+      dismissAll() {
+        controller.dismissAllToasts()
+      }
+    }
+  }
+
+  /**
+   * Create a toast programmatically
+   *
+   * @param {Object} options
+   * @param {string} options.title - Toast title
+   * @param {string} options.description - Optional description
+   * @param {string} options.variant - default, success, info, warning, error
+   * @param {number} options.duration - Auto-dismiss in ms (0 = no auto-dismiss)
+   * @param {boolean} options.dismissible - Show close button
+   * @param {Object} options.action - { label: string, onClick: function }
+   * @returns {string} Toast ID
+   */
+  createToast(options = {}) {
+    const {
+      title = "",
+      description = "",
+      variant = "default",
+      duration = 5000,
+      dismissible = true,
+      action = null
+    } = options
+
+    const toastId = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+
+    // Build toast HTML
+    const toastHtml = this.buildToastHtml({
+      id: toastId,
+      title,
+      description,
+      variant,
+      duration,
+      dismissible,
+      action
+    })
+
+    // Insert into container
+    this.element.insertAdjacentHTML("beforeend", toastHtml)
+
+    // Enforce max visible
+    this.enforceMaxVisible()
+
+    return toastId
+  }
+
+  buildToastHtml({ id, title, description, variant, duration, dismissible, action }) {
+    const icons = {
+      default: "",
+      success: this.getIconSvg("circle_check"),
+      info: this.getIconSvg("info"),
+      warning: this.getIconSvg("triangle_alert"),
+      error: this.getIconSvg("circle_x")
+    }
+
+    const iconHtml = icons[variant]
+      ? `<div data-toast-part="icon">${icons[variant]}</div>`
+      : ""
+
+    const titleHtml = title
+      ? `<div data-toast-part="title">${this.escapeHtml(title)}</div>`
+      : ""
+
+    const descriptionHtml = description
+      ? `<div data-toast-part="description">${this.escapeHtml(description)}</div>`
+      : ""
+
+    const actionHtml = action
+      ? `<button type="button" data-toast-part="action" data-action="click->toast#handleAction">${this.escapeHtml(action.label)}</button>`
+      : ""
+
+    const closeHtml = dismissible
+      ? `<button type="button" data-toast-part="close" data-action="toast#dismiss" aria-label="Dismiss notification">${this.getIconSvg("x")}</button>`
+      : ""
+
+    return `
+      <div id="${id}"
+           role="alert"
+           data-component="toast"
+           data-controller="toast"
+           data-variant="${variant}"
+           data-toast-duration-value="${duration}"
+           data-toast-dismissible-value="${dismissible}"
+           data-toast-action-callback="${action ? "true" : "false"}"
+           data-state="entering">
+        ${iconHtml}
+        <div data-toast-part="content">
+          ${titleHtml}
+          ${descriptionHtml}
+          ${actionHtml}
+        </div>
+        ${closeHtml}
+      </div>
+    `.trim()
+  }
+
+  getIconSvg(name) {
+    const icons = {
+      circle_check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+      info: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+      triangle_alert: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+      circle_x: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+      x: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'
+    }
+    return icons[name] || ""
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = text
+    return div.innerHTML
+  }
+
+  dismissToast(toastId) {
+    const toast = document.getElementById(toastId)
+    if (toast) {
+      // Trigger the toast controller's dismiss method
+      const toastController = this.application.getControllerForElementAndIdentifier(toast, "toast")
+      if (toastController) {
+        toastController.dismiss()
+      } else {
+        toast.remove()
+      }
+    }
+  }
+
+  dismissAllToasts() {
+    const toasts = this.element.querySelectorAll('[data-component="toast"]')
+    toasts.forEach(toast => {
+      const toastController = this.application.getControllerForElementAndIdentifier(toast, "toast")
+      if (toastController) {
+        toastController.dismiss()
+      } else {
+        toast.remove()
+      }
+    })
+  }
+
+  enforceMaxVisible() {
+    const toasts = this.element.querySelectorAll('[data-component="toast"]')
+    const excess = toasts.length - this.maxVisibleValue
+
+    if (excess > 0) {
+      // Remove oldest toasts (first in DOM)
+      for (let i = 0; i < excess; i++) {
+        const toast = toasts[i]
+        const toastController = this.application.getControllerForElementAndIdentifier(toast, "toast")
+        if (toastController) {
+          toastController.dismiss()
+        } else {
+          toast.remove()
+        }
+      }
+    }
+  }
+}