fernandes-ui 0.1.0

data/app/javascript/ui/controllers/carousel_controller.js

@@ -0,0 +1,191 @@
+import { Controller } from "@hotwired/stimulus"
+import EmblaCarousel from "embla-carousel"
+import Autoplay from "embla-carousel-autoplay"
+
+export default class extends Controller {
+  static targets = ["viewport", "prevButton", "nextButton", "container"]
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    opts: { type: Object, default: {} },
+    plugins: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.initializeCarousel()
+  }
+
+  disconnect() {
+    if (this.emblaApi) {
+      this.emblaApi.destroy()
+    }
+  }
+
+  initializeCarousel() {
+    if (!this.hasViewportTarget) {
+      console.error("Carousel: viewport target not found")
+      return
+    }
+
+    // Apply orientation classes to the flex container
+    this.applyOrientationClasses()
+
+    // Merge default options with user options
+    const options = {
+      ...this.optsValue,
+      axis: this.orientationValue === "vertical" ? "y" : "x"
+    }
+
+    // Process plugins
+    const plugins = this.buildPlugins()
+
+    // Initialize Embla Carousel with plugins
+    this.emblaApi = EmblaCarousel(this.viewportTarget, options, plugins)
+
+    // Setup button states
+    this.setupButtonStates()
+
+    // Listen for carousel events
+    this.emblaApi.on("select", () => this.updateButtonStates())
+    this.emblaApi.on("reInit", () => this.updateButtonStates())
+
+    // Dispatch custom event with API
+    this.element.dispatchEvent(new CustomEvent("carousel:init", {
+      detail: { api: this.emblaApi },
+      bubbles: true
+    }))
+  }
+
+  buildPlugins() {
+    const plugins = []
+
+    // Process plugin configurations from pluginsValue
+    this.pluginsValue.forEach(pluginConfig => {
+      if (pluginConfig.name === "autoplay") {
+        plugins.push(Autoplay(pluginConfig.options || {}))
+      }
+      // Add more plugins here as needed
+    })
+
+    return plugins
+  }
+
+  applyOrientationClasses() {
+    if (!this.hasContainerTarget) {
+      console.error("Carousel: container target not found")
+      return
+    }
+
+    // Find all carousel items
+    const items = this.element.querySelectorAll('[role="group"]')
+
+    if (this.orientationValue === "vertical") {
+      // Add vertical flex direction
+      this.containerTarget.classList.add("flex-col")
+
+      // Remove horizontal margin from container (user may have provided vertical margin like -mt-1)
+      this.containerTarget.classList.remove("-ml-4", "-ml-1", "-ml-2", "-ml-3")
+
+      // Remove horizontal padding from items (keep vertical padding from user classes)
+      items.forEach(item => {
+        item.classList.remove("pl-4", "pl-1", "pl-2", "pl-3")
+      })
+
+      // Adjust buttons for vertical layout (with border)
+      if (this.hasPrevButtonTarget) {
+        this.prevButtonTarget.classList.remove("top-1/2", "-translate-y-1/2", "-left-12", "rounded-lg", "border-0")
+        this.prevButtonTarget.classList.add("left-1/2", "-translate-x-1/2", "-top-12", "rotate-90", "rounded-full", "border", "border-input")
+      }
+      if (this.hasNextButtonTarget) {
+        this.nextButtonTarget.classList.remove("top-1/2", "-translate-y-1/2", "-right-12", "rounded-lg", "border-0")
+        this.nextButtonTarget.classList.add("left-1/2", "-translate-x-1/2", "-bottom-12", "rotate-90", "rounded-full", "border", "border-input")
+      }
+    } else {
+      // Remove vertical flex direction (horizontal is default)
+      this.containerTarget.classList.remove("flex-col")
+
+      // Add horizontal padding to items if no padding class present
+      items.forEach(item => {
+        const hasPadding = Array.from(item.classList).some(cls => /^pl-\d+$/.test(cls))
+        if (!hasPadding) {
+          item.classList.add("pl-4")
+        }
+      })
+
+      // Ensure buttons have horizontal positioning (without border)
+      if (this.hasPrevButtonTarget) {
+        this.prevButtonTarget.classList.remove("left-1/2", "-translate-x-1/2", "-top-12", "rotate-90", "rounded-full", "border", "border-input")
+        if (!this.prevButtonTarget.classList.contains("top-1/2")) {
+          this.prevButtonTarget.classList.add("top-1/2", "-translate-y-1/2", "-left-12", "rounded-lg", "border-0")
+        }
+      }
+      if (this.hasNextButtonTarget) {
+        this.nextButtonTarget.classList.remove("left-1/2", "-translate-x-1/2", "-bottom-12", "rotate-90", "rounded-full", "border", "border-input")
+        if (!this.nextButtonTarget.classList.contains("top-1/2")) {
+          this.nextButtonTarget.classList.add("top-1/2", "-translate-y-1/2", "-right-12", "rounded-lg", "border-0")
+        }
+      }
+    }
+  }
+
+  setupButtonStates() {
+    this.updateButtonStates()
+  }
+
+  updateButtonStates() {
+    if (!this.emblaApi) return
+
+    // Update previous button state
+    if (this.hasPrevButtonTarget) {
+      const canScrollPrev = this.emblaApi.canScrollPrev()
+      this.prevButtonTarget.disabled = !canScrollPrev
+      this.prevButtonTarget.classList.toggle("opacity-50", !canScrollPrev)
+      this.prevButtonTarget.classList.toggle("cursor-not-allowed", !canScrollPrev)
+    }
+
+    // Update next button state
+    if (this.hasNextButtonTarget) {
+      const canScrollNext = this.emblaApi.canScrollNext()
+      this.nextButtonTarget.disabled = !canScrollNext
+      this.nextButtonTarget.classList.toggle("opacity-50", !canScrollNext)
+      this.nextButtonTarget.classList.toggle("cursor-not-allowed", !canScrollNext)
+    }
+  }
+
+  scrollPrev() {
+    if (this.emblaApi) {
+      this.emblaApi.scrollPrev()
+    }
+  }
+
+  scrollNext() {
+    if (this.emblaApi) {
+      this.emblaApi.scrollNext()
+    }
+  }
+
+  // Public method to get the Embla API
+  getApi() {
+    return this.emblaApi
+  }
+
+  // Handle keyboard navigation
+  keydown(event) {
+    if (this.orientationValue === "horizontal") {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        this.scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        this.scrollNext()
+      }
+    } else {
+      if (event.key === "ArrowUp") {
+        event.preventDefault()
+        this.scrollPrev()
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault()
+        this.scrollNext()
+      }
+    }
+  }
+}

data/app/javascript/ui/controllers/checkbox_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+import { syncCheckedState } from "../utils/state-manager.js"
+
+// Checkbox controller - syncs checked state with data-state attribute
+// This allows CSS selectors like data-[state=checked]:bg-blue-600 to work
+export default class extends Controller {
+  connect() {
+    this.updateState()
+
+    // Listen for changes to update data-state
+    this.boundHandleChange = this.handleChange.bind(this)
+    this.element.addEventListener('change', this.boundHandleChange)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('change', this.boundHandleChange)
+  }
+
+  handleChange() {
+    this.updateState()
+  }
+
+  updateState() {
+    // Sync checked state with data-state and aria-checked attributes
+    syncCheckedState(this.element, this.element.checked)
+  }
+}

data/app/javascript/ui/controllers/collapsible_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus"
+import { syncExpandedState } from "../utils/state-manager.js"
+
+// Collapsible controller for expandable/collapsible content sections
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.updateState(this.openValue, false)
+  }
+
+  toggle(event) {
+    if (this.disabledValue) return
+
+    event.preventDefault()
+    this.openValue = !this.openValue
+  }
+
+  openValueChanged() {
+    this.updateState(this.openValue, true)
+  }
+
+  updateState(isOpen, animate = true) {
+    const state = isOpen ? "open" : "closed"
+
+    // Update root element state
+    this.element.dataset.state = state
+
+    // Update trigger and content using utility
+    syncExpandedState(
+      this.hasTriggerTarget ? this.triggerTarget : null,
+      null, // Don't use utility for content - we have custom height logic
+      isOpen
+    )
+
+    // Update content with custom height animation
+    if (this.hasContentTarget) {
+      const content = this.contentTarget
+      content.dataset.state = state
+
+      if (isOpen) {
+        // Opening: remove hidden and set height
+        content.removeAttribute("hidden")
+        content.style.height = `${content.scrollHeight}px`
+      } else {
+        // Closing: animate to 0, then add hidden after transition
+        if (animate) {
+          content.style.height = "0px"
+          content.addEventListener("transitionend", () => {
+            if (content.dataset.state === "closed") {
+              content.setAttribute("hidden", "")
+            }
+          }, { once: true })
+        } else {
+          content.style.height = "0px"
+          content.setAttribute("hidden", "")
+        }
+      }
+    }
+  }
+}

data/app/javascript/ui/controllers/combobox_controller.js

@@ -0,0 +1,149 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Combobox controller for managing selection state
+// Works with Command component to provide combobox functionality:
+// - Maintains selected value state
+// - Updates text target when item is selected
+// - Controls check icon visibility (opacity-0/100)
+// - Closes container (Popover/Drawer) after selection
+// - Auto-focuses search input when opened
+//
+// This controller should be attached to the container element (Popover/Drawer/DropdownMenu)
+// and listens for command:select events from Command items inside
+export default class extends Controller {
+  static targets = ["text", "item"]
+  static values = {
+    value: String  // Currently selected value
+  }
+
+  connect() {
+    // Listen for command:select event from Command items
+    this.boundHandleSelect = this.handleSelect.bind(this)
+    this.element.addEventListener('command:select', this.boundHandleSelect)
+
+    // Listen for popover/drawer open events to focus search input
+    this.boundHandleOpen = this.handleOpen.bind(this)
+    this.element.addEventListener('popover:show', this.boundHandleOpen)
+    this.element.addEventListener('drawer:open', this.boundHandleOpen)
+
+    // Listen for popover/drawer close events to clear search input
+    this.boundHandleClose = this.handleClose.bind(this)
+    this.element.addEventListener('popover:hide', this.boundHandleClose)
+    this.element.addEventListener('drawer:close', this.boundHandleClose)
+
+    // Apply initial state if value is set
+    if (this.valueValue) {
+      this.updateCheckIcons()
+    }
+  }
+
+  disconnect() {
+    this.element.removeEventListener('command:select', this.boundHandleSelect)
+    this.element.removeEventListener('popover:show', this.boundHandleOpen)
+    this.element.removeEventListener('drawer:open', this.boundHandleOpen)
+    this.element.removeEventListener('popover:hide', this.boundHandleClose)
+    this.element.removeEventListener('drawer:close', this.boundHandleClose)
+  }
+
+  // Focus the search input when the combobox opens
+  handleOpen() {
+    // Use requestAnimationFrame to ensure the content is visible
+    requestAnimationFrame(() => {
+      const input = this.element.querySelector('[data-slot="command-input"]')
+      if (input) {
+        input.focus()
+      }
+    })
+  }
+
+  // Clear the search input when the combobox closes
+  handleClose() {
+    const input = this.element.querySelector('[data-slot="command-input"]')
+    if (input && input.value) {
+      input.value = ''
+      // Dispatch input event to trigger Command filter and show all options
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+
+  // Handle when a Command item is selected
+  handleSelect(event) {
+    const { value, item } = event.detail
+
+    // Update selected value
+    this.valueValue = value
+
+    // Update text target (span inside button) with selected item's label
+    if (this.hasTextTarget) {
+      const label = item.querySelector('span')?.textContent || value
+      this.textTarget.textContent = label
+    }
+
+    // Update check icon visibility for all items
+    this.updateCheckIcons()
+
+    // Close the container (Popover/Drawer)
+    this.closeContainer()
+  }
+
+  // Update check icon visibility based on selected value
+  // Items matching the selected value get opacity-100, others get opacity-0
+  updateCheckIcons() {
+    this.itemTargets.forEach(item => {
+      const itemValue = item.dataset.value
+      const checkIcon = item.querySelector('svg.ml-auto')
+
+      if (checkIcon) {
+        if (itemValue === this.valueValue) {
+          checkIcon.classList.remove('opacity-0')
+          checkIcon.classList.add('opacity-100')
+        } else {
+          checkIcon.classList.remove('opacity-100')
+          checkIcon.classList.add('opacity-0')
+        }
+      }
+    })
+  }
+
+  // Close the container (Popover, Drawer, or DropdownMenu)
+  closeContainer() {
+    // Try to find and close Popover controller
+    const popoverController = this.application.getControllerForElementAndIdentifier(
+      this.element,
+      'ui--popover'
+    )
+    if (popoverController) {
+      popoverController.hide()
+      return
+    }
+
+    // Try to find and close Drawer controller (on this element or child)
+    let drawerController = this.application.getControllerForElementAndIdentifier(
+      this.element,
+      'ui--drawer'
+    )
+    if (!drawerController) {
+      // Search for drawer in child elements
+      const drawerElement = this.element.querySelector('[data-controller~="ui--drawer"]')
+      if (drawerElement) {
+        drawerController = this.application.getControllerForElementAndIdentifier(
+          drawerElement,
+          'ui--drawer'
+        )
+      }
+    }
+    if (drawerController) {
+      drawerController.hide()
+      return
+    }
+
+    // Try to find and close DropdownMenu controller
+    const dropdownController = this.application.getControllerForElementAndIdentifier(
+      this.element,
+      'ui--dropdown'
+    )
+    if (dropdownController) {
+      dropdownController.close()
+    }
+  }
+}

data/app/javascript/ui/controllers/command_controller.js

@@ -0,0 +1,199 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Command controller for command palette functionality
+// Implements filtering, keyboard navigation, and item selection
+export default class extends Controller {
+  static targets = ["input", "list", "item", "group", "empty"]
+  static values = {
+    loop: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.selectedIndex = -1
+    this.updateVisibility()
+
+    // Listen for popover/drawer show events to focus input and select first item
+    this.element.addEventListener('popover:show', this.handleShow.bind(this))
+    this.element.addEventListener('drawer:show', this.handleShow.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener('popover:show', this.handleShow.bind(this))
+    this.element.removeEventListener('drawer:show', this.handleShow.bind(this))
+  }
+
+  handleShow() {
+    // Focus the input when popover/drawer opens
+    if (this.hasInputTarget) {
+      this.inputTarget.focus()
+    }
+
+    // Select first visible item
+    const visibleItems = this.visibleItems
+    if (visibleItems.length > 0) {
+      this.selectedIndex = 0
+      this.updateSelection()
+    }
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase().trim()
+    let hasVisibleItems = false
+
+    this.itemTargets.forEach((item) => {
+      const value = (item.dataset.value || item.textContent).toLowerCase()
+      const matches = query === "" || value.includes(query)
+
+      item.hidden = !matches
+      if (matches) hasVisibleItems = true
+    })
+
+    // Show/hide groups based on whether they have visible items
+    this.groupTargets.forEach((group) => {
+      const items = group.querySelectorAll('[data-slot="command-item"]')
+      const hasVisible = Array.from(items).some(item => !item.hidden)
+      group.hidden = !hasVisible
+    })
+
+    // Show empty state if no matches
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.classList.toggle("hidden", hasVisibleItems || query === "")
+    }
+
+    // Reset selection when filtering
+    this.selectedIndex = -1
+    this.updateSelection()
+  }
+
+  handleKeydown(event) {
+    const visibleItems = this.visibleItems
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.selectNext(visibleItems)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.selectPrevious(visibleItems)
+        break
+      case "Enter":
+        event.preventDefault()
+        this.selectCurrent(visibleItems)
+        break
+      case "Home":
+        event.preventDefault()
+        this.selectFirst(visibleItems)
+        break
+      case "End":
+        event.preventDefault()
+        this.selectLast(visibleItems)
+        break
+    }
+  }
+
+  selectNext(items) {
+    if (items.length === 0) return
+
+    if (this.selectedIndex < items.length - 1) {
+      this.selectedIndex++
+    } else if (this.loopValue) {
+      this.selectedIndex = 0
+    }
+    this.updateSelection()
+  }
+
+  selectPrevious(items) {
+    if (items.length === 0) return
+
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--
+    } else if (this.loopValue) {
+      this.selectedIndex = items.length - 1
+    } else if (this.selectedIndex === -1) {
+      this.selectedIndex = items.length - 1
+    }
+    this.updateSelection()
+  }
+
+  selectFirst(items) {
+    if (items.length === 0) return
+    this.selectedIndex = 0
+    this.updateSelection()
+  }
+
+  selectLast(items) {
+    if (items.length === 0) return
+    this.selectedIndex = items.length - 1
+    this.updateSelection()
+  }
+
+  selectCurrent(items) {
+    if (this.selectedIndex >= 0 && this.selectedIndex < items.length) {
+      const item = items[this.selectedIndex]
+      if (!item.dataset.disabled) {
+        this.triggerSelect(item)
+      }
+    }
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (!item.dataset.disabled) {
+      this.triggerSelect(item)
+    }
+  }
+
+  triggerSelect(item) {
+    const value = item.dataset.value || item.textContent.trim()
+
+    // Dispatch event for listeners to handle selection
+    this.element.dispatchEvent(new CustomEvent("command:select", {
+      bubbles: true,
+      detail: { value, item }
+    }))
+
+    // If item has an href, navigate to it
+    const href = item.dataset.href
+    if (href) {
+      if (item.dataset.turbo === "false") {
+        window.location.href = href
+      } else {
+        Turbo.visit(href)
+      }
+    }
+
+    // If item has a Stimulus action defined, it will be triggered automatically
+    // via data-action attribute on the item element
+  }
+
+  updateSelection() {
+    const items = this.visibleItems
+
+    items.forEach((item, index) => {
+      const isSelected = index === this.selectedIndex
+      item.dataset.selected = isSelected
+      item.setAttribute("aria-selected", isSelected)
+
+      if (isSelected) {
+        item.scrollIntoView({ block: "nearest" })
+        if (this.hasListTarget) {
+          this.listTarget.setAttribute("aria-activedescendant", item.id || "")
+        }
+      }
+    })
+  }
+
+  updateVisibility() {
+    // Initial state - show all items, hide empty
+    this.itemTargets.forEach(item => item.hidden = false)
+    this.groupTargets.forEach(group => group.hidden = false)
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.classList.add("hidden")
+    }
+  }
+
+  get visibleItems() {
+    return this.itemTargets.filter(item => !item.hidden && !item.dataset.disabled)
+  }
+}