stimulus_plumbers 0.3.3 → 0.4.2

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

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class List
+      class Item < Plumber::Base
+        def render(content = nil, **kwargs, &block)
+          slots = List::Item::Slots.new
+          slots.with_title(content) if content
+          slots.with_icon_trailing("external-link") if kwargs[:url].present? && kwargs[:target] == "_blank"
+          yield slots if block_given?
+
+          template.content_tag(:li) do
+            build(**kwargs) do |attrs|
+              render_link_or_button(**attrs) { render_item_slots(slots) }
+            end
+          end
+        end
+
+        def build(**kwargs, &block)
+          html_options = merge_html_options(theme.resolve(:list_item), kwargs)
+          template.capture(html_options, &block)
+        end
+
+        private
+
+        def render_link_or_button(url: nil, target: nil, active: false, **html_options, &block)
+          if url.present?
+            aria = active ? { aria: { current: "page" } } : {}
+            template.content_tag(:a, href: url, target: target, **merge_html_options(html_options, aria)) do
+              template.capture(&block)
+            end
+          else
+            aria = active ? { aria: { current: true } } : {}
+            template.content_tag(:button, type: "button", **merge_html_options(html_options, aria)) do
+              template.capture(&block)
+            end
+          end
+        end
+
+        def render_icon_slot(slots, name)
+          slots.resolve(name) do |value|
+            next value unless Components::Icon.icon_name?(value)
+
+            Components::Icon.new(template).render(
+              name:    value,
+              classes: theme.resolve(:list_item_icon).fetch(:classes, ""),
+              aria:    { hidden: "true" }
+            )
+          end
+        end
+
+        def render_title_slot(slots)
+          slots.resolve(:title) { |v| template.content_tag(:span, v, **merge_html_options(theme.resolve(:list_item_title))) }
+        end
+
+        def render_description_slot(slots)
+          slots.resolve(:description) do |v|
+            template.content_tag(:span, v, **merge_html_options(theme.resolve(:list_item_description)))
+          end
+        end
+
+        def render_content_slot(slots)
+          title       = render_title_slot(slots)
+          description = render_description_slot(slots)
+          return unless title || description
+
+          template.content_tag(:span, **merge_html_options(theme.resolve(:list_item_content))) do
+            template.safe_join([title, description])
+          end
+        end
+
+        def render_item_slots(slots)
+          icon_leading  = render_icon_slot(slots, :icon_leading)
+          icon_trailing = render_icon_slot(slots, :icon_trailing)
+          content       = render_content_slot(slots)
+
+          template.safe_join([icon_leading, content, icon_trailing])
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class List
+      class Section < Plumber::Base
+        def initialize(template, heading_level: nil)
+          super(template)
+          @heading_level = heading_level
+        end
+
+        def render(title: nil, description: nil, **kwargs, &block)
+          html_options = merge_html_options(theme.resolve(:list_section), kwargs)
+          template.content_tag(:li, **html_options) do
+            template.safe_join(
+              [
+                render_section_header(title, description),
+                render_section_body(title, &block)
+              ]
+            )
+          end
+        end
+
+        def section(...)
+          List::Section.new(template, heading_level: (@heading_level || 0) + 1).render(...)
+        end
+
+        def item(content = nil, **kwargs, &block)
+          List::Item.new(template).render(content, **kwargs, &block)
+        end
+
+        private
+
+        def render_section_header(title, description)
+          return unless title.present? || description.present?
+
+          template.safe_join(
+            [
+              render_section_title(title),
+              (if description.present?
+                 template.content_tag(
+                   :span,
+                   description,
+                   **merge_html_options(theme.resolve(:list_section_description))
+                 )
+               end)
+            ]
+          )
+        end
+
+        def render_section_title(title)
+          return unless title.present?
+
+          if @heading_level
+            tag = :"h#{[@heading_level, 6].min}"
+            template.content_tag(tag, title, **merge_html_options(theme.resolve(:list_section_title)))
+          else
+            template.content_tag(
+              :span,
+              title,
+              **merge_html_options(theme.resolve(:list_section_title), { aria: { hidden: "true" } })
+            )
+          end
+        end
+
+        def render_section_body(title, &block)
+          opts = title.present? ? { aria: { label: title } } : {}
+          template.content_tag(:ul, template.capture(self, &block), opts)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/list.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class List < Plumber::Base
+      def render(...)
+        render_list(...)
+      end
+
+      def section(...)
+        List::Section.new(template, heading_level: @heading_level).render(...)
+      end
+
+      def item(content = nil, **kwargs, &block)
+        List::Item.new(template).render(content, **kwargs, &block)
+      end
+
+      private
+
+      def render_list(role: "list", heading_level: nil, **kwargs, &block)
+        @heading_level = heading_level
+        html_options = merge_html_options(
+          theme.resolve(:list),
+          kwargs,
+          { role: role }
+        )
+        template.content_tag(:ul, template.capture(self, &block), **html_options)
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover/panel.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover
+      class Panel < Plumber::Base
+        def render(panel_id:, tag: :div, **kwargs, &block)
+          template.content_tag(
+            tag,
+            block_given? ? template.capture(panel_id, &block) : nil,
+            **panel_attrs(panel_id, **kwargs)
+          )
+        end
+
+        def build(panel_id:, **kwargs, &block)
+          template.capture(panel_attrs(panel_id, **kwargs), &block)
+        end
+
+        private
+
+        def panel_attrs(panel_id, **kwargs)
+          merge_html_options(
+            { id: panel_id, hidden: "" },
+            theme.resolve(:popover),
+            { data: { popover_target: "panel" } },
+            kwargs
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover/trigger.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover
+      class Trigger < Plumber::Base
+        STIMULUS_ACTION = [
+          "click->#{STIMULUS_CONTROLLER}#toggle",
+          "keydown.esc->#{STIMULUS_CONTROLLER}#close"
+        ].join(" ").freeze
+
+        def render(panel_id:, haspopup: "dialog", **kwargs, &block)
+          html_options = merge_html_options(
+            theme.resolve(:popover_trigger),
+            {
+              type: "button",
+              aria: { haspopup: haspopup, expanded: "false", controls: panel_id },
+              data: { popover_target: "trigger", action: STIMULUS_ACTION }
+            },
+            kwargs
+          )
+          template.content_tag(:button, block_given? ? template.capture(&block) : nil, **html_options)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover.rb

@@ -3,31 +3,57 @@
 module StimulusPlumbers
   module Components
     class Popover < Plumber::Base
-      def render(...)
-        render_popover(...)
-      end
+      STIMULUS_CONTROLLER = "popover"
 
-      private
+      def self.panel_id_for(trigger_id)
+        [trigger_id, "popover"].compact.join("_")
+      end
 
-      def render_popover(interactive: true, **kwargs, &block)
-        html_options = merge_html_options(
-          { classes: theme.resolve(:popover).fetch(:classes, "") },
-          kwargs
-        )
+      def render(...) = render_popover(...)
 
-        builder = Popover::Builder.new(template)
-        template.capture(builder, &block)
+      def build(panel_id: nil, &block)
+        @panel_id     = panel_id || self.class.panel_id_for(template.sp_dom_id)
+        @trigger_html = nil
+        @panel_html   = nil
+        yield self
+        template.safe_join([@trigger_html, @panel_html])
+      end
 
-        template.content_tag(:div, **html_options) do
-          template.safe_join([builder.activator_html, wrap_content(interactive, builder)])
+      def trigger(haspopup: "dialog", controls: @panel_id, **kwargs, &block)
+        if block_given? && block.arity == 1
+          attrs = {
+            panel_id: @panel_id,
+            aria:     { haspopup: haspopup, expanded: "false", controls: controls },
+            data:     { popover_target: "trigger", action: Popover::Trigger::STIMULUS_ACTION }
+          }
+          @trigger_html = template.capture(attrs, &block)
+        else
+          @trigger_html = Popover::Trigger.new(template).render(
+            panel_id: @panel_id, haspopup: haspopup, **kwargs, &block
+          )
         end
       end
 
-      def wrap_content(interactive, builder)
-        if interactive
-          template.content_tag(:template, builder.content_html)
-        else
-          builder.content_html
+      def panel(**kwargs, &block)
+        @panel_html = Popover::Panel.new(template).render(panel_id: @panel_id, **kwargs, &block)
+      end
+
+      def build_panel(**kwargs, &block)
+        @panel_html = Popover::Panel.new(template).build(panel_id: @panel_id, **kwargs, &block)
+      end
+
+      private
+
+      def render_popover(panel_id: nil, close_on_select: nil, **kwargs, &block)
+        data = { controller: STIMULUS_CONTROLLER }
+        data[:popover_close_on_select_value] = close_on_select unless close_on_select.nil?
+        html_options = merge_html_options(
+          theme.resolve(:popover_wrapper),
+          kwargs,
+          { data: data }
+        )
+        template.content_tag(:div, **html_options) do
+          build(panel_id: panel_id, &block)
         end
       end
     end

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/engine.rb

@@ -7,6 +7,7 @@ module StimulusPlumbers
     isolate_namespace StimulusPlumbers
 
     config.autoload_paths << File.expand_path("../stimulus-plumbers", __dir__)
+    config.i18n.load_path += Dir[File.expand_path("../../config/locales/*.{rb,yml}", __dir__)]
 
     initializer "stimulus_plumbers.assets", after: :set_default_precompile do |app|
       app.config.assets.precompile += %w[stimulus_plumbers/tokens.css] if app.config.respond_to?(:assets)