stimulus_plumbers 0.4.0 → 0.4.2

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

@@ -30,84 +30,86 @@ module StimulusPlumbers
 
         private
 
-        def render_time(panel_attrs: {}, format: :h12, step: 1, value: nil, label: "Picker", labelledby: nil)
-          @format = format
-          @step   = [1, step.to_i].max
-          @time   = parse_time(value)
+        def render_time(panel_attrs: {}, format: :h12, step: 1, value: nil, label: nil, labelledby: nil)
+          step = [1, step.to_i].max
+          time = parse_time(value)
 
-          attrs = merge_html_options(
-            panel_attrs,
-            theme.resolve(:combobox_time),
-            dialog_attrs(label, labelledby)
-          )
-          template.content_tag(:div, **attrs) { template.safe_join(drums) }
+          attrs = merge_html_options(panel_attrs, theme.resolve(:combobox_time), dialog_attrs(label, labelledby))
+          template.content_tag(:div, **attrs) { template.safe_join(drums(format, step, time)) }
         end
 
         def dialog_attrs(label, labelledby)
+          resolved_label = label || I18n.t("stimulus_plumbers.combobox.time.dialog_label")
           {
             role: "dialog",
-            aria: labelled_aria(label, labelledby: labelledby),
+            aria: labelled_aria(resolved_label, labelledby: labelledby),
             data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
           }
         end
 
-        def drums
-          cols = [hour_drum, minute_drum]
-          cols << period_drum if @format == :h12
+        def drums(format, step, time)
+          cols = [hour_drum(format, time), minute_drum(step, time)]
+          cols << period_drum(time) if format == :h12
           cols
         end
 
-        def render_drum(target, label, items, selected)
-          drum.render(
-            stimulus_controller: STIMULUS_CONTROLLER,
-            target:              target,
-            label:               label,
-            items:               items,
-            selected:            selected
-          )
+        def hour_drum(format, time)
+          items = if format == :h12
+                    (1..12).map { |h| [h.to_s] * 2 }
+                  else
+                    (0..23).map { |h| [h.to_s.rjust(2, "0")] * 2 }
+                  end
+          render_drum("hour", t("hour_label"), items, selected_hour(format, time))
         end
 
-        def hour_drum
-          render_drum("hour", "Hour", hour_items, current_hour)
+        def minute_drum(step, time)
+          items    = (0...60).step(step).map { |m| [m.to_s.rjust(2, "0")] * 2 }
+          selected = time ? round_minute(time.min, step).to_s.rjust(2, "0") : nil
+          render_drum("minute", t("minute_label"), items, selected)
         end
 
-        def minute_drum
-          items    = (0...60).step(@step).map { |m| [m.to_s.rjust(2, "0")] * 2 }
-          selected = @time ? snap_minute(@time.min).to_s.rjust(2, "0") : nil
-          render_drum("minute", "Minute", items, selected)
+        def period_drum(time)
+          items    = [[t("am"), "AM"], [t("pm"), "PM"]]
+          selected = time && (time.hour < 12 ? "AM" : "PM")
+          render_drum("period", t("period_label"), items, selected)
         end
 
-        def period_drum
-          render_drum("period", "Period", [%w[AM AM], %w[PM PM]], @time && (@time.hour < 12 ? "AM" : "PM"))
-        end
-
-        def hour_items
-          if @format == :h12
-            (1..12).map { |h| [h.to_s, h.to_s] }
-          else
-            (0..23).map { |h| [h.to_s.rjust(2, "0")] * 2 }
-          end
-        end
+        def selected_hour(format, time)
+          return nil unless time
 
-        def current_hour
-          return nil unless @time
-
-          if @format == :h12
-            h = @time.hour % 12
+          if format == :h12
+            h = time.hour % 12
             (h.zero? ? 12 : h).to_s
           else
-            @time.hour.to_s.rjust(2, "0")
+            time.hour.to_s.rjust(2, "0")
           end
         end
 
-        def snap_minute(minute)
-          return minute if @step == 1
+        def round_minute(minute, step)
+          return minute if step == 1
 
-          ((minute.to_f / @step).round * @step) % 60
+          ((minute.to_f / step).round * step) % 60
         end
 
-        def drum
-          @drum ||= Time::Drum.new(template)
+        def render_drum(target, label, items, selected)
+          attrs = merge_html_options(
+            theme.resolve(:combobox_listbox),
+            theme.resolve(:combobox_time_drum, type: target == "period" ? :period : :unit),
+            {
+              role:     "listbox",
+              tabindex: "0",
+              aria:     { label: label },
+              data:     { "#{STIMULUS_CONTROLLER}_target": target }
+            },
+            { data: { action: "click->#{STIMULUS_CONTROLLER}#select keydown->#{STIMULUS_CONTROLLER}#onNavigate" } }
+          )
+          template.content_tag(:ul, **attrs) do
+            template.safe_join(
+              items.map do |text, value|
+                Options::Option.new(template).render(label: text, value: value, selected: value.to_s == selected.to_s)
+              end
+            )
+          end
         end
 
         def parse_time(value)
@@ -117,6 +119,10 @@ module StimulusPlumbers
         rescue ArgumentError
           nil
         end
+
+        def t(key)
+          I18n.t("stimulus_plumbers.combobox.time.#{key}")
+        end
       end
     end
   end

data/lib/stimulus_plumbers/components/input_group.rb

@@ -3,9 +3,9 @@
 module StimulusPlumbers
   module Components
     class InputGroup < Plumber::Base
-      def render(leading: nil, trailing: nil, error: false, **kwargs, &block)
+      def render(leading: nil, trailing: nil, error: false, floating: nil, **kwargs, &block)
         html_options = merge_html_options(
-          theme.resolve(:input_group, error: error),
+          theme.resolve(:input_group, error: error, floating: floating),
           kwargs
         )
         template.content_tag(:div, **html_options) do

data/lib/stimulus_plumbers/components/list/item.rb

@@ -66,7 +66,7 @@ module StimulusPlumbers
           return unless title || description
 
           template.content_tag(:span, **merge_html_options(theme.resolve(:list_item_content))) do
-            template.safe_join([title, description].compact)
+            template.safe_join([title, description])
           end
         end
 
@@ -75,7 +75,7 @@ module StimulusPlumbers
           icon_trailing = render_icon_slot(slots, :icon_trailing)
           content       = render_content_slot(slots)
 
-          template.safe_join([icon_leading, content, icon_trailing].compact)
+          template.safe_join([icon_leading, content, icon_trailing])
         end
       end
     end

data/lib/stimulus_plumbers/components/list/section.rb

@@ -44,7 +44,7 @@ module StimulusPlumbers
                    **merge_html_options(theme.resolve(:list_section_description))
                  )
                end)
-            ].compact
+            ]
           )
         end
 

data/lib/stimulus_plumbers/components/popover.rb

@@ -16,7 +16,7 @@ module StimulusPlumbers
         @trigger_html = nil
         @panel_html   = nil
         yield self
-        template.safe_join([@trigger_html, @panel_html].compact)
+        template.safe_join([@trigger_html, @panel_html])
       end
 
       def trigger(haspopup: "dialog", controls: @panel_id, **kwargs, &block)

data/lib/stimulus_plumbers/components/timeline/event/slots.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Timeline
+      class Event
+        class Slots < Plumber::Slots
+          slot :indicator, :time, :title, :trigger, :description, :detail, :actions
+
+          def with_indicator(icon: nil)
+            set_slot(:indicator, icon, { type: icon ? :icon : :dot, icon: icon })
+            nil
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/timeline/event.rb

@@ -0,0 +1,189 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Timeline
+      class Event < Plumber::Base
+        attr_reader :interactive
+
+        def self.detail_id_for(event_id)
+          [event_id, "detail"].compact.join("_")
+        end
+
+        def render(datetime: nil, id: nil, interactive: false, orientation: :vertical, **kwargs, &block)
+          @detail_id = self.class.detail_id_for(id || template.sp_dom_id)
+
+          slots = Timeline::Event::Slots.new
+          yield slots if block_given?
+
+          validate_slots!(slots, datetime: datetime)
+          @orientation = orientation
+          @interactive = interactive || slots.trigger?
+
+          html_options = merge_html_options(theme.resolve(:timeline_item, orientation: orientation), kwargs)
+          render_event(slots, datetime: datetime, html_options: html_options)
+        end
+
+        private
+
+        def validate_slots!(slots, datetime:)
+          raise ArgumentError, "e.title and e.trigger are mutually exclusive" if slots.title? && slots.trigger?
+          raise ArgumentError, "e.detail requires e.trigger" if slots.detail? && !slots.trigger?
+          raise ArgumentError, "e.time requires datetime:" if slots.time? && datetime.nil?
+        end
+
+        def render_event(slots, datetime:, html_options:)
+          template.content_tag(:li, **html_options) do
+            if @orientation.to_sym == :horizontal
+              render_horizontal_event(slots, datetime: datetime)
+            else
+              render_vertical_event(slots, datetime: datetime)
+            end
+          end
+        end
+
+        def render_vertical_event(slots, datetime:)
+          content_col = template.content_tag(:div, class: "flex-1 min-w-0") do
+            template.safe_join(
+              [
+                render_time(slots, datetime: datetime),
+                render_heading(slots),
+                render_description(slots),
+                render_detail(slots),
+                render_actions(slots)
+              ].compact
+            )
+          end
+          template.safe_join([render_indicator(slots), content_col].compact)
+        end
+
+        def render_horizontal_event(slots, datetime:)
+          template.safe_join(
+            [
+              render_horizontal_indicator_row(slots),
+              render_horizontal_content(slots, datetime: datetime)
+            ]
+          )
+        end
+
+        def render_horizontal_indicator_row(slots)
+          template.content_tag(:div, class: "flex items-center") do
+            template.safe_join(
+              [
+                render_indicator(slots),
+                template.content_tag(:div, nil, **merge_html_options(theme.resolve(:timeline_item_connector)))
+              ].compact
+            )
+          end
+        end
+
+        def render_horizontal_content(slots, datetime:)
+          template.content_tag(:div, **merge_html_options(theme.resolve(:timeline_item_content))) do
+            template.safe_join(
+              [
+                render_time(slots, datetime: datetime),
+                render_heading(slots),
+                render_description(slots),
+                render_detail(slots),
+                render_actions(slots)
+              ].compact
+            )
+          end
+        end
+
+        def render_indicator(slots)
+          return unless slots.indicator?
+
+          type         = slots.options_for(:indicator)[:type]
+          icon_name    = slots.options_for(:indicator)[:icon]
+          html_options = merge_html_options(
+            theme.resolve(:timeline_item_indicator, type: type, orientation: @orientation),
+            { aria: { hidden: "true" } }
+          )
+          template.content_tag(:div, **html_options) { render_indicator_content(type: type, icon_name: icon_name) }
+        end
+
+        def render_indicator_content(type:, icon_name:)
+          if type == :icon && icon_name
+            Components::Icon.new(template).render(
+              name:    icon_name,
+              classes: theme.resolve(:timeline_item_indicator_icon_slot).fetch(:classes, ""),
+              aria:    { hidden: "true" }
+            )
+          else
+            template.content_tag(:span, nil, **merge_html_options(theme.resolve(:timeline_item_indicator_dot)))
+          end
+        end
+
+        def render_time(slots, datetime:)
+          return unless datetime
+
+          content = slots.resolve(:time)
+          time_type = slots.options_for(:time)[:type] || :default
+          time_target = @interactive ? { data: { "timeline-target": "time" } } : {}
+          attrs = merge_html_options(theme.resolve(:timeline_item_time, type: time_type), { datetime: datetime }, time_target)
+          template.content_tag(:time, content, **attrs)
+        end
+
+        def render_heading(slots)
+          if slots.trigger?
+            render_trigger_heading(slots)
+          elsif slots.title?
+            content = slots.resolve(:title)
+            template.content_tag(:h3, content, **merge_html_options(theme.resolve(:timeline_item_title)))
+          end
+        end
+
+        def render_trigger_heading(slots)
+          content = slots.resolve(:trigger)
+          trigger_attrs = if @interactive
+                            merge_html_options(
+                              theme.resolve(:timeline_item_trigger),
+                              {
+                                data: { "timeline-target": "trigger", action: "timeline#toggle" },
+                                aria: { expanded: "false", controls: @detail_id }
+                              }
+                            )
+                          else
+                            merge_html_options(theme.resolve(:timeline_item_trigger))
+                          end
+          button = template.content_tag(:button, content, type: "button", **trigger_attrs)
+          template.content_tag(:h3, button, **merge_html_options(theme.resolve(:timeline_item_heading)))
+        end
+
+        def render_description(slots)
+          return unless slots.description?
+
+          content = slots.resolve(:description)
+          return unless content.present?
+
+          template.content_tag(:p, content, **merge_html_options(theme.resolve(:timeline_item_description)))
+        end
+
+        def render_detail(slots)
+          return unless slots.detail?
+
+          content = slots.resolve(:detail)
+          detail_attrs = if @interactive
+                           merge_html_options(
+                             theme.resolve(:timeline_item_detail),
+                             { id: @detail_id, hidden: "", data: { "timeline-target": "detail" } }
+                           )
+                         else
+                           merge_html_options(theme.resolve(:timeline_item_detail))
+                         end
+          template.content_tag(:div, content, **detail_attrs)
+        end
+
+        def render_actions(slots)
+          return unless slots.actions?
+
+          content = slots.resolve(:actions)
+          return unless content.present?
+
+          template.content_tag(:div, content, **merge_html_options(theme.resolve(:timeline_item_actions)))
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/timeline/group.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Timeline
+      class Group < Plumber::Base
+        def render(**kwargs, &block)
+          content = template.capture(self, &block)
+          html_options = merge_html_options(theme.resolve(:timeline_group), kwargs)
+          template.content_tag(:div, content, **html_options)
+        end
+
+        def section(date:, datetime: nil, **kwargs, &block)
+          inner_tl = Timeline.new(template)
+          inner_tl.instance_variable_set(:@orientation, :vertical)
+          inner_tl.instance_variable_set(:@interactive, false)
+
+          events_html  = template.capture(inner_tl, &block)
+          section_html = template.content_tag(:div, **merge_html_options(theme.resolve(:timeline_group_section), kwargs)) do
+            render_section_body(date: date, datetime: datetime, events_html: events_html)
+          end
+          template.concat(section_html)
+        end
+
+        private
+
+        def render_section_body(date:, datetime:, events_html:)
+          date_attrs = merge_html_options(
+            theme.resolve(:timeline_group_section_date),
+            datetime ? { datetime: datetime } : {}
+          )
+          template.safe_join(
+            [
+              template.content_tag(:time, date, **date_attrs),
+              template.content_tag(:ol, events_html, **merge_html_options(theme.resolve(:timeline_group_section_list)))
+            ]
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/timeline.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Timeline < Plumber::Base
+      def render(orientation: :vertical, interactive: false, **kwargs, &block)
+        @interactive = interactive
+        @orientation = orientation
+        content    = template.capture(self, &block)
+        stimulus   = @interactive ? { data: { controller: "timeline" } } : {}
+        ol_options = merge_html_options(theme.resolve(:timeline, orientation: orientation), kwargs, stimulus)
+        list       = template.content_tag(:ol, content, **ol_options)
+
+        orientation.to_sym == :vertical ? render_vertical_wrapper(list) : list
+      end
+
+      def event(datetime: nil, **kwargs, &block)
+        ev = Timeline::Event.new(template)
+        html = ev.render(
+          datetime:    datetime,
+          interactive: @interactive,
+          orientation: @orientation,
+          **kwargs,
+          &block
+        )
+        @interactive ||= ev.interactive
+        template.concat(html)
+      end
+
+      private
+
+      def render_vertical_wrapper(list)
+        track_line = template.content_tag(:div, nil, **merge_html_options(theme.resolve(:timeline_track_line)))
+        template.content_tag(:div, class: "relative") do
+          template.safe_join([track_line, list])
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/builder.rb

@@ -73,7 +73,13 @@ module StimulusPlumbers
         field = Field.new(@template, **field_opts)
         field.render(object, attribute, input_id: field_id(attribute)) do |html_opts, opts, error|
           Plumber::Dispatcher.build(
-            Fields::Renderer::FIELD.fetch(as), attribute, html_opts, opts, error, **input_opts
+            Fields::Renderer::FIELD.fetch(as),
+            attribute,
+            html_opts,
+            opts,
+            error,
+            floating: field.floating,
+            **input_opts
           ).call(self)
         end
       end
@@ -110,8 +116,10 @@ module StimulusPlumbers
         Fields::Fieldset.new(@template).render(object, attribute, field_id(attribute), field, &block)
       end
 
-      def render_input_group(error:, leading: nil, trailing: nil, **wrapper_opts, &block)
-        Components::InputGroup.new(@template).render(leading: leading, trailing: trailing, error: error, **wrapper_opts, &block)
+      def render_input_group(error:, floating: nil, leading: nil, trailing: nil, **group_options, &block)
+        Components::InputGroup.new(@template).render(
+          leading: leading, trailing: trailing, error: error, floating: floating, **group_options, &block
+        )
       end
 
       # rubocop:disable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity

data/lib/stimulus_plumbers/form/field.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative "base"
+require_relative "../themes/schema/form/floating/ranges"
 
 module StimulusPlumbers
   module Form
@@ -10,7 +11,6 @@ module StimulusPlumbers
         text_area file password date time select search
       ].freeze
       COLLECTION_TYPES = %i[radio check_box collection_select grouped_collection_select].freeze
-      FLOATING_TYPES   = %i[standard filled outlined].freeze
       OPTIONS          = (Base::OPTIONS + %i[hide_label]).freeze
 
       attr_reader :hide_label
@@ -31,7 +31,7 @@ module StimulusPlumbers
       def render(object, attribute, input_id:, &block)
         @label ||= attribute.to_s.humanize
         case @floating
-        when *FLOATING_TYPES
+        when *StimulusPlumbers::Themes::Schema::Form::Floating::Ranges::TYPE
           render_floating_field(object, attribute, input_id, &block)
         else
           render_default_field(object, attribute, input_id, &block)
@@ -70,8 +70,7 @@ module StimulusPlumbers
       def render_floating_field(object, attribute, input_id, &block)
         error_override = error?(object, attribute)
         aria           = build_aria(object, attribute, input_id)
-        input_classes  = theme.resolve(:form_field_floating, type: @floating, error: error_override)[:classes]
-        field_opts     = build_html_options(input_id, aria).merge(class: input_classes, placeholder: " ")
+        field_opts     = build_html_options(input_id, aria).merge(placeholder: " ")
         Fields::Group.new(@template).render(layout: @layout, error: error_override) do
           @template.safe_join(
             [
@@ -90,7 +89,7 @@ module StimulusPlumbers
           text:     @label,
           for_id:   input_id,
           id:       self.class.label_id(input_id),
-          type:     @floating,
+          floating: @floating,
           required: @required,
           error:    error,
           &block

data/lib/stimulus_plumbers/form/fields/inputs/checkbox.rb

@@ -104,7 +104,7 @@ module StimulusPlumbers
           def build_check_box_label(field, attribute, input_id, check_box_html)
             label_opts = merge_html_options(theme.resolve(:form_field_checkbox_label))
             label_text = field.label || attribute.to_s.humanize
-            @template.content_tag(:label, for: input_id, **label_opts) do
+            @template.content_tag(:label, **label_opts, for: input_id) do
               @template.safe_join([check_box_html, label_text])
             end
           end

data/lib/stimulus_plumbers/form/fields/inputs/combobox.rb

@@ -7,13 +7,13 @@ module StimulusPlumbers
         module Combobox
           private
 
-          def render_combobox(attribute, input_id:, opts:, error:, **kwargs, &block)
+          def render_combobox(attribute, input_id:, opts:, error:, floating: nil, **kwargs, &block)
             combobox_opts = opts.deep_merge(input: { name: field_name(attribute) })
 
             Components::Combobox.new(@template).render(
               id: input_id,
               **combobox_opts,
-              **merge_html_options(theme.resolve(:form_field_input_combobox, error: error), kwargs),
+              **merge_html_options(theme.resolve(:form_field_input_combobox, floating: floating, error: error), kwargs),
               &block
             )
           end

data/lib/stimulus_plumbers/form/fields/inputs/datetime.rb

@@ -21,7 +21,16 @@ module StimulusPlumbers
 
           private
 
-          def render_combobox_date(attribute, html_opts, opts, error, icon_leading: nil, icon_trailing: nil, **kwargs)
+          def render_combobox_date(
+            attribute,
+            html_opts,
+            opts,
+            error,
+            floating: nil,
+            icon_leading: nil,
+            icon_trailing: nil,
+            **kwargs
+          )
             current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
             labelledby    = Field.label_id(html_opts[:id])
             combobox_opts = {
@@ -34,6 +43,7 @@ module StimulusPlumbers
               input_id: html_opts[:id],
               opts:     combobox_opts,
               error:    error,
+              floating: floating,
               **kwargs
             ) do |c|
               c.date(value: current_value, labelledby: labelledby)
@@ -45,6 +55,7 @@ module StimulusPlumbers
             html_opts,
             opts,
             error,
+            floating: nil,
             format: :h12,
             step: 1,
             icon_leading: nil,
@@ -63,6 +74,7 @@ module StimulusPlumbers
               input_id: html_opts[:id],
               opts:     combobox_opts,
               error:    error,
+              floating: floating,
               **kwargs
             ) do |c|
               c.time(format: format, step: step, value: current_value, labelledby: labelledby)

data/lib/stimulus_plumbers/form/fields/inputs/file.rb

@@ -5,15 +5,20 @@ module StimulusPlumbers
     module Fields
       module Inputs
         module File
-          def file_field(attribute, options = {})
-            html_options = merge_html_options(theme.resolve(:form_field_input_file), options)
+          def file_field(attribute, floating: nil, **options)
+            html_options = merge_html_options(theme.resolve(:form_field_input_file, floating: floating), options)
             super(attribute, html_options)
           end
 
           private
 
-          def render_file_input(attribute, html_opts, opts, error, **kwargs)
-            html_options = merge_html_options(theme.resolve(:form_field_input_file, error: error), opts, html_opts, kwargs)
+          def render_file_input(attribute, html_opts, opts, error, floating: nil, **kwargs)
+            html_options = merge_html_options(
+              theme.resolve(:form_field_input_file, floating: floating, error: error),
+              opts,
+              html_opts,
+              kwargs
+            )
             @template.file_field(@object_name, attribute, objectify_options(html_options))
           end
         end