maquina-components 0.1.1 → 0.2.0

data/app/helpers/maquina_components/toggle_group_helper.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module MaquinaComponents
+  # Toggle Group Helper
+  #
+  # Provides convenient methods for creating toggle group components.
+  #
+  # @example Using partials directly
+  #   <%%= render "components/toggle_group", type: :single, variant: :outline do %>
+  #     <%%= render "components/toggle_group/item", value: "bold", aria_label: "Toggle bold" do %>
+  #       <%%= icon_for :bold %>
+  #     <%% end %>
+  #   <%% end %>
+  #
+  # @example Using the helper with builder
+  #   <%%= toggle_group type: :multiple, variant: :outline do |group| %>
+  #     <%% group.item value: "bold", icon: :bold, aria_label: "Toggle bold" %>
+  #     <%% group.item value: "italic", icon: :italic, aria_label: "Toggle italic" %>
+  #   <%% end %>
+  #
+  # @example Simple data-driven helper
+  #   <%%= toggle_group_simple type: :single, items: [
+  #     { value: "left", icon: :align_left, aria_label: "Align left" },
+  #     { value: "center", icon: :align_center, aria_label: "Align center" },
+  #     { value: "right", icon: :align_right, aria_label: "Align right" }
+  #   ] %>
+  #
+  module ToggleGroupHelper
+    # Renders a toggle group with builder pattern
+    #
+    # @param type [Symbol] Selection mode (:single, :multiple)
+    # @param variant [Symbol] Visual style (:default, :outline)
+    # @param size [Symbol] Size variant (:default, :sm, :lg)
+    # @param value [String, Array, nil] Initially selected value(s)
+    # @param disabled [Boolean] Disable all items
+    # @param css_classes [String] Additional CSS classes
+    # @param html_options [Hash] Additional HTML attributes
+    # @yield [ToggleGroupBuilder] Builder for adding items
+    # @return [String] Rendered HTML
+    def toggle_group(type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options, &block)
+      builder = ToggleGroupBuilder.new(self, type: type, variant: variant, size: size, value: value, disabled: disabled)
+
+      if block && block.arity == 1
+        capture { yield(builder) }
+      end
+
+      render "components/toggle_group",
+        type: type,
+        variant: variant,
+        size: size,
+        value: value,
+        disabled: disabled,
+        css_classes: css_classes,
+        **html_options do
+        if block && block.arity == 1
+          builder.to_html
+        elsif block
+          capture(&block)
+        end
+      end
+    end
+
+    # Renders a simple data-driven toggle group
+    #
+    # @param type [Symbol] Selection mode (:single, :multiple)
+    # @param items [Array<Hash>] Array of item configurations
+    # @param variant [Symbol] Visual style
+    # @param size [Symbol] Size variant
+    # @param value [String, Array, nil] Initially selected value(s)
+    # @return [String] Rendered HTML
+    def toggle_group_simple(items:, type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options)
+      selected_values = normalize_value(value)
+
+      render "components/toggle_group",
+        type: type,
+        variant: variant,
+        size: size,
+        value: value,
+        disabled: disabled,
+        css_classes: css_classes,
+        **html_options do
+        safe_join(items.map do |item|
+          item_value = item[:value].to_s
+          is_pressed = selected_values.include?(item_value)
+
+          render "components/toggle_group/item",
+            value: item_value,
+            pressed: is_pressed,
+            disabled: item[:disabled] || disabled,
+            aria_label: item[:aria_label] do
+            parts = []
+            parts << icon_for(item[:icon]) if item[:icon] && respond_to?(:icon_for)
+            parts << item[:label] if item[:label]
+            safe_join(parts)
+          end
+        end)
+      end
+    end
+
+    # Builder class for toggle group
+    class ToggleGroupBuilder
+      def initialize(view_context, type:, variant:, size:, value:, disabled:)
+        @view = view_context
+        @type = type
+        @variant = variant
+        @size = size
+        @value = value
+        @disabled = disabled
+        @items = []
+        @selected_values = normalize_value(value)
+      end
+
+      # Add an item to the toggle group
+      def item(value:, label: nil, icon: nil, disabled: false, aria_label: nil, **options, &block)
+        is_pressed = @selected_values.include?(value.to_s)
+
+        @items << {
+          value: value,
+          label: label,
+          icon: icon,
+          disabled: disabled || @disabled,
+          aria_label: aria_label,
+          pressed: is_pressed,
+          options: options,
+          block: block
+        }
+      end
+
+      def to_html
+        @view.safe_join(@items.map { |item| render_item(item) })
+      end
+
+      private
+
+      def render_item(item)
+        @view.render "components/toggle_group/item",
+          value: item[:value],
+          pressed: item[:pressed],
+          disabled: item[:disabled],
+          aria_label: item[:aria_label],
+          **item[:options] do
+          if item[:block]
+            @view.capture(&item[:block])
+          else
+            parts = []
+            parts << @view.icon_for(item[:icon]) if item[:icon] && @view.respond_to?(:icon_for)
+            parts << item[:label] if item[:label]
+            @view.safe_join(parts)
+          end
+        end
+      end
+
+      def normalize_value(value)
+        case value
+        when Array then value.map(&:to_s)
+        when nil then []
+        else [value.to_s]
+        end
+      end
+    end
+
+    private
+
+    def normalize_value(value)
+      case value
+      when Array then value.map(&:to_s)
+      when nil then []
+      else [value.to_s]
+      end
+    end
+  end
+end

data/app/javascript/controllers/breadcrumb_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "ellipsis", "ellipsisSeparator"]
+
+  connect() {
+    this.windowResizeHandler = this.handleResize.bind(this)
+    window.addEventListener('resize', this.windowResizeHandler)
+    this.handleResize()
+  }
+
+  disconnect() {
+    window.removeEventListener('resize', this.windowResizeHandler)
+  }
+
+  handleResize() {
+    // Get visible width of container
+    const containerWidth = this.element.clientWidth
+    const items = this.itemTargets
+    const ellipsis = this.hasEllipsisTarget ? this.ellipsisTarget : null
+    const ellipsisSeparator = this.hasEllipsisSeparatorTarget ? this.ellipsisSeparatorTarget : null
+
+    // Always show first and last items
+    if (items.length < 3 || !ellipsis) {
+      return; // Not enough items to collapse or no ellipsis element
+    }
+
+    // Reset visibility
+    if (ellipsis) ellipsis.classList.add('hidden')
+    if (ellipsisSeparator) ellipsisSeparator.classList.add('hidden')
+
+    items.forEach(item => {
+      item.classList.remove('hidden')
+    })
+
+    // Check if we need to collapse items
+    let totalWidth = 0
+    items.forEach(item => {
+      totalWidth += item.offsetWidth
+    })
+
+    if (totalWidth > containerWidth) {
+      // We need to collapse items - show ellipsis
+      if (ellipsis) ellipsis.classList.remove('hidden')
+      if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
+
+      // Start hiding middle items until we fit
+      for (let i = items.length - 2; i > 0; i--) {
+        if (i !== 0 && i !== items.length - 1) {
+          items[i].classList.add('hidden')
+
+          // Recalculate total width
+          totalWidth = 0
+
+          if (ellipsis) totalWidth += ellipsis.offsetWidth
+          if (ellipsisSeparator) totalWidth += ellipsisSeparator.offsetWidth
+
+          items.forEach(item => {
+            if (!item.classList.contains('hidden')) {
+              totalWidth += item.offsetWidth
+            }
+          })
+
+          if (totalWidth <= containerWidth) {
+            break
+          }
+        }
+      }
+    }
+  }
+}

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