stimulus_plumbers 0.3.3 → 0.4.2

data/lib/stimulus_plumbers/components/calendar.rb

@@ -3,55 +3,80 @@
 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
+      MONTH_STIMULUS_CONTROLLER  = "calendar-month"
+      YEAR_STIMULUS_CONTROLLER   = "calendar-year"
+      DECADE_STIMULUS_CONTROLLER = "calendar-decade"
 
       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)])
+        html_options = merge_html_options(
+          theme.resolve(:calendar),
+          kwargs,
+          { data: { controller: MONTH_STIMULUS_CONTROLLER } },
+          { data: stimulus_theme_options }
+        )
+        template.content_tag(:div, **html_options, role: "grid") do
+          template.safe_join([days_of_week, days_of_month])
         end
       end
 
-      private
+      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 month_html_options(kwargs)
-        merge_html_options(
+      def decade(**kwargs)
+        html_options = merge_html_options(
           {
-            classes: theme.resolve(:calendar).fetch(:classes, ""),
-            data:    month_stimulus_data
+            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 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
+      private
+
+      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 dow_options
-        merge_html_options(
-          { classes: theme.resolve(:calendar_days_of_week).fetch(:classes, "") },
-          { data: { "#{STIMULUS_CONTROLLER}-target": "daysOfWeek" } }
+      def days_of_week
+        template.tag.div(
+          **merge_html_options(
+            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, "") },
-          {
-            role: "rowgroup",
-            data: { "#{STIMULUS_CONTROLLER}-target": "daysOfMonth" }
-          }
+      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/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)
+            ]
+          )
+        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)
             ]
           )
         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]
+        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
     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,80 @@
+# 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: t("navigation_label") } }
+            )
+
+            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(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(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"
+              }
+            )
+            Components::Button.new(template).render(
+              type: :ghost, variant: :tertiary, size: :sm, **html_options
+            ) { view_label(view, date) }
+          end
+
+          def view_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)
+            t("previous_#{step}")
+          end
+
+          def next_label(step)
+            t("next_#{step}")
+          end
+
+          def t(key)
+            I18n.t("stimulus_plumbers.combobox.date.#{key}")
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Date
+        class Navigator < Plumber::Base
+          def render(...)
+            render_navigator(...)
+          end
+
+          private
+
+          def render_navigator(icon: nil, **kwargs, &block)
+            html_options = merge_html_options(
+              theme.resolve(:combobox_date_navigation_navigator),
+              kwargs
+            )
+            Components::Button.new(template).render(
+              type: :ghost, variant: :tertiary, size: :sm, icon_leading: icon, **html_options, &block
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -4,53 +4,80 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Date < Plumber::Base
-        STIMULUS_CONTROLLER = "combobox-date"
-        CALENDAR_OUTLET = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
-
-        def self.default_opts
-          {
-            input:   { data: { combobox_date_date_value: nil } },
-            popover: { label: "Picker", role: "dialog", tag: :div }
-          }
-        end
+        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(popover_id)
-          [popover_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
 
-        def render(...)
-          render_date(...)
+          def haspopup = "dialog"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = "calendar"
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = { input_formatter_format_value: "date" }
         end
 
+        def render(...) = render_date(...)
+
         private
 
-        def render_date(value: nil, popover_id: nil)
-          calendar_id = self.class.calendar_id_for(popover_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, month_id, year_id, decade_id, label, labelledby))
+          ) do
+            template.safe_join([navigation, calendar(month_id: month_id, year_id: year_id, decade_id: decade_id)])
+          end
+        end
+
+        def dialog_attrs(value, month_id, year_id, decade_id, label, labelledby)
           data = {
-            controller:          STIMULUS_CONTROLLER,
-            CALENDAR_OUTLET  => "##{calendar_id}",
-            action:              [
-              "calendar-month-observer:selected->#{STIMULUS_CONTROLLER}#onSelect",
-              "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
-            ].join(" "),
+            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
 
-          template.content_tag(:div, data: data) do
-            template.safe_join([navigation, calendar_month(id: calendar_id)])
-          end
+          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
-          DatePicker::Navigation.new(template).render(
+          Navigation.new(template).render(
             step:                "month",
             stimulus_controller: STIMULUS_CONTROLLER
           )
         end
 
-        def calendar_month(**kwargs)
-          Calendar.new(template).month(**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

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

@@ -8,39 +8,42 @@ module StimulusPlumbers
         STIMULUS_ACTION     = [
           "click->#{STIMULUS_CONTROLLER}#select",
           "keydown->#{STIMULUS_CONTROLLER}#onNavigate",
-          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect",
+          "#{STIMULUS_CONTROLLER}:selected->#{Components::Popover::STIMULUS_CONTROLLER}#closeOnSelect"
         ].join(" ").freeze
 
-        def self.default_opts
-          {
-            popover: {
-              tag:      :div,
-              haspopup: "listbox",
-              data:     { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
-            }
-          }
-        end
+        module Metadata
+          module_function
 
-        def render(...)
-          render_dropdown(...)
+          def haspopup = "listbox"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = "chevron-down"
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = {}
         end
 
+        def render(...) = render_dropdown(...)
+
         private
 
-        def render_dropdown(options: [], value: nil, label: nil, labelledby: nil)
-          listbox_attrs = merge_html_options(
-            { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
-            { role: "listbox", data: { "#{STIMULUS_CONTROLLER}_target": "listbox" } }
+        def render_dropdown(panel_attrs: {}, options: [], value: nil, label: nil, labelledby: nil)
+          template.content_tag(
+            :ul,
+            Options.new(template).render(options, value: value),
+            **listbox_attrs(panel_attrs: panel_attrs, label: label, labelledby: labelledby)
           )
-          if labelledby
-            listbox_attrs[:aria] = { labelledby: labelledby }
-          elsif label
-            listbox_attrs[:aria] = { label: label }
-          end
+        end
 
-          template.content_tag(:ul, **listbox_attrs) do
-            Options.new(template).render(options, value: value)
-          end
+        def listbox_attrs(panel_attrs: {}, label: nil, labelledby: nil)
+          merge_html_options(
+            panel_attrs,
+            theme.resolve(:combobox_listbox),
+            {
+              role: "listbox",
+              aria: labelled_aria(label, labelledby: labelledby),
+              data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION, combobox_dropdown_target: "listbox" }
+            }
+          )
         end
       end
     end

data/lib/stimulus_plumbers/components/combobox/options/option.rb

@@ -16,7 +16,7 @@ module StimulusPlumbers
             aria[:disabled] = "true" if disabled
 
             attrs = merge_html_options(
-              { classes: theme.resolve(:combobox_option, selected: selected, disabled: disabled).fetch(:classes, "") },
+              theme.resolve(:combobox_option, selected: selected, disabled: disabled),
               { role: "option", aria: aria, data: { value: value } }
             )
 

data/lib/stimulus_plumbers/components/combobox/options/option_group.rb

@@ -13,7 +13,7 @@ module StimulusPlumbers
 
           def render_option_group(label:, options:, value: nil)
             attrs = merge_html_options(
-              { classes: theme.resolve(:combobox_option_group).fetch(:classes, "") },
+              theme.resolve(:combobox_option_group),
               { role: "group", aria: { label: label } }
             )