stimulus_plumbers 0.4.0 → 0.4.2

data/lib/stimulus_plumbers/components/calendar/turbo/years_of_decade.rb

@@ -8,13 +8,24 @@ module StimulusPlumbers
           YEARS_PER_ROW = 4
           DECADE_SIZE   = 10
 
-          attr_reader :date, :today, :selected_date
+          attr_reader :date, :today, :selected_date, :since, :till, :disabled_years
 
-          def initialize(template, date: Date.today, today: Date.today, selected_date: nil)
+          def initialize(
+            template,
+            date: Date.today,
+            today: Date.today,
+            selected_date: nil,
+            since: nil,
+            till: nil,
+            disabled_years: []
+          )
             super(template)
-            @date          = date
-            @today         = today
-            @selected_date = selected_date
+            @date           = date
+            @today          = today
+            @selected_date  = selected_date
+            @since          = since
+            @till           = till
+            @disabled_years = disabled_years
           end
 
           def render(...)
@@ -46,36 +57,53 @@ module StimulusPlumbers
           def year_names
             decade_start = (date.year / DECADE_SIZE) * DECADE_SIZE
             ((decade_start - 1)..(decade_start + DECADE_SIZE)).map do |y|
-              [y, y < decade_start || y > decade_start + DECADE_SIZE - 1]
+              [y, year_disabled?(y, decade_start)]
             end
           end
 
           def years_in_row(years)
-            template.safe_join(years.map { |year, outside| year_cell(year, outside) })
+            template.safe_join(years.map { |year, disabled| year_cell(year, disabled) })
           end
 
-          def year_cell(year, outside)
-            template.content_tag(:button, year.to_s, **year_cell_html_options(year, outside))
+          def year_cell(year, disabled)
+            template.content_tag(:button, year.to_s, **year_cell_html_options(year, disabled))
           end
 
-          def year_cell_html_options(year, outside)
-            is_current_year = year == today.year
-            is_focused      = selected_date_in_year?(year) || (is_current_year && !selected_date)
+          def year_cell_html_options(year, disabled)
             merge_html_options(
-              theme.resolve(:calendar_year, outside: outside),
+              theme.resolve(:calendar_year),
               {
                 role:     "gridcell",
-                tabindex: is_focused ? 0 : -1,
+                tabindex: focused_year?(year, disabled) ? 0 : -1,
                 data:     { year: year },
                 aria:     {
-                  current:  is_current_year ? "year" : nil,
+                  current:  current_year?(year) ? "year" : nil,
                   selected: selected_date_in_year?(year) ? "true" : "false",
-                  disabled: outside ? "true" : nil
+                  disabled: disabled ? "true" : nil
                 }
               }
             )
           end
 
+          def year_disabled?(year, decade_start)
+            outside_decade?(year, decade_start) ||
+              (since && year < since.year) ||
+              (till && year > till.year) ||
+              disabled_years.any? { |v| v.to_s == year.to_s }
+          end
+
+          def outside_decade?(year, decade_start)
+            year < decade_start || year > (decade_start + DECADE_SIZE - 1)
+          end
+
+          def current_year?(year)
+            year == today.year
+          end
+
+          def focused_year?(year, disabled)
+            !disabled && (selected_date_in_year?(year) || (current_year?(year) && !selected_date))
+          end
+
           def selected_date_in_year?(year)
             selected_date && year == selected_date.year
           end

data/lib/stimulus_plumbers/components/calendar/turbo.rb

@@ -4,22 +4,25 @@ module StimulusPlumbers
   module Components
     class Calendar
       class Turbo < Plumber::Base
-        STIMULUS_CONTROLLER = "calendar-observer"
-        STIMULUS_ACTION     = "click->#{STIMULUS_CONTROLLER}#onSelect".freeze
+        MONTH_SELECTOR_CONTROLLER   = "calendar-month-selector"
+        YEAR_SELECTOR_CONTROLLER    = "calendar-year-selector"
+        DECADE_SELECTOR_CONTROLLER  = "calendar-decade-selector"
 
         def month(
           date: Date.today,
           today: Date.today,
           show_other_months: false,
           weekday_format: :short,
+          selectable: false,
+          selected_date: nil,
+          since: nil,
+          till: nil,
           **kwargs
         )
-          selectable = kwargs.delete(:selectable) { false }
-          selected_date = kwargs.delete(:selected_date) { nil }
           html_options = merge_html_options(
             theme.resolve(:calendar),
             kwargs,
-            { data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION } }
+            { data: { controller: MONTH_SELECTOR_CONTROLLER } }
           )
           template.content_tag(:div, role: "grid", **html_options) do
             template.safe_join(
@@ -31,32 +34,76 @@ module StimulusPlumbers
                   today:             today,
                   selectable:        selectable,
                   selected_date:     selected_date,
-                  show_other_months: show_other_months
+                  show_other_months: show_other_months,
+                  since:             since,
+                  till:              till
                 ).render
               ]
             )
           end
         end
 
-        def year(date: Date.today, today: Date.today, selected_date: nil, month_format: :short, **kwargs)
+        def year(
+          date: Date.today,
+          today: Date.today,
+          selected_date: nil,
+          month_format: :short,
+          since: nil,
+          till: nil,
+          disabled_months: [],
+          **kwargs
+        )
           html_options = merge_html_options(
             theme.resolve(:calendar_quarter_grid),
             kwargs,
-            { role: "grid", aria: { label: "Year view" } }
+            {
+              role: "grid",
+              aria: { label: I18n.t("stimulus_plumbers.calendar.year_view") },
+              data: { controller: YEAR_SELECTOR_CONTROLLER }
+            }
           )
           template.content_tag(:div, **html_options) do
-            Turbo::MonthsOfYear.new(template, date: date, today: today, selected_date: selected_date, format: month_format).render
+            Turbo::MonthsOfYear.new(
+              template,
+              date:            date,
+              today:           today,
+              selected_date:   selected_date,
+              format:          month_format,
+              since:           since,
+              till:            till,
+              disabled_months: disabled_months
+            ).render
           end
         end
 
-        def decade(date: Date.today, today: Date.today, selected_date: nil, **kwargs)
+        def decade(
+          date: Date.today,
+          today: Date.today,
+          selected_date: nil,
+          since: nil,
+          till: nil,
+          disabled_years: [],
+          **kwargs
+        )
           html_options = merge_html_options(
             theme.resolve(:calendar_quarter_grid),
             kwargs,
-            { role: "grid", aria: { label: "Decade view" } }
+            {
+              role: "grid",
+              aria: { label: I18n.t("stimulus_plumbers.calendar.decade_view") },
+              data: { controller: DECADE_SELECTOR_CONTROLLER }
+            }
           )
           template.content_tag(:div, **html_options) do
-            Turbo::YearsOfDecade.new(template, date: date, today: today, selected_date: selected_date).render
+            Turbo::YearsOfDecade.new(
+              template,
+              date:           date,
+              today:          today,
+              selected_date:  selected_date,
+              since:          since,
+              till:           till,
+              disabled_years: disabled_years
+            ).render
           end
         end
       end

data/lib/stimulus_plumbers/components/calendar.rb

@@ -6,93 +6,77 @@ module StimulusPlumbers
       MONTH_STIMULUS_CONTROLLER  = "calendar-month"
       YEAR_STIMULUS_CONTROLLER   = "calendar-year"
       DECADE_STIMULUS_CONTROLLER = "calendar-decade"
-      OBSERVER_STIMULUS_CONTROLLER = "calendar-observer"
-      STIMULUS_ACTION = "click->#{OBSERVER_STIMULUS_CONTROLLER}#onSelect".freeze
 
-      def render(**kwargs)
+      def month(**kwargs)
         html_options = merge_html_options(
           theme.resolve(:calendar),
           kwargs,
-          {
-            data: {
-              controller: "#{MONTH_STIMULUS_CONTROLLER} #{OBSERVER_STIMULUS_CONTROLLER}",
-              action:     STIMULUS_ACTION
-            }
-          }
+          { data: { controller: MONTH_STIMULUS_CONTROLLER } },
+          { data: stimulus_theme_options }
         )
         template.content_tag(:div, **html_options, role: "grid") do
-          template.safe_join([month, year, decade])
+          template.safe_join([days_of_week, days_of_month])
         end
       end
 
-      def month
-        template.content_tag(:div, **month_options) do
-          template.safe_join(
-            [
-              template.tag.div(**dow_options),
-              template.tag.div(**dom_options)
-            ]
-          )
+      def year(**kwargs)
+        html_options = merge_html_options(
+          {
+            hidden: true,
+            role:   "grid",
+            aria:   { label: I18n.t("stimulus_plumbers.calendar.year_view") },
+            data:   { controller: YEAR_STIMULUS_CONTROLLER }
+          },
+          kwargs
+        )
+        template.content_tag(:div, **html_options) do
+          template.tag.div(data: { "#{YEAR_STIMULUS_CONTROLLER}-target": "grid" }, role: "rowgroup")
         end
       end
 
-      def year
-        template.tag.div(**year_options)
-      end
-
-      def decade
-        template.tag.div(**decade_options)
-      end
-
-      private
-
-      def month_options
-        merge_html_options(
+      def decade(**kwargs)
+        html_options = merge_html_options(
           {
-            data: {
-              "#{MONTH_STIMULUS_CONTROLLER}-row-class":          theme.resolve(:calendar_row).fetch(:classes, ""),
-              "#{MONTH_STIMULUS_CONTROLLER}-day-of-month-class": theme.resolve(:calendar_day).fetch(:classes, "")
-            }
-          }
+            hidden: true,
+            role:   "grid",
+            aria:   { label: I18n.t("stimulus_plumbers.calendar.decade_view") },
+            data:   { controller: DECADE_STIMULUS_CONTROLLER }
+          },
+          kwargs
         )
+        template.content_tag(:div, **html_options) do
+          template.tag.div(data: { "#{DECADE_STIMULUS_CONTROLLER}-target": "grid" }, role: "rowgroup")
+        end
       end
 
-      def dow_options
-        merge_html_options(
-          theme.resolve(:calendar_days_of_week),
-          { data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfWeek" } }
-        )
-      end
+      private
 
-      def dom_options
-        merge_html_options(
-          theme.resolve(:calendar_days_of_month),
-          {
-            role: "rowgroup",
-            data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfMonth" }
-          }
-        )
+      def stimulus_theme_options
+        {
+          "#{MONTH_STIMULUS_CONTROLLER}-row-class":                theme.resolve(:calendar_row).fetch(:classes, ""),
+          "#{MONTH_STIMULUS_CONTROLLER}-day-of-month-class":       theme.resolve(:calendar_day).fetch(:classes, ""),
+          "#{MONTH_STIMULUS_CONTROLLER}-day-of-other-month-class": theme.resolve(:calendar_day, outside: true).fetch(:classes, "")
+        }
       end
 
-      def year_options
-        merge_html_options(
-          { hidden: true, data: { controller: YEAR_STIMULUS_CONTROLLER } },
-          {
-            data: {
-              "#{YEAR_STIMULUS_CONTROLLER}-month-class": theme.resolve(:calendar_month).fetch(:classes, "")
-            }
-          }
+      def days_of_week
+        template.tag.div(
+          **merge_html_options(
+            theme.resolve(:calendar_days_of_week),
+            { data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfWeek" } }
+          )
         )
       end
 
-      def decade_options
-        merge_html_options(
-          { hidden: true, data: { controller: DECADE_STIMULUS_CONTROLLER } },
-          {
-            data: {
-              "#{DECADE_STIMULUS_CONTROLLER}-year-class": theme.resolve(:calendar_year).fetch(:classes, "")
+      def days_of_month
+        template.tag.div(
+          **merge_html_options(
+            theme.resolve(:calendar_days_of_month),
+            {
+              role: "rowgroup",
+              data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfMonth" }
             }
-          }
+          )
         )
       end
     end

data/lib/stimulus_plumbers/components/card.rb

@@ -14,7 +14,7 @@ module StimulusPlumbers
               render_header(slots, title_tag),
               render_body(slots),
               render_action(slots)
-            ].compact
+            ]
           )
         end
       end
@@ -31,7 +31,7 @@ module StimulusPlumbers
             [
               icon,
               (template.content_tag(title_tag, title, **merge_html_options(theme.resolve(:card_title))) if title)
-            ].compact
+            ]
           )
         end
       end
@@ -60,11 +60,11 @@ module StimulusPlumbers
         return unless content
 
         url = slots.options_for(:action)[:url]
-        template.content_tag(:div, **merge_html_options(theme.resolve(:card_action))) do
-          if url.present?
-            template.content_tag(:a, href: url) { content }
-          else
-            template.content_tag(:button, type: "button") { content }
+        Components::Button.new(template).build(type: :ghost, variant: :tertiary) do |attrs|
+          element = url.present? ? :a : :button
+          extra   = url.present? ? { href: url } : { type: "button" }
+          template.content_tag(element, **merge_html_options(attrs, extra, theme.resolve(:card_action))) do
+            template.content_tag(:span, content)
           end
         end
       end

data/lib/stimulus_plumbers/components/combobox/date/navigation.rb

@@ -9,7 +9,7 @@ module StimulusPlumbers
             html_options = merge_html_options(
               theme.resolve(:combobox_date_navigation),
               kwargs,
-              { aria: { label: "Date picker navigation" } }
+              { aria: { label: t("navigation_label") } }
             )
 
             template.content_tag(:nav, **html_options) do
@@ -22,7 +22,7 @@ module StimulusPlumbers
           def navigators(stimulus_controller, step, view, date)
             [
               navigator(stimulus_controller, target: "previous", icon: "arrow-left", label: prev_label(step)),
-              view_title_navigator(stimulus_controller, view, date),
+              view(stimulus_controller, view, date),
               navigator(stimulus_controller, target: "next", icon: "arrow-right", label: next_label(step))
             ]
           end
@@ -36,16 +36,20 @@ module StimulusPlumbers
             Navigator.new(template).render(**opts)
           end
 
-          def view_title_navigator(stimulus_controller, view, date)
-            Navigator.new(template).render(
+          def view(stimulus_controller, view, date)
+            html_options = merge_html_options(
+              theme.resolve(:combobox_date_navigation_title),
               data: {
                 "#{stimulus_controller}-target" => "viewTitle",
                 action:                           "click->#{stimulus_controller}#zoomOut"
               }
-            ) { view_title_label(view, date) }
+            )
+            Components::Button.new(template).render(
+              type: :ghost, variant: :tertiary, size: :sm, **html_options
+            ) { view_label(view, date) }
           end
 
-          def view_title_label(view, date)
+          def view_label(view, date)
             case view
             when "year"   then date.year.to_s
             when "decade" then decade_label(date)
@@ -59,11 +63,15 @@ module StimulusPlumbers
           end
 
           def prev_label(step)
-            "Previous #{step.to_s.titleize}"
+            t("previous_#{step}")
           end
 
           def next_label(step)
-            "Next #{step.to_s.titleize}"
+            t("next_#{step}")
+          end
+
+          def t(key)
+            I18n.t("stimulus_plumbers.combobox.date.#{key}")
           end
         end
       end

data/lib/stimulus_plumbers/components/combobox/date/navigator.rb

@@ -16,7 +16,9 @@ module StimulusPlumbers
               theme.resolve(:combobox_date_navigation_navigator),
               kwargs
             )
-            Components::Button.new(template).render(variant: :ghost, size: nil, icon_leading: icon, **html_options, &block)
+            Components::Button.new(template).render(
+              type: :ghost, variant: :tertiary, size: :sm, icon_leading: icon, **html_options, &block
+            )
           end
         end
       end

data/lib/stimulus_plumbers/components/combobox/date.rb

@@ -4,17 +4,21 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Date < Plumber::Base
-        STIMULUS_CONTROLLER = "combobox-date"
-        CALENDAR_OUTLET     = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
-        STIMULUS_ACTION     = [
-          "calendar-observer:selected->#{STIMULUS_CONTROLLER}#onSelect",
+        STIMULUS_CONTROLLER     = "combobox-date"
+        CALENDAR_MONTH_OUTLET   = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
+        CALENDAR_YEAR_OUTLET    = "#{STIMULUS_CONTROLLER}-calendar-year-outlet".freeze
+        CALENDAR_DECADE_OUTLET  = "#{STIMULUS_CONTROLLER}-calendar-decade-outlet".freeze
+        STIMULUS_ACTION         = [
+          "calendar-month:selected->#{STIMULUS_CONTROLLER}#onDaySelect",
+          "calendar-year:selected->#{STIMULUS_CONTROLLER}#onMonthSelect",
+          "calendar-decade:selected->#{STIMULUS_CONTROLLER}#onYearSelect",
           "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect",
           "#{STIMULUS_CONTROLLER}:selected->#{Components::Popover::STIMULUS_CONTROLLER}#closeOnSelect"
         ].join(" ").freeze
 
-        def self.calendar_id_for(panel_id)
-          [panel_id, "calendar"].compact.join("_")
-        end
+        def self.month_id_for(panel_id)   = [panel_id, "calendar_month"].compact.join("_")
+        def self.year_id_for(panel_id)    = [panel_id, "calendar_year"].compact.join("_")
+        def self.decade_id_for(panel_id)  = [panel_id, "calendar_decade"].compact.join("_")
 
         module Metadata
           module_function
@@ -30,26 +34,32 @@ module StimulusPlumbers
 
         private
 
-        def render_date(panel_attrs: {}, value: nil, label: "Picker", labelledby: nil)
-          calendar_id = self.class.calendar_id_for(panel_attrs[:id])
+        def render_date(panel_attrs: {}, value: nil, label: nil, labelledby: nil)
+          panel_id  = panel_attrs[:id]
+          month_id  = self.class.month_id_for(panel_id)
+          year_id   = self.class.year_id_for(panel_id)
+          decade_id = self.class.decade_id_for(panel_id)
 
           template.content_tag(
             :div,
-            **merge_html_options(panel_attrs, dialog_attrs(value, calendar_id, label, labelledby))
+            **merge_html_options(panel_attrs, dialog_attrs(value, month_id, year_id, decade_id, label, labelledby))
           ) do
-            template.safe_join([navigation, calendar(id: calendar_id)])
+            template.safe_join([navigation, calendar(month_id: month_id, year_id: year_id, decade_id: decade_id)])
           end
         end
 
-        def dialog_attrs(value, calendar_id, label, labelledby)
+        def dialog_attrs(value, month_id, year_id, decade_id, label, labelledby)
           data = {
-            controller:      STIMULUS_CONTROLLER,
-            CALENDAR_OUTLET  => "##{calendar_id}",
-            action:          STIMULUS_ACTION,
+            controller:             STIMULUS_CONTROLLER,
+            CALENDAR_MONTH_OUTLET   => "##{month_id}",
+            CALENDAR_YEAR_OUTLET    => "##{year_id}",
+            CALENDAR_DECADE_OUTLET  => "##{decade_id}",
+            action:                 STIMULUS_ACTION,
             "#{STIMULUS_CONTROLLER}-date-value" => value
           }.compact
 
-          { role: "dialog", aria: labelled_aria(label, labelledby: labelledby), data: data }
+          resolved_label = label || I18n.t("stimulus_plumbers.combobox.date.dialog_label")
+          { role: "dialog", aria: labelled_aria(resolved_label, labelledby: labelledby), data: data }
         end
 
         def navigation
@@ -59,8 +69,15 @@ module StimulusPlumbers
           )
         end
 
-        def calendar(**kwargs)
-          Calendar.new(template).render(**kwargs)
+        def calendar(month_id:, year_id:, decade_id:)
+          cal = Calendar.new(template)
+          template.safe_join(
+            [
+              cal.month(id: month_id),
+              cal.year(id: year_id),
+              cal.decade(id: decade_id)
+            ]
+          )
         end
       end
     end