stimulus_plumbers 0.2.7 → 0.2.9

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Dropdown < Plumber::Base
+        STIMULUS_CONTROLLER = "combobox-dropdown"
+        STIMULUS_ACTION     = [
+          "click->#{STIMULUS_CONTROLLER}#select",
+          "keydown->#{STIMULUS_CONTROLLER}#onNavigate",
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+        ].join(" ").freeze
+
+        def self.default_opts
+          {
+            popover: {
+              tag:      :div,
+              haspopup: "listbox",
+              data:     { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
+            }
+          }
+        end
+
+        def render(options: [], value: nil, label: nil, **_kwargs)
+          listbox_attrs = merge_html_options(
+            { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+            { role: "listbox", data: { "#{STIMULUS_CONTROLLER}_target": "listbox" } }
+          )
+          listbox_attrs[:aria] = { label: label } if label
+
+          template.content_tag(:ul, **listbox_attrs) do
+            Options.new(template).render(options, value: value)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/options/option.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options
+        class Option < Plumber::Base
+          def render(label:, value:, description: nil, disabled: false, selected: false)
+            aria = { selected: selected ? "true" : "false" }
+            aria[:disabled] = "true" if disabled
+
+            attrs = merge_html_options(
+              { classes: theme.resolve(:combobox_option, selected: selected, disabled: disabled).fetch(:classes, "") },
+              { role: "option", aria: aria, data: { value: value } }
+            )
+
+            template.content_tag(:li, **attrs) do
+              if description
+                template.safe_join(
+                  [
+                    template.content_tag(:span, label),
+                    template.content_tag(:span, description)
+                  ]
+                )
+              else
+                label
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/options/option_group.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options
+        class OptionGroup < Plumber::Base
+          def render(label:, options:, value: nil)
+            attrs = merge_html_options(
+              { classes: theme.resolve(:combobox_option_group).fetch(:classes, "") },
+              { role: "group", aria: { label: label } }
+            )
+
+            template.content_tag(:li, **attrs) do
+              template.safe_join(
+                [
+                  template.content_tag(:span, label, aria: { hidden: "true" }),
+                  template.content_tag(:ul) do
+                    Options.new(template).render(options, value: value)
+                  end
+                ]
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options < Plumber::Base
+        def render(items, value: nil, &block)
+          @selected_value = value.to_s
+          template.safe_join(items.filter_map { |item| render_item(item, &block) })
+        end
+
+        private
+
+        def render_item(item, &block)
+          attrs = normalize_item(item)
+          return nil if attrs.nil?
+
+          if attrs.key?(:optgroup)
+            block ? block.call(attrs) : OptionGroup.new(template).render(**attrs[:optgroup], value: @selected_value)
+          else
+            block ? block.call(attrs) : Option.new(template).render(**attrs)
+          end
+        end
+
+        def normalize_item(item)
+          case item
+          when Hash  then normalize_hash(item)
+          when Array then normalize_array(item)
+          else
+            StimulusPlumbers::Logger.warn("Options#normalize_item: unrecognized item type #{item.class}, skipping")
+            nil
+          end
+        end
+
+        def normalize_hash(item)
+          if item.key?(:options)
+            { optgroup: { label: item[:label], options: item[:options] } }
+          else
+            normalize_option(item[:label], item[:value].to_s, item)
+          end
+        end
+
+        def normalize_array(item)
+          normalize_option(item[0], item[1].to_s, item[2] || {})
+        end
+
+        def normalize_option(label, value, attrs)
+          {
+            label:       label,
+            value:       value,
+            selected:    @selected_value == value,
+            disabled:    attrs[:disabled] || false,
+            description: attrs[:description]
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Popover < Plumber::Base
+        def render(stimulus_controller:, id:, tag: :div, role: nil, label: nil, content: nil, data: {}, **_rest, &block)
+          base_data = { "#{stimulus_controller}_target": "popover" }
+
+          attrs = { id: id, hidden: "", data: merge_data_options(base_data, data.symbolize_keys) }
+          attrs[:role] = role if role
+          attrs[:aria] = { label: label } if label
+
+          html_content = block_given? ? template.capture(&block) : content
+          template.content_tag(tag, **attrs) { html_content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Time
+        class Drum < Plumber::Base
+          def render(stimulus_controller:, target:, label:, items:, selected: nil)
+            template.content_tag(
+              :ul,
+              **merge_html_options(
+                { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+                {
+                  role:     "listbox",
+                  tabindex: "0",
+                  aria:     { label: label },
+                  data:     { "#{stimulus_controller}_target": target }
+                },
+                { data: { action: "click->#{stimulus_controller}#select keydown->#{stimulus_controller}#onNavigate" } }
+              )
+            ) 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
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Time < Plumber::Base
+        STIMULUS_CONTROLLER = "combobox-time"
+
+        def self.default_opts
+          {
+            popover: { label: "Picker", role: "dialog", tag: :div }
+          }
+        end
+
+        def render(format: :h12, step: 1, value: nil, **_kwargs)
+          @format = format
+          @step   = [1, step.to_i].max
+          @time   = parse_time(value)
+
+          template.content_tag(
+            :div,
+            **merge_html_options(
+              { classes: theme.resolve(:combobox_time).fetch(:classes, "") },
+              { data: { controller: STIMULUS_CONTROLLER,
+                        action:     "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+}
+}
+            )
+          ) do
+            template.safe_join(drums)
+          end
+        end
+
+        private
+
+        def drums
+          cols = [hour_drum, minute_drum]
+          cols << period_drum if @format == :h12
+          cols
+        end
+
+        def hour_drum
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "hour",
+            label:               "Hour",
+            items:               hour_items,
+            selected:            current_hour
+          )
+        end
+
+        def minute_drum
+          items = (0...60).step(@step).map do |m|
+            s = m.to_s.rjust(2, "0")
+            [s, s]
+          end
+          selected = @time ? snap_minute(@time.min).to_s.rjust(2, "0") : nil
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "minute",
+            label:               "Minute",
+            items:               items,
+            selected:            selected
+          )
+        end
+
+        def period_drum
+          selected = @time && (@time.hour < 12 ? "AM" : "PM")
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "period",
+            label:               "Period",
+            items:               [%w[AM AM], %w[PM PM]],
+            selected:            selected
+          )
+        end
+
+        def hour_items
+          if @format == :h12
+            (1..12).map { |h| [h.to_s, h.to_s] }
+          else
+            (0..23).map do |h|
+              s = h.to_s.rjust(2, "0")
+              [s, s]
+            end
+          end
+        end
+
+        def current_hour
+          return nil unless @time
+
+          if @format == :h12
+            h = @time.hour % 12
+            (h.zero? ? 12 : h).to_s
+          else
+            @time.hour.to_s.rjust(2, "0")
+          end
+        end
+
+        def snap_minute(minute)
+          return minute if @step == 1
+
+          ((minute.to_f / @step).round * @step) % 60
+        end
+
+        def drum
+          @drum ||= Time::Drum.new(template)
+        end
+
+        def parse_time(value)
+          return nil if value.nil? || value.to_s.strip.empty?
+
+          ::Time.parse(value.to_s)
+        rescue ArgumentError
+          nil
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Trigger < Plumber::Base
+        def render(
+          stimulus_controller:,
+          popover_id:,
+          haspopup:,
+          readonly: true,
+          aria_autocomplete: nil,
+          aria_label: nil,
+          data: {},
+          **_rest
+        )
+          base_data = {
+            "#{stimulus_controller}_target": "trigger",
+            input_format_target:             "input",
+            action:                          "focus->#{stimulus_controller}#open keydown.esc->#{stimulus_controller}#close"
+          }
+
+          aria = { haspopup: haspopup, expanded: "false", controls: popover_id }
+          aria[:autocomplete] = aria_autocomplete if aria_autocomplete
+          aria[:label]        = aria_label        if aria_label
+
+          template.tag.input(
+            type:     "text",
+            readonly: (readonly ? true : nil),
+            role:     "combobox",
+            aria:     aria,
+            data:     merge_data_options(base_data, data.symbolize_keys)
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox < Plumber::Base
+      STIMULUS_CONTROLLER = "input-combobox"
+      FORMAT_CONTROLLER   = "input-format"
+      FORMAT_ACTION       = "input-combobox:changed->input-format#format"
+
+      def render(base_id:, options: {}, **kwargs)
+        popover_id    = "#{base_id}_popover"
+        initial_value = options.dig(:input, :value)
+
+        base_data = {
+          controller: "#{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
+          action:     FORMAT_ACTION
+        }
+        base_data[:input_combobox_value_value] = initial_value if initial_value.present?
+
+        html_options = merge_html_options({ data: base_data }, kwargs)
+
+        template.content_tag(:div, **html_options) do
+          template.safe_join(
+            [
+              trigger(popover_id, options),
+              hidden_input(options.fetch(:input, {})),
+              popover(popover_id, options)
+            ]
+          )
+        end
+      end
+
+      def trigger(popover_id, options)
+        haspopup = options.dig(:popover, :haspopup) || options.dig(:popover, :role) || "dialog"
+        Combobox::Trigger.new(template).render(
+          stimulus_controller: STIMULUS_CONTROLLER,
+          popover_id:          popover_id,
+          haspopup:            haspopup,
+          **options.fetch(:trigger, {})
+        )
+      end
+
+      def popover(popover_id, options)
+        Combobox::Popover.new(template).render(
+          stimulus_controller: STIMULUS_CONTROLLER,
+          id:                  popover_id,
+          **options.fetch(:popover, {})
+        )
+      end
+
+      private
+
+      def hidden_input(opts)
+        data = { "#{STIMULUS_CONTROLLER}_target": "value" }.merge(opts.fetch(:data, {}))
+        template.tag.input(type: "hidden", name: opts[:name], value: opts[:value], data: data)
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/date_picker/navigation.rb

@@ -4,7 +4,7 @@ module StimulusPlumbers
   module Components
     module DatePicker
       class Navigation < Plumber::Base
-        def render(stimulus_controller:, step:, **kwargs)
+        def render(step:, stimulus_controller:, **kwargs)
           html_options = merge_html_options(
             { classes: theme.resolve(:calendar_navigation).fetch(:classes, ""), aria: { label: "DatePicker Navigation" } },
             kwargs

data/lib/stimulus_plumbers/components/date_picker/navigator.rb

@@ -20,7 +20,7 @@ module StimulusPlumbers
         private
 
         def icon(icon_options)
-          Icon::Renderer.new(template).icon(
+          Icon.new(template).render(
             classes: theme.resolve(:calendar_navigation_navigator_icon).fetch(:classes, ""),
             **icon_options
           )

data/lib/stimulus_plumbers/components/icon.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Icon < Plumber::Base
+      ICONS = {
+        "arrow-left"  => "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18",
+        "arrow-right" => "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
+        "arrow-up"    => "M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18",
+        "arrow-down"  => "M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+      }.freeze
+
+      def render(name:, **kwargs)
+        html_options = merge_html_options(
+          { classes: theme.resolve(:icon).fetch(:classes, "") },
+          kwargs
+        )
+
+        if ICONS[name]
+          svg_icon(ICONS[name], html_options)
+        else
+          template.content_tag(:span, nil, **html_options)
+        end
+      end
+
+      private
+
+      def svg_icon(path, html_options)
+        template.content_tag(
+          :svg,
+          xmlns:          "http://www.w3.org/2000/svg",
+          fill:           "none",
+          viewBox:        "0 0 24 24",
+          width:          "24",
+          height:         "24",
+          "stroke-width": "1.5",
+          stroke:         "currentColor",
+          **html_options
+        ) do
+          template.tag.path(
+            "stroke-linecap":  "round",
+            "stroke-linejoin": "round",
+            d:                 path
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover
+      class Builder
+        attr_reader :activator_html, :content_html
+
+        def initialize(template)
+          @template = template
+          @activator_html = "".html_safe
+          @content_html   = "".html_safe
+        end
+
+        def activator(&block)
+          @activator_html = @template.capture(&block)
+        end
+
+        def content(&block)
+          @content_html = @template.capture(&block)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover < Plumber::Base
+      def render(interactive: true, **kwargs, &block)
+        html_options = merge_html_options(
+          { classes: theme.resolve(:popover).fetch(:classes, "") },
+          kwargs
+        )
+
+        builder = Popover::Builder.new(template)
+        template.capture(builder, &block)
+
+        template.content_tag(:div, **html_options) do
+          wrapped_content = if interactive
+                              template.content_tag(:template, builder.content_html)
+                            else
+                              builder.content_html
+                            end
+          template.safe_join([builder.activator_html, wrapped_content])
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/builder.rb

@@ -2,29 +2,37 @@
 
 require "action_view/version"
 
-require_relative "field_component"
+require_relative "field"
+require_relative "fields/choice"
+require_relative "fields/combobox"
+require_relative "fields/file"
+require_relative "fields/password"
 require_relative "fields/renderer"
+require_relative "fields/search"
+require_relative "fields/select"
 require_relative "fields/text"
 require_relative "fields/text_area"
-require_relative "fields/file"
-require_relative "fields/select"
-require_relative "fields/choice"
-require_relative "../components/plumber/html_options"
+require_relative "fields/submit"
+require_relative "../plumber/html_options"
 
 module StimulusPlumbers
   module Form
     class Builder < ActionView::Helpers::FormBuilder
-      include Components::Plumber::HtmlOptions
-      include Fields::Text
-      include Fields::TextArea
+      include Plumber::HtmlOptions
+      include Fields::Choice
+      include Fields::Combobox
       include Fields::File
+      include Fields::Password
+      include Fields::Search
       include Fields::Select
-      include Fields::Choice
+      include Fields::Submit
+      include Fields::Text
+      include Fields::TextArea
 
       private
 
       def build_field(attribute, form_field_opts, input_id: field_id(attribute))
-        FieldComponent.new(
+        Field.new(
           object:           object,
           attribute:        attribute,
           input_id:         input_id,
@@ -41,8 +49,17 @@ module StimulusPlumbers
         Fields::Renderer.new(@template, theme, field).call(input_html)
       end
 
+      def build_input_group(input_tag, field, trailing:, **wrapper_opts)
+        @template.content_tag(
+          :div,
+          input_tag.html_safe + trailing,
+          class: field_theme(:form_input_group, error: field.error?)[:class],
+          **wrapper_opts
+        )
+      end
+
       def extract_options(options)
-        [options.except(*FieldComponent::OPTIONS), options.slice(*FieldComponent::OPTIONS)]
+        [options.except(*Field::OPTIONS), options.slice(*Field::OPTIONS)]
       end
 
       def field_theme(key, **variants)
@@ -53,15 +70,45 @@ module StimulusPlumbers
         StimulusPlumbers.config.theme
       end
 
-      # field_id was added in Rails 7.0. Provide a compatible implementation for Rails 6.1.
+      # rubocop:disable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
       if ActionView.version < "7.0"
-        def field_id(attribute, *suffixes, index: @index, namespace: @options[:namespace])
-          tokens = [namespace, @object_name, index, attribute, *suffixes]
-          tokens.select!(&:present?)
-          tokens.map! { |t| t.to_s.delete("]").tr("^-a-zA-Z0-9:.", "_") }
-          tokens.join("_")
+        # field_id was added in Rails 7.0, backports it to Rails 6.1.
+        # https://github.com/rails/rails/blob/2d670320f7b02ae879545d5202f0633841b8f196/actionview/lib/action_view/helpers/form_helper.rb#L1777
+        # https://github.com/rails/rails/blob/2d670320f7b02ae879545d5202f0633841b8f196/actionview/lib/action_view/helpers/form_tag_helper.rb#L101
+        def field_id(method_name, *suffixes, namespace: @options[:namespace], index: @options[:index])
+          object_name = @object_name.respond_to?(:model_name) ? @object_name.model_name.singular : @object_name
+
+          sanitized_object_name = object_name.to_s.gsub(%r{\]\[|[^-a-zA-Z0-9:.]}, "_").delete_suffix("_")
+          sanitized_method_name = method_name.to_s.delete_suffix("?")
+
+          [
+            namespace,
+            sanitized_object_name.presence,
+            (index unless sanitized_object_name.empty?),
+            sanitized_method_name,
+            *suffixes
+          ].tap(&:compact!).join("_")
+        end
+
+        # field_name was added in Rails 7.0, backports it to Rails 6.1.
+        # https://github.com/rails/rails/blob/2d670320f7b02ae879545d5202f0633841b8f196/actionview/lib/action_view/helpers/form_helper.rb#L1797
+        # https://github.com/rails/rails/blob/2d670320f7b02ae879545d5202f0633841b8f196/actionview/lib/action_view/helpers/form_tag_helper.rb#L131
+        def field_name(method_name, *method_names, multiple: false, index: @options[:index])
+          object_name = @options.fetch(:as) { @object_name }
+
+          names = method_names.map! { |name| "[#{name}]" }.join
+
+          # a little duplication to construct fewer strings
+          if object_name.blank?
+            "#{method_name}#{names}#{"[]" if multiple}"
+          elsif index
+            "#{object_name}[#{index}][#{method_name}]#{names}#{"[]" if multiple}"
+          else
+            "#{object_name}[#{method_name}]#{names}#{"[]" if multiple}"
+          end
         end
       end
+      # rubocop:enable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
     end
   end
 end