stimulus_plumbers 0.3.3 → 0.4.0

data/lib/stimulus_plumbers/components/divider.rb

@@ -5,13 +5,12 @@ module StimulusPlumbers
     class Divider < Plumber::Base
       def render(label = nil, **kwargs)
         divider_opts = merge_html_options(
-          { classes: theme.resolve(:divider).fetch(:classes, "") },
+          theme.resolve(:divider),
           kwargs
         )
         template.content_tag(:div, role: "separator", **divider_opts) do
           if label.blank?
-            hr_classes = theme.resolve(:divider_separator).fetch(:classes, "")
-            template.tag.hr(class: hr_classes)
+            template.tag.hr(**divider_separator_opts)
           else
             render_with(label)
           end
@@ -21,16 +20,18 @@ module StimulusPlumbers
       private
 
       def render_with(label)
-        hr_classes = theme.resolve(:divider_separator).fetch(:classes, "")
-        label_classes = theme.resolve(:divider_label).fetch(:classes, "")
         template.safe_join(
           [
-            template.tag.hr(class: hr_classes),
-            template.content_tag(:span, label, class: label_classes),
-            template.tag.hr(class: hr_classes)
+            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
+
+      def divider_separator_opts
+        merge_html_options(theme.resolve(:divider_separator))
+      end
     end
   end
 end

data/lib/stimulus_plumbers/components/icon.rb

@@ -3,9 +3,13 @@
 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
         )
 

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

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

data/lib/stimulus_plumbers/form/base.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    class Base
+      OPTIONS = %i[label hint error required layout floating].freeze
+
+      attr_reader(*OPTIONS)
+
+      def initialize(
+        template,
+        label: nil,
+        hint: nil,
+        error: nil,
+        required: false,
+        layout: :stacked,
+        floating: nil,
+        **kwargs
+      )
+        @template = template
+        @label    = label
+        @hint     = hint
+        @error    = error
+        @required = required
+        @layout   = layout.to_sym
+        @floating = floating
+        @kwargs   = kwargs
+      end
+
+      def theme
+        StimulusPlumbers.config.theme.current
+      end
+
+      def error?(object, attribute)
+        build_errors(object, attribute).any?
+      end
+
+      def described_by(object, attribute, input_id)
+        ids = []
+        ids << hint_id(input_id) if @hint.present?
+        ids.concat(build_error_ids(object, attribute, input_id))
+        ids.join(" ").presence
+      end
+
+      def render_hint(input_id)
+        Fields::Hint.new(@template).render(text: @hint, id: hint_id(input_id)) if @hint.present?
+      end
+
+      def render_errors(object, attribute, input_id)
+        errs = build_errors(object, attribute)
+        return if errs.none?
+
+        @template.safe_join(
+          errs.map.with_index do |message, i|
+            Fields::Error.new(@template).render(message: message, id: build_error_ids(object, attribute, input_id)[i])
+          end
+        )
+      end
+
+      private
+
+      def build_errors(object, attribute)
+        if error
+          Array(error)
+        elsif object.respond_to?(:errors)
+          object.errors[attribute]
+        else
+          []
+        end
+      end
+
+      def build_aria(object, attribute, input_id)
+        aria = {}
+        aria[:describedby] = described_by(object, attribute, input_id)
+        aria[:invalid]     = "true" if error?(object, attribute)
+        aria[:required]    = "true" if @required
+        aria.compact
+      end
+
+      def build_html_options(input_id, aria)
+        attrs = { id: input_id, aria: aria }
+        attrs[:required] = true if @required
+        attrs
+      end
+
+      def hint_id(input_id)
+        [input_id, "hint"].compact.join("_")
+      end
+
+      def error_id(input_id)
+        [input_id, "error"].compact.join("_")
+      end
+
+      def build_error_ids(object, attribute, input_id)
+        errs = build_errors(object, attribute)
+        return [] if errs.none?
+        return [error_id(input_id)] if errs.one?
+
+        errs.each_index.map { |i| [error_id(input_id), i + 1].compact.join("_") }
+      end
+    end
+  end
+end