fernandes-ui 0.1.0

data/app/view_components/ui/date_picker_component.rb

@@ -0,0 +1,137 @@
+# frozen_string_literal: true
+
+    # DatePicker ViewComponent
+    # A date picker that combines a popover trigger with a calendar.
+    #
+    # @example Basic usage
+    #   render UI::DatePickerComponent.new do |dp|
+    #     dp.with_trigger(placeholder: "Pick a date")
+    #   end
+    #
+    class UI::DatePickerComponent < ViewComponent::Base
+      include UI::DatePickerBehavior
+
+      renders_one :trigger, ->(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes) do
+        TriggerComponent.new(
+          placeholder: placeholder,
+          selected: selected,
+          icon: icon,
+          classes: classes,
+          **attributes
+        )
+      end
+
+      # @param mode [Symbol] Selection mode: :single, :range, :multiple
+      # @param selected [Date, Range, Array] Initially selected date(s)
+      # @param locale [String] BCP 47 locale tag for formatting
+      # @param format [String] Date format style: "short", "medium", "long", "full"
+      # @param placeholder [String] Placeholder text when no date selected
+      # @param range_placeholder [String] Placeholder for range mode
+      # @param close_on_select [Boolean] Close popover after selection
+      # @param name [String] Form field name for hidden input
+      # @param label [String] Label text for the date picker
+      # @param label_for [String] ID to associate label with input
+      # @param show_dropdowns [Boolean] Show month/year dropdowns in calendar
+      # @param min_date [Date] Minimum selectable date
+      # @param max_date [Date] Maximum selectable date
+      # @param disabled_dates [Array<Date>] Dates that cannot be selected
+      # @param number_of_months [Integer] Number of months to display
+      # @param week_starts_on [Integer] 0 for Sunday, 1 for Monday, etc.
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        mode: :single,
+        selected: nil,
+        locale: "en-US",
+        format: "long",
+        placeholder: "Select date",
+        range_placeholder: "Select date range",
+        close_on_select: true,
+        name: nil,
+        label: nil,
+        label_for: nil,
+        show_dropdowns: false,
+        min_date: nil,
+        max_date: nil,
+        disabled_dates: [],
+        number_of_months: 1,
+        week_starts_on: 0,
+        classes: "",
+        **attributes
+      )
+        @mode = mode
+        @selected = selected
+        @locale = locale
+        @format = format
+        @placeholder = placeholder
+        @range_placeholder = range_placeholder
+        @close_on_select = close_on_select
+        @name = name
+        @label = label
+        @label_for = label_for
+        @show_dropdowns = show_dropdowns
+        @min_date = min_date
+        @max_date = max_date
+        @disabled_dates = disabled_dates
+        @number_of_months = number_of_months
+        @week_starts_on = week_starts_on
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, date_picker_html_attributes do
+          safe_join([
+            render_label,
+            render_popover,
+            render_hidden_input
+          ].compact)
+        end
+      end
+
+      private
+
+      def render_label
+        return unless @label
+
+        render UI::LabelComponent.new(for_field: @label_for, classes: "px-1") do
+          @label
+        end
+      end
+
+      def render_popover
+        render UI::PopoverComponent.new(trigger: "click", placement: "bottom-start", offset: 4) do |popover|
+          safe_join([
+            trigger,
+            render_popover_content
+          ])
+        end
+      end
+
+      def render_popover_content
+        render UI::PopoverContentComponent.new(classes: "w-auto overflow-hidden p-0") do
+          render UI::CalendarComponent.new(
+            mode: @mode,
+            selected: @selected,
+            locale: @locale,
+            show_dropdowns: @show_dropdowns,
+            min_date: @min_date,
+            max_date: @max_date,
+            disabled_dates: @disabled_dates,
+            number_of_months: @number_of_months,
+            week_starts_on: @week_starts_on,
+            attributes: {
+              data: {
+                action: "ui--calendar:select->ui--datepicker#handleSelect"
+              }
+            }
+          )
+        end
+      end
+
+      def render_hidden_input
+        return unless @name
+
+        hidden_field_tag @name, selected_value, data: { ui__datepicker_target: "hiddenInput" }
+      end
+    end

data/app/view_components/ui/date_picker_input_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+    # DatePicker Input ViewComponent
+    # An input field with calendar button for date picker.
+    #
+    # @example Basic usage
+    #   render UI::InputComponent.new(placeholder: "June 01, 2025")
+    #
+    class UI::DatePickerInputComponent < ViewComponent::Base
+      include DatePickerInputBehavior
+
+      # @param placeholder [String] Placeholder text
+      # @param value [String] Initial input value
+      # @param id [String] Input ID for label association
+      # @param classes [String] Additional CSS classes for input
+      # @param icon_classes [String] Additional CSS classes for icon button
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placeholder: "Select date",
+        value: "",
+        id: nil,
+        classes: "",
+        icon_classes: "",
+        **attributes
+      )
+        @placeholder = placeholder
+        @value = value
+        @id = id
+        @classes = classes
+        @icon_classes = icon_classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, class: "relative flex gap-2" do
+          safe_join([
+            render_input,
+            render_button
+          ])
+        end
+      end
+
+      private
+
+      def render_input
+        input_attrs = date_picker_input_html_attributes
+        input_attrs[:id] = @id if @id
+        tag.input(**input_attrs)
+      end
+
+      def render_button
+        content_tag :button,
+                    type: "button",
+                    class: date_picker_icon_button_classes,
+                    data: {
+                      ui__datepicker_target: "trigger",
+                      ui__popover_target: "trigger"
+                    } do
+          safe_join([
+            calendar_icon,
+            content_tag(:span, "Select date", class: "sr-only")
+          ])
+        end
+      end
+
+      def calendar_icon
+        <<~SVG.html_safe
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
+            <path d="M8 2v4"/>
+            <path d="M16 2v4"/>
+            <rect width="18" height="18" x="3" y="4" rx="2"/>
+            <path d="M3 10h18"/>
+          </svg>
+        SVG
+      end
+    end

data/app/view_components/ui/date_picker_trigger_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+    # DatePicker Trigger ViewComponent
+    # A button that triggers the date picker popover.
+    #
+    # @example Basic usage
+    #   render UI::TriggerComponent.new(placeholder: "Pick a date")
+    #
+    class UI::DatePickerTriggerComponent < ViewComponent::Base
+      include DatePickerTriggerBehavior
+
+      # @param placeholder [String] Placeholder text when no date selected
+      # @param selected [Date, Range, Array] Currently selected date(s) for display
+      # @param icon [Symbol] Icon to show: :chevron, :calendar, or :none
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placeholder: "Select date",
+        selected: nil,
+        icon: :chevron,
+        classes: "",
+        **attributes
+      )
+        @placeholder = placeholder
+        @selected = selected
+        @icon = icon
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :button, date_picker_trigger_html_attributes do
+          safe_join([
+            render_label,
+            render_icon
+          ].compact)
+        end
+      end
+
+      private
+
+      def render_label
+        content_tag :span,
+                    display_text,
+                    data: { ui__datepicker_target: "label" },
+                    class: "text-left truncate flex-1 #{@selected.nil? ? 'text-muted-foreground' : ''}"
+      end
+
+      def render_icon
+        return if @icon == :none
+
+        if @icon == :chevron
+          chevron_down_icon
+        elsif @icon == :calendar
+          calendar_icon
+        end
+      end
+
+      def display_text
+        return @placeholder if @selected.nil?
+
+        case @selected
+        when Date
+          @selected.strftime("%B %d, %Y")
+        when Range
+          "#{@selected.begin.strftime('%B %d, %Y')} - #{@selected.end.strftime('%B %d, %Y')}"
+        when Array
+          if @selected.empty?
+            @placeholder
+          elsif @selected.length == 1
+            @selected.first.strftime("%B %d, %Y")
+          else
+            "#{@selected.length} dates selected"
+          end
+        else
+          @placeholder
+        end
+      end
+    end

data/app/view_components/ui/dialog_close_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+    # Dialog close component (ViewComponent)
+    # Closes the dialog on click
+    #
+    # @example As button (default)
+    #   <%= render UI::CloseComponent.new { "Close" } %>
+    #
+    # @example As child (composition pattern)
+    #   <%= render UI::CloseComponent.new(as_child: true) do %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline) { "Cancel" } %>
+    #   <% end %>
+    class UI::DialogCloseComponent < ViewComponent::Base
+      # @param as_child [Boolean] merge attributes into child element
+      # @param variant [Symbol] button variant (when not using as_child)
+      # @param size [Symbol] button size (when not using as_child)
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(as_child: false, variant: :outline, size: :default, classes: "", **attributes)
+        @as_child = as_child
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        close_attrs = {
+          data: { action: "click->ui--dialog#close" }
+        }.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: merge attributes into child element
+          rendered = content.to_s
+          doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
+          first_element = doc.children.find { |node| node.element? }
+
+          if first_element
+            # Merge data attributes (convert Rails naming to HTML)
+            close_attrs.fetch(:data, {}).each do |key, value|
+              html_key = key.to_s.gsub("__", "--").gsub("_", "-")
+              first_element["data-#{html_key}"] = value
+            end
+
+            # Merge CSS classes with TailwindMerge
+            if close_attrs[:class]
+              existing_classes = first_element["class"] || ""
+              merged_classes = TailwindMerge::Merger.new.merge([existing_classes, close_attrs[:class]].join(" "))
+              first_element["class"] = merged_classes
+            end
+
+            # Merge other attributes (except data and class)
+            close_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: render as Button component
+          render(UI::ButtonComponent.new(
+            variant: @variant,
+            size: @size,
+            classes: @classes,
+            **close_attrs
+          ).with_content(content))
+        end
+      end
+    end

data/app/view_components/ui/dialog_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    # Dialog container component (ViewComponent)
+    # A modal dialog window that renders content over the main page
+    #
+    # @example Basic usage
+    #   <%= render UI::DialogComponent.new do %>
+    #     <%= render UI::TriggerComponent.new { "Open Dialog" } %>
+    #     <%= render UI::OverlayComponent.new do %>
+    #       <%= render UI::ContentComponent.new do %>
+    #         <%= render UI::HeaderComponent.new do %>
+    #           <%= render UI::TitleComponent.new { "Dialog Title" } %>
+    #           <%= render UI::DescriptionComponent.new { "Dialog description" } %>
+    #         <% end %>
+    #         <!-- Content -->
+    #         <%= render UI::FooterComponent.new do %>
+    #           <%= render UI::CloseComponent.new { "Cancel" } %>
+    #         <% end %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class UI::DialogComponent < ViewComponent::Base
+      include UI::DialogBehavior
+
+      # @param open [Boolean] whether the dialog is open
+      # @param close_on_escape [Boolean] close on Escape key press
+      # @param close_on_overlay_click [Boolean] close on overlay click
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(
+        open: false,
+        close_on_escape: true,
+        close_on_overlay_click: true,
+        classes: "",
+        **attributes
+      )
+        @open = open
+        @close_on_escape = close_on_escape
+        @close_on_overlay_click = close_on_overlay_click
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = dialog_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, content, **attrs.merge(@attributes.except(:data))
+      end
+    end

data/app/view_components/ui/dialog_content_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # Dialog content component (ViewComponent)
+    # Main content area for the dialog
+    #
+    # @example
+    #   <%= render UI::ContentComponent.new do %>
+    #     <!-- Content -->
+    #   <% end %>
+    class UI::DialogContentComponent < ViewComponent::Base
+      include UI::DialogContentBehavior
+
+      # @param open [Boolean] whether the dialog is open
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(open: false, classes: "", **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = dialog_content_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, content, **attrs.merge(@attributes.except(:data))
+      end
+    end

data/app/view_components/ui/dialog_description_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Dialog description component (ViewComponent)
+    # Description text for the dialog
+    #
+    # @example
+    #   <%= render UI::DescriptionComponent.new { "Dialog description" } %>
+    class UI::DialogDescriptionComponent < ViewComponent::Base
+      # @param classes [String] additional CSS classes
+      def initialize(classes: "")
+        @classes = classes
+      end
+
+      def call
+        content_tag :p, content, class: description_classes
+      end
+
+      private
+
+      def description_classes
+        TailwindMerge::Merger.new.merge([
+          "text-muted-foreground text-sm",
+          @classes
+        ].compact.join(" "))
+      end
+    end

data/app/view_components/ui/dialog_footer_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # Dialog footer component (ViewComponent)
+    # Footer section for the dialog
+    #
+    # @example
+    #   <%= render UI::FooterComponent.new do %>
+    #     <%= render UI::CloseComponent.new { "Close" } %>
+    #   <% end %>
+    class UI::DialogFooterComponent < ViewComponent::Base
+      include UI::DialogFooterBehavior
+
+      # @param classes [String] additional CSS classes
+      def initialize(classes: "")
+        @classes = classes
+      end
+
+      def call
+        content_tag :div, content, **dialog_footer_html_attributes
+      end
+    end

data/app/view_components/ui/dialog_header_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # Dialog header component (ViewComponent)
+    # Header section for the dialog
+    #
+    # @example
+    #   <%= render UI::HeaderComponent.new do %>
+    #     <%= render UI::TitleComponent.new { "Title" } %>
+    #     <%= render UI::DescriptionComponent.new { "Description" } %>
+    #   <% end %>
+    class UI::DialogHeaderComponent < ViewComponent::Base
+      include UI::DialogHeaderBehavior
+
+      # @param classes [String] additional CSS classes
+      def initialize(classes: "")
+        @classes = classes
+      end
+
+      def call
+        content_tag :div, content, **dialog_header_html_attributes
+      end
+    end

data/app/view_components/ui/dialog_overlay_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # Dialog overlay component (ViewComponent)
+    # Container and backdrop for dialog
+    #
+    # @example
+    #   <%= render UI::OverlayComponent.new do %>
+    #     <%= render UI::ContentComponent.new do %>
+    #       <!-- Content -->
+    #     <% end %>
+    #   <% end %>
+    class UI::DialogOverlayComponent < ViewComponent::Base
+      include UI::DialogOverlayBehavior
+
+      # @param open [Boolean] whether the dialog is open
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(open: false, classes: "", **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        container_attrs = dialog_overlay_container_html_attributes
+        container_attrs[:data] = container_attrs[:data].merge(@attributes.fetch(:data, {}))
+        overlay_attrs = dialog_overlay_html_attributes
+
+        content_tag :div, **container_attrs.merge(@attributes.except(:data)) do
+          safe_join([
+            content_tag(:div, "", **overlay_attrs),
+            content
+          ])
+        end
+      end
+    end

data/app/view_components/ui/dialog_title_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Dialog title component (ViewComponent)
+    # Title heading for the dialog
+    #
+    # @example
+    #   <%= render UI::TitleComponent.new { "Dialog Title" } %>
+    class UI::DialogTitleComponent < ViewComponent::Base
+      # @param classes [String] additional CSS classes
+      def initialize(classes: "")
+        @classes = classes
+      end
+
+      def call
+        content_tag :h2, content, class: title_classes
+      end
+
+      private
+
+      def title_classes
+        TailwindMerge::Merger.new.merge([
+          "text-lg font-semibold",
+          @classes
+        ].compact.join(" "))
+      end
+    end

data/app/view_components/ui/dialog_trigger_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+    # Dialog trigger component (ViewComponent)
+    # Opens the dialog on click
+    #
+    # @example As button (default)
+    #   <%= render UI::TriggerComponent.new { "Open Dialog" } %>
+    #
+    # @example As child (composition pattern)
+    #   <%= render UI::TriggerComponent.new(as_child: true) do %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline) { "Open" } %>
+    #   <% end %>
+    class UI::DialogTriggerComponent < ViewComponent::Base
+      # @param as_child [Boolean] merge attributes into child element
+      # @param variant [Symbol] button variant (when not using as_child)
+      # @param size [Symbol] button size (when not using as_child)
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(as_child: false, variant: :outline, size: :default, classes: "", **attributes)
+        @as_child = as_child
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        trigger_attrs = {
+          data: { action: "click->ui--dialog#open" }
+        }.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: merge attributes into child element
+          rendered = content.to_s
+          doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
+          first_element = doc.children.find { |node| node.element? }
+
+          if first_element
+            # Merge data attributes (convert Rails naming to HTML)
+            trigger_attrs.fetch(:data, {}).each do |key, value|
+              html_key = key.to_s.gsub("__", "--").gsub("_", "-")
+              first_element["data-#{html_key}"] = 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
+
+            # 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: render as Button component
+          render(UI::ButtonComponent.new(
+            variant: @variant,
+            size: @size,
+            classes: @classes,
+            **trigger_attrs
+          ).with_content(content))
+        end
+      end
+    end

data/app/view_components/ui/drawer_close_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # Drawer close component (ViewComponent)
+    # Close button for drawer
+    #
+    # @example
+    #   <%= render UI::CloseComponent.new { "Cancel" } %>
+    #
+    # @example With custom variant
+    #   <%= render UI::CloseComponent.new(variant: :ghost) { "Close" } %>
+    class UI::DrawerCloseComponent < ViewComponent::Base
+      include UI::DrawerCloseBehavior
+
+      # @param variant [Symbol] button variant (:default, :outline, :ghost, etc.)
+      # @param size [Symbol] button size (:default, :sm, :lg, etc.)
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(variant: :outline, size: :default, classes: "", attributes: {})
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render UI::ButtonComponent.new(
+          variant: @variant,
+          size: @size,
+          classes: @classes,
+          **drawer_close_data_attributes.merge(@attributes)
+        ) do
+          content
+        end
+      end
+    end