fernandes-ui 0.1.1 → 0.1.4

data/app/view_components/ui/popover_trigger_component.rb

@@ -1,72 +1,77 @@
 # frozen_string_literal: true
 
-    # TriggerComponent - ViewComponent implementation
-    #
-    # Button or element that triggers the popover.
-    # Uses PopoverTriggerBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   <%= render UI::TriggerComponent.new do %>
-    #     <button>Click me</button>
-    #   <% end %>
-    #
-    # @example As child (wraps content without adding wrapper)
-    #   <%= render UI::TriggerComponent.new(as_child: true) do %>
-    #     <button>Click me</button>
-    #   <% end %>
-    class UI::PopoverTriggerComponent < ViewComponent::Base
-      include UI::PopoverTriggerBehavior
+# TriggerComponent - ViewComponent implementation
+#
+# Button or element that triggers the popover.
+# Uses PopoverTriggerBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   <%= render UI::TriggerComponent.new do %>
+#     <button>Click me</button>
+#   <% end %>
+#
+# @example As child (wraps content without adding wrapper)
+#   <%= render UI::TriggerComponent.new(as_child: true) do %>
+#     <button>Click me</button>
+#   <% end %>
+class UI::PopoverTriggerComponent < ViewComponent::Base
+  include UI::PopoverTriggerBehavior
 
-      # @param as_child [Boolean] If true, adds data attributes to child without wrapper
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] If true, adds data attributes to child without wrapper
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        trigger_attrs = popover_trigger_html_attributes.deep_merge(@attributes)
+  # Returns trigger attributes for as_child mode
+  def trigger_attrs
+    popover_trigger_html_attributes.deep_merge(@attributes)
+  end
 
-        if @as_child
-          # asChild mode: merge attributes into child element
-          # Parse the rendered content and add trigger attributes to the first element
-          rendered = content.to_s
+  def call
+    trigger_attrs = popover_trigger_html_attributes.deep_merge(@attributes)
 
-          # Use Nokogiri to parse and modify the HTML
-          doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
-          first_element = doc.children.find { |node| node.element? }
+    if @as_child
+      # asChild mode: merge attributes into child element
+      # Parse the rendered content and add trigger attributes to the first element
+      rendered = content.to_s
 
-          if first_element
-            # Merge data attributes
-            trigger_attrs.fetch(:data, {}).each do |key, value|
-              # Convert Rails naming convention to HTML: _ becomes -, __ becomes --
-              html_key = key.to_s.gsub("__", "--").gsub("_", "-")
-              first_element["data-#{html_key}"] = value
-            end
+      # Use Nokogiri to parse and modify the HTML
+      doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
+      first_element = doc.children.find { |node| node.element? }
 
-            # Merge CSS classes with TailwindMerge
-            if trigger_attrs[:class]
-              existing_classes = first_element["class"] || ""
-              merged_classes = TailwindMerge::Merger.new.merge([existing_classes, trigger_attrs[:class]].join(" "))
-              first_element["class"] = merged_classes
-            end
+      if first_element
+        # Merge data attributes
+        trigger_attrs.fetch(:data, {}).each do |key, value|
+          # Convert Rails naming convention to HTML: _ becomes -, __ becomes --
+          html_key = key.to_s.gsub("__", "--").tr("_", "-")
+          first_element["data-#{html_key}"] = value
+        end
 
-            # Merge other attributes (except data and class)
-            trigger_attrs.except(:data, :class).each do |key, value|
-              first_element[key.to_s] = value
-            end
+        # Merge CSS classes with TailwindMerge
+        if trigger_attrs[:class]
+          existing_classes = first_element["class"] || ""
+          merged_classes = TailwindMerge::Merger.new.merge([existing_classes, trigger_attrs[:class]].join(" "))
+          first_element["class"] = merged_classes
+        end
 
-            doc.to_html.html_safe
-          else
-            content
-          end
-        else
-          # Default mode: render as div
-          content_tag :div, **trigger_attrs do
-            content
-          end
+        # Merge other attributes (except data and class)
+        trigger_attrs.except(:data, :class).each do |key, value|
+          first_element[key.to_s] = value
         end
+
+        doc.to_html.html_safe
+      else
+        content
+      end
+    else
+      # Default mode: render as div
+      content_tag :div, **trigger_attrs do
+        content
       end
     end
+  end
+end

data/app/view_components/ui/progress_component.rb

@@ -1,39 +1,39 @@
 # frozen_string_literal: true
 
-    # ProgressComponent - ViewComponent implementation
-    #
-    # A progress indicator component for displaying task completion or loading status.
-    # Uses ProgressBehavior for shared styling logic.
-    #
-    # @example Basic usage with value
-    #   <%= render UI::ProgressComponent.new(value: 60) %>
-    #
-    # @example Indeterminate progress (no value)
-    #   <%= render UI::ProgressComponent.new %>
-    #
-    # @example With custom classes
-    #   <%= render UI::ProgressComponent.new(value: 80, classes: "h-4") %>
-    class UI::ProgressComponent < ViewComponent::Base
-      include UI::ProgressBehavior
+# ProgressComponent - ViewComponent implementation
+#
+# A progress indicator component for displaying task completion or loading status.
+# Uses ProgressBehavior for shared styling logic.
+#
+# @example Basic usage with value
+#   <%= render UI::ProgressComponent.new(value: 60) %>
+#
+# @example Indeterminate progress (no value)
+#   <%= render UI::ProgressComponent.new %>
+#
+# @example With custom classes
+#   <%= render UI::ProgressComponent.new(value: 80, classes: "h-4") %>
+class UI::ProgressComponent < ViewComponent::Base
+  include UI::ProgressBehavior
 
-      # @param value [Numeric] Progress value between 0 and 100 (default: 0)
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(value: 0, classes: "", **attributes)
-        @value = value
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param value [Numeric] Progress value between 0 and 100 (default: 0)
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(value: 0, classes: "", **attributes)
+    @value = value
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        attrs = progress_html_attributes
+  def call
+    attrs = progress_html_attributes
 
-        content_tag :div, **attrs.merge(@attributes) do
-          content_tag :div,
-            nil,
-            class: progress_indicator_classes,
-            style: progress_indicator_style,
-            data: { slot: "progress-indicator" }
-        end
-      end
+    content_tag :div, **attrs.merge(@attributes) do
+      content_tag :div,
+        nil,
+        class: progress_indicator_classes,
+        style: progress_indicator_style,
+        data: {slot: "progress-indicator"}
     end
+  end
+end

data/app/view_components/ui/radio_button_component.rb

@@ -1,56 +1,56 @@
 # frozen_string_literal: true
 
-    class UI::RadioButtonComponent < ViewComponent::Base
-      include UI::RadioButtonBehavior
+class UI::RadioButtonComponent < ViewComponent::Base
+  include UI::RadioButtonBehavior
 
-      def initialize(
-        name: nil,
-        id: nil,
-        value: nil,
-        checked: false,
-        disabled: false,
-        required: false,
-        classes: "",
-        **attributes
-      )
-        @name = name
-        @id = id
-        @value = value
-        @checked = checked
-        @disabled = disabled
-        @required = required
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(
+    name: nil,
+    id: nil,
+    value: nil,
+    checked: false,
+    disabled: false,
+    required: false,
+    classes: "",
+    **attributes
+  )
+    @name = name
+    @id = id
+    @value = value
+    @checked = checked
+    @disabled = disabled
+    @required = required
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        content_tag :div, class: "relative inline-flex items-center justify-center" do
-          safe_join([
-            content_tag(:input, nil, radio_button_html_attributes),
-            indicator_icon
-          ])
-        end
-      end
+  def call
+    content_tag :div, class: "relative inline-flex items-center justify-center" do
+      safe_join([
+        content_tag(:input, nil, radio_button_html_attributes),
+        indicator_icon
+      ])
+    end
+  end
 
-      private
+  private
 
-      attr_reader :classes, :attributes
+  attr_reader :classes, :attributes
 
-      def indicator_icon
-        content_tag(
-          :svg,
-          content_tag(:circle, nil, cx: "12", cy: "12", r: "10"),
-          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: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity",
-          data: { slot: "radio-group-indicator" }
-        )
-      end
-    end
+  def indicator_icon
+    content_tag(
+      :svg,
+      content_tag(:circle, nil, cx: "12", cy: "12", r: "10"),
+      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: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity",
+      data: {slot: "radio-group-indicator"}
+    )
+  end
+end

data/app/view_components/ui/resizable_handle_component.rb

@@ -1,35 +1,35 @@
 # frozen_string_literal: true
 
-    # ResizableHandle component (ViewComponent)
-    # Draggable handle between resizable panels
-    #
-    # @example Basic handle
-    #   <%= render UI::HandleComponent.new %>
-    #
-    # @example Handle with visible grip icon
-    #   <%= render UI::HandleComponent.new(with_handle: true) %>
-    class UI::ResizableHandleComponent < ViewComponent::Base
-      include UI::ResizableHandleBehavior
+# ResizableHandle component (ViewComponent)
+# Draggable handle between resizable panels
+#
+# @example Basic handle
+#   <%= render UI::HandleComponent.new %>
+#
+# @example Handle with visible grip icon
+#   <%= render UI::HandleComponent.new(with_handle: true) %>
+class UI::ResizableHandleComponent < ViewComponent::Base
+  include UI::ResizableHandleBehavior
 
-      # @param with_handle [Boolean] show visible grip icon
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(with_handle: false, classes: "", attributes: {})
-        @with_handle = with_handle
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param with_handle [Boolean] show visible grip icon
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(with_handle: false, classes: "", attributes: {})
+    @with_handle = with_handle
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        attrs = handle_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+  def call
+    attrs = handle_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
 
-        content_tag :div, **attrs.merge(@attributes.except(:data)) do
-          if @with_handle
-            content_tag :div, class: grip_container_classes do
-              helpers.lucide_icon("grip-vertical", class: "h-2.5 w-2.5")
-            end
-          end
+    content_tag :div, **attrs.merge(@attributes.except(:data)) do
+      if @with_handle
+        content_tag :div, class: grip_container_classes do
+          helpers.lucide_icon("grip-vertical", class: "h-2.5 w-2.5")
         end
       end
     end
+  end
+end

data/app/view_components/ui/resizable_panel_component.rb

@@ -1,39 +1,39 @@
 # frozen_string_literal: true
 
-    # ResizablePanel component (ViewComponent)
-    # Individual resizable panel within a panel group
-    #
-    # @example Basic usage
-    #   <%= render UI::PanelComponent.new(default_size: 50) do %>
-    #     Panel content
-    #   <% end %>
-    #
-    # @example With constraints
-    #   <%= render UI::PanelComponent.new(default_size: 50, min_size: 20, max_size: 80) do %>
-    #     Constrained panel
-    #   <% end %>
-    class UI::ResizablePanelComponent < ViewComponent::Base
-      include UI::ResizablePanelBehavior
+# ResizablePanel component (ViewComponent)
+# Individual resizable panel within a panel group
+#
+# @example Basic usage
+#   <%= render UI::PanelComponent.new(default_size: 50) do %>
+#     Panel content
+#   <% end %>
+#
+# @example With constraints
+#   <%= render UI::PanelComponent.new(default_size: 50, min_size: 20, max_size: 80) do %>
+#     Constrained panel
+#   <% end %>
+class UI::ResizablePanelComponent < ViewComponent::Base
+  include UI::ResizablePanelBehavior
 
-      # @param default_size [Integer, Float] initial size as percentage (0-100)
-      # @param min_size [Integer, Float, nil] minimum size as percentage
-      # @param max_size [Integer, Float, nil] maximum size as percentage
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(default_size: nil, min_size: nil, max_size: nil, classes: "", attributes: {})
-        @default_size = default_size
-        @min_size = min_size
-        @max_size = max_size
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param default_size [Integer, Float] initial size as percentage (0-100)
+  # @param min_size [Integer, Float, nil] minimum size as percentage
+  # @param max_size [Integer, Float, nil] maximum size as percentage
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(default_size: nil, min_size: nil, max_size: nil, classes: "", attributes: {})
+    @default_size = default_size
+    @min_size = min_size
+    @max_size = max_size
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        attrs = panel_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+  def call
+    attrs = panel_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
 
-        content_tag :div, **attrs.merge(@attributes.except(:data)) do
-          content
-        end
-      end
+    content_tag :div, **attrs.merge(@attributes.except(:data)) do
+      content
     end
+  end
+end

data/app/view_components/ui/resizable_panel_group_component.rb

@@ -1,45 +1,45 @@
 # frozen_string_literal: true
 
-    # ResizablePanelGroup container component (ViewComponent)
-    # Wraps resizable panels with Stimulus controller
-    #
-    # @example Basic horizontal layout
-    #   <%= render UI::PanelGroupComponent.new(direction: "horizontal") do %>
-    #     <%= render UI::PanelComponent.new(default_size: 50) do %>
-    #       Left panel content
-    #     <% end %>
-    #     <%= render UI::HandleComponent.new %>
-    #     <%= render UI::PanelComponent.new(default_size: 50) do %>
-    #       Right panel content
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Vertical layout
-    #   <%= render UI::PanelGroupComponent.new(direction: "vertical") do %>
-    #     <%= render UI::PanelComponent.new(default_size: 30) { "Top" } %>
-    #     <%= render UI::HandleComponent.new %>
-    #     <%= render UI::PanelComponent.new(default_size: 70) { "Bottom" } %>
-    #   <% end %>
-    class UI::ResizablePanelGroupComponent < ViewComponent::Base
-      include UI::ResizablePanelGroupBehavior
+# ResizablePanelGroup container component (ViewComponent)
+# Wraps resizable panels with Stimulus controller
+#
+# @example Basic horizontal layout
+#   <%= render UI::PanelGroupComponent.new(direction: "horizontal") do %>
+#     <%= render UI::PanelComponent.new(default_size: 50) do %>
+#       Left panel content
+#     <% end %>
+#     <%= render UI::HandleComponent.new %>
+#     <%= render UI::PanelComponent.new(default_size: 50) do %>
+#       Right panel content
+#     <% end %>
+#   <% end %>
+#
+# @example Vertical layout
+#   <%= render UI::PanelGroupComponent.new(direction: "vertical") do %>
+#     <%= render UI::PanelComponent.new(default_size: 30) { "Top" } %>
+#     <%= render UI::HandleComponent.new %>
+#     <%= render UI::PanelComponent.new(default_size: 70) { "Bottom" } %>
+#   <% end %>
+class UI::ResizablePanelGroupComponent < ViewComponent::Base
+  include UI::ResizablePanelGroupBehavior
 
-      # @param direction [String] "horizontal" or "vertical" layout
-      # @param keyboard_resize_by [Integer] percentage to resize by on keyboard input
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(direction: "horizontal", keyboard_resize_by: 10, classes: "", attributes: {})
-        @direction = direction
-        @keyboard_resize_by = keyboard_resize_by
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param direction [String] "horizontal" or "vertical" layout
+  # @param keyboard_resize_by [Integer] percentage to resize by on keyboard input
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(direction: "horizontal", keyboard_resize_by: 10, classes: "", attributes: {})
+    @direction = direction
+    @keyboard_resize_by = keyboard_resize_by
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        attrs = panel_group_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+  def call
+    attrs = panel_group_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
 
-        content_tag :div, **attrs.merge(@attributes.except(:data)) do
-          content
-        end
-      end
+    content_tag :div, **attrs.merge(@attributes.except(:data)) do
+      content
     end
+  end
+end