stimulus_plumbers 0.2.7 → 0.2.8

data/lib/stimulus_plumbers/components/time_picker/renderer.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    module TimePicker
+      # Renders a single scrollable drum column (hour, minute, or period) as a listbox.
+      class Renderer < Plumber::Base
+        CONTROLLER = "combobox-time"
+
+        def render(items:, label:, target:, selected: nil)
+          template.content_tag(
+            :ul,
+            role: "listbox",
+            aria: { label: label },
+            data: {
+              "#{CONTROLLER}_target": target,
+              action:                 "click->#{CONTROLLER}#select keydown->#{CONTROLLER}#navigate"
+            }
+          ) do
+            template.safe_join(items.map { |text, value| render_item(text, value, selected) })
+          end
+        end
+
+        private
+
+        def render_item(text, value, selected)
+          template.content_tag(
+            :li,
+            text,
+            role: "option",
+            aria: { selected: value.to_s == selected.to_s ? "true" : "false" },
+            data: { value: value }
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/builder.rb

@@ -3,23 +3,29 @@
 require "action_view/version"
 
 require_relative "field_component"
+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"
 
 module StimulusPlumbers
   module Form
     class Builder < ActionView::Helpers::FormBuilder
       include Components::Plumber::HtmlOptions
-      include Fields::Text
-      include Fields::TextArea
+      include Fields::Choice
+      include Fields::Combobox
       include Fields::File
+      include Fields::Password
+      include Fields::Search
       include Fields::Select
-      include Fields::Choice
+      include Fields::Text
+      include Fields::TextArea
 
       private
 
@@ -41,6 +47,15 @@ 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)]
       end
@@ -53,15 +68,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

data/lib/stimulus_plumbers/form/field_component.rb

@@ -3,7 +3,7 @@
 module StimulusPlumbers
   module Form
     class FieldComponent
-      OPTIONS = %i[label details error required label_visibility layout].freeze
+      OPTIONS = %i[label details error required label_visibility layout reveal clearable].freeze
 
       attr_reader :object,
                   :attribute,
@@ -14,15 +14,17 @@ module StimulusPlumbers
                   :label_visibility,
                   :layout
 
-      def initialize(object:,
-                     attribute:,
-                     input_id:,
-                     label: nil,
-                     details: nil,
-                     error: nil,
-                     required: false,
-                     label_visibility: :visible,
-                     layout: :stacked)
+      def initialize(
+        object:,
+        attribute:,
+        input_id:,
+        label: nil,
+        details: nil,
+        error: nil,
+        required: false,
+        label_visibility: :visible,
+        layout: :stacked
+      )
         @object           = object
         @attribute        = attribute
         @input_id         = input_id

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Combobox
+        COMPONENT_CLASS = {
+          autocomplete: Components::Combobox::Autocomplete,
+          date:         Components::Combobox::Date,
+          dropdown:     Components::Combobox::Dropdown,
+          time:         Components::Combobox::Time
+        }.freeze
+
+        def combobox_field(attribute, type:, options: [], **html_options)
+          klass = COMPONENT_CLASS.fetch(type) do
+            raise ArgumentError,
+                  "unsupported combobox type #{type.inspect}. Must be one of: #{COMPONENT_CLASS.keys.join(", ")}"
+          end
+
+          rails_opts, field_opts = extract_options(html_options)
+          field         = build_field(attribute, field_opts)
+          base_id       = field_id(attribute)
+          current_value = object&.public_send(attribute)
+
+          popover = klass.new(@template).render(options: options, value: current_value, **rails_opts)
+          opts    = klass.default_opts.deep_merge(
+            input:   { name: field_name(attribute), value: current_value },
+            popover: { content: popover }
+          )
+          wrapper = Components::Combobox::Renderer.new(@template).render(
+            base_id: base_id,
+            options: opts,
+            **field_theme(:form_combobox, error: field.error?),
+            **field.html_opts
+          )
+          render_field(field, wrapper)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/fields/password.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Password
+        def password_field(attribute, options = {})
+          rails_opts, form_field_opts = extract_options(options)
+          reveal = form_field_opts.delete(:reveal) { false }
+          field  = build_field(attribute, form_field_opts)
+
+          input_html = if reveal
+                         input_opts = merge_html_options(
+                           rails_opts,
+                           field_theme(:form_input_reveal),
+                           field.html_opts,
+                           { "data-input-format-target": "input" }
+                         )
+                         build_input_group(
+                           super(attribute, input_opts),
+                           field,
+                           trailing:                       reveal_button,
+                           "data-controller":              "input-format",
+                           "data-input-format-type-value": "password"
+                         )
+                       else
+                         html_opts = merge_html_options(
+                           rails_opts,
+                           field_theme(:form_input, error: field.error?),
+                           field.html_opts
+                         )
+                         super(attribute, html_opts)
+                       end
+
+          render_field(field, input_html)
+        end
+
+        private
+
+        def reveal_button
+          @template.content_tag(
+            :button,
+            "",
+            type:                       "button",
+            class:                      field_theme(:form_button_reveal)[:class],
+            "aria-label":               "Show password",
+            "aria-pressed":             "false",
+            "data-input-format-target": "toggle",
+            "data-action":              "click->input-format#toggle"
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/fields/renderer.rb

@@ -23,8 +23,7 @@ module StimulusPlumbers
         private
 
         def label_html
-          klass = theme.resolve(:form_label, required: field.required).fetch(:classes, "")
-          klass = "#{klass} sr-only".strip if field.label_hidden?
+          klass = theme.resolve(:form_label, required: field.required, hidden: field.label_hidden?).fetch(:classes, "")
 
           inner = field.label_text.dup.html_safe
           if field.required

data/lib/stimulus_plumbers/form/fields/search.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Search
+        def search_field(attribute, options = {})
+          rails_opts, form_field_opts = extract_options(options)
+          clearable = form_field_opts.delete(:clearable) { false }
+          field     = build_field(attribute, form_field_opts)
+
+          html_opts = merge_html_options(
+            rails_opts,
+            field_theme(:form_input, error: field.error?),
+            field.html_opts
+          )
+          input_html = if clearable
+                         build_input_group(super(attribute, html_opts), field, trailing: clear_button)
+                       else
+                         super(attribute, html_opts)
+                       end
+
+          render_field(field, input_html)
+        end
+
+        private
+
+        def clear_button
+          @template.content_tag(
+            :button,
+            "",
+            type:         "button",
+            class:        field_theme(:form_button_reveal)[:class],
+            "aria-label": "Clear search"
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/fields/select.rb

@@ -11,8 +11,14 @@ module StimulusPlumbers
           render_field(field, super(attribute, choices, rails_opts, html_opts))
         end
 
-        def collection_select(attribute, collection, value_method, text_method,
-                              options = {}, html_options = {})
+        def collection_select(
+          attribute,
+          collection,
+          value_method,
+          text_method,
+          options = {},
+          html_options = {}
+        )
           rails_opts, form_field_opts = extract_options(options)
           field     = build_field(attribute, form_field_opts)
           html_opts = merge_html_options(html_options, field_theme(:form_select, error: field.error?), field.html_opts)

data/lib/stimulus_plumbers/form/fields/text.rb

@@ -5,10 +5,18 @@ module StimulusPlumbers
     module Fields
       module Text
         FIELD_TYPES = %i[
-          text_field email_field url_field telephone_field search_field
-          number_field color_field date_field datetime_local_field
-          time_field month_field week_field range_field
-          password_field
+          color_field
+          date_field
+          datetime_local_field
+          email_field
+          month_field
+          number_field
+          range_field
+          telephone_field
+          text_field
+          time_field
+          url_field
+          week_field
         ].freeze
 
         FIELD_TYPES.each do |method_name|

data/lib/stimulus_plumbers/helpers/combobox_helper.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Helpers
+    module ComboboxHelper
+      def sp_combobox_date(label: nil, value: nil, **html_options)
+        opts = Components::Combobox::Date.default_opts.deep_merge(
+          input:   { value: value },
+          popover: { content: Components::Combobox::Date.new(self).render(value: value) }
+        )
+        opts = opts.deep_merge(trigger: { aria_label: label }) if label
+        Components::Combobox::Renderer.new(self).render(
+          base_id: sp_dom_id,
+          options: opts,
+          data:    { input_format_type_value: "date" },
+          **html_options
+        )
+      end
+
+      def sp_combobox_dropdown(label: nil, options: [], value: nil, **html_options)
+        opts = Components::Combobox::Dropdown.default_opts.deep_merge(
+          input:   { value: value },
+          popover: { content: Components::Combobox::Dropdown.new(self).render(options: options, value: value, label: label) }
+        )
+        opts = opts.deep_merge(trigger: { aria_label: label }) if label
+        Components::Combobox::Renderer.new(self).render(
+          base_id: sp_dom_id,
+          options: opts,
+          **html_options
+        )
+      end
+
+      def sp_combobox_autocomplete(label: nil, options: [], value: nil, url: nil, **html_options)
+        id         = sp_dom_id
+        popover_id = "#{id}_popover"
+        opts       = Components::Combobox::Autocomplete.default_opts.deep_merge(
+          input:   { value: value },
+          popover: {
+            content: Components::Combobox::Autocomplete.new(self).render(
+              options: options,
+              value:   value,
+              label:   label
+            ),
+            data:    url ? { combobox_dropdown_url_value: url } : {}
+          }
+        )
+        opts = opts.deep_merge(trigger: { aria_label: label }) if label
+        Components::Combobox::Renderer.new(self).render(
+          base_id: id,
+          options: opts,
+          data:    {
+            input_combobox_combobox_dropdown_outlet: "##{popover_id}",
+            action:                                  "input->input-combobox#filter"
+          },
+          **html_options
+        )
+      end
+
+      def sp_combobox_time(format: :h12, label: nil, step: 1, value: nil, **html_options)
+        opts = Components::Combobox::Time.default_opts.deep_merge(
+          input:   { value: value },
+          popover: { content: Components::Combobox::Time.new(self).render(format: format, step: step, value: value) }
+        )
+        opts = opts.deep_merge(trigger: { aria_label: label }) if label
+        Components::Combobox::Renderer.new(self).render(
+          base_id: sp_dom_id,
+          options: opts,
+          data:    { input_format_type_value: "time", input_format_options_value: { format: format }.to_json },
+          **html_options
+        )
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/helpers.rb

@@ -7,7 +7,7 @@ require_relative "helpers/button_helper"
 require_relative "helpers/calendar_helper"
 require_relative "helpers/calendar_turbo_helper"
 require_relative "helpers/card_helper"
-require_relative "helpers/date_picker_helper"
+require_relative "helpers/combobox_helper"
 require_relative "helpers/popover_helper"
 
 module StimulusPlumbers
@@ -19,7 +19,7 @@ module StimulusPlumbers
     include CalendarHelper
     include CalendarTurboHelper
     include CardHelper
-    include DatePickerHelper
+    include ComboboxHelper
     include PopoverHelper
   end
 end

data/lib/stimulus_plumbers/themes/{form.rb → base/form.rb}

@@ -8,7 +8,10 @@ module StimulusPlumbers
           layout: { default: :stacked, range: Schema::Ranges::LAYOUT_RANGE },
           error:  { default: false,    range: Schema::Ranges::BOOL_RANGE }
         }.freeze,
-        form_label:         { required: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
+        form_label:         {
+          required: { default: false, range: Schema::Ranges::BOOL_RANGE },
+          hidden:   { default: false, range: Schema::Ranges::BOOL_RANGE }
+        }.freeze,
         form_required_mark: {}.freeze,
         form_details:       {}.freeze,
         form_error:         {}.freeze,
@@ -18,7 +21,8 @@ module StimulusPlumbers
         form_select:        { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
         form_checkbox:      { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
         form_radio:         { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
-        form_actor:         { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
+        form_input_group:   { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
+        form_combobox:      { error: { default: false, range: Schema::Ranges::BOOL_RANGE } }.freeze,
         form_input_reveal:  {}.freeze,
         form_button_reveal: {}.freeze,
         form_submit:        {

data/lib/stimulus_plumbers/themes/base.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
 require_relative "schema/ranges"
-require_relative "action_list"
-require_relative "avatar"
-require_relative "button"
-require_relative "calendar"
-require_relative "card"
-require_relative "form"
-require_relative "layout"
+require_relative "base/action_list"
+require_relative "base/avatar"
+require_relative "base/button"
+require_relative "base/calendar"
+require_relative "base/card"
+require_relative "base/form"
+require_relative "base/layout"
 
 module StimulusPlumbers
   module Themes

data/lib/stimulus_plumbers/themes/tailwind/form.rb

@@ -21,8 +21,8 @@ module StimulusPlumbers
         CHECKBOX      = %w[size-4 rounded border-gray-500 text-blue-700].freeze
         RADIO         = %w[size-4 border-gray-500 text-blue-700].freeze
 
-        ACTOR_BASE    = %w[flex items-center overflow-hidden rounded-md border].freeze
-        ACTOR_BORDER  = { error: "border-red-700", default: "border-gray-500" }.freeze
+        INPUT_GROUP_BASE   = %w[flex items-center overflow-hidden rounded-md border].freeze
+        INPUT_GROUP_BORDER = { error: "border-red-700", default: "border-gray-500" }.freeze
 
         INPUT_REVEAL = %w[
           flex-1 border-0 bg-transparent px-3 py-2 text-sm text-gray-900 focus:outline-none
@@ -38,8 +38,8 @@ module StimulusPlumbers
           { classes: klasses(*GROUP_BASE, layout == :inline ? GROUP_INLINE : "flex-col") }
         end
 
-        def form_label_classes(**)
-          { classes: klasses(*LABEL) }
+        def form_label_classes(hidden: false, **)
+          { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
         end
 
         def form_required_mark_classes
@@ -78,8 +78,12 @@ module StimulusPlumbers
           { classes: klasses(*RADIO) }
         end
 
-        def form_actor_classes(error: false)
-          { classes: klasses(*ACTOR_BASE, ACTOR_BORDER[error ? :error : :default]) }
+        def form_input_group_classes(error: false)
+          { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
+        end
+
+        def form_combobox_classes(error: false)
+          form_input_classes(error: error)
         end
 
         def form_input_reveal_classes

data/lib/stimulus_plumbers/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module StimulusPlumbers
-  VERSION = "0.2.7"
+  VERSION = "0.2.8"
 end

data/lib/stimulus_plumbers.rb

@@ -5,15 +5,18 @@ require_relative "stimulus_plumbers/version"
 require "active_support"
 require "active_support/core_ext/string"
 
+# -- Core infrastructure --
 require_relative "stimulus_plumbers/configuration"
 require_relative "stimulus_plumbers/helpers"
 require_relative "stimulus_plumbers/logger"
 
+# -- Plumber base --
 require_relative "stimulus_plumbers/components/plumber/html_options"
 require_relative "stimulus_plumbers/components/plumber/dispatcher"
 require_relative "stimulus_plumbers/components/plumber/renderer"
 require_relative "stimulus_plumbers/components/plumber/base"
 
+# -- UI components --
 require_relative "stimulus_plumbers/components/icon/renderer"
 require_relative "stimulus_plumbers/components/avatar/renderer"
 require_relative "stimulus_plumbers/components/button/renderer"
@@ -21,15 +24,29 @@ require_relative "stimulus_plumbers/components/card/renderer"
 require_relative "stimulus_plumbers/components/action_list/renderer"
 require_relative "stimulus_plumbers/components/popover/renderer"
 
+# -- Calendar --
 require_relative "stimulus_plumbers/components/calendar/renderer"
 require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_week"
 require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_month"
 require_relative "stimulus_plumbers/components/calendar/month/turbo/renderer"
 
+# -- Date picker --
 require_relative "stimulus_plumbers/components/date_picker/navigator"
 require_relative "stimulus_plumbers/components/date_picker/navigation"
-require_relative "stimulus_plumbers/components/date_picker/renderer"
 
+# -- Time picker --
+require_relative "stimulus_plumbers/components/time_picker/renderer"
+
+# -- Combobox --
+require_relative "stimulus_plumbers/components/combobox/renderer"
+require_relative "stimulus_plumbers/components/combobox/option"
+require_relative "stimulus_plumbers/components/combobox/option_group"
+require_relative "stimulus_plumbers/components/combobox/date"
+require_relative "stimulus_plumbers/components/combobox/dropdown"
+require_relative "stimulus_plumbers/components/combobox/autocomplete"
+require_relative "stimulus_plumbers/components/combobox/time"
+
+# -- Form --
 require_relative "stimulus_plumbers/form/field_component"
 require_relative "stimulus_plumbers/form/builder"