stimulus_plumbers 0.3.0 → 0.3.1

data/lib/stimulus_plumbers/form/field.rb

@@ -3,79 +3,130 @@
 module StimulusPlumbers
   module Form
     class Field
-      OPTIONS = %i[label details error required label_visibility layout reveal clearable].freeze
+      attr_reader :label, :required, :layout
 
-      attr_reader :object,
-                  :attribute,
-                  :input_id,
-                  :label_text,
-                  :details,
-                  :required,
-                  :label_visibility,
-                  :layout
+      def self.label_id(input_id)
+        [input_id, "label"].compact.join("_")
+      end
 
       def initialize(
-        object:,
-        attribute:,
-        input_id:,
+        template,
         label: nil,
-        details: nil,
+        hint: nil,
         error: nil,
         required: false,
-        label_visibility: :visible,
-        layout: :stacked
+        hide_label: false,
+        layout: :stacked,
+        **kwargs
       )
-        @object           = object
-        @attribute        = attribute
-        @input_id         = input_id
-        @label_text       = label || attribute.to_s.humanize
-        @details          = details
-        @error_override   = error
-        @required         = required
-        @label_visibility = label_visibility.to_sym
-        @layout           = layout.to_sym
+        @template       = template
+        @label          = label
+        @hint           = hint
+        @error_override = error
+        @required       = required
+        @hide_label     = hide_label
+        @layout         = layout.to_sym
+        @kwargs         = kwargs
+      end
+
+      def label_hidden?
+        @hide_label
+      end
+
+      def error?(object, attribute)
+        build_errors(object, attribute).any?
       end
 
-      def errors
+      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(object, attribute, input_id:, &block)
+        @label ||= attribute.to_s.humanize
+        error          = error?(object, attribute)
+        aria           = build_aria(object, attribute, input_id)
+        generated_opts = build_html_options(input_id, aria)
+        field_html     = @template.capture(generated_opts, @kwargs, error, &block)
+        Fields::Group.new(@template).render(layout: @layout, error: error) do
+          @template.safe_join(
+            [
+              field_label(input_id),
+              field_html,
+              render_hint(input_id),
+              render_errors(object, attribute, input_id)
+            ]
+          )
+        end
+      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_override
           Array(@error_override)
         elsif object.respond_to?(:errors)
-          object.errors[@attribute]
+          object.errors[attribute]
         else
           []
         end
       end
 
-      def error?
-        errors.any?
+      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 html_opts
-        attrs = { id: input_id }
-        attrs[:"aria-describedby"] = described_by if described_by
-        attrs[:"aria-invalid"]     = "true"       if error?
-        attrs[:required]           = true         if required
-        attrs[:"aria-required"]    = "true"       if required
+      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}_hint"
+      def hint_id(input_id)
+        [input_id, "hint"].compact.join("_")
       end
 
-      def error_id
-        "#{input_id}_error"
+      def error_id(input_id)
+        [input_id, "error"].compact.join("_")
       end
 
-      def described_by
-        ids = []
-        ids << hint_id  if details.present?
-        ids << error_id if errors.any?
-        ids.join(" ").presence
+      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
 
-      def label_hidden?
-        label_visibility == :exclusive
+      def field_label(input_id)
+        Fields::Label.new(@template).render(
+          text:     @label,
+          for_id:   input_id,
+          id:       self.class.label_id(input_id),
+          required: @required,
+          hidden:   @hide_label
+        )
       end
     end
   end

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

@@ -5,8 +5,8 @@ module StimulusPlumbers
     module Fields
       class Error < Plumber::Base
         def render(message:, id:)
-          klass = theme.resolve(:form_error).fetch(:classes, "")
-          template.content_tag(:p, message, id: id, class: klass.presence, role: "alert")
+          html_options = merge_html_options(theme.resolve(:form_error))
+          template.content_tag(:p, message, id: id, role: "alert", **html_options)
         end
       end
     end

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      class Fieldset < Plumber::Base
+        def render(object, attribute, input_id, field, &block)
+          error         = field.error?(object, attribute)
+          fieldset_opts = build_fieldset_aria(field, object, attribute, input_id, error)
+          Group.new(template).render(layout: field.layout, error: error) do
+            template.safe_join(
+              [
+                build_fieldset(fieldset_opts, field, attribute, error, &block),
+                field.render_hint(input_id),
+                field.render_errors(object, attribute, input_id)
+              ]
+            )
+          end
+        end
+
+        private
+
+        def build_fieldset(fieldset_opts, field, attribute, error, &block)
+          template.content_tag(:fieldset, **fieldset_opts) do
+            template.safe_join(
+              [
+                legend(field, attribute),
+                template.capture(error, &block)
+              ]
+            )
+          end
+        end
+
+        def legend(field, attribute)
+          Label.new(template).render(
+            text:     field.label || attribute.to_s.humanize,
+            required: field.required,
+            hidden:   field.label_hidden?,
+            tag:      :legend
+          )
+        end
+
+        def build_fieldset_aria(field, object, attribute, input_id, error)
+          opts = {}
+          db = field.described_by(object, attribute, input_id)
+          opts[:"aria-describedby"] = db      if db
+          opts[:"aria-invalid"]     = "true"  if error
+          opts[:"aria-required"]    = "true"  if field.required
+          opts
+        end
+      end
+    end
+  end
+end

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

@@ -5,8 +5,8 @@ module StimulusPlumbers
     module Fields
       class Group < Plumber::Base
         def render(layout: :stacked, error: false, &block)
-          klass = theme.resolve(:form_group, layout: layout, error: error).fetch(:classes, "")
-          template.content_tag(:div, class: klass.presence, &block)
+          html_options = merge_html_options(theme.resolve(:form_group, layout: layout, error: error))
+          template.content_tag(:div, **html_options, &block)
         end
       end
     end

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

@@ -5,8 +5,8 @@ module StimulusPlumbers
     module Fields
       class Hint < Plumber::Base
         def render(text:, id:)
-          klass = theme.resolve(:form_details).fetch(:classes, "")
-          template.content_tag(:p, text, id: id, class: klass.presence)
+          html_options = merge_html_options(theme.resolve(:form_details))
+          template.content_tag(:p, text, id: id, **html_options)
         end
       end
     end

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

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

data/lib/stimulus_plumbers/form/fields/inputs/choice.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module Choice
+          def check_box(attribute, options = {}, checked_value = "1", unchecked_value = "0")
+            options[:layout] ||= :inline
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              html_options = merge_html_options(opts, html_opts, field_theme(:form_checkbox, error: error))
+              super(attribute, html_options, checked_value, unchecked_value)
+            end
+          end
+
+          def collection_check_boxes(
+            attribute,
+            collection,
+            value_method,
+            text_method,
+            options = {},
+            html_options = {},
+            &block
+          )
+            options[:layout] ||= :inline
+            field = Field.new(@template, **options)
+            render_fieldset(attribute, field) do |error|
+              item_opts = merge_html_options(html_options, field_theme(:form_checkbox, error: error))
+              super(attribute, collection, value_method, text_method, {}, item_opts, &block)
+            end
+          end
+
+          def radio_button(attribute, tag_value, options = {})
+            options[:layout] ||= :inline
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute, tag_value)
+            ) do |html_opts, opts, error|
+              html_options = merge_html_options(opts, html_opts, field_theme(:form_radio, error: error))
+              super(attribute, tag_value, html_options)
+            end
+          end
+
+          def collection_radio_buttons(
+            attribute,
+            collection,
+            value_method,
+            text_method,
+            options = {},
+            html_options = {},
+            &block
+          )
+            options[:layout] ||= :inline
+            field = Field.new(@template, **options)
+            render_fieldset(attribute, field) do |error|
+              item_opts = merge_html_options(html_options, field_theme(:form_radio, error: error))
+              super(attribute, collection, value_method, text_method, {}, item_opts, &block)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/fields/inputs/datetime.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module Datetime
+          def date_field(attribute, options = {})
+            html_native = options.delete(:html_native) { false }
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              if html_native
+                html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error))
+                super(attribute, html_options)
+              else
+                render_date_combobox(attribute, html_opts, error)
+              end
+            end
+          end
+
+          def time_field(attribute, options = {})
+            html_native = options.delete(:html_native) { false }
+            format      = options.delete(:format) { :h12 }
+            step        = options.delete(:step) { 1 }
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              if html_native
+                html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error))
+                super(attribute, html_options)
+              else
+                render_time_combobox(attribute, html_opts, error, format: format, step: step)
+              end
+            end
+          end
+
+          private
+
+          def render_date_combobox(attribute, html_opts, error)
+            current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
+            opts = Components::Combobox::Date.default_opts.deep_merge(
+              input:   { value: current_value, data: { combobox_date_date_value: current_value } },
+              trigger: { aria: html_opts[:aria] },
+              popover: { labelledby: Field.label_id(html_opts[:id]) }
+            )
+            render_combobox(
+              attribute,
+              input_id: html_opts[:id],
+              opts:     opts,
+              err:      error,
+              data:     { input_format_type_value: "date" }
+            ) do |popover_id|
+              Components::Combobox::Date.new(@template).render(value: current_value, popover_id: popover_id)
+            end
+          end
+
+          def render_time_combobox(attribute, html_opts, error, format:, step:)
+            current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
+            opts = Components::Combobox::Time.default_opts.deep_merge(
+              input:   { value: current_value },
+              trigger: { aria: html_opts[:aria] },
+              popover: { labelledby: Field.label_id(html_opts[:id]) }
+            )
+            render_combobox(
+              attribute,
+              input_id: html_opts[:id],
+              opts:     opts,
+              err:      error,
+              data:     { input_format_type_value: "time", input_format_options_value: { format: format }.to_json }
+            ) { Components::Combobox::Time.new(@template).render(format: format, step: step, value: current_value) }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/form/fields/inputs/file.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module File
+          def file_field(attribute, options = {})
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              html_options = merge_html_options(opts, html_opts, field_theme(:form_file, error: error))
+              super(attribute, html_options)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module Password
+          def password_field(attribute, options = {})
+            reveal = options.delete(:reveal) { false }
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              if reveal
+                render_reveal_password(merge_html_options(opts, html_opts), error) do |html_options|
+                  super(attribute, html_options)
+                end
+              else
+                html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error))
+                super(attribute, html_options)
+              end
+            end
+          end
+
+          private
+
+          def render_reveal_password(html_opts, error, &block)
+            html_options = merge_html_options(
+              html_opts,
+              field_theme(:form_input, error: error),
+              { data: { input_format_target: "input" } }
+            )
+            render_input_group(
+              error:    error,
+              trailing: method(:reveal_button),
+              **merge_html_options(
+                field_theme(:form_input_reveal, error: error),
+                { data: { controller: "input-format", input_format_type_value: "password" } }
+              )
+            ) { @template.capture(html_options, &block) }
+          end
+
+          def reveal_button
+            html_options = merge_html_options(
+              field_theme(:form_button_reveal),
+              {
+                type: "button",
+                aria: { label: "Show password", pressed: "false" },
+                data: { input_format_target: "toggle", action: "click->input-format#toggle" }
+              }
+            )
+            @template.content_tag(:button, "", **html_options)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module Search
+          def search_field(attribute, options = {})
+            html_native = options.delete(:html_native) { false }
+            clearable   = options.delete(:clearable) { false }
+            url         = options.delete(:url) { nil }
+            choices     = options.delete(:options) { [] }
+
+            Field.new(@template, **options).render(
+              object,
+              attribute,
+              input_id: field_id(attribute)
+            ) do |html_opts, opts, error|
+              if html_native
+                render_search_input(html_opts, opts, error, clearable: clearable) do |html_options|
+                  super(attribute, html_options)
+                end
+              else
+                render_search_combobox(
+                  attribute,
+                  html_opts,
+                  error,
+                  url:       url,
+                  clearable: clearable
+                ) do |combobox_opts, input_id, current_value|
+                  render_search_autocomplete(attribute, input_id, combobox_opts, error, choices, current_value)
+                end
+              end
+            end
+          end
+
+          private
+
+          def render_search_input(html_opts, opts, error, clearable:, &block)
+            data         = clearable ? { data: { input_search_target: "input" } } : {}
+            html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error), data)
+            input_html   = @template.capture(html_options, &block)
+
+            return input_html unless clearable
+
+            render_input_group(
+              trailing: method(:clear_button),
+              error:    !!error,
+              **merge_html_options(field_theme(:form_input_search), { data: { controller: "input-search" } })
+            ) { input_html }
+          end
+
+          def render_search_combobox(attribute, html_opts, error, url:, clearable:, &block)
+            current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
+            input_id      = html_opts[:id]
+            opts          = Components::Combobox::Autocomplete.default_opts.deep_merge(
+              input:   { value: current_value },
+              trigger: { data: clearable ? { input_search_target: "input" } : {}, aria: html_opts[:aria] },
+              popover: { data: url ? { combobox_dropdown_url_value: url } : {} }
+            )
+
+            combobox_html = @template.capture(opts, input_id, current_value, &block)
+            return combobox_html unless clearable
+
+            render_input_group(
+              trailing: method(:clear_button),
+              error:    !!error,
+              **merge_html_options(field_theme(:form_input_search), { data: { controller: "input-search" } })
+            ) { combobox_html }
+          end
+
+          def render_search_autocomplete(attribute, input_id, combobox_opts, error, choices, current_value)
+            render_combobox(
+              attribute,
+              input_id: input_id,
+              opts:     combobox_opts,
+              err:      error,
+              data:     {
+                input_combobox_combobox_dropdown_outlet: "##{Components::Combobox.popover_id_for(input_id)}",
+                action:                                  "input->input-combobox#onInput"
+              }
+            ) { Components::Combobox::Autocomplete.new(@template).render(options: choices, value: current_value, labelledby: Field.label_id(input_id)) }
+          end
+
+          def clear_button
+            Components::Button.new(@template).render(
+              "",
+              **merge_html_options(
+                field_theme(:form_button_clear),
+                {
+                  aria:   { label: "Clear search" },
+                  hidden: true,
+                  data:   { input_search_target: "clear", action: "click->input-search#clear" }
+                }
+              )
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Form
+    module Fields
+      module Inputs
+        module Select
+          module Grouped
+            def grouped_collection_select(
+              attribute,
+              collection,
+              group_method,
+              group_label_method,
+              option_key_method,
+              option_value_method,
+              options = {},
+              html_options = {}
+            )
+              html_native = options.delete(:html_native) { false }
+              Field.new(@template, **options).render(
+                object,
+                attribute,
+                input_id: field_id(attribute)
+              ) do |html_opts, opts, error|
+                merged_html_opts = merge_html_options(html_options, html_opts, field_theme(:form_select, error: error))
+                if html_native
+                  super(
+                    attribute,
+                    collection,
+                    group_method,
+                    group_label_method,
+                    option_key_method,
+                    option_value_method,
+                    opts,
+                    merged_html_opts
+                  )
+                else
+                  render_select_dropdown(attribute, opts, merged_html_opts, err: error) do
+                    collection.map do |group|
+                      {
+                        label:   group.public_send(group_label_method),
+                        options: group.public_send(group_method).map do |item|
+                          [item.public_send(option_value_method), item.public_send(option_key_method)]
+                        end
+                      }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end