nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/components/nitro_kit/field.rb

@@ -2,6 +2,16 @@
 
 module NitroKit
   class Field < Component
+    UNSET = Object.new.freeze
+    private_constant :UNSET
+    INPUT_TYPES = %i[
+      button color date datetime datetime_local email file hidden month number password range
+      search string tel text time url week
+    ].freeze
+    TYPES = (
+      INPUT_TYPES + %i[select combobox textarea rich_text checkbox radio radio_button radio_group switch]
+    ).freeze
+
     def initialize(
       form = nil,
       field_name = nil,
@@ -9,141 +19,193 @@ module NitroKit
       label: nil,
       description: nil,
       errors: nil,
-      wrapper: {},
       options: nil,
+      option_tags: nil,
       include_blank: nil,
       prompt: nil,
-      **attrs
+      id: nil,
+      name: nil,
+      value: UNSET,
+      placeholder: nil,
+      disabled: false,
+      readonly: false,
+      required: false,
+      autocomplete: nil,
+      checked: nil,
+      indeterminate: false,
+      multiple: false,
+      accept: nil,
+      min: nil,
+      max: nil,
+      step: nil,
+      minlength: nil,
+      maxlength: nil,
+      rows: nil,
+      cols: nil,
+      wrap: nil,
+      pattern: nil,
+      inputmode: nil,
+      checked_value: "1",
+      unchecked_value: "0",
+      include_hidden: true,
+      html: {},
+      aria: {},
+      data: {},
+      control_html: {},
+      control_aria: {},
+      control_data: {},
+      rich_text_content: nil,
+      desperately_need_a_class: nil
     )
       @form = form
-      @field_name = field_name.to_s
-      @as = as.is_a?(String) ? as.to_sym : as
-
-      @name = attrs[:name] || form&.field_name(field_name)
-      @id = attrs[:id] || form&.field_id(field_name)
-
-      # select, radio group
+      @field_name = field_name&.to_s
+      @as = validate_choice!(:as, as.to_s.tr("-", "_").to_sym, TYPES)
+      @multiple = validate_boolean!(:multiple, multiple)
+      @id = id || form&.field_id(field_name) || default_field_id
+      @name = name || form&.field_name(field_name, multiple: @multiple) || default_field_name
+      @explicit_value = value
+      @field_label = label.nil? ? derived_label : label
+      @field_description = description
+      @field_error_messages = Array(errors).compact
       @options = options
+      @option_tags = option_tags
       @include_blank = include_blank
       @prompt = prompt
-
-      @field_attrs = attrs
-      @field_label = label.nil? ? field_name.to_s.humanize : label
-      @field_description = description
-      @field_error_messages = errors
-
-      @wrapper = wrapper
+      @placeholder = placeholder
+      @disabled = validate_boolean!(:disabled, disabled)
+      @readonly = validate_boolean!(:readonly, readonly)
+      @required = validate_boolean!(:required, required)
+      @autocomplete = autocomplete
+      @checked = validate_boolean!(:checked, checked, allow_nil: true)
+      @indeterminate = validate_boolean!(:indeterminate, indeterminate)
+      @accept = accept
+      @min = min
+      @max = max
+      @step = step
+      @minlength = minlength
+      @maxlength = maxlength
+      @rows = rows
+      @cols = cols
+      @wrap = wrap
+      @pattern = pattern
+      @inputmode = inputmode
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      @include_hidden = validate_boolean!(:include_hidden, include_hidden)
+      @control_html = control_html
+      @control_aria = control_aria
+      @control_data = control_data
+      @rich_text_content = rich_text_content
+
+      if @options.is_a?(ActiveSupport::SafeBuffer)
+        raise ArgumentError, "pass captured option markup through option_tags:"
+      end
+      if @as != :textarea && !(@rows.nil? && @cols.nil? && @wrap.nil?)
+        raise ArgumentError, "rows:, cols:, and wrap: require as: :textarea"
+      end
+      if @as == :radio_group && @field_label == false
+        raise ArgumentError, "as: :radio_group requires a legend; pass label: with the group name"
+      end
 
       super(
-        wrapper,
-        data: { as: @as.to_s },
-        class: base_class
+        component: :field,
+        attributes: {
+          data: {
+            field_type: @as.to_s.tr("_", "-"),
+            state: @field_error_messages.any? ? "invalid" : nil,
+            required: @required ? "true" : nil,
+            disabled: @disabled ? "true" : nil
+          }.compact
+        },
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
       )
     end
 
-    attr_reader(
-      :as,
-      :form,
-      :name,
-      :id,
-      :field_attrs,
-      :field_label,
-      :field_description,
-      :field_error_messages
-    )
+    attr_reader :as, :form, :name, :id, :field_label, :field_description, :field_error_messages
 
-    def view_template
-      div(**attrs) do
-        if block_given?
-          yield
-        else
-          default_field
-        end
+    def view_template(&block)
+      div(**root_attributes) do
+        block ? yield : default_field
       end
     end
 
-    alias :html_label :label
-
-    def label(text = nil, **attrs)
-      builder do
-        text ||= field_label
-
-        return unless text
-
-        render(Label.new(**mattr(attrs, for: id, data: { slot: "label" }))) do
-          text
-        end
-      end
+    def label(text = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      text = field_label if text.nil?
+      return if text == false
+      return unless !text.nil? || block
+
+      render_in_slot(
+        Label.new(
+          text,
+          for: label_target_id,
+          id: label_element_id,
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        ),
+        :label,
+        &block
+      )
     end
 
-    def description(text = nil, **attrs, &block)
-      builder do
-        text ||= field_description
-
-        return unless text || block_given?
-
-        div(**mattr(attrs, data: { slot: "description" }, class: description_class)) do
-          text_or_block(text, &block)
-        end
-      end
+    def description(text = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      text = field_description if text.nil?
+      return unless !text.nil? || block
+
+      div(
+        **slot_attributes(
+          :description,
+          attributes: { id: description_id }.compact,
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        )
+      ) { text_or_block(text, &block) }
     end
 
-    def errors(error_messages = nil, **attrs)
-      builder do
-        error_messages ||= field_error_messages
-
-        return unless error_messages&.any?
-
-        ul(**mattr(attrs, data: { slot: "error" }, class: error_class)) do |msg|
-          error_messages.each do |msg|
-            li { msg }
-          end
-        end
+    def errors(error_messages = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
+      messages = error_messages.nil? ? field_error_messages : Array(error_messages).compact
+      return if messages.empty?
+
+      ul(
+        **slot_attributes(
+          :error,
+          attributes: { id: errors_id, aria: { live: "assertive" } }.compact,
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        )
+      ) do
+        messages.each { |message| li { plain(message.to_s) } }
       end
     end
 
-    def control(**attrs)
-      builder do
-        case as
-        when :string
-          input(**attrs)
-        when
-            :button,
-            :color,
-            :date,
-            :datetime,
-            :datetime_local,
-            :email,
-            :file,
-            :hidden,
-            :month,
-            :number,
-            :password,
-            :range,
-            :search,
-            :tel,
-            :text,
-            :time,
-            :url,
-            :week
-          input(type: as, **attrs)
-        when :select
-          select(**attrs)
-        when :textarea
-          textarea(**attrs)
-        when :checkbox
-          checkbox(**attrs)
-        when :combobox
-          combobox(**attrs)
-        when :radio, :radio_button, :radio_group
-          radio_group(**attrs)
-        when :switch
-          switch(**attrs)
-        when Class
-          component(**attrs)
-        else
-          raise ArgumentError, "Invalid field type `#{as}'"
-        end
+    def control(html: {}, aria: {}, data: {})
+      case as
+      when *INPUT_TYPES
+        input_control(html:, aria:, data:)
+      when :select
+        select_control(html:, aria:, data:)
+      when :combobox
+        combobox_control(html:, aria:, data:)
+      when :textarea
+        textarea_control(html:, aria:, data:)
+      when :rich_text
+        rich_text_control(html:, aria:, data:)
+      when :checkbox
+        checkbox_control(html:, aria:, data:)
+      when :switch
+        switch_control(html:, aria:, data:)
+      when :radio, :radio_button
+        radio_button_control(html:, aria:, data:)
+      when :radio_group
+        radio_group_control(html:, aria:, data:)
       end
     end
 
@@ -151,186 +213,349 @@ module NitroKit
 
     def default_field
       case as
-      when :checkbox
+      when :checkbox, :switch
         control
-        label
         description
-        errors
+      when :radio_group
+        control
       else
         label
         description
         control
-        errors
       end
+      errors
     end
 
-    def control_attrs(**attrs)
-      mattr(
-        attrs,
-        name:,
-        id:,
-        value: value_before_typecast,
-        data: { slot: "control" }
+    def input_control(html:, aria:, data:)
+      type = resolved_input_type
+      render_in_slot(
+        Input.new(
+          type:,
+          id:,
+          name:,
+          value: type == :file ? nil : normalized_value(type),
+          placeholder: @placeholder,
+          disabled: @disabled,
+          readonly: @readonly,
+          required: @required,
+          autocomplete: @autocomplete,
+          multiple: @multiple,
+          accept: @accept,
+          min: @min,
+          max: @max,
+          step: @step,
+          minlength: @minlength,
+          maxlength: @maxlength,
+          pattern: @pattern,
+          inputmode: @inputmode,
+          html: @control_html.merge(html),
+          aria: control_aria(aria),
+          data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    alias :html_input :input
+    def select_control(html:, aria:, data:)
+      render_in_slot(
+        Select.new(
+          options: @options || [],
+          option_tags: @option_tags,
+          id:,
+          name:,
+          value: current_value,
+          include_blank: @include_blank,
+          prompt: @prompt,
+          disabled: @disabled,
+          required: @required,
+          multiple: @multiple,
+          autocomplete: @autocomplete,
+          control_html: @control_html.merge(html),
+          control_aria: control_aria(aria),
+          control_data: @control_data.merge(data)
+        ),
+        :control
+      )
+    end
 
-    def input(**attrs)
-      render(
-        Input.new(
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+    def combobox_control(html:, aria:, data:)
+      render_in_slot(
+        Combobox.new(
+          id:,
+          name:,
+          label: false,
+          options: normalized_options,
+          value: current_value.nil? ? nil : current_value.to_s.presence,
+          placeholder: @placeholder,
+          include_blank: @include_blank.nil? ? true : @include_blank,
+          required: @required,
+          disabled: @disabled,
+          autocomplete: @autocomplete || "off",
+          html: @control_html.merge(html),
+          data: @control_data.merge(data),
+          control_aria: combobox_control_aria(aria)
+        ),
+        :control
       )
     end
 
-    alias :html_select :select
+    def combobox_control_aria(extra)
+      attributes = control_aria(extra)
+      return attributes if attributes.keys.any? { |key| %w[label labelledby].include?(key.to_s.delete("_-")) }
+      return attributes.merge(labelledby: label_element_id) if field_label && label_element_id
 
-    def select(options: nil, include_blank: nil, prompt: nil, **attrs)
-      collection = options || @options || []
-      blank_option = include_blank || @include_blank
-      prompt_text = prompt || @prompt
+      accessible_name = derived_label || name.to_s.humanize.presence
+      raise ArgumentError, "an unlabeled combobox requires a field name or control ARIA label" unless accessible_name
 
-      render(
-        Select.new(
-          collection,
-          value: value,
-          include_empty: blank_option,
-          prompt: prompt_text,
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
-      )
+      attributes.merge(label: accessible_name)
     end
 
-    alias :html_textarea :textarea
-
-    def textarea(**attrs)
-      render(
+    def textarea_control(html:, aria:, data:)
+      render_in_slot(
         Textarea.new(
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+          id:,
+          name:,
+          value: current_value,
+          placeholder: @placeholder,
+          disabled: @disabled,
+          readonly: @readonly,
+          required: @required,
+          autocomplete: @autocomplete,
+          rows: @rows,
+          cols: @cols,
+          minlength: @minlength,
+          maxlength: @maxlength,
+          wrap: @wrap,
+          html: @control_html.merge(html),
+          aria: control_aria(aria),
+          data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    def checkbox(**attrs)
-      control_attrs(**field_attrs, **attrs).tap do |attrs|
-        input(type: "hidden", **attrs, id: nil, value: "0")
-        render(Checkbox.new(checked: checked?, **attrs, value: "1"))
-      end
+    def rich_text_control(html:, aria:, data:)
+      render_in_slot(
+        RichTextArea.new(
+          @rich_text_content,
+          html: @control_html.merge(html),
+          aria: control_aria(aria),
+          data: @control_data.merge(data)
+        ),
+        :control
+      )
     end
 
-    def combobox(**attrs)
-      render(
-        Combobox.new(
-          options: @options,
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+    def checkbox_control(html:, aria:, data:)
+      render_in_slot(
+        Checkbox.new(
+          label: field_label == false ? nil : field_label,
+          id:,
+          name:,
+          value: @checked_value,
+          unchecked_value: @unchecked_value,
+          include_hidden: @include_hidden,
+          checked: checked?,
+          indeterminate: @indeterminate,
+          disabled: @disabled,
+          required: @required,
+          control_html: @control_html.merge(html),
+          control_aria: control_aria(aria),
+          control_data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    def radio_group(options: nil, **attrs)
-      render(
-        RadioButtonGroup.new(
-          options || @options || [],
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+    def switch_control(html:, aria:, data:)
+      render_in_slot(
+        Switch.new(
+          label: field_label == false ? nil : field_label,
+          description: nil,
+          id:,
+          name:,
+          value: @checked_value,
+          unchecked_value: @unchecked_value,
+          include_hidden: @include_hidden,
+          checked: checked?,
+          disabled: @disabled,
+          required: @required,
+          control_html: @control_html.merge(html),
+          control_aria: switch_aria(aria),
+          control_data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    def switch(**attrs)
-      # TODO: support use in forms
-      render(
-        Switch.new(
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+    def radio_button_control(html:, aria:, data:)
+      choice = normalized_options.first || Choice.new(label: @checked_value, value: @checked_value)
+
+      render_in_slot(
+        RadioButton.new(
+          label: field_label == false ? nil : field_label,
+          id:,
+          name:,
+          value: choice.value,
+          checked: @checked.nil? ? current_value.to_s == choice.value.to_s : @checked,
+          disabled: @disabled || choice.disabled,
+          required: @required,
+          control_html: @control_html.merge(html),
+          control_aria: control_aria(aria),
+          control_data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    def component(**attrs)
-      render(
-        as.new(
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
+    def radio_group_control(html:, aria:, data:)
+      render_in_slot(
+        RadioButtonGroup.new(
+          legend: field_label || derived_label || I18n.t("nitro_kit.field.options_legend"),
+          options: normalized_options,
+          name:,
+          value: current_value,
+          id:,
+          description: field_description,
+          disabled: @disabled,
+          required: @required,
+          html: @control_html.merge(html),
+          aria: control_aria(aria),
+          data: @control_data.merge(data)
+        ),
+        :control
       )
     end
 
-    private
+    def control_aria(extra)
+      attributes = @control_aria.merge(extra)
+      provided_description = extract_aria_attribute!(attributes, :describedby)
+      provided_invalid = extract_aria_attribute!(attributes, :invalid)
+      described_by = [
+        provided_description,
+        field_description ? description_id : nil,
+        field_error_messages.any? ? errors_id : nil
+      ].compact.join(" ")
+
+      attributes.merge(
+        describedby: described_by.presence,
+        invalid: field_error_messages.any? ? true : provided_invalid
+      ).compact
+    end
+
+    def switch_aria(extra)
+      attributes = control_aria(extra)
+      return attributes unless field_label == false
+      return attributes if attributes.keys.any? { |key| %w[label labelledby].include?(key.to_s.delete("_-")) }
+
+      accessible_name = derived_label || name.to_s.humanize.presence
+      raise ArgumentError, "an unlabeled switch requires a field name or control ARIA label" unless accessible_name
+
+      attributes.merge(label: accessible_name)
+    end
+
+    def extract_aria_attribute!(attributes, name)
+      key = attributes.keys.find { |candidate| candidate.to_s.delete("_-") == name.to_s.delete("_-") }
+      attributes.delete(key) if key
+    end
+
+    def derived_label
+      return unless @field_name
+
+      object = form&.object
+      if object && object.class.respond_to?(:human_attribute_name)
+        object.class.human_attribute_name(@field_name)
+      else
+        @field_name.humanize
+      end
+    end
 
-    def base_class
-      [
-        "grid align-start",
-        # Margins
-        "[&>[data-slot=label]+[data-slot=control]]:mt-2 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-2",
-        # When checkbox
-        "[&[data-as=checkbox]]:grid-cols-[auto_1fr] data-[as=checkbox]:gap-x-2 [&[data-as=checkbox]_[data-slot=description]]:col-start-2",
-        "[&:has([data-slot=error])_[data-slot=control]]:border-destructive"
-      ]
+    def normalized_options
+      @normalized_options ||= Array(@options).map { |choice| Choice.coerce(choice) }.freeze
     end
 
-    def description_class
-      "text-sm text-muted-content"
+    def description_id
+      "#{id}-description" if id
     end
 
-    def error_class
-      "text-sm text-destructive-content"
+    def label_target_id
+      as == :combobox ? "#{id}-input" : id
     end
 
-    def value
-      return attrs[:value] if attrs[:value]
-      return unless object = form&.object
+    def label_element_id
+      "#{id}-label" if as == :combobox && id
+    end
+
+    def default_field_id
+      return unless @field_name
+
+      @field_name.gsub(/[^a-zA-Z0-9_-]+/, "_").gsub(/\A_+|_+\z/, "").presence
+    end
+
+    def default_field_name
+      return unless @field_name
 
-      if object.respond_to?(@field_name)
-        object.public_send(@field_name)
+      @multiple ? "#{@field_name}[]" : @field_name
+    end
+
+    def errors_id
+      "#{id}-errors" if id
+    end
+
+    def resolved_input_type
+      case as
+      when :string then :text
+      when :datetime, :datetime_local then :"datetime-local"
+      else as
       end
     end
 
-    def value_before_typecast
-      return attrs[:value] if attrs[:value]
-      return unless object = form&.object
+    def normalized_value(type)
+      value = current_value_before_type_cast
+      return value unless type == :"datetime-local"
+      return value if value.nil?
 
-      method_before_type_cast = @field_name + "_before_type_cast"
+      if value.is_a?(String)
+        stripped = value.strip
+        return value if stripped.empty?
+        return stripped if stripped.match?(/\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,6})?)?\z/)
 
-      if object.respond_to?(method_before_type_cast)
-        object.public_send(method_before_type_cast)
-      else
-        value
+        value = parse_datetime_value(stripped) || value
       end
+
+      value.respond_to?(:strftime) ? value.strftime("%Y-%m-%dT%H:%M:%S") : value
+    end
+
+    def parse_datetime_value(value)
+      Time.zone ? Time.zone.parse(value) : Time.parse(value)
+    rescue ArgumentError, TypeError
+      nil
+    end
+
+    def current_value
+      return @explicit_value unless @explicit_value.equal?(UNSET)
+      return unless form&.object && @field_name && form.object.respond_to?(@field_name)
+
+      form.object.public_send(@field_name)
+    end
+
+    def current_value_before_type_cast
+      return @explicit_value unless @explicit_value.equal?(UNSET)
+      return unless form&.object && @field_name
+
+      before_type_cast = "#{@field_name}_before_type_cast"
+      form.object.respond_to?(before_type_cast) ? form.object.public_send(before_type_cast) : current_value
     end
 
     def checked?
-      return unless object = form&.object
-      value = object.public_send(@field_name)
-
-      case value
-      when true, false
-        value
-      when String
-        value == "1"
-      when Numeric
-        value == 1
-      else
-        false
+      return @checked unless @checked.nil?
+      return true if current_value.to_s == @checked_value.to_s
+
+      case current_value
+      when true then true
+      when String then current_value == "1"
+      when Numeric then current_value == 1
+      else false
       end
     end
   end