stimulus_plumbers 0.3.2 → 0.4.0

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

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Calendar
+      class Turbo
+        class DaysOfMonth < Plumber::Base
+          DAYS_IN_WEEK = 7
+
+          attr_reader :date, :today, :selectable, :selected_date, :show_other_months
+
+          def initialize(
+            template,
+            date: Date.today,
+            today: Date.today,
+            selectable: false,
+            selected_date: nil,
+            show_other_months: false
+          )
+            super(template)
+            @date              = date
+            @today             = today
+            @selectable        = selectable
+            @selected_date     = selected_date
+            @show_other_months = show_other_months
+          end
+
+          def render(...)
+            render_days_of_month(...)
+          end
+
+          private
+
+          def render_days_of_month(**html_options)
+            html_options = merge_html_options(
+              theme.resolve(:calendar_days_of_month),
+              html_options
+            )
+            template.content_tag(:div, **html_options, role: "rowgroup") { weeks_of_month }
+          end
+
+          def weeks_of_month
+            week_options = merge_html_options(
+              theme.resolve(:calendar_row),
+              { role: "row" }
+            )
+            template.safe_join(
+              build_days.each_slice(DAYS_IN_WEEK).map do |days|
+                template.content_tag(:div, **week_options) { days_in_row(days) }
+              end
+            )
+          end
+
+          def focus_day
+            @focus_day ||= if selected_date_in_current_month?
+                             selected_date
+                           elsif today_in_current_month?
+                             today
+                           else
+                             date.beginning_of_month
+                           end
+          end
+
+          def build_days
+            first        = date.beginning_of_month
+            last         = date.end_of_month
+            current_days = first.upto(last).to_a
+            prev_filler_days(first) + current_days + next_filler_days(last, current_days.length)
+          end
+
+          def prev_filler_days(first_day_of_month)
+            week_start = first_day_of_month - first_day_of_month.wday
+            week_start.upto(first_day_of_month - 1).to_a
+          end
+
+          def next_filler_days(last_day_of_month, days_in_month)
+            week_start_offset = last_day_of_month.beginning_of_month.wday
+            total             = week_start_offset + days_in_month
+            next_count = (DAYS_IN_WEEK - (total % DAYS_IN_WEEK)) % DAYS_IN_WEEK
+            next_count.positive? ? (last_day_of_month + 1).upto(last_day_of_month + next_count).to_a : []
+          end
+
+          def selected_date_in_current_month?
+            selected_date&.month == date.month && selected_date&.year == date.year
+          end
+
+          def today_in_current_month?
+            today.month == date.month && today.year == date.year
+          end
+
+          def days_in_row(days)
+            template.safe_join(
+              days.map do |day|
+                if day.month == date.month
+                  current_month_day_cell(day)
+                elsif show_other_months
+                  other_month_day_cell(day)
+                else
+                  hidden_day_cell(day)
+                end
+              end
+            )
+          end
+
+          def hidden_day_cell(date)
+            html_options = merge_html_options(
+              theme.resolve(:calendar_day),
+              { role: "gridcell", tabindex: -1, aria: { hidden: "true" } }
+            )
+            template.content_tag(:span, **html_options) do
+              template.content_tag(:time, nil, datetime: date.iso8601)
+            end
+          end
+
+          def current_month_day_cell(date)
+            tag = selectable ? :button : :span
+            template.content_tag(tag, **day_cell_html_options(date)) do
+              template.content_tag(:time, date.day.to_s, datetime: date.iso8601)
+            end
+          end
+
+          def day_cell_html_options(date)
+            is_today = date == today
+            is_selected = selected_date && date == selected_date
+            merge_html_options(
+              theme.resolve(:calendar_day),
+              {
+                role:     "gridcell",
+                tabindex: date == focus_day ? 0 : -1,
+                aria:     {
+                  current:  is_today ? "date" : nil,
+                  selected: if selectable then is_selected ? "true" : "false" end
+                }
+              }
+            )
+          end
+
+          def other_month_day_cell(date)
+            options = merge_html_options(
+              theme.resolve(:calendar_day, outside: true),
+              { role: "gridcell", tabindex: -1, aria: { disabled: "true", selected: "false" } }
+            )
+            template.content_tag(:span, **options) do
+              template.content_tag(:time, date.day.to_s, datetime: date.iso8601)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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,51 +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}#select"
-      }.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,24 +3,70 @@
 module StimulusPlumbers
   module Components
     class Card < Plumber::Base
-      def render(title: nil, title_tag: :h2, **kwargs, &block)
-        html_options = merge_html_options(
-          { classes: theme.resolve(:card).fetch(:classes, "") },
-          kwargs
-        )
+      def render(variant: :tertiary, title_tag: :h2, **kwargs, &block)
+        slots = Card::Slots.new
+        yield slots if block_given?
 
+        html_options = merge_html_options(theme.resolve(:card, variant: variant), kwargs)
         template.content_tag(:div, **html_options) do
           template.safe_join(
             [
-              (template.content_tag(title_tag, title) if title.present?),
-              template.capture(&block)
-            ]
+              render_header(slots, title_tag),
+              render_body(slots),
+              render_action(slots)
+            ].compact
+          )
+        end
+      end
+
+      private
+
+      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, **merge_html_options(theme.resolve(:card_header))) do
+          template.safe_join(
+            [
+              icon,
+              (template.content_tag(title_tag, title, **merge_html_options(theme.resolve(:card_title))) if title)
+            ].compact
           )
         end
       end
 
-      def section(title: nil, **kwargs, &block)
-        Card::Section.new(template).render(title: title, **kwargs, &block)
+      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