stimulus_plumbers 0.3.2 → 0.4.0

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

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Typeahead < Plumber::Base
+        def self.listbox_id_for(panel_id)
+          [panel_id, "listbox"].compact.join("_")
+        end
+
+        module Metadata
+          module_function
+
+          def haspopup = "listbox"
+          def popup_id_for(panel_id) = Typeahead.listbox_id_for(panel_id)
+          def trigger_icon = nil
+          def trigger_options = { readonly: false, aria: { autocomplete: "list" } }
+
+          def stimulus_data(panel_id, _options)
+            {
+              input_combobox_combobox_dropdown_outlet: "##{panel_id}",
+              action:                                  "input->#{Combobox::STIMULUS_CONTROLLER}#onInput"
+            }
+          end
+        end
+
+        def render(...) = render_typeahead(...)
+
+        private
+
+        def render_typeahead(panel_attrs: {}, options: [], value: nil, labelledby: nil, label: nil, url: nil)
+          template.content_tag(
+            :div,
+            template.safe_join([render_listbox(panel_attrs[:id], options, value, labelledby, label), loading, empty]),
+            **wrapper_attrs(panel_attrs: panel_attrs, url: url)
+          )
+        end
+
+        def wrapper_attrs(panel_attrs: {}, url: nil)
+          merge_html_options(
+            panel_attrs,
+            {
+              data: {
+                controller:                  Dropdown::STIMULUS_CONTROLLER,
+                action:                      Dropdown::STIMULUS_ACTION,
+                combobox_dropdown_url_value: url
+              }.compact
+            }
+          )
+        end
+
+        def render_listbox(panel_id, options, value, labelledby, label)
+          template.content_tag(
+            :ul,
+            Options.new(template).render(options, value: value),
+            **merge_html_options(
+              theme.resolve(:combobox_listbox),
+              {
+                id:   self.class.listbox_id_for(panel_id),
+                role: "listbox",
+                aria: labelled_aria(label, labelledby: labelledby),
+                data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "listbox" }
+              }
+            )
+          )
+        end
+
+        def loading
+          template.content_tag(
+            :div,
+            **merge_html_options(
+              theme.resolve(:combobox_typeahead_loading),
+              { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "loading" } }
+            )
+          ) do
+            Components::Icon.new(template).render(
+              name:    "spinner",
+              classes: theme.resolve(:combobox_typeahead_loading_icon).fetch(:classes, ""),
+              aria:    { hidden: "true" }
+            )
+          end
+        end
+
+        def empty
+          template.content_tag(
+            :div,
+            **merge_html_options(
+              theme.resolve(:combobox_typeahead_empty),
+              { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "empty" } }
+            )
+          ) { I18n.t("stimulus_plumbers.combobox.typeahead.empty", default: "No results") }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox.rb

@@ -4,62 +4,86 @@ module StimulusPlumbers
   module Components
     class Combobox < Plumber::Base
       STIMULUS_CONTROLLER = "input-combobox"
-      FORMAT_CONTROLLER   = "input-format"
-      FORMAT_ACTION       = "input-combobox:changed->input-format#format"
+      FORMAT_CONTROLLER   = "input-formatter"
+      FORMAT_ACTION       = "input-combobox:changed->input-formatter#format"
 
-      def self.popover_id_for(trigger_id)
-        [trigger_id, "popover"].compact.join("_")
-      end
-
-      def render(trigger: {}, input: {}, popover: {}, **kwargs, &block)
-        popover_id    = self.class.popover_id_for(trigger[:id])
-        initial_value = input[:value]
-        haspopup      = popover.delete(:haspopup) { popover[:role] || "dialog" }
-        html_options  = merge_html_options({ data: build_stimulus_data(initial_value) }, kwargs)
+      def render(trigger: {}, input: {}, id: nil, label: nil, close_on_select: nil, **kwargs, &block)
+        trigger_opts = trigger.dup
+        builder      = resolve_builder(&block)
+        trigger_id   = id || trigger_opts.delete(:id) || template.sp_dom_id
+        panel_id     = Popover.panel_id_for(trigger_id)
 
-        template.content_tag(:div, **html_options) do
-          template.safe_join(
-            [
-              combobox_trigger(popover_id, trigger, haspopup),
-              hidden_input(input),
-              combobox_popover(popover_id, popover, &block)
-            ]
-          )
+        template.content_tag(:div, **combobox_attrs(input, close_on_select, builder, panel_id, kwargs)) do
+          build_popover(trigger_opts, input, builder, trigger_id, panel_id, label)
         end
       end
 
       private
 
-      def build_stimulus_data(initial_value)
-        {
-          controller: "#{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
-          action:     FORMAT_ACTION
-        }.tap do |data|
-          data[:input_combobox_value_value] = initial_value if initial_value.present?
+      def resolve_builder
+        builder = Combobox::Builder.new
+        yield builder if block_given?
+        builder
+      end
+
+      def build_popover(trigger, input, builder, trigger_id, panel_id, label)
+        metadata = builder.metadata
+
+        Components::Popover.new(template).build(panel_id: panel_id) do |p|
+          p.trigger(haspopup: metadata.haspopup, controls: metadata.popup_id_for(panel_id)) do |attrs|
+            build_combobox_trigger(attrs, trigger, input, metadata, trigger_id, label)
+          end
+          p.build_panel(classes: theme.resolve(:combobox_popover).fetch(:classes, "")) do |panel_attrs|
+            builder.render_panel(template, panel_attrs: panel_attrs)
+          end
         end
       end
 
-      def combobox_trigger(popover_id, trigger, haspopup)
-        Combobox::Trigger.new(template).render(
-          stimulus_controller: STIMULUS_CONTROLLER,
-          popover_id:          popover_id,
-          haspopup:            haspopup,
-          **trigger
+      def combobox_attrs(input, close_on_select, builder, panel_id, kwargs)
+        merge_html_options(
+          theme.resolve(:combobox),
+          kwargs,
+          { data: stimulus_data(input[:value], close_on_select) },
+          { data: builder.metadata.stimulus_data(panel_id, builder.options) }
         )
       end
 
-      def combobox_popover(popover_id, popover, &block)
-        Combobox::Popover.new(template).render(
-          stimulus_controller: STIMULUS_CONTROLLER,
-          id:                  popover_id,
-          **popover,
-          &block
+      def build_combobox_trigger(attrs, trigger, input, metadata, trigger_id, label)
+        opts = trigger_options(metadata, trigger)
+        opts[:aria] = (opts[:aria] || {}).merge(label: label) if label
+
+        template.safe_join(
+          [
+            Combobox::Trigger.new(template).render(
+              stimulus_controller: STIMULUS_CONTROLLER,
+              popover:             attrs,
+              id:                  trigger_id,
+              **opts
+            ),
+            hidden_input(input)
+          ]
         )
       end
 
+      def trigger_options(metadata, trigger)
+        defaults = metadata.trigger_options.dup
+        defaults[:icon_trailing] = metadata.trigger_icon if metadata.trigger_icon
+        defaults.deep_merge(trigger)
+      end
+
+      def stimulus_data(initial_value, close_on_select)
+        data = {
+          controller: "#{Popover::STIMULUS_CONTROLLER} #{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
+          action:     FORMAT_ACTION
+        }
+        data[:input_combobox_value_value]    = initial_value if initial_value.present?
+        data[:popover_close_on_select_value] = close_on_select unless close_on_select.nil?
+        data
+      end
+
       def hidden_input(input)
         stimulus_data = merge_html_options(
-          { "#{STIMULUS_CONTROLLER}_target": "value" },
+          { "#{STIMULUS_CONTROLLER}_target": "input" },
           input.fetch(:data, {})
         )
         template.tag.input(type: "hidden", name: input[:name], value: input[:value], data: stimulus_data)

data/lib/stimulus_plumbers/components/divider.rb

@@ -3,13 +3,34 @@
 module StimulusPlumbers
   module Components
     class Divider < Plumber::Base
-      def render(**kwargs)
-        html_options = merge_html_options(
-          { classes: theme.resolve(:divider).fetch(:classes, "") },
+      def render(label = nil, **kwargs)
+        divider_opts = merge_html_options(
+          theme.resolve(:divider),
           kwargs
         )
+        template.content_tag(:div, role: "separator", **divider_opts) do
+          if label.blank?
+            template.tag.hr(**divider_separator_opts)
+          else
+            render_with(label)
+          end
+        end
+      end
+
+      private
+
+      def render_with(label)
+        template.safe_join(
+          [
+            template.tag.hr(**divider_separator_opts),
+            template.content_tag(:span, label, **merge_html_options(theme.resolve(:divider_label))),
+            template.tag.hr(**divider_separator_opts)
+          ]
+        )
+      end
 
-        template.tag.hr(**html_options)
+      def divider_separator_opts
+        merge_html_options(theme.resolve(:divider_separator))
       end
     end
   end

data/lib/stimulus_plumbers/components/icon.rb

@@ -3,13 +3,17 @@
 module StimulusPlumbers
   module Components
     class Icon < Plumber::Base
+      def self.icon_name?(value)
+        value.is_a?(Symbol) || (value.is_a?(String) && !value.html_safe?)
+      end
+
       def render(name:, **kwargs)
         html_options = merge_html_options(
-          { classes: theme.resolve(:icon).fetch(:classes, "") },
+          theme.resolve(:icon),
           kwargs
         )
 
-        icon_data = Themes::Schema::Icon.resolve(theme.icons[name])
+        icon_data = Themes::Schema::Icon.resolve(theme.icons[name.to_s])
         if icon_data
           svg_icon(icon_data, html_options)
         else
@@ -20,21 +24,11 @@ module StimulusPlumbers
       private
 
       def svg_icon(icon_data, html_options)
-        template.content_tag(
-          :svg,
-          xmlns:          "http://www.w3.org/2000/svg",
-          fill:           icon_data[:fill],
-          viewBox:        icon_data[:view_box],
-          width:          icon_data[:width],
-          height:         icon_data[:height],
-          stroke:         icon_data[:stroke],
-          "stroke-width": icon_data[:stroke_width],
-          **html_options
-        ) do
-          template.tag.path(
-            "stroke-linecap":  icon_data[:stroke_linecap],
-            "stroke-linejoin": icon_data[:stroke_linejoin],
-            d:                 icon_data[:d]
+        template.content_tag(:svg, nil, icon_data.except(:elements).merge(html_options)) do
+          template.safe_join(
+            icon_data[:elements].map do |element|
+              template.content_tag(element[:tag], nil, element.except(:tag))
+            end
           )
         end
       end

data/lib/stimulus_plumbers/components/input_group.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class InputGroup < Plumber::Base
+      def render(leading: nil, trailing: nil, error: false, **kwargs, &block)
+        html_options = merge_html_options(
+          theme.resolve(:input_group, error: error),
+          kwargs
+        )
+        template.content_tag(:div, **html_options) do
+          build_input_group(leading, trailing, &block)
+        end
+      end
+
+      private
+
+      def build_input_group(leading, trailing, &block)
+        template.safe_join(
+          [
+            leading.respond_to?(:call) ? template.capture(&leading) : leading,
+            template.capture(&block),
+            trailing.respond_to?(:call) ? template.capture(&trailing) : trailing
+          ]
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Link
+      class Slots < Plumber::Slots
+        slot :icon_leading, :icon_trailing
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/link.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Link < Plumber::Base
+      def render(content = nil, url:, icon_leading: nil, icon_trailing: nil, **kwargs, &block)
+        icon_trailing ||= "external-link" if kwargs[:target] == "_blank"
+
+        slots = Link::Slots.new
+        slots.with_icon_leading(icon_leading) if icon_leading
+        slots.with_icon_trailing(icon_trailing) if icon_trailing
+
+        render_link(url: url, **kwargs) do
+          build_layout(slots) do
+            build_content(content, &block)
+          end
+        end
+      end
+
+      private
+
+      def render_link(url:, target: nil, type: :default, variant: :default, **kwargs, &block)
+        html_options = merge_html_options(
+          theme.resolve(:link, type: type, variant: variant),
+          kwargs
+        )
+        template.content_tag(:a, href: url, target: target, **html_options) do
+          template.capture(&block)
+        end
+      end
+
+      def build_layout(slots, &block)
+        template.safe_join(
+          [
+            render_icon_slot(slots, :icon_leading),
+            template.capture(&block),
+            render_icon_slot(slots, :icon_trailing)
+          ]
+        )
+      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(:link_icon).fetch(:classes, ""),
+            aria:    { hidden: "true" }
+          )
+        end
+      end
+
+      def build_content(content, &block)
+        if block_given?
+          template.content_tag(:span, template.capture(&block))
+        elsif content
+          template.content_tag(:span, content)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class List
+      class Item
+        class Slots < Plumber::Slots
+          slot :icon_leading, :title, :description, :icon_trailing
+        end
+      end
+    end
+  end
+end

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].compact)
+          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].compact)
+        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)
+            ].compact
+          )
+        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