maquina-components 0.1.1 → 0.2.0

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

data/app/javascript/controllers/toggle_group_controller.js

@@ -0,0 +1,178 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Group Controller
+ * 
+ * Manages a group of toggle buttons with single or multiple selection.
+ * 
+ * @example Single selection
+ *   <div data-controller="toggle-group" 
+ *        data-toggle-group-type-value="single"
+ *        data-toggle-group-selected-value='["bold"]'>
+ *     <button data-toggle-group-target="item" data-value="bold">Bold</button>
+ *     <button data-toggle-group-target="item" data-value="italic">Italic</button>
+ *   </div>
+ * 
+ * @example Multiple selection
+ *   <div data-controller="toggle-group" 
+ *        data-toggle-group-type-value="multiple"
+ *        data-toggle-group-selected-value='["bold", "italic"]'>
+ *     ...
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["item"]
+
+  static values = {
+    type: { type: String, default: "single" },
+    selected: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.syncItemStates()
+  }
+
+  /**
+   * Toggle an item's state
+   * @param {Event} event - Click event from toggle item
+   */
+  toggle(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    const value = item.dataset.value
+    const isPressed = item.dataset.state === "on"
+
+    if (this.typeValue === "single") {
+      if (isPressed) {
+        this.selectedValue = []
+      } else {
+        this.selectedValue = [value]
+      }
+    } else {
+      if (isPressed) {
+        this.selectedValue = this.selectedValue.filter(v => v !== value)
+      } else {
+        this.selectedValue = [...this.selectedValue, value]
+      }
+    }
+
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Handle keyboard navigation
+   * @param {KeyboardEvent} event
+   */
+  handleKeydown(event) {
+    const item = event.currentTarget
+    const items = this.itemTargets.filter(i => !i.disabled)
+    const currentIndex = items.indexOf(item)
+
+    let nextIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault()
+        nextIndex = (currentIndex + 1) % items.length
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault()
+        nextIndex = (currentIndex - 1 + items.length) % items.length
+        break
+      case "Home":
+        event.preventDefault()
+        nextIndex = 0
+        break
+      case "End":
+        event.preventDefault()
+        nextIndex = items.length - 1
+        break
+      case " ":
+      case "Enter":
+        return
+      default:
+        return
+    }
+
+    items[nextIndex]?.focus()
+  }
+
+  /**
+   * Sync visual states with selectedValue
+   */
+  syncItemStates() {
+    this.itemTargets.forEach(item => {
+      const value = item.dataset.value
+      const isSelected = this.selectedValue.includes(value)
+
+      item.dataset.state = isSelected ? "on" : "off"
+      item.setAttribute("aria-pressed", isSelected)
+    })
+  }
+
+  /**
+   * Dispatch change event
+   */
+  dispatchChange() {
+    const detail = {
+      type: this.typeValue,
+      value: this.typeValue === "single"
+        ? (this.selectedValue[0] || null)
+        : this.selectedValue
+    }
+
+    this.dispatch("change", { detail })
+
+    this.element.dispatchEvent(new CustomEvent("toggle-group:change", {
+      bubbles: true,
+      detail
+    }))
+  }
+
+  /**
+   * Programmatically select a value
+   * @param {string} value - Value to select
+   */
+  select(value) {
+    if (this.typeValue === "single") {
+      this.selectedValue = [value]
+    } else if (!this.selectedValue.includes(value)) {
+      this.selectedValue = [...this.selectedValue, value]
+    }
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Programmatically deselect a value
+   * @param {string} value - Value to deselect
+   */
+  deselect(value) {
+    this.selectedValue = this.selectedValue.filter(v => v !== value)
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Clear all selections
+   */
+  clear() {
+    this.selectedValue = []
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Get current value(s)
+   * @returns {string|string[]|null}
+   */
+  getValue() {
+    return this.typeValue === "single"
+      ? (this.selectedValue[0] || null)
+      : this.selectedValue
+  }
+}

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

@@ -0,0 +1,12 @@
+<%# locals: (variant: :default, icon: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :alert,
+    variant: variant,
+    has_icon: icon.present? || nil
+  ).compact %>
+
+<%= content_tag :div, role: :alert, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= icon_for(icon) if icon.present? %>
+
+  <div><%= yield %></div>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# locals: (variant: :default, size: :md, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :badge,
+    variant: variant,
+    size: size
+  ) %>
+
+<%= content_tag :span, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,16 @@
+<%# locals: (css_classes: "", responsive: false, **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :breadcrumbs
+  )
+  
+  if responsive
+    merged_data[:controller] = "breadcrumb"
+  end %>
+
+<nav
+  aria-label="Breadcrumb"
+  class="<%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <%= yield %>
+</nav>

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

@@ -0,0 +1,6 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(component: :card) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,25 @@
+<div
+  data-menu-button-target="content"
+  class="
+    absolute z-10 overflow-hidden border border-border p-1 text-popover-foreground
+    min-w-56 max-w-56 content-fit shadow-md bottom-full rounded-lg hidden
+    peer-data-[state=closed]/menu-button:animate-out
+    peer-data-[state=closed]/menu-button:fade-out-0
+    peer-data-[state=open]/menu-button:fade-in-0
+    peer-data-[state=closed]/menu-button:zoom-out-95
+    peer-data-[state=open]/menu-button:zoom-in-95
+    peer-data-[side=bottom]/menu-button:slide-in-from-top-2
+    peer-data-[side=left]/menu-button:slide-in-from-right-2
+    peer-data-[side=right]/menu-button:slide-in-from-left-2
+    peer-data-[side=top]/menu-button:slide-in-from-bottom-2
+  "
+  role="menu"
+  aria-orientation="vertical"
+  aria-labelledby="menu-button"
+  tabindex="-1"
+>
+  <%= yield %>
+</div>
+<!--
+<div role="separator" aria-orientation="horizontal" class="separator"></div>
+-->

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: "dropdown-menu",
+    controller: "dropdown-menu"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# locals: (variant: :default, size: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :empty,
+    variant: variant,
+    size: size
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :header
+  ) %>
+
+<%= content_tag :header, class: css_classes.presence, data: merged_data, **html_options do %>
+  <div data-header-part="inner"><%= yield %></div>
+<% end %>

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

@@ -0,0 +1,44 @@
+<%# locals: (title: "", subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", submenu: false) %>
+
+<ul class="flex w-full min-w-0 flex-col gap-1">
+  <li class="group/menu-item relative" data-controller="menu-button">
+    <button
+      data-state="closed"
+      class="
+        peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2
+        text-left outline-none ring-sidebar-ring transition-[width,height,padding]
+        focus-visible:ring-2 active:bg-sidebar-accent
+        active:text-sidebar-accent-foreground disabled:pointer-events-none
+        disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50
+        data-[state=open]:bg-sidebar-accent
+        data-[state=open]text-sidebar-accent-foreground
+        group-data-[collapsible=icon]:size-8! [&>span:last-child]:truncate
+        [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent
+        hover:text-sidebar-accent-foreground h-12 text-sm
+        group-data-[collapsible=icon]:p-0!
+      ", data-action="menu-button#toggle", data-menu-button-target="button" }
+    >
+        <% if icon.present? %>
+          <%= image_tag icon, alt: "maquina", class: "#{icon_classes}" %>
+        <% elsif text_icon.present? %>
+          <div
+            class="
+              flex aspect-square size-8 items-center justify-center rounded-lg
+              bg-sidebar-primary text-sidebar-primary-foreground
+            "
+          >
+              <span class="<%= icon_classes %>"><%= text_icon %></span>
+          </div>
+        <% end %>
+      <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-semibold"><%= title %></span>
+        <% if subtitle.present? %>
+          <span class="truncate text-xs"><%= subtitle %></span>
+        <% end %>
+      </div>
+      <%= icon_for(:chevron_up_down, class: "ml-auto") if submenu %>
+    </button>
+
+    <%= yield %>
+  </li>
+</ul>

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

@@ -0,0 +1,13 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :pagination
+  ) %>
+
+<%= content_tag :nav,
+      role: "navigation",
+      "aria-label": html_options.delete(:"aria-label") || "Pagination",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <%= yield %>
+<% end %>