maquina-components 0.4.4 → 0.5.1

data/app/helpers/maquina_components/icons_helper.rb

@@ -26,8 +26,17 @@ module MaquinaComponents
     private
 
     def apply_icon_options(svg, options)
+      return svg.html_safe unless options&.any?
+
       css_classes = options[:class]
-      svg = svg.gsub('class="', "class=\"#{css_classes} ") if css_classes
+      if css_classes&.is_a?(String)
+        escaped_css_classes = ERB::Util.html_escape(css_classes)
+        svg = if /\bclass\s*=\s*(['"])(.*?)\1/.match?(svg)
+          svg.sub(/\bclass\s*=\s*(['"])(.*?)\1/, "class=\\1#{escaped_css_classes}\\1")
+        else
+          svg.sub(/<svg(?=(\s|>))/, "<svg class=\"#{escaped_css_classes}\"")
+        end
+      end
 
       if options[:stroke_width]
         svg = svg.gsub('stroke-width="2"', "stroke-width=\"#{options[:stroke_width]}\"")
@@ -392,6 +401,64 @@ module MaquinaComponents
             <rect width="7" height="7" x="3" y="14" rx="1"/>
           </svg>
         SVG
+      when :message_square
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
+          </svg>
+        SVG
+      when :arrow_up
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M7 17L17 7M17 7H7M17 7V17"/>
+          </svg>
+        SVG
+      when :arrow_down
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M17 7L7 17M7 17H17M7 17V7"/>
+          </svg>
+        SVG
+      when :lightning_bolt
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+        SVG
+      when :clipboard_list
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+          </svg>
+        SVG
+      when :chart_bar
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+          </svg>
+        SVG
+      when :circle_check
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="m9 12 2 2 4-4"/>
+          </svg>
+        SVG
+      when :circle_x
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="m15 9-6 6"/>
+            <path d="m9 9 6 6"/>
+          </svg>
+        SVG
+      when :x
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M18 6 6 18"/>
+            <path d="m6 6 12 12"/>
+          </svg>
+        SVG
       end
     end
   end

data/app/javascript/controllers/breadcrumb_controller.js

@@ -4,10 +4,15 @@ export default class extends Controller {
   static targets = ["item", "ellipsis", "ellipsisSeparator"]
   static values = { collapseAfter: { type: Number, default: 0 } }
 
+  // True when CSS anchor positioning (breadcrumbs.css) places the popover
+  static supportsAnchorPositioning =
+    typeof CSS !== "undefined" &&
+    CSS.supports("anchor-name: --a") &&
+    CSS.supports("position-area: block-end")
+
   connect() {
     this._dropdown = null
-    this._clickOutsideHandler = this._closeDropdown.bind(this)
-    this._escapeHandler = this._handleEscape.bind(this)
+    this._popoverToggleHandler = this._handlePopoverToggle.bind(this)
     this._teardownHandler = this._teardown.bind(this)
 
     document.addEventListener("turbo:before-cache", this._teardownHandler)
@@ -29,7 +34,6 @@ export default class extends Controller {
       this._ellipsisTrigger = trigger
       this._toggleHandler = this._toggleDropdown.bind(this)
       trigger.addEventListener('click', this._toggleHandler)
-      trigger.style.cursor = 'pointer'
     }
   }
 
@@ -133,7 +137,7 @@ export default class extends Controller {
   _toggleDropdown(event) {
     event.stopPropagation()
 
-    if (this._dropdown && this._dropdown.dataset.state === "open") {
+    if (this._dropdown && this._dropdown.matches(":popover-open")) {
       this._closeDropdown()
     } else {
       this._openDropdown()
@@ -144,47 +148,55 @@ export default class extends Controller {
     if (!this._hiddenLinks || this._hiddenLinks.length === 0) return
 
     if (!this._dropdown) {
+      // popover="auto" gives top-layer rendering, light dismiss, and
+      // Escape-to-close natively — no document listeners needed
       this._dropdown = document.createElement('div')
       this._dropdown.setAttribute('role', 'menu')
+      this._dropdown.setAttribute('popover', 'auto')
       this._dropdown.dataset.dropdownMenuPart = 'content'
-      this._dropdown.style.position = 'fixed'
-      this._dropdown.style.zIndex = '50'
-      document.body.appendChild(this._dropdown)
+      this._dropdown.dataset.breadcrumbPart = 'dropdown'
+      this._dropdown.addEventListener('beforetoggle', this._popoverToggleHandler)
+      // Next to the trigger so CSS anchor positioning can resolve it
+      this._ellipsisTrigger.insertAdjacentElement('afterend', this._dropdown)
     }
 
     this._buildDropdownContent()
     this._positionDropdown()
-    this._dropdown.dataset.state = 'open'
-
-    if (this._ellipsisTrigger) {
-      this._ellipsisTrigger.dataset.state = 'open'
-    }
-
-    // Defer listeners so the current click doesn't immediately close
-    requestAnimationFrame(() => {
-      document.addEventListener('click', this._clickOutsideHandler)
-      document.addEventListener('keydown', this._escapeHandler)
-    })
+    this._dropdown.showPopover()
   }
 
   _closeDropdown() {
-    if (this._dropdown) {
-      this._dropdown.dataset.state = 'closed'
+    if (this._dropdown && this._dropdown.matches(":popover-open")) {
+      this._dropdown.hidePopover()
     }
+  }
+
+  // Mirrors the native popover state onto the data attributes the CSS
+  // animations and the trigger styling key on
+  _handlePopoverToggle(event) {
+    const open = event.newState === 'open'
+
+    this._dropdown.dataset.state = open ? 'open' : 'closed'
+
     if (this._ellipsisTrigger) {
-      delete this._ellipsisTrigger.dataset.state
+      if (open) {
+        this._ellipsisTrigger.dataset.state = 'open'
+      } else {
+        delete this._ellipsisTrigger.dataset.state
+      }
     }
-
-    document.removeEventListener('click', this._clickOutsideHandler)
-    document.removeEventListener('keydown', this._escapeHandler)
   }
 
   _removeDropdown() {
     this._closeDropdown()
     if (this._dropdown) {
+      this._dropdown.removeEventListener('beforetoggle', this._popoverToggleHandler)
       this._dropdown.remove()
       this._dropdown = null
     }
+    if (this._ellipsisTrigger) {
+      delete this._ellipsisTrigger.dataset.state
+    }
   }
 
   _buildDropdownContent() {
@@ -203,19 +215,16 @@ export default class extends Controller {
   }
 
   _positionDropdown() {
+    // Modern browsers position the popover declaratively via anchor CSS
+    if (this.constructor.supportsAnchorPositioning) return
     if (!this._dropdown || !this._ellipsisTrigger) return
 
     const rect = this._ellipsisTrigger.getBoundingClientRect()
+    this._dropdown.style.position = 'fixed'
     this._dropdown.style.top = `${rect.bottom + 4}px`
     this._dropdown.style.left = `${rect.left}px`
   }
 
-  _handleEscape(event) {
-    if (event.key === 'Escape') {
-      this._closeDropdown()
-    }
-  }
-
   _teardown() {
     this._removeDropdown()
     this._hiddenLinks = null

data/app/javascript/controllers/combobox_controller.js

@@ -72,7 +72,16 @@ export default class extends Controller {
     }
   }
 
+  // True when CSS anchor positioning (combobox.css) places the popover
+  static supportsAnchorPositioning =
+    typeof CSS !== "undefined" &&
+    CSS.supports("anchor-name: --a") &&
+    CSS.supports("position-area: block-end")
+
   positionPopover() {
+    // Modern browsers position the popover declaratively via anchor CSS
+    if (this.constructor.supportsAnchorPositioning) return
+
     if (!this.hasTriggerTarget || !this.hasContentTarget) return
 
     const trigger = this.triggerTarget

data/app/javascript/controllers/drawer_controller.js

@@ -0,0 +1,287 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Drawer Controller
+ *
+ * Manages drawer state (slide-out panel), keyboard shortcuts, and persistence.
+ * Works with drawer_trigger_controller via Stimulus outlets.
+ *
+ * @example
+ * <div data-controller="drawer" data-outlet="drawer">
+ *   <!-- drawer content -->
+ * </div>
+ */
+export default class extends Controller {
+  static values = {
+    open: { type: Boolean, default: false },
+    defaultOpen: { type: Boolean, default: false },
+    cookieName: { type: String, default: "drawer_state" },
+    cookieMaxAge: { type: Number, default: 60 * 60 * 24 * 365 },
+    keyboardShortcut: { type: String, default: "d" }
+  }
+
+  static targets = ["drawer", "container", "backdrop", "panel"]
+
+  initialize() {
+    const cookieValue = this.getCookie(this.cookieNameValue)
+    this.openValue = cookieValue !== null
+      ? cookieValue === "true"
+      : this.defaultOpenValue
+
+    this._morphing = false
+  }
+
+  connect() {
+    this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
+    window.addEventListener("resize", this.resizeHandler)
+
+    this.boundTeardown = this.teardown.bind(this)
+    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
+    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:morph", this.boundHandleMorph)
+
+    this.updateStateImmediate()
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
+    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:morph", this.boundHandleMorph)
+  }
+
+  // ============================================================================
+  // Turbo Cache Teardown
+  // ============================================================================
+
+  teardown() {
+    this.openValue = false
+
+    if (this.hasBackdropTarget) {
+      this.backdropTarget.setAttribute("data-state", "hidden")
+      this.backdropTarget.classList.add("hidden")
+    }
+
+    this.unlockScroll()
+  }
+
+  beforeMorphElement(event) {
+    if (event.target === this.element) {
+      this._morphing = true
+    }
+  }
+
+  handleMorph() {
+    const cookieValue = this.getCookie(this.cookieNameValue)
+
+    if (cookieValue !== null) {
+      this.openValue = cookieValue === "true"
+    }
+
+    if (this.hasDrawerTarget) {
+      this.drawerTarget.classList.remove("drawer-loading")
+    }
+
+    this.updateState()
+    this._morphing = false
+  }
+
+  // ============================================================================
+  // Keyboard Shortcut Actions
+  // ============================================================================
+
+  toggleWithKeyboard(event) {
+    this.toggle()
+  }
+
+  closeOnEscape(event) {
+    if (this.openValue) {
+      this.close()
+    }
+  }
+
+  // ============================================================================
+  // State Management
+  // ============================================================================
+
+  openValueChanged(new_value, old_value) {
+    if (new_value === old_value) return
+    if (this._morphing) return
+
+    this.updateState()
+    this.persistState()
+    this.dispatchStateChange()
+
+    // Only manage focus on user-driven changes, not the initial sync
+    if (old_value !== undefined) {
+      this.manageFocus(new_value)
+    }
+  }
+
+  manageFocus(isOpen) {
+    if (!this.hasPanelTarget) return
+
+    if (isOpen) {
+      this._previouslyFocused = document.activeElement
+      this.panelTarget.focus()
+    } else {
+      if (this._previouslyFocused?.isConnected) {
+        this._previouslyFocused.focus()
+      }
+      this._previouslyFocused = null
+    }
+  }
+
+  updateState() {
+    if (!this.hasDrawerTarget) return
+
+    const isOpen = this.openValue
+    const state = isOpen ? "open" : "closed"
+
+    this.drawerTarget.setAttribute("data-state", state)
+
+    if (this.hasBackdropTarget) {
+      const backdropState = isOpen ? "visible" : "hidden"
+      this.backdropTarget.setAttribute("data-state", backdropState)
+
+      if (backdropState === "visible") {
+        this.backdropTarget.classList.remove("hidden")
+      } else {
+        setTimeout(() => {
+          if (this.backdropTarget.getAttribute("data-state") === "hidden") {
+            this.backdropTarget.classList.add("hidden")
+          }
+        }, 300)
+      }
+    }
+
+    if (this.hasPanelTarget) {
+      // The closed panel stays in the DOM: hide it from AT and block focus
+      if (isOpen) {
+        this.panelTarget.removeAttribute("aria-hidden")
+        this.panelTarget.removeAttribute("inert")
+      } else {
+        this.panelTarget.setAttribute("aria-hidden", "true")
+        this.panelTarget.setAttribute("inert", "")
+      }
+    }
+
+    if (isOpen) {
+      this.lockScroll()
+    } else {
+      this.unlockScroll()
+    }
+  }
+
+  updateStateImmediate() {
+    if (!this.hasDrawerTarget) return
+
+    this.updateState()
+
+    requestAnimationFrame(() => {
+      this.drawerTarget.classList.remove("drawer-loading")
+    })
+  }
+
+  // ============================================================================
+  // Public Actions
+  // ============================================================================
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  open() {
+    this.openValue = true
+  }
+
+  close() {
+    this.openValue = false
+  }
+
+  backdropClick(event) {
+    if (this.openValue) {
+      this.close()
+    }
+  }
+
+  // ============================================================================
+  // Persistence
+  // ============================================================================
+
+  persistState() {
+    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
+  // ============================================================================
+
+  // Styling lives in drawer.css (body[data-maquina-scroll-locked]); the
+  // controller only records the scroll offset and flips the attribute
+  lockScroll() {
+    this.scrollPosition = window.pageYOffset
+    document.body.style.setProperty("--maquina-scroll-lock-top", `-${this.scrollPosition}px`)
+    document.body.setAttribute("data-maquina-scroll-locked", "")
+  }
+
+  unlockScroll() {
+    document.body.removeAttribute("data-maquina-scroll-locked")
+    document.body.style.removeProperty("--maquina-scroll-lock-top")
+    if (this.scrollPosition !== undefined) {
+      window.scrollTo(0, this.scrollPosition)
+    }
+  }
+
+  // ============================================================================
+  // Events
+  // ============================================================================
+
+  dispatchStateChange() {
+    this.dispatch("stateChanged", {
+      detail: {
+        open: this.openValue,
+        state: this.openValue ? "open" : "closed"
+      },
+      bubbles: true
+    })
+  }
+
+  // ============================================================================
+  // Utilities
+  // ============================================================================
+
+  checkScreenSize() {
+  }
+
+  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/drawer_trigger_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Drawer Trigger Controller
+ *
+ * Triggers drawer toggle via Stimulus outlets and mirrors the drawer's
+ * state on the trigger (aria-expanded, aria-controls).
+ * Can be placed anywhere on the page - finds drawer via outlet selector.
+ *
+ * @example
+ * <button
+ *   data-controller="drawer-trigger"
+ *   data-action="click->drawer-trigger#triggerClick"
+ *   data-drawer-trigger-drawer-outlet="[data-outlet='drawer']"
+ * >
+ *   Toggle
+ * </button>
+ */
+export default class extends Controller {
+  static outlets = ["drawer"]
+
+  connect() {
+    this.handleStateChanged = this.handleStateChanged.bind(this)
+    window.addEventListener("drawer:stateChanged", this.handleStateChanged)
+  }
+
+  disconnect() {
+    window.removeEventListener("drawer:stateChanged", this.handleStateChanged)
+  }
+
+  drawerOutletConnected(outlet) {
+    this.element.setAttribute("aria-haspopup", "dialog")
+    this.syncExpanded(outlet.openValue)
+
+    if (outlet.hasPanelTarget && outlet.panelTarget.id) {
+      this.element.setAttribute("aria-controls", outlet.panelTarget.id)
+    }
+  }
+
+  triggerClick() {
+    if (this.hasDrawerOutlet) {
+      this.drawerOutlets.forEach(outlet => {
+        outlet.toggle()
+      })
+    }
+  }
+
+  handleStateChanged(event) {
+    if (!this.hasDrawerOutlet) return
+    if (!this.drawerOutletElements.includes(event.target)) return
+
+    this.syncExpanded(event.detail.open)
+  }
+
+  syncExpanded(open) {
+    this.element.setAttribute("aria-expanded", open ? "true" : "false")
+  }
+}