maquina-components 0.1.2 → 0.2.0

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -0,0 +1,203 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * DropdownMenu Controller
+ * 
+ * Handles opening/closing dropdown menus with:
+ * - Click to toggle
+ * - Click outside to close
+ * - Escape key to close
+ * - Keyboard navigation within menu
+ * - Focus management
+ * - Animation states
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "chevron"]
+
+  static values = {
+    open: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+
+    // Set initial state on root element
+    this.element.dataset.state = "closed"
+  }
+
+  disconnect() {
+    this.removeEventListeners()
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.openValue || !this.hasContentTarget) return
+
+    this.openValue = true
+    this.element.dataset.state = "open"
+    this.contentTarget.dataset.state = "open"
+    this.contentTarget.hidden = false
+
+    // Update trigger aria
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "true")
+    }
+
+    // Add event listeners
+    this.addEventListeners()
+
+    // Focus first item after animation
+    requestAnimationFrame(() => {
+      this.focusFirstItem()
+    })
+  }
+
+  close() {
+    if (!this.openValue || !this.hasContentTarget) return
+
+    // Start closing animation
+    this.contentTarget.dataset.state = "closing"
+
+    // Wait for animation to complete
+    const animationDuration = 100 // matches CSS animation duration
+
+    setTimeout(() => {
+      this.openValue = false
+      this.element.dataset.state = "closed"
+      this.contentTarget.dataset.state = "closed"
+      this.contentTarget.hidden = true
+
+      // Update trigger aria
+      if (this.hasTriggerTarget) {
+        this.triggerTarget.setAttribute("aria-expanded", "false")
+      }
+
+      // Remove event listeners
+      this.removeEventListeners()
+
+      // Return focus to trigger
+      if (this.hasTriggerTarget) {
+        this.triggerTarget.focus()
+      }
+    }, animationDuration)
+  }
+
+  // Event Handlers
+
+  handleClickOutside(event) {
+    if (!this.openValue) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  handleKeydown(event) {
+    if (!this.openValue) return
+
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault()
+        this.close()
+        break
+
+      case "ArrowDown":
+        event.preventDefault()
+        this.focusNextItem()
+        break
+
+      case "ArrowUp":
+        event.preventDefault()
+        this.focusPreviousItem()
+        break
+
+      case "Home":
+        event.preventDefault()
+        this.focusFirstItem()
+        break
+
+      case "End":
+        event.preventDefault()
+        this.focusLastItem()
+        break
+
+      case "Tab":
+        // Close menu and let focus move naturally
+        this.close()
+        break
+    }
+  }
+
+  // Focus Management
+
+  get menuItems() {
+    if (!this.hasContentTarget) return []
+
+    return Array.from(
+      this.contentTarget.querySelectorAll('[data-dropdown-menu-part="item"]:not([disabled]):not([aria-disabled="true"])')
+    )
+  }
+
+  get focusedItemIndex() {
+    const items = this.menuItems
+    const focused = document.activeElement
+    return items.indexOf(focused)
+  }
+
+  focusFirstItem() {
+    const items = this.menuItems
+    if (items.length > 0) {
+      items[0].focus()
+    }
+  }
+
+  focusLastItem() {
+    const items = this.menuItems
+    if (items.length > 0) {
+      items[items.length - 1].focus()
+    }
+  }
+
+  focusNextItem() {
+    const items = this.menuItems
+    if (items.length === 0) return
+
+    const currentIndex = this.focusedItemIndex
+    const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0
+    items[nextIndex].focus()
+  }
+
+  focusPreviousItem() {
+    const items = this.menuItems
+    if (items.length === 0) return
+
+    const currentIndex = this.focusedItemIndex
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1
+    items[prevIndex].focus()
+  }
+
+  // Event Listener Management
+
+  addEventListeners() {
+    // Delay adding click outside listener to prevent immediate close
+    setTimeout(() => {
+      document.addEventListener("click", this.handleClickOutside)
+    }, 0)
+
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  removeEventListeners() {
+    document.removeEventListener("click", this.handleClickOutside)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+}

data/app/javascript/controllers/menu_button_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "content"]
+
+  connect() {
+    if (!this.hasContentTarget) {
+      return
+    }
+
+    this.clickOutside = this.clickOutside.bind(this)
+    this.isOpen = this.buttonTarget.dataset.state === "open"
+
+    if (this.isOpen) {
+      this.addClickOutsideListener()
+    }
+  }
+
+  disconnect() {
+    this.removeClickOutsideListener()
+  }
+
+  toggle() {
+    if (!this.hasContentTarget) {
+      return
+    }
+
+    this.contentTarget.classList.remove("hidden")
+
+    this.isOpen = !this.isOpen
+    this.buttonTarget.dataset.state = this.isOpen ? "open" : "closed"
+
+    if (this.isOpen) {
+      // Add a small delay before adding the click outside listener
+      setTimeout(() => {
+        this.addClickOutsideListener()
+      }, 100)
+    } else {
+      this.removeClickOutsideListener()
+    }
+  }
+
+  clickOutside(event) {
+    if (!this.isOpen) return
+    if (event.target === this.element) return
+
+    if (!this.contentTarget.contains(event.target)) {
+      this.toggle()
+    }
+  }
+
+  addClickOutsideListener() {
+    document.addEventListener('click', this.clickOutside)
+  }
+
+  removeClickOutsideListener() {
+    document.removeEventListener('click', this.clickOutside)
+  }
+}

data/app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,316 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Sidebar Controller
+ * 
+ * Manages sidebar state, keyboard shortcuts, responsive behavior, and persistence.
+ * Works with sidebar_trigger_controller via Stimulus outlets.
+ * 
+ * @example
+ * <div data-controller="sidebar" data-outlet="sidebar">
+ *   <!-- sidebar content -->
+ * </div>
+ */
+export default class extends Controller {
+  static values = {
+    open: { type: Boolean, default: true },
+    defaultOpen: { type: Boolean, default: true },
+    cookieName: { type: String, default: "sidebar_state" },
+    cookieMaxAge: { type: Number, default: 60 * 60 * 24 * 365 },
+    keyboardShortcut: { type: String, default: "b" }
+  }
+
+  static targets = ["sidebar", "container", "backdrop"]
+
+  initialize() {
+    // Load saved state from cookie or use default
+    // Note: Rails backend can set defaultOpen based on cookie value
+    // via sidebar_state helper
+    const cookieValue = this.getCookie(this.cookieNameValue)
+    this.openValue = cookieValue !== null
+      ? cookieValue === "true"
+      : this.defaultOpenValue
+
+    // Track if we're on mobile
+    this._isMobile = null
+  }
+
+  connect() {
+    // Detect initial screen size
+    this.checkScreenSize()
+
+    // Setup resize handler with debounce
+    this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
+    window.addEventListener("resize", this.resizeHandler)
+
+    // Apply initial state without animation
+    this.updateStateImmediate()
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.resizeHandler)
+  }
+
+  // ============================================================================
+  // Keyboard Shortcut Actions (Called by Stimulus declarative actions)
+  // ============================================================================
+
+  /**
+   * Toggle sidebar via keyboard shortcut
+   * Called by data-action keyboard bindings (Cmd/Ctrl+B by default)
+   * @param {KeyboardEvent} event
+   */
+  toggleWithKeyboard(event) {
+    this.toggle()
+  }
+
+  // ============================================================================
+  // State Management
+  // ============================================================================
+
+  openValueChanged(new_value, old_value) {
+    if (new_value === old_value) return
+
+    this.updateState()
+    this.persistState()
+    this.dispatchStateChange()
+  }
+
+  updateState() {
+    if (!this.hasSidebarTarget) return
+
+    const isOpen = this.openValue
+    const isMobile = this.isMobile()
+    const state = isOpen ? "expanded" : "collapsed"
+
+    // Update sidebar state
+    this.sidebarTarget.setAttribute("data-state", state)
+
+    const collapsible = isOpen
+      ? "none"
+      : !isMobile
+        ? "icon"
+        : "offcanvas";
+
+    // Update sidebar visual state
+    this.sidebarTarget.setAttribute("data-collapsible", collapsible)
+
+    // Update backdrop (only visible on mobile when open)
+    if (this.hasBackdropTarget) {
+      const backdropState = (isOpen && isMobile) ? "visible" : "hidden"
+      this.backdropTarget.setAttribute("data-state", backdropState)
+
+      // Toggle hidden class for visibility
+      if (backdropState === "visible") {
+        this.backdropTarget.classList.remove("hidden")
+      } else {
+        // Wait for transition before hiding
+        setTimeout(() => {
+          if (this.backdropTarget.getAttribute("data-state") === "hidden") {
+            this.backdropTarget.classList.add("hidden")
+          }
+        }, 300)
+      }
+    }
+
+    // Lock/unlock scroll on mobile
+    if (isMobile) {
+      if (isOpen) {
+        this.lockScroll()
+      } else {
+        this.unlockScroll()
+      }
+    }
+  }
+
+  updateStateImmediate() {
+    // Update state without transitions (for initial render)
+    if (!this.hasSidebarTarget) return
+
+    this.updateState()
+
+    requestAnimationFrame(() => {
+      this.sidebarTarget.classList.remove("sidebar-loading")
+    })
+  }
+
+  // ============================================================================
+  // Public Actions (Called by triggers or other controllers)
+  // ============================================================================
+
+  /**
+   * Toggle sidebar open/closed state
+   */
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  /**
+   * Open the sidebar
+   */
+  open() {
+    this.openValue = true
+  }
+
+  /**
+   * Close the sidebar
+   */
+  close() {
+    this.openValue = false
+  }
+
+  /**
+   * Toggle only if on mobile (useful for touch gestures)
+   */
+  toggleMobile() {
+    if (this.isMobile()) {
+      this.toggle()
+    }
+  }
+
+  /**
+   * Handle backdrop click (close sidebar on mobile)
+   * @param {MouseEvent} event
+   */
+  backdropClick(event) {
+    if (this.isMobile() && this.openValue) {
+      this.close()
+    }
+  }
+
+  // ============================================================================
+  // Responsive Behavior
+  // ============================================================================
+
+  checkScreenSize() {
+    const wasMobile = this._isMobile
+    this._isMobile = window.innerWidth < 768
+
+    // First time detecting screen size
+    if (wasMobile === null) {
+      // On mobile, start closed; on desktop, use saved state
+      if (this._isMobile) {
+        this.openValue = false
+      }
+      return
+    }
+
+    // Screen size changed
+    if (wasMobile !== this._isMobile) {
+      this.handleScreenSizeChange(wasMobile, this._isMobile)
+    }
+  }
+
+  handleScreenSizeChange(wasMobile, isMobile) {
+    if (this.sidebarTarget.getAttribute("data-collapsible") === "offcanvas") {
+      // Mobile to desktop: restore saved state
+      if (wasMobile && !isMobile) {
+        const cookieValue = this.getCookie(this.cookieNameValue)
+        this.openValue = cookieValue !== null
+          ? cookieValue === "true"
+          : this.defaultOpenValue
+      }
+      // Desktop to mobile: close sidebar
+      else if (!wasMobile && isMobile) {
+        this.openValue = false
+      }
+    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "icon") {
+      // Icon mode is always visible, just changes width
+      // Desktop to mobile: might want to close
+      if (!wasMobile && isMobile) {
+        this.openValue = false
+      }
+    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "none") {
+      // Non-collapsible sidebars stay open
+      this.openValue = true
+    }
+
+    this.updateState()
+  }
+
+  isMobile() {
+    return this._isMobile ?? (window.innerWidth < 768)
+  }
+
+  // ============================================================================
+  // Persistence (Cookie Management)
+  // ============================================================================
+
+  persistState() {
+    // Only save desktop state to cookie
+    if (!this.isMobile()) {
+      this.setCookie(
+        this.cookieNameValue,
+        this.openValue.toString(),
+        this.cookieMaxAgeValue
+      )
+    }
+  }
+
+  getCookie(name) {
+    const value = `; ${document.cookie}`
+    const parts = value.split(`; ${name}=`)
+    if (parts.length === 2) {
+      return parts.pop().split(";").shift()
+    }
+    return null
+  }
+
+  setCookie(name, value, maxAge) {
+    document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax`
+  }
+
+  // ============================================================================
+  // Scroll Lock (for mobile overlay)
+  // ============================================================================
+
+  lockScroll() {
+    this.scrollPosition = window.pageYOffset
+    document.body.style.overflow = "hidden"
+    document.body.style.position = "fixed"
+    document.body.style.top = `-${this.scrollPosition}px`
+    document.body.style.width = "100%"
+  }
+
+  unlockScroll() {
+    document.body.style.overflow = ""
+    document.body.style.position = ""
+    document.body.style.top = ""
+    document.body.style.width = ""
+    if (this.scrollPosition !== undefined) {
+      window.scrollTo(0, this.scrollPosition)
+    }
+  }
+
+  // ============================================================================
+  // Events (Custom event dispatching)
+  // ============================================================================
+
+  dispatchStateChange() {
+    this.dispatch("stateChanged", {
+      detail: {
+        open: this.openValue,
+        mobile: this.isMobile(),
+        state: this.openValue ? "expanded" : "collapsed",
+        collapsible: this.sidebarTarget.getAttribute("data-collapsible")
+      },
+      bubbles: true
+    })
+  }
+
+  // ============================================================================
+  // Utilities
+  // ============================================================================
+
+  debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+}

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Sidebar Trigger Controller
+ * 
+ * Triggers sidebar toggle via Stimulus outlets.
+ * Can be placed anywhere on the page - finds sidebar via outlet selector.
+ * 
+ * @example
+ * <button 
+ *   data-controller="sidebar-trigger"
+ *   data-action="click->sidebar-trigger#triggerClick"
+ *   data-sidebar-trigger-sidebar-outlet="[data-outlet='sidebar']"
+ * >
+ *   Toggle
+ * </button>
+ */
+export default class extends Controller {
+  static outlets = ["sidebar"]
+
+  /**
+   * Toggle sidebar when trigger is clicked
+   * Works with multiple sidebars if multiple outlets are connected
+   */
+  triggerClick() {
+    if (this.hasSidebarOutlet) {
+      this.sidebarOutlets.forEach(outlet => {
+        outlet.toggle()
+      })
+    }
+  }
+}