maquina-components 0.2.0 → 0.3.0

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

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

data/app/views/components/_combobox.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options) %>
+<% combobox_id = id || "combobox-#{SecureRandom.hex(4)}" %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :combobox,
+    controller: "combobox",
+    combobox_value_value: value,
+    combobox_name_value: name,
+    combobox_placeholder_value: placeholder
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield combobox_id %>
+<% end %>