stimulus_plumbers 0.3.3 → 0.4.0

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Calendar
+      class Turbo
+        class DaysOfWeek < Plumber::Base
+          WEEKDAY_FORMATS = %i[narrow short long].freeze
+
+          attr_reader :format
+
+          def initialize(template, format: :short)
+            super(template)
+            @format = format
+          end
+
+          def render(...)
+            render_days_of_week(...)
+          end
+
+          private
+
+          def render_days_of_week(**kwargs)
+            html_options = merge_html_options(
+              theme.resolve(:calendar_days_of_week),
+              kwargs
+            )
+            template.content_tag(:div, **html_options) { days_of_week }
+          end
+
+          def days_of_week
+            week_options = merge_html_options(
+              theme.resolve(:calendar_row),
+              { role: "row" }
+            )
+            template.content_tag(:div, **week_options) do
+              template.safe_join(
+                day_names.map do |abbr, full|
+                  options = { role: "columnheader" }
+                  options[:aria] = { label: abbr } if format == :narrow
+                  template.content_tag(:span, display_name(abbr, full), **options)
+                end
+              )
+            end
+          end
+
+          def display_name(abbr, full)
+            case format
+            when :narrow then abbr[0, 1]
+            when :long   then full
+            else              abbr
+            end
+          end
+
+          def day_names
+            I18n.t("date.abbr_day_names").zip(I18n.t("date.day_names"))
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Calendar
+      class Turbo
+        class MonthsOfYear < Plumber::Base
+          MONTHS_PER_ROW = 4
+          MONTH_FORMATS  = %i[narrow short long].freeze
+
+          attr_reader :date, :today, :selected_date, :format
+
+          def initialize(template, date: Date.today, today: Date.today, selected_date: nil, format: :short)
+            super(template)
+            @date          = date
+            @today         = today
+            @selected_date = selected_date
+            @format        = format
+          end
+
+          def render(...)
+            render_months_of_year(...)
+          end
+
+          private
+
+          def render_months_of_year(**html_options)
+            html_options = merge_html_options(
+              theme.resolve(:calendar_months_of_year),
+              html_options
+            )
+            template.content_tag(:div, role: "rowgroup", **html_options) { months_of_year }
+          end
+
+          def months_of_year
+            row_options = merge_html_options(
+              theme.resolve(:calendar_row),
+              { role: "row" }
+            )
+            template.safe_join(
+              month_names.each_slice(MONTHS_PER_ROW).map do |months|
+                template.content_tag(:div, **row_options) { months_in_row(months) }
+              end
+            )
+          end
+
+          def month_names
+            I18n.t("date.abbr_month_names").compact
+                .zip(I18n.t("date.month_names").compact)
+                .each_with_index.map { |(abbr, full), i| [i + 1, abbr, full] }
+          end
+
+          def months_in_row(months)
+            template.safe_join(months.map { |number, abbr, full| month_cell(number, abbr, full) })
+          end
+
+          def month_cell(month_number, abbr, full)
+            options = month_cell_html_options(month_number)
+            options[:aria][:label] = abbr if format == :narrow
+            template.content_tag(:button, display_name(abbr, full), **options)
+          end
+
+          def display_name(abbr, full)
+            case format
+            when :narrow then abbr[0, 1]
+            when :long   then full
+            else              abbr
+            end
+          end
+
+          def month_cell_html_options(month_number)
+            is_current_month = month_number == today.month && date.year == today.year
+            is_focused = selected_date_in_month?(month_number) || (is_current_month && !selected_date_in_current_year?)
+            merge_html_options(
+              theme.resolve(:calendar_month),
+              {
+                role:     "gridcell",
+                tabindex: is_focused ? 0 : -1,
+                data:     { month: month_number },
+                aria:     {
+                  current:  is_current_month ? "month" : nil,
+                  selected: selected_date_in_month?(month_number) ? "true" : "false"
+                }
+              }
+            )
+          end
+
+          def selected_date_in_current_year?
+            selected_date && selected_date.year == date.year
+          end
+
+          def selected_date_in_month?(month)
+            selected_date && month == selected_date.month && date.year == selected_date.year
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Calendar
+      class Turbo
+        class YearsOfDecade < Plumber::Base
+          YEARS_PER_ROW = 4
+          DECADE_SIZE   = 10
+
+          attr_reader :date, :today, :selected_date
+
+          def initialize(template, date: Date.today, today: Date.today, selected_date: nil)
+            super(template)
+            @date          = date
+            @today         = today
+            @selected_date = selected_date
+          end
+
+          def render(...)
+            render_years_of_decade(...)
+          end
+
+          private
+
+          def render_years_of_decade(**html_options)
+            html_options = merge_html_options(
+              theme.resolve(:calendar_years_of_decade),
+              html_options
+            )
+            template.content_tag(:div, role: "rowgroup", **html_options) { years_of_decade }
+          end
+
+          def years_of_decade
+            row_options = merge_html_options(
+              theme.resolve(:calendar_row),
+              { role: "row" }
+            )
+            template.safe_join(
+              year_names.each_slice(YEARS_PER_ROW).map do |years|
+                template.content_tag(:div, **row_options) { years_in_row(years) }
+              end
+            )
+          end
+
+          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]
+            end
+          end
+
+          def years_in_row(years)
+            template.safe_join(years.map { |year, outside| year_cell(year, outside) })
+          end
+
+          def year_cell(year, outside)
+            template.content_tag(:button, year.to_s, **year_cell_html_options(year, outside))
+          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)
+            merge_html_options(
+              theme.resolve(:calendar_year, outside: outside),
+              {
+                role:     "gridcell",
+                tabindex: is_focused ? 0 : -1,
+                data:     { year: year },
+                aria:     {
+                  current:  is_current_year ? "year" : nil,
+                  selected: selected_date_in_year?(year) ? "true" : "false",
+                  disabled: outside ? "true" : nil
+                }
+              }
+            )
+          end
+
+          def selected_date_in_year?(year)
+            selected_date && year == selected_date.year
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Calendar
+      class Turbo < Plumber::Base
+        STIMULUS_CONTROLLER = "calendar-observer"
+        STIMULUS_ACTION     = "click->#{STIMULUS_CONTROLLER}#onSelect".freeze
+
+        def month(
+          date: Date.today,
+          today: Date.today,
+          show_other_months: false,
+          weekday_format: :short,
+          **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 } }
+          )
+          template.content_tag(:div, role: "grid", **html_options) do
+            template.safe_join(
+              [
+                Turbo::DaysOfWeek.new(template, format: weekday_format).render,
+                Turbo::DaysOfMonth.new(
+                  template,
+                  date:              date,
+                  today:             today,
+                  selectable:        selectable,
+                  selected_date:     selected_date,
+                  show_other_months: show_other_months
+                ).render
+              ]
+            )
+          end
+        end
+
+        def year(date: Date.today, today: Date.today, selected_date: nil, month_format: :short, **kwargs)
+          html_options = merge_html_options(
+            theme.resolve(:calendar_quarter_grid),
+            kwargs,
+            { role: "grid", aria: { label: "Year view" } }
+          )
+          template.content_tag(:div, **html_options) do
+            Turbo::MonthsOfYear.new(template, date: date, today: today, selected_date: selected_date, format: month_format).render
+          end
+        end
+
+        def decade(date: Date.today, today: Date.today, selected_date: nil, **kwargs)
+          html_options = merge_html_options(
+            theme.resolve(:calendar_quarter_grid),
+            kwargs,
+            { role: "grid", aria: { label: "Decade view" } }
+          )
+          template.content_tag(:div, **html_options) do
+            Turbo::YearsOfDecade.new(template, date: date, today: today, selected_date: selected_date).render
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/calendar.rb

@@ -3,54 +3,95 @@
 module StimulusPlumbers
   module Components
     class Calendar < Plumber::Base
-      STIMULUS_CONTROLLER          = "calendar-month"
-      OBSERVER_STIMULUS_CONTROLLER = "calendar-month-observer"
-      STIMULUS_DATA                = {
-        controller: "#{STIMULUS_CONTROLLER} #{OBSERVER_STIMULUS_CONTROLLER}",
-        action:     [
-          "click->#{OBSERVER_STIMULUS_CONTROLLER}#onSelect",
-          "#{OBSERVER_STIMULUS_CONTROLLER}:selected->#{STIMULUS_CONTROLLER}#onSelect"
-        ].join(" ")
-      }.freeze
-
-      def month(**kwargs)
-        template.content_tag(:div, role: "grid", **month_html_options(kwargs)) do
-          template.safe_join([template.tag.div(**dow_options), template.tag.div(**dom_options)])
+      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)
+        html_options = merge_html_options(
+          theme.resolve(:calendar),
+          kwargs,
+          {
+            data: {
+              controller: "#{MONTH_STIMULUS_CONTROLLER} #{OBSERVER_STIMULUS_CONTROLLER}",
+              action:     STIMULUS_ACTION
+            }
+          }
+        )
+        template.content_tag(:div, **html_options, role: "grid") do
+          template.safe_join([month, year, decade])
+        end
+      end
+
+      def month
+        template.content_tag(:div, **month_options) do
+          template.safe_join(
+            [
+              template.tag.div(**dow_options),
+              template.tag.div(**dom_options)
+            ]
+          )
         end
       end
 
+      def year
+        template.tag.div(**year_options)
+      end
+
+      def decade
+        template.tag.div(**decade_options)
+      end
+
       private
 
-      def month_html_options(kwargs)
+      def month_options
         merge_html_options(
           {
-            classes: theme.resolve(:calendar).fetch(:classes, ""),
-            data:    month_stimulus_data
-          },
-          kwargs
+            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, "")
+            }
+          }
         )
       end
 
-      def month_stimulus_data
-        STIMULUS_DATA.merge(
-          calendar_month_week_class:         theme.resolve(:calendar_week).fetch(:classes, ""),
-          calendar_month_day_of_month_class: theme.resolve(:calendar_day).fetch(:classes, "")
-        ).compact_blank
-      end
-
       def dow_options
         merge_html_options(
-          { classes: theme.resolve(:calendar_days_of_week).fetch(:classes, "") },
-          { data: { "#{STIMULUS_CONTROLLER}-target": "daysOfWeek" } }
+          theme.resolve(:calendar_days_of_week),
+          { data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfWeek" } }
         )
       end
 
       def dom_options
         merge_html_options(
-          { classes: theme.resolve(:calendar_days_of_month).fetch(:classes, "") },
+          theme.resolve(:calendar_days_of_month),
           {
             role: "rowgroup",
-            data: { "#{STIMULUS_CONTROLLER}-target": "daysOfMonth" }
+            data: { "#{MONTH_STIMULUS_CONTROLLER}-target": "daysOfMonth" }
+          }
+        )
+      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, "")
+            }
+          }
+        )
+      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, "")
+            }
           }
         )
       end

data/lib/stimulus_plumbers/components/card/slots.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Card
+      class Slots < Plumber::Slots
+        slot :icon, :title
+
+        def with_body(&block)
+          raise ArgumentError, "card.body requires a block" unless block
+
+          set_slot(:body, block)
+          nil
+        end
+
+        # Defined manually (not via `slot` DSL) because it requires a named `url:` keyword with validation.
+        def with_action(value = nil, url: nil, &block)
+          raise ArgumentError, "card.action requires content (string or block) when url: is given" if url && value.nil? && !block
+
+          set_slot(:action, block || value, url ? { url: url } : {})
+          nil
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/card.rb

@@ -3,31 +3,71 @@
 module StimulusPlumbers
   module Components
     class Card < Plumber::Base
-      def render(...)
-        render_card(...)
-      end
+      def render(variant: :tertiary, title_tag: :h2, **kwargs, &block)
+        slots = Card::Slots.new
+        yield slots if block_given?
 
-      def section(...)
-        Card::Section.new(template).render(...)
+        html_options = merge_html_options(theme.resolve(:card, variant: variant), kwargs)
+        template.content_tag(:div, **html_options) do
+          template.safe_join(
+            [
+              render_header(slots, title_tag),
+              render_body(slots),
+              render_action(slots)
+            ].compact
+          )
+        end
       end
 
       private
 
-      def render_card(title: nil, title_tag: :h2, **kwargs, &block)
-        html_options = merge_html_options(
-          { classes: theme.resolve(:card).fetch(:classes, "") },
-          kwargs
-        )
+      def render_header(slots, title_tag)
+        icon  = slots.resolve(:icon) { |value| render_icon_slot(value) }
+        title = slots.resolve(:title)
+        return unless icon || title
 
-        template.content_tag(:div, **html_options) do
+        template.content_tag(:div, **merge_html_options(theme.resolve(:card_header))) do
           template.safe_join(
             [
-              (template.content_tag(title_tag, title) if title.present?),
-              template.capture(&block)
-            ]
+              icon,
+              (template.content_tag(title_tag, title, **merge_html_options(theme.resolve(:card_title))) if title)
+            ].compact
           )
         end
       end
+
+      def render_body(slots)
+        content = slots.resolve(:body)
+        return unless content
+
+        template.content_tag(:div, **merge_html_options(theme.resolve(:card_body))) do
+          content
+        end
+      end
+
+      def render_icon_slot(value)
+        return value unless value.is_a?(Symbol) || (value.is_a?(String) && !value.html_safe?)
+
+        Components::Icon.new(template).render(
+          name:    value,
+          classes: theme.resolve(:card_icon).fetch(:classes, ""),
+          aria:    { hidden: "true" }
+        )
+      end
+
+      def render_action(slots)
+        content = slots.resolve(:action)
+        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 }
+          end
+        end
+      end
     end
   end
 end

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      # Yielded to `Combobox#render`: selects a variant renderer, then exposes its
+      # `metadata` (trigger/wrapper wiring) and renders its panel body.
+      class Builder < Plumber::Slots
+        def dropdown(**options)  = select(Dropdown, options)
+        def typeahead(**options) = select(Typeahead, options)
+        def date(**options)      = select(Date, options)
+        def time(**options)      = select(Time, options)
+
+        def selected? = @slots.key?(:variant)
+        def renderer  = selection&.fetch(:renderer)
+        def options   = selection ? selection[:options] : {}
+        def metadata  = renderer ? renderer::Metadata : DefaultMetadata
+
+        def render_panel(template, panel_attrs:)
+          renderer&.new(template)&.render(panel_attrs: panel_attrs, **options)
+        end
+
+        # Metadata used when no variant is selected.
+        module DefaultMetadata
+          module_function
+
+          def haspopup = "dialog"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = nil
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = {}
+        end
+
+        private
+
+        def select(renderer, options)
+          set_slot(:variant, { renderer: renderer, options: options })
+          nil
+        end
+
+        def selection = resolve(:variant)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Date
+        class Navigation < Plumber::Base
+          def render(step:, stimulus_controller:, view: "month", date: ::Date.today, **kwargs)
+            html_options = merge_html_options(
+              theme.resolve(:combobox_date_navigation),
+              kwargs,
+              { aria: { label: "Date picker navigation" } }
+            )
+
+            template.content_tag(:nav, **html_options) do
+              template.safe_join(navigators(stimulus_controller, step, view, date))
+            end
+          end
+
+          private
+
+          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),
+              navigator(stimulus_controller, target: "next", icon: "arrow-right", label: next_label(step))
+            ]
+          end
+
+          def navigator(stimulus_controller, target:, label:, icon: nil)
+            opts = {
+              aria: { label: label },
+              data: { "#{stimulus_controller}-target" => target }
+            }
+            opts[:icon] = icon if icon
+            Navigator.new(template).render(**opts)
+          end
+
+          def view_title_navigator(stimulus_controller, view, date)
+            Navigator.new(template).render(
+              data: {
+                "#{stimulus_controller}-target" => "viewTitle",
+                action:                           "click->#{stimulus_controller}#zoomOut"
+              }
+            ) { view_title_label(view, date) }
+          end
+
+          def view_title_label(view, date)
+            case view
+            when "year"   then date.year.to_s
+            when "decade" then decade_label(date)
+            else               I18n.l(date, format: "%B %Y")
+            end
+          end
+
+          def decade_label(date)
+            start = (date.year / 10) * 10
+            "#{start}–#{start + 9}"
+          end
+
+          def prev_label(step)
+            "Previous #{step.to_s.titleize}"
+          end
+
+          def next_label(step)
+            "Next #{step.to_s.titleize}"
+          end
+        end
+      end
+    end
+  end
+end