fernandes-ui 0.1.1 → 0.1.4

data/app/view_components/ui/calendar_component.rb

@@ -1,185 +1,244 @@
 # frozen_string_literal: true
 
-    # Calendar component (ViewComponent)
-    # A date picker calendar with support for single, range, and multiple selection
-    class UI::CalendarComponent < ViewComponent::Base
-      include UI::CalendarBehavior
-
-      def initialize(
-        mode: :single,
-        selected: nil,
-        month: Date.today,
-        number_of_months: 1,
-        week_starts_on: 0,
-        locale: "en-US",
-        min_date: nil,
-        max_date: nil,
-        disabled_dates: [],
-        show_outside_days: true,
-        fixed_weeks: false,
-        show_dropdowns: false,
-        year_range: 100,
-        min_range_days: 0,
-        max_range_days: 0,
-        exclude_disabled: false,
-        use_native_select: true,
-        name: nil,
-        classes: "",
-        attributes: {}
-      )
-        @mode = mode
-        @selected = selected
-        @month = month
-        @number_of_months = number_of_months
-        @week_starts_on = week_starts_on
-        @locale = locale
-        @min_date = min_date
-        @max_date = max_date
-        @disabled_dates = disabled_dates
-        @show_outside_days = show_outside_days
-        @fixed_weeks = fixed_weeks
-        @show_dropdowns = show_dropdowns
-        @year_range = year_range
-        @min_range_days = min_range_days
-        @max_range_days = max_range_days
-        @exclude_disabled = exclude_disabled
-        @use_native_select = use_native_select
-        @name = name
-        @classes = classes
-        @attributes = attributes
-        super()
-      end
-
-      def call
-        content_tag(:div, **calendar_html_attributes) do
-          safe_join([
-            live_region_html,
-            hidden_input,
-            months_html
-          ].compact)
-        end
-      end
-
-      private
-
-      def live_region_html
-        tag.div("", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", data: { ui__calendar_target: "liveRegion" })
-      end
-
-      def hidden_input
-        return unless @name
-
-        tag.input(type: "hidden", name: @name, value: selected_value, data: { ui__calendar_target: "input" })
-      end
-
-      def months_html
-        safe_join(@number_of_months.times.map { |i| month_html(i) })
-      end
-
-      def month_html(index)
-        content_tag(:div, class: "space-y-4") do
-          safe_join([header_html(index), table_html])
-        end
-      end
-
-      def header_html(_index)
-        content_tag(:div, class: "flex justify-center pt-1 relative items-center") do
-          safe_join([
-            nav_button(:previous),
-            @show_dropdowns ? dropdowns_html : month_label_html,
-            nav_button(:next)
-          ])
-        end
-      end
-
-      def nav_button(direction)
-        action = direction == :previous ? "previousMonth" : "nextMonth"
-        label = direction == :previous ? "Go to previous month" : "Go to next month"
-        position = direction == :previous ? "left" : "right"
-
-        content_tag(:button,
-          type: "button",
-          data: { action: "click->ui--calendar##{action}" },
-          class: nav_button_classes(position),
-          "aria-label": label
-        ) do
-          direction == :previous ? chevron_left_svg : chevron_right_svg
-        end
-      end
-
-      def nav_button_classes(position)
-        base = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium " \
-               "ring-offset-background transition-colors " \
-               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " \
-               "border border-input bg-background hover:bg-accent hover:text-accent-foreground " \
-               "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        position_class = position == "left" ? "absolute left-1" : "absolute right-1"
-        "#{base} #{position_class}"
-      end
-
-      def month_label_html
-        content_tag(:div, "", class: "text-sm font-medium", data: { ui__calendar_target: "monthLabel" })
-      end
-
-      def dropdowns_html
-        content_tag(:div, class: "flex items-center gap-1") do
-          safe_join([month_select_html, year_select_html])
-        end
-      end
-
-      def month_select_html
-        content_tag(:select,
-          data: { ui__calendar_target: "monthSelect", action: "change->ui--calendar#goToMonth" },
-          class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background"
-        ) do
-          safe_join(Date::MONTHNAMES.compact.each_with_index.map { |name, i| tag.option(name, value: i) })
-        end
-      end
-
-      def year_select_html
-        current_year = Date.today.year
-        content_tag(:select,
-          data: { ui__calendar_target: "yearSelect", action: "change->ui--calendar#goToYear" },
-          class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background"
-        ) do
-          safe_join(((current_year - @year_range)..(current_year + 10)).map { |y| tag.option(y.to_s, value: y) })
-        end
-      end
-
-      def table_html
-        content_tag(:table, class: "w-full border-collapse space-y-1", role: "grid") do
-          safe_join([
-            content_tag(:thead) { weekdays_html },
-            content_tag(:tbody, "", data: { ui__calendar_target: "grid" }, role: "rowgroup")
-          ])
-        end
-      end
-
-      def weekdays_html
-        content_tag(:tr, class: "flex", data: { ui__calendar_target: "weekdaysHeader" }) do
-          safe_join(ordered_weekdays.map { |day| tag.th(day, scope: "col", class: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]") })
-        end
-      end
-
-      def chevron_left_svg
-        tag.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"
-        ) do
-          tag.path(d: "m15 18-6-6 6-6")
-        end
-      end
-
-      def chevron_right_svg
-        tag.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"
-        ) do
-          tag.path(d: "m9 18 6-6-6-6")
-        end
-      end
+# Calendar component (ViewComponent)
+# A date picker calendar with support for single, range, and multiple selection
+class UI::CalendarComponent < ViewComponent::Base
+  include UI::CalendarBehavior
+
+  def initialize(
+    mode: :single,
+    selected: nil,
+    month: Date.today,
+    number_of_months: 1,
+    week_starts_on: 0,
+    locale: "en-US",
+    min_date: nil,
+    max_date: nil,
+    disabled_dates: [],
+    show_outside_days: true,
+    fixed_weeks: false,
+    show_dropdowns: false,
+    year_range: 100,
+    min_range_days: 0,
+    max_range_days: 0,
+    exclude_disabled: false,
+    use_native_select: true,
+    name: nil,
+    classes: "",
+    attributes: {}
+  )
+    @mode = mode
+    @selected = selected
+    @month = month
+    @number_of_months = number_of_months
+    @week_starts_on = week_starts_on
+    @locale = locale
+    @min_date = min_date
+    @max_date = max_date
+    @disabled_dates = disabled_dates
+    @show_outside_days = show_outside_days
+    @fixed_weeks = fixed_weeks
+    @show_dropdowns = show_dropdowns
+    @year_range = year_range
+    @min_range_days = min_range_days
+    @max_range_days = max_range_days
+    @exclude_disabled = exclude_disabled
+    @use_native_select = use_native_select
+    @name = name
+    @classes = classes
+    @attributes = attributes
+    super()
+  end
+
+  def call
+    content_tag(:div, **calendar_html_attributes) do
+      safe_join([
+        live_region_html,
+        hidden_input,
+        months_html
+      ].compact)
     end
+  end
+
+  private
+
+  def live_region_html
+    tag.div("", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", data: {ui__calendar_target: "liveRegion"})
+  end
+
+  def hidden_input
+    return unless @name
+
+    tag.input(type: "hidden", name: @name, value: selected_value, data: {ui__calendar_target: "input"})
+  end
+
+  def months_html
+    safe_join(@number_of_months.times.map { |i| month_html(i) })
+  end
+
+  def month_html(index)
+    content_tag(:div, class: "space-y-4") do
+      safe_join([header_html(index), table_html])
+    end
+  end
+
+  def header_html(_index)
+    content_tag(:div, class: "flex justify-center pt-1 relative items-center") do
+      safe_join([
+        nav_button(:previous),
+        @show_dropdowns ? dropdowns_html : month_label_html,
+        nav_button(:next)
+      ])
+    end
+  end
+
+  def nav_button(direction)
+    action = (direction == :previous) ? "previousMonth" : "nextMonth"
+    label = (direction == :previous) ? "Go to previous month" : "Go to next month"
+    position = (direction == :previous) ? "left" : "right"
+
+    content_tag(:button,
+      type: "button",
+      data: {action: "click->ui--calendar##{action}"},
+      class: nav_button_classes(position),
+      "aria-label": label) do
+      (direction == :previous) ? chevron_left_svg : chevron_right_svg
+    end
+  end
+
+  def nav_button_classes(position)
+    base = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium " \
+           "ring-offset-background transition-colors " \
+           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " \
+           "border border-input bg-background hover:bg-accent hover:text-accent-foreground " \
+           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+    position_class = (position == "left") ? "absolute left-1" : "absolute right-1"
+    "#{base} #{position_class}"
+  end
+
+  def month_label_html
+    content_tag(:div, "", class: "text-sm font-medium", data: {ui__calendar_target: "monthLabel"})
+  end
+
+  def dropdowns_html
+    if use_native_select?
+      native_dropdowns_html
+    else
+      ui_select_dropdowns_html
+    end
+  end
+
+  def native_dropdowns_html
+    content_tag(:div, class: "flex items-center gap-1") do
+      safe_join([month_select_html, year_select_html])
+    end
+  end
+
+  def month_select_html
+    content_tag(:select,
+      data: {ui__calendar_target: "monthSelect", action: "change->ui--calendar#goToMonth"},
+      class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background") do
+      safe_join(Date::MONTHNAMES.compact.each_with_index.map { |name, i| tag.option(name, value: i) })
+    end
+  end
+
+  def year_select_html
+    current_year = Date.today.year
+    content_tag(:select,
+      data: {ui__calendar_target: "yearSelect", action: "change->ui--calendar#goToYear"},
+      class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background") do
+      safe_join(((current_year - @year_range)..(current_year + 10)).map { |y| tag.option(y.to_s, value: y) })
+    end
+  end
+
+  def ui_select_dropdowns_html
+    content_tag(:div, class: "flex items-center gap-1 px-8 flex-1") do
+      safe_join([
+        ui_month_select_html,
+        ui_year_select_html
+      ])
+    end
+  end
+
+  def ui_month_select_html
+    render(UI::SelectComponent.new(classes: "flex-1", value: (@month.month - 1).to_s)) do
+      safe_join([
+        render(UI::SelectTriggerComponent.new(classes: "h-9 w-full gap-1 px-2 text-sm font-medium border-0 shadow-none")),
+        render(UI::SelectContentComponent.new(classes: "min-w-[8rem]")) {
+          safe_join(Date::MONTHNAMES.compact.each_with_index.map { |name, i|
+            render(UI::SelectItemComponent.new(value: i.to_s)) { name }
+          })
+        },
+        tag.input(
+          type: "hidden",
+          value: (@month.month - 1).to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "monthSelect",
+            action: "change->ui--calendar#goToMonth"
+          }
+        )
+      ])
+    end
+  end
+
+  def ui_year_select_html
+    current_year = Date.today.year
+    render(UI::SelectComponent.new(value: @month.year.to_s)) do
+      safe_join([
+        render(UI::SelectTriggerComponent.new(classes: "min-w-[75px] h-9 w-auto gap-1 px-2 text-sm font-medium border-0 shadow-none")),
+        render(UI::SelectContentComponent.new(classes: "min-w-[5rem] max-h-[200px]")) {
+          safe_join(((current_year - @year_range)..(current_year + 10)).map { |y|
+            render(UI::SelectItemComponent.new(value: y.to_s)) { y.to_s }
+          })
+        },
+        tag.input(
+          type: "hidden",
+          value: @month.year.to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "yearSelect",
+            action: "change->ui--calendar#goToYear"
+          }
+        )
+      ])
+    end
+  end
+
+  def table_html
+    content_tag(:table, class: "w-full border-collapse space-y-1", role: "grid") do
+      safe_join([
+        content_tag(:thead) { weekdays_html },
+        content_tag(:tbody, "", data: {ui__calendar_target: "grid"}, role: "rowgroup")
+      ])
+    end
+  end
+
+  def weekdays_html
+    content_tag(:tr, class: "flex", data: {ui__calendar_target: "weekdaysHeader"}) do
+      safe_join(ordered_weekdays.map { |day| tag.th(day, scope: "col", class: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]") })
+    end
+  end
+
+  def chevron_left_svg
+    tag.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"
+    ) do
+      tag.path(d: "m15 18-6-6 6-6")
+    end
+  end
+
+  def chevron_right_svg
+    tag.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"
+    ) do
+      tag.path(d: "m9 18 6-6-6-6")
+    end
+  end
+end

data/app/view_components/ui/card_action_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardActionComponent < ViewComponent::Base
-      include UI::CardActionBehavior
+class UI::CardActionComponent < ViewComponent::Base
+  include UI::CardActionBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_action { content }
-      end
-    end
+  def call
+    render_card_action { content }
+  end
+end

data/app/view_components/ui/card_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardComponent < ViewComponent::Base
-      include UI::CardBehavior
+class UI::CardComponent < ViewComponent::Base
+  include UI::CardBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card { content }
-      end
-    end
+  def call
+    render_card { content }
+  end
+end

data/app/view_components/ui/card_content_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardContentComponent < ViewComponent::Base
-      include UI::CardContentBehavior
+class UI::CardContentComponent < ViewComponent::Base
+  include UI::CardContentBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_content { content }
-      end
-    end
+  def call
+    render_card_content { content }
+  end
+end

data/app/view_components/ui/card_description_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardDescriptionComponent < ViewComponent::Base
-      include UI::CardDescriptionBehavior
+class UI::CardDescriptionComponent < ViewComponent::Base
+  include UI::CardDescriptionBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_description { content }
-      end
-    end
+  def call
+    render_card_description { content }
+  end
+end

data/app/view_components/ui/card_footer_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardFooterComponent < ViewComponent::Base
-      include UI::CardFooterBehavior
+class UI::CardFooterComponent < ViewComponent::Base
+  include UI::CardFooterBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_footer { content }
-      end
-    end
+  def call
+    render_card_footer { content }
+  end
+end

data/app/view_components/ui/card_header_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardHeaderComponent < ViewComponent::Base
-      include UI::CardHeaderBehavior
+class UI::CardHeaderComponent < ViewComponent::Base
+  include UI::CardHeaderBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_header { content }
-      end
-    end
+  def call
+    render_card_header { content }
+  end
+end

data/app/view_components/ui/card_title_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardTitleComponent < ViewComponent::Base
-      include UI::CardTitleBehavior
+class UI::CardTitleComponent < ViewComponent::Base
+  include UI::CardTitleBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        render_card_title { content }
-      end
-    end
+  def call
+    render_card_title { content }
+  end
+end

data/app/view_components/ui/carousel_component.rb

@@ -1,16 +1,17 @@
 # frozen_string_literal: true
 
-    class UI::CarouselComponent < ViewComponent::Base
-      def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
-        @classes = classes
-        @orientation = orientation
-        @opts = opts
-        @plugins = plugins
-        @attributes = attributes
-      end
+class UI::CarouselComponent < ViewComponent::Base
+  def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
+    @classes = classes
+    @orientation = orientation
+    @opts = opts
+    @plugins = plugins
+    @attributes = attributes
+  end
 
-      def call
-        extend UI::CarouselBehavior
-        content_tag :div, content, **carousel_html_attributes
-      end
-    end
+  def call
+    extend UI::CarouselBehavior
+
+    content_tag :div, content, **carousel_html_attributes
+  end
+end

data/app/view_components/ui/carousel_content_component.rb

@@ -1,15 +1,16 @@
 # frozen_string_literal: true
 
-    class UI::CarouselContentComponent < ViewComponent::Base
-      def initialize(classes: nil, **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+class UI::CarouselContentComponent < ViewComponent::Base
+  def initialize(classes: nil, **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        extend UI::CarouselContentBehavior
-        content_tag :div, **carousel_content_html_attributes do
-          content_tag :div, content, **carousel_content_container_html_attributes
-        end
-      end
+  def call
+    extend UI::CarouselContentBehavior
+
+    content_tag :div, **carousel_content_html_attributes do
+      content_tag :div, content, **carousel_content_container_html_attributes
     end
+  end
+end