fernandes-ui 0.1.1 → 0.1.4

data/app/view_components/ui/date_picker_component.rb

@@ -1,137 +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
+# 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
+  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
+  # @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
+  def call
+    content_tag :div, date_picker_html_attributes do
+      safe_join([
+        render_label,
+        render_popover,
+        render_hidden_input
+      ].compact)
+    end
+  end
 
-      private
+  private
 
-      def render_label
-        return unless @label
+  def render_label
+    return unless @label
 
-        render UI::LabelComponent.new(for_field: @label_for, classes: "px-1") do
-          @label
-        end
-      end
+    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
+    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_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
+  def render_hidden_input
+    return unless @name
 
-        hidden_field_tag @name, selected_value, data: { ui__datepicker_target: "hiddenInput" }
-      end
-    end
+    hidden_field_tag @name, selected_value, data: {ui__datepicker_target: "hiddenInput"}
+  end
+end

data/app/view_components/ui/date_picker_input_component.rb

@@ -1,76 +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
+# 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
+  # @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 call
+    content_tag :div, class: "relative flex gap-2" do
+      safe_join([
+        render_input,
+        render_button
+      ])
+    end
+  end
 
-      def render_input
-        input_attrs = date_picker_input_html_attributes
-        input_attrs[:id] = @id if @id
-        tag.input(**input_attrs)
-      end
+  private
 
-      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 render_input
+    input_attrs = date_picker_input_html_attributes
+    input_attrs[:id] = @id if @id
+    tag.input(**input_attrs)
+  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
+  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

@@ -1,79 +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
+# 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
+  # @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
+  def call
+    content_tag :button, date_picker_trigger_html_attributes do
+      safe_join([
+        render_label,
+        render_icon
+      ].compact)
+    end
+  end
 
-      private
+  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_label
+    content_tag :span,
+      display_text,
+      data: {ui__datepicker_target: "label"},
+      class: "text-left truncate flex-1 #{"text-muted-foreground" if @selected.nil?}"
+  end
 
-      def render_icon
-        return if @icon == :none
+  def render_icon
+    return if @icon == :none
 
-        if @icon == :chevron
-          chevron_down_icon
-        elsif @icon == :calendar
-          calendar_icon
-        end
-      end
+    if @icon == :chevron
+      chevron_down_icon
+    elsif @icon == :calendar
+      calendar_icon
+    end
+  end
 
-      def display_text
-        return @placeholder if @selected.nil?
+  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
+    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