fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/calendar_behavior.rb

@@ -1,119 +1,146 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Calendar component
-    # Handles Stimulus controller setup and data attributes
-    module UI::CalendarBehavior
-      WEEKDAYS = %w[Su Mo Tu We Th Fr Sa].freeze
+# UI::CalendarBehavior
+#
+# @ui_component Calendar
+# @ui_description Calendar component (Phlex) A date picker calendar with support for single, range, and multiple selection
+# @ui_category forms
+#
+# @ui_anatomy Calendar - Root container for calendar (required)
+#
+# @ui_feature Keyboard navigation
+# @ui_feature Form integration
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Click outside to close
+# @ui_feature Animation support
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Space Activates the focused element
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard ArrowLeft Moves focus left or decreases value
+# @ui_keyboard ArrowRight Moves focus right or increases value
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+# @ui_keyboard PageUp Moves focus up by page
+# @ui_keyboard PageDown Moves focus down by page
+#
+# @ui_related date_picker
+#
+module UI::CalendarBehavior
+  WEEKDAYS = %w[Su Mo Tu We Th Fr Sa].freeze
 
-      # Generate Stimulus controller data attributes
-      def calendar_data_attributes
-        attrs = {
-          controller: "ui--calendar",
-          ui__calendar_mode_value: @mode.to_s,
-          ui__calendar_selected_value: selected_json,
-          ui__calendar_month_value: @month.to_s,
-          ui__calendar_number_of_months_value: @number_of_months,
-          ui__calendar_week_starts_on_value: @week_starts_on,
-          ui__calendar_locale_value: @locale,
-          ui__calendar_min_date_value: @min_date&.to_s,
-          ui__calendar_max_date_value: @max_date&.to_s,
-          ui__calendar_disabled_value: disabled_dates_json,
-          ui__calendar_show_outside_days_value: @show_outside_days,
-          ui__calendar_fixed_weeks_value: @fixed_weeks,
-          ui__calendar_year_range_value: @year_range,
-          # Range constraints
-          ui__calendar_min_range_days_value: @min_range_days,
-          ui__calendar_max_range_days_value: @max_range_days,
-          ui__calendar_exclude_disabled_value: @exclude_disabled,
-          action: "keydown->ui--calendar#handleKeydown"
-        }
+  # Generate Stimulus controller data attributes
+  def calendar_data_attributes
+    attrs = {
+      controller: "ui--calendar",
+      ui__calendar_mode_value: @mode.to_s,
+      ui__calendar_selected_value: selected_json,
+      ui__calendar_month_value: @month.to_s,
+      ui__calendar_number_of_months_value: @number_of_months,
+      ui__calendar_week_starts_on_value: @week_starts_on,
+      ui__calendar_locale_value: @locale,
+      ui__calendar_min_date_value: @min_date&.to_s,
+      ui__calendar_max_date_value: @max_date&.to_s,
+      ui__calendar_disabled_value: disabled_dates_json,
+      ui__calendar_show_outside_days_value: @show_outside_days,
+      ui__calendar_fixed_weeks_value: @fixed_weeks,
+      ui__calendar_year_range_value: @year_range,
+      # Range constraints
+      ui__calendar_min_range_days_value: @min_range_days,
+      ui__calendar_max_range_days_value: @max_range_days,
+      ui__calendar_exclude_disabled_value: @exclude_disabled,
+      action: "keydown->ui--calendar#handleKeydown"
+    }
 
-        # Add UI Select controller if using custom select
-        if @show_dropdowns && !use_native_select?
-          attrs[:controller] = "ui--calendar ui--select-calendar-sync"
-        end
+    # Add UI Select controller if using custom select
+    if @show_dropdowns && !use_native_select?
+      attrs[:controller] = "ui--calendar ui--select-calendar-sync"
+    end
 
-        attrs.compact
-      end
+    attrs.compact
+  end
 
-      def use_native_select?
-        @use_native_select.nil? ? true : @use_native_select
-      end
+  def use_native_select?
+    @use_native_select.nil? || @use_native_select
+  end
 
-      # Build complete HTML attributes hash for calendar container
-      def calendar_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+  # Build complete HTML attributes hash for calendar container
+  def calendar_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        # Merge data attributes, concatenating action values
-        merged_data = calendar_data_attributes.merge(user_data) do |key, calendar_val, user_val|
-          if key == :action
-            # Concatenate Stimulus actions with space separator
-            [calendar_val, user_val].compact.join(" ")
-          else
-            user_val
-          end
-        end
-
-        base_attrs.merge(
-          class: calendar_classes,
-          role: "application",
-          aria: {
-            label: aria_label_text
-          },
-          data: merged_data
-        )
-      end
-
-      # Generate aria-label based on mode
-      def aria_label_text
-        case @mode.to_s
-        when "range"
-          "Date range picker"
-        when "multiple"
-          "Multiple date picker"
-        else
-          "Date picker"
-        end
+    # Merge data attributes, concatenating action values
+    merged_data = calendar_data_attributes.merge(user_data) do |key, calendar_val, user_val|
+      if key == :action
+        # Concatenate Stimulus actions with space separator
+        [calendar_val, user_val].compact.join(" ")
+      else
+        user_val
       end
+    end
 
-      # Default calendar classes
-      def calendar_classes
-        base = "p-3"
-        if @number_of_months && @number_of_months > 1
-          "#{base} flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 #{@classes}".strip
-        else
-          "#{base} #{@classes}".strip
-        end
-      end
+    base_attrs.merge(
+      class: calendar_classes,
+      role: "application",
+      aria: {
+        label: aria_label_text
+      },
+      data: merged_data
+    )
+  end
 
-      # Convert selected dates to JSON array
-      def selected_json
-        case @selected
-        when Date then [@selected.to_s].to_json
-        when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
-        when Array then @selected.map(&:to_s).to_json
-        else [].to_json
-        end
-      end
+  # Generate aria-label based on mode
+  def aria_label_text
+    case @mode.to_s
+    when "range"
+      "Date range picker"
+    when "multiple"
+      "Multiple date picker"
+    else
+      "Date picker"
+    end
+  end
 
-      # Convert selected dates for form value
-      def selected_value
-        case @selected
-        when Date then @selected.to_s
-        when Range then "#{@selected.begin},#{@selected.end}"
-        when Array then @selected.map(&:to_s).join(",")
-        else ""
-        end
-      end
+  # Default calendar classes
+  def calendar_classes
+    base = "p-3"
+    if @number_of_months && @number_of_months > 1
+      "#{base} flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 #{@classes}".strip
+    else
+      "#{base} #{@classes}".strip
+    end
+  end
 
-      # Convert disabled dates to JSON array
-      def disabled_dates_json
-        (@disabled_dates || []).map(&:to_s).to_json
-      end
+  # Convert selected dates to JSON array
+  def selected_json
+    case @selected
+    when Date then [@selected.to_s].to_json
+    when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
+    when Array then @selected.map(&:to_s).to_json
+    else [].to_json
+    end
+  end
 
-      # Get weekdays ordered by week_starts_on
-      def ordered_weekdays
-        WEEKDAYS.rotate(@week_starts_on || 0)
-      end
+  # Convert selected dates for form value
+  def selected_value
+    case @selected
+    when Date then @selected.to_s
+    when Range then "#{@selected.begin},#{@selected.end}"
+    when Array then @selected.map(&:to_s).join(",")
+    else ""
     end
+  end
+
+  # Convert disabled dates to JSON array
+  def disabled_dates_json
+    (@disabled_dates || []).map(&:to_s).to_json
+  end
+
+  # Get weekdays ordered by week_starts_on
+  def ordered_weekdays
+    WEEKDAYS.rotate(@week_starts_on || 0)
+  end
+end

data/app/behaviors/ui/card_action_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ActionBehavior
-    #
-    # Shared behavior for CardAction component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardActionBehavior
-      def render_card_action(&content_block)
-        all_attributes = card_action_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# ActionBehavior
+#
+# Shared behavior for CardAction component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardActionBehavior
+  def render_card_action(&content_block)
+    all_attributes = card_action_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_action_html_attributes
-        {
-          class: card_action_classes,
-          data: { slot: "card-action" }
-        }
-      end
+  def card_action_html_attributes
+    {
+      class: card_action_classes,
+      data: {slot: "card-action"}
+    }
+  end
 
-      def card_action_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_action_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_action_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_action_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_action_base_classes
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
-      end
-    end
+  def card_action_base_classes
+    "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+  end
+end

data/app/behaviors/ui/card_behavior.rb

@@ -1,32 +1,46 @@
 # frozen_string_literal: true
 
-    # CardBehavior
-    #
-    # Shared behavior for Card component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardBehavior
-      def render_card(&content_block)
-        all_attributes = card_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# UI::CardBehavior
+#
+# @ui_component Card
+# @ui_category layout
+#
+# @ui_anatomy Card - Root container for card (required)
+# @ui_anatomy Action - Primary action button
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Description - Descriptive text element
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Header - Header section with title and controls
+# @ui_anatomy Title - Title text element
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_related dialog
+#
+module UI::CardBehavior
+  def render_card(&content_block)
+    all_attributes = card_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_html_attributes
-        {
-          class: card_classes,
-          data: { slot: "card" }
-        }
-      end
+  def card_html_attributes
+    {
+      class: card_classes,
+      data: {slot: "card"}
+    }
+  end
 
-      def card_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_base_classes
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
-      end
-    end
+  def card_base_classes
+    "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
+  end
+end

data/app/behaviors/ui/card_content_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ContentBehavior
-    #
-    # Shared behavior for CardContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardContentBehavior
-      def render_card_content(&content_block)
-        all_attributes = card_content_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# ContentBehavior
+#
+# Shared behavior for CardContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardContentBehavior
+  def render_card_content(&content_block)
+    all_attributes = card_content_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_content_html_attributes
-        {
-          class: card_content_classes,
-          data: { slot: "card-content" }
-        }
-      end
+  def card_content_html_attributes
+    {
+      class: card_content_classes,
+      data: {slot: "card-content"}
+    }
+  end
 
-      def card_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_content_base_classes
-        "px-6"
-      end
-    end
+  def card_content_base_classes
+    "px-6"
+  end
+end

data/app/behaviors/ui/card_description_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # DescriptionBehavior
-    #
-    # Shared behavior for CardDescription component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardDescriptionBehavior
-      def render_card_description(&content_block)
-        all_attributes = card_description_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# DescriptionBehavior
+#
+# Shared behavior for CardDescription component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardDescriptionBehavior
+  def render_card_description(&content_block)
+    all_attributes = card_description_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_description_html_attributes
-        {
-          class: card_description_classes,
-          data: { slot: "card-description" }
-        }
-      end
+  def card_description_html_attributes
+    {
+      class: card_description_classes,
+      data: {slot: "card-description"}
+    }
+  end
 
-      def card_description_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_description_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_description_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_description_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_description_base_classes
-        "text-muted-foreground text-sm"
-      end
-    end
+  def card_description_base_classes
+    "text-muted-foreground text-sm"
+  end
+end

data/app/behaviors/ui/card_footer_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # FooterBehavior
-    #
-    # Shared behavior for CardFooter component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardFooterBehavior
-      def render_card_footer(&content_block)
-        all_attributes = card_footer_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# FooterBehavior
+#
+# Shared behavior for CardFooter component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardFooterBehavior
+  def render_card_footer(&content_block)
+    all_attributes = card_footer_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_footer_html_attributes
-        {
-          class: card_footer_classes,
-          data: { slot: "card-footer" }
-        }
-      end
+  def card_footer_html_attributes
+    {
+      class: card_footer_classes,
+      data: {slot: "card-footer"}
+    }
+  end
 
-      def card_footer_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_footer_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_footer_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_footer_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_footer_base_classes
-        "flex items-center px-6 [.border-t]:pt-6"
-      end
-    end
+  def card_footer_base_classes
+    "flex items-center px-6 [.border-t]:pt-6"
+  end
+end

data/app/behaviors/ui/card_header_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # HeaderBehavior
-    #
-    # Shared behavior for CardHeader component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardHeaderBehavior
-      def render_card_header(&content_block)
-        all_attributes = card_header_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# HeaderBehavior
+#
+# Shared behavior for CardHeader component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardHeaderBehavior
+  def render_card_header(&content_block)
+    all_attributes = card_header_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_header_html_attributes
-        {
-          class: card_header_classes,
-          data: { slot: "card-header" }
-        }
-      end
+  def card_header_html_attributes
+    {
+      class: card_header_classes,
+      data: {slot: "card-header"}
+    }
+  end
 
-      def card_header_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_header_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_header_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_header_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_header_base_classes
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
-      end
-    end
+  def card_header_base_classes
+    "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+  end
+end