fernandes-ui 0.1.0

data/app/javascript/ui/utils/state-manager.js

@@ -0,0 +1,205 @@
+/**
+ * State Manager Utility
+ *
+ * Manages data-state and aria-* attributes synchronization across elements.
+ * Used by dialog, alert_dialog, drawer, accordion, tabs, toggle, checkbox, switch, popover, etc.
+ */
+
+/**
+ * Set state on a single element
+ * @param {HTMLElement} element - Target element
+ * @param {string} state - State value (e.g., 'open', 'closed', 'checked', 'unchecked')
+ * @param {Object} options - Additional options
+ * @param {string} options.ariaAttribute - ARIA attribute to sync (e.g., 'aria-expanded', 'aria-checked')
+ * @param {boolean} options.ariaValue - Value for ARIA attribute (defaults to state === 'open' or state === 'checked')
+ */
+export function setState(element, state, options = {}) {
+  if (!element) return
+
+  element.setAttribute('data-state', state)
+
+  if (options.ariaAttribute) {
+    const ariaValue = options.ariaValue !== undefined
+      ? options.ariaValue
+      : (state === 'open' || state === 'checked' || state === 'on')
+    element.setAttribute(options.ariaAttribute, ariaValue.toString())
+  }
+}
+
+/**
+ * Get state from an element
+ * @param {HTMLElement} element - Target element
+ * @returns {string|null} Current state value
+ */
+export function getState(element) {
+  if (!element) return null
+  return element.getAttribute('data-state')
+}
+
+/**
+ * Check if element is in open/active state
+ * @param {HTMLElement} element - Target element
+ * @returns {boolean}
+ */
+export function isOpen(element) {
+  const state = getState(element)
+  return state === 'open' || state === 'checked' || state === 'on' || state === 'active'
+}
+
+/**
+ * Toggle state between two values
+ * @param {HTMLElement} element - Target element
+ * @param {string} stateA - First state (e.g., 'open')
+ * @param {string} stateB - Second state (e.g., 'closed')
+ * @param {Object} options - Additional options for setState
+ * @returns {string} The new state
+ */
+export function toggleState(element, stateA = 'open', stateB = 'closed', options = {}) {
+  const currentState = getState(element)
+  const newState = currentState === stateA ? stateB : stateA
+  setState(element, newState, options)
+  return newState
+}
+
+/**
+ * Set state on multiple elements at once
+ * @param {HTMLElement[]} elements - Array of target elements
+ * @param {string} state - State value
+ * @param {Object} options - Additional options for setState
+ */
+export function setStateOnMultiple(elements, state, options = {}) {
+  elements.forEach(element => {
+    if (element) {
+      setState(element, state, options)
+    }
+  })
+}
+
+/**
+ * Sync checkbox-like state (checked/unchecked)
+ * @param {HTMLElement} element - Target element
+ * @param {boolean} checked - Whether checked
+ * @param {Object} options - Additional options
+ * @param {HTMLElement[]} options.additionalTargets - Additional elements to sync
+ */
+export function syncCheckedState(element, checked, options = {}) {
+  const state = checked ? 'checked' : 'unchecked'
+
+  setState(element, state, { ariaAttribute: 'aria-checked', ariaValue: checked })
+
+  if (options.additionalTargets) {
+    options.additionalTargets.forEach(target => {
+      if (target) {
+        setState(target, state)
+      }
+    })
+  }
+}
+
+/**
+ * Sync toggle/pressed state (on/off or pressed/not pressed)
+ * @param {HTMLElement} element - Target element
+ * @param {boolean} pressed - Whether pressed/on
+ * @param {Object} options - Additional options
+ * @param {boolean} options.useOnOff - Use 'on'/'off' instead of default states
+ */
+export function syncPressedState(element, pressed, options = {}) {
+  const state = options.useOnOff
+    ? (pressed ? 'on' : 'off')
+    : (pressed ? 'pressed' : 'unpressed')
+
+  setState(element, state, { ariaAttribute: 'aria-pressed', ariaValue: pressed })
+}
+
+/**
+ * Sync expanded state (for accordions, collapsibles, etc.)
+ * @param {HTMLElement} trigger - Trigger element
+ * @param {HTMLElement} content - Content element
+ * @param {boolean} expanded - Whether expanded
+ */
+export function syncExpandedState(trigger, content, expanded) {
+  const state = expanded ? 'open' : 'closed'
+
+  if (trigger) {
+    setState(trigger, state, { ariaAttribute: 'aria-expanded', ariaValue: expanded })
+  }
+
+  if (content) {
+    setState(content, state)
+  }
+}
+
+/**
+ * Modal state manager - handles container, overlay, and content together
+ * @param {Object} targets - Object containing modal targets
+ * @param {HTMLElement} targets.container - Container element
+ * @param {HTMLElement} targets.overlay - Overlay element
+ * @param {HTMLElement} targets.content - Content element
+ * @param {boolean} open - Whether modal is open
+ */
+export function syncModalState(targets, open) {
+  const state = open ? 'open' : 'closed'
+
+  if (targets.container) {
+    setState(targets.container, state)
+  }
+
+  if (targets.overlay) {
+    setState(targets.overlay, state)
+  }
+
+  if (targets.content) {
+    setState(content, state)
+  }
+}
+
+/**
+ * Create a state synchronizer for a component
+ * Returns an object with methods to manage state
+ * @param {HTMLElement} element - Main element
+ * @param {Object} config - Configuration
+ * @param {string} config.openState - State when open (default: 'open')
+ * @param {string} config.closedState - State when closed (default: 'closed')
+ * @param {string} config.ariaAttribute - ARIA attribute to sync
+ * @param {HTMLElement[]} config.syncTargets - Additional elements to sync
+ */
+export function createStateSynchronizer(element, config = {}) {
+  const {
+    openState = 'open',
+    closedState = 'closed',
+    ariaAttribute = null,
+    syncTargets = []
+  } = config
+
+  return {
+    element,
+
+    open() {
+      setState(element, openState, { ariaAttribute, ariaValue: true })
+      syncTargets.forEach(target => setState(target, openState))
+    },
+
+    close() {
+      setState(element, closedState, { ariaAttribute, ariaValue: false })
+      syncTargets.forEach(target => setState(target, closedState))
+    },
+
+    toggle() {
+      const isCurrentlyOpen = getState(element) === openState
+      if (isCurrentlyOpen) {
+        this.close()
+      } else {
+        this.open()
+      }
+      return !isCurrentlyOpen
+    },
+
+    isOpen() {
+      return getState(element) === openState
+    },
+
+    getState() {
+      return getState(element)
+    }
+  }
+}

data/app/jobs/ui/application_job.rb

@@ -0,0 +1,4 @@
+module UI
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/ui/application_mailer.rb

@@ -0,0 +1,6 @@
+module UI
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/ui/application_record.rb

@@ -0,0 +1,5 @@
+module UI
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/view_components/ui/accordion_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # Accordion container component (ViewComponent)
+    # Wraps collapsible accordion items with Stimulus controller
+    #
+    # @example Basic usage
+    #   <%= render UI::AccordionComponent.new do %>
+    #     <%= render UI::AccordionItemComponent.new(value: "item-1") do %>
+    #       <%= render UI::AccordionTriggerComponent.new { "Is it accessible?" } %>
+    #       <%= render UI::AccordionContentComponent.new { "Yes. It adheres to the WAI-ARIA design pattern." } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Multiple items open
+    #   <%= render UI::AccordionComponent.new(type: "multiple") do %>
+    #     <!-- Multiple items can be open at once -->
+    #   <% end %>
+    class UI::AccordionComponent < ViewComponent::Base
+      include UI::AccordionBehavior
+
+      # @param type [String] "single" (only one item open at a time) or "multiple" (multiple items can be open)
+      # @param collapsible [Boolean] whether the open item can be collapsed in "single" mode
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(type: "single", collapsible: false, classes: "", attributes: {})
+        @type = type
+        @collapsible = collapsible
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **accordion_html_attributes
+      end
+    end

data/app/view_components/ui/accordion_content_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # Accordion Content component (ViewComponent)
+    # Collapsible content area within an accordion item
+    #
+    # @example Basic usage
+    #   <%= render UI::AccordionContentComponent.new(item_value: "item-1") do %>
+    #     This is the accordion content
+    #   <% end %>
+    class UI::AccordionContentComponent < ViewComponent::Base
+      include UI::AccordionContentBehavior
+
+      # @param item_value [String] value from parent AccordionItem
+      # @param initial_open [Boolean] initial state from parent AccordionItem
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(item_value: nil, initial_open: false, classes: "", attributes: {})
+        @item_value = item_value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **content_html_attributes do
+          content_tag :div, content, class: "pt-0 pb-4"
+        end
+      end
+    end

data/app/view_components/ui/accordion_item_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # Accordion Item component (ViewComponent)
+    # Individual collapsible item within an accordion
+    #
+    # @example Basic usage
+    #   <%= render UI::AccordionItemComponent.new(value: "item-1") do %>
+    #     <%= render UI::AccordionTriggerComponent.new { "Trigger text" } %>
+    #     <%= render UI::AccordionContentComponent.new { "Content text" } %>
+    #   <% end %>
+    #
+    # @example Start open
+    #   <%= render UI::AccordionItemComponent.new(value: "item-1", initial_open: true) do %>
+    #     <!-- Item will be open by default -->
+    #   <% end %>
+    class UI::AccordionItemComponent < ViewComponent::Base
+      include UI::AccordionItemBehavior
+
+      # Expose item_value and initial_open to child components via content_tag_options
+      attr_reader :value, :initial_open
+
+      # @param value [String] unique identifier for this item
+      # @param initial_open [Boolean] whether this item starts open
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(value: "", initial_open: false, classes: "", attributes: {})
+        @value = value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        # Store context for child components (trigger and content)
+        # ViewComponent renders slots in parent context, so we use helpers method
+        content_tag :div, content, **item_html_attributes
+      end
+
+      # Helper method to expose item context to child components
+      def item_context
+        { item_value: @value, initial_open: @initial_open }
+      end
+    end

data/app/view_components/ui/accordion_trigger_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Accordion Trigger component (ViewComponent)
+    # Button that toggles accordion item open/closed
+    #
+    # @example Basic usage
+    #   <%= render UI::AccordionTriggerComponent.new(item_value: "item-1") do %>
+    #     Click to toggle
+    #   <% end %>
+    class UI::AccordionTriggerComponent < ViewComponent::Base
+      include UI::AccordionTriggerBehavior
+
+      # @param item_value [String] value from parent AccordionItem
+      # @param initial_open [Boolean] initial state from parent AccordionItem
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(item_value: nil, initial_open: false, classes: "", attributes: {})
+        @item_value = item_value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :h3, class: "flex", "data-orientation": @orientation || "vertical", "data-state": trigger_state do
+          content_tag :button, **trigger_html_attributes do
+            safe_join([content, caret_svg])
+          end
+        end
+      end
+    end

data/app/view_components/ui/alert_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # Alert - ViewComponent implementation
+    #
+    # A callout component for displaying important information to users.
+    class UI::AlertComponent < ViewComponent::Base
+      include UI::AlertBehavior
+
+      # @param variant [Symbol] Visual style variant (:default, :destructive)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :default, classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**alert_html_attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/alert_description_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # Alert Description - ViewComponent implementation
+    #
+    # Description text for an alert component.
+    class UI::AlertDescriptionComponent < ViewComponent::Base
+      include UI::AlertDescriptionBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**alert_description_html_attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/alert_title_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # Alert Title - ViewComponent implementation
+    #
+    # Title text for an alert component.
+    class UI::AlertTitleComponent < ViewComponent::Base
+      include UI::AlertTitleBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**alert_title_html_attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/aspect_ratio_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # AspectRatio - ViewComponent implementation
+    #
+    # Displays content within a desired aspect ratio.
+    class UI::AspectRatioComponent < ViewComponent::Base
+      include UI::AspectRatioBehavior
+
+      # @param ratio [Float] The desired aspect ratio (width/height, e.g., 16/9)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(ratio: 1.0, classes: "", **attributes)
+        @ratio = ratio
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**aspect_ratio_html_attributes) do
+          tag.div(**aspect_ratio_padding_attributes) +
+          tag.div(**aspect_ratio_content_attributes) do
+            content
+          end
+        end
+      end
+    end

data/app/view_components/ui/avatar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # Avatar - ViewComponent implementation
+    #
+    # Displays an image element with a fallback for representing users.
+    class UI::AvatarComponent < ViewComponent::Base
+      include UI::AvatarBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.span(**avatar_html_attributes.deep_merge(@attributes)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/avatar_fallback_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # Avatar Fallback - ViewComponent implementation
+    #
+    # Displays fallback content when the image hasn't loaded or fails to load.
+    class UI::AvatarFallbackComponent < ViewComponent::Base
+      include UI::AvatarFallbackBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.span(**avatar_fallback_html_attributes.deep_merge(@attributes)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/avatar_image_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # Avatar Image - ViewComponent implementation
+    #
+    # Displays the avatar image. Only renders when it has loaded successfully.
+    class UI::AvatarImageComponent < ViewComponent::Base
+      include UI::AvatarImageBehavior
+
+      # @param src [String] Image source URL
+      # @param alt [String] Alternative text for the image
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(src:, alt: "", classes: "", **attributes)
+        @src = src
+        @alt = alt
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.img(**avatar_image_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/view_components/ui/badge_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # Badge - ViewComponent implementation
+    #
+    # Displays a badge or a component that looks like a badge.
+    class UI::BadgeComponent < ViewComponent::Base
+      include UI::BadgeBehavior
+
+      # @param variant [Symbol, String] Visual style variant (:default, :secondary, :destructive, :outline)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :default, classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.span(**badge_html_attributes.deep_merge(@attributes)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/blockquote_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::BlockquoteComponent < ViewComponent::Base
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def call
+      extend UI::BlockquoteBehavior
+      attrs = blockquote_html_attributes
+      content_tag :blockquote, **attrs.merge(@attributes) do
+        content
+      end
+    end
+  end
+end

data/app/view_components/ui/breadcrumb_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # BreadcrumbComponent - ViewComponent implementation
+    #
+    # A navigation breadcrumb component for displaying hierarchical navigation.
+    # Uses BreadcrumbBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbComponent.new do %>
+    #     <%= render UI::BreadcrumbListComponent.new do %>
+    #       <%= render UI::BreadcrumbItemComponent.new do %>
+    #         <%= render UI::BreadcrumbLinkComponent.new(href: "/") do %>
+    #           Home
+    #         <% end %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class UI::BreadcrumbComponent < ViewComponent::Base
+      include UI::BreadcrumbBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :nav, **breadcrumb_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/breadcrumb_ellipsis_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    # BreadcrumbEllipsisComponent - ViewComponent implementation
+    #
+    # Indicator for collapsed/hidden breadcrumb items.
+    # Uses BreadcrumbEllipsisBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbEllipsisComponent.new %>
+    class UI::BreadcrumbEllipsisComponent < ViewComponent::Base
+      include UI::BreadcrumbEllipsisBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :span, **breadcrumb_ellipsis_html_attributes do
+          if content.present?
+            content
+          else
+            safe_join([ellipsis_icon, screen_reader_text])
+          end
+        end
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+
+      def ellipsis_icon
+        content_tag :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: "lucide lucide-ellipsis h-4 w-4" do
+          safe_join([
+            content_tag(:circle, nil, cx: "12", cy: "12", r: "1"),
+            content_tag(:circle, nil, cx: "19", cy: "12", r: "1"),
+            content_tag(:circle, nil, cx: "5", cy: "12", r: "1")
+          ])
+        end
+      end
+
+      def screen_reader_text
+        content_tag :span, "More", class: "sr-only"
+      end
+    end