hakumi_components 0.1.18.pre → 0.1.19.pre

data/app/components/hakumi_components/autocomplete/component.html.erb

@@ -1,74 +1,94 @@
-<div <%= tag.attributes(wrapper_attributes).to_s.html_safe %>>
-  <div class="hakumi-auto-complete-input-wrapper">
-    <% if custom_input_renderer? %>
-      <%= input_renderer.call(input_attributes) %>
-    <% else %>
-      <input <%= tag.attributes(input_attributes).to_s.html_safe %>>
-    <% end %>
-
-    <% if allow_clear? %>
-      <button
-        type="button"
-        class="hakumi-auto-complete-clear-icon"
-        aria-label="Clear"
-        data-hakumi--autocomplete-target="clear"
-        data-action="click->hakumi--autocomplete#clear">
-        <%= render HakumiComponents::Icon::Component.new(name: clear_icon, theme: :filled, fallback_to_outlined: true) %>
-      </button>
-    <% end %>
-  </div>
+<% autocomplete_control = capture do %>
+  <div <%= tag.attributes(wrapper_attributes).to_s.html_safe %>>
+    <div class="hakumi-auto-complete-input-wrapper">
+      <% if custom_input_renderer? %>
+        <%= input_renderer.call(input_attributes) %>
+      <% else %>
+        <input <%= tag.attributes(input_attributes).to_s.html_safe %>>
+      <% end %>
 
-  <template data-hakumi--autocomplete-target="optionTemplate">
-    <div
-      class="hakumi-auto-complete-item"
-      role="option"
-      data-hakumi--autocomplete-target="option"
-      data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
-      <span class="hakumi-auto-complete-item-label"></span>
+      <% if allow_clear? %>
+        <button
+          type="button"
+          class="hakumi-auto-complete-clear-icon"
+          aria-label="Clear"
+          data-hakumi--autocomplete-target="clear"
+          data-action="click->hakumi--autocomplete#clear">
+          <%= render HakumiComponents::Icon::Component.new(name: clear_icon, theme: :filled, fallback_to_outlined: true) %>
+        </button>
+      <% end %>
     </div>
-  </template>
 
-  <div
-    id="<%= dropdown_id %>"
-    class="hakumi-auto-complete-dropdown hakumi-auto-complete-dropdown-hidden"
-    role="listbox"
-    data-hakumi--autocomplete-target="dropdown">
-    <% if normalized_items.any? %>
-      <% normalized_items.each do |item| %>
-        <% if item[:type] == :group %>
-          <div class="hakumi-auto-complete-group">
-            <div class="hakumi-auto-complete-group-label"><%= item[:label] %></div>
-            <% item[:options].each do |opt| %>
-              <div
-                class="hakumi-auto-complete-item"
-                role="option"
-                data-value="<%= opt[:value] %>"
-                data-label="<%= opt[:label] %>"
-                data-hakumi--autocomplete-target="option"
-                data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
-                <span class="hakumi-auto-complete-item-label"><%= opt[:label] %></span>
-              </div>
-            <% end %>
-          </div>
-        <% elsif item && item[:type] == :option %>
-          <div
-            class="hakumi-auto-complete-item"
-            role="option"
-            data-value="<%= item[:value] %>"
-            data-label="<%= item[:label] %>"
-            data-hakumi--autocomplete-target="option"
-            data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
-            <span class="hakumi-auto-complete-item-label"><%= item[:label] %></span>
-          </div>
+    <template data-hakumi--autocomplete-target="optionTemplate">
+      <div
+        class="hakumi-auto-complete-item"
+        role="option"
+        data-hakumi--autocomplete-target="option"
+        data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+        <span class="hakumi-auto-complete-item-label"></span>
+      </div>
+    </template>
+
+    <div
+      id="<%= dropdown_id %>"
+      class="hakumi-auto-complete-dropdown hakumi-auto-complete-dropdown-hidden"
+      role="listbox"
+      data-hakumi--autocomplete-target="dropdown">
+      <% if normalized_items.any? %>
+        <% normalized_items.each do |item| %>
+          <% if item.group? %>
+            <div class="hakumi-auto-complete-group">
+              <div class="hakumi-auto-complete-group-label"><%= item.label %></div>
+              <% item.options.each do |option| %>
+                <div
+                  class="hakumi-auto-complete-item"
+                  role="option"
+                  data-value="<%= option.value %>"
+                  data-label="<%= option.label %>"
+                  data-hakumi--autocomplete-target="option"
+                  data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+                  <span class="hakumi-auto-complete-item-label"><%= option.label %></span>
+                </div>
+              <% end %>
+            </div>
+          <% elsif item.option? %>
+            <div
+              class="hakumi-auto-complete-item"
+              role="option"
+              data-value="<%= item.value %>"
+              data-label="<%= item.label %>"
+              data-hakumi--autocomplete-target="option"
+              data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+              <span class="hakumi-auto-complete-item-label"><%= item.label %></span>
+            </div>
+          <% end %>
         <% end %>
       <% end %>
-    <% end %>
 
-    <div
-      class="hakumi-auto-complete-empty"
-      data-hakumi--autocomplete-target="empty"
-      style="display: <%= normalized_items.any? ? 'none' : 'block' %>;">
-      <%= not_found_content %>
+      <div
+        class="hakumi-auto-complete-empty"
+        data-hakumi--autocomplete-target="empty"
+        style="display: <%= normalized_items.any? ? 'none' : 'block' %>;">
+        <%= not_found_content %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% if standalone? %>
+  <%= autocomplete_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <div class="hakumi-form-item-control-input-content">
+          <%= autocomplete_control %>
+        </div>
+      </div>
+
+      <%= render_explain %>
     </div>
   </div>
-</div>
+<% end %>

data/app/components/hakumi_components/autocomplete/component.rb

@@ -1,59 +1,115 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Autocomplete
-    # Hakumi Autocomplete component
-    # Text input with dropdown suggestions, built on top of Ant Design styles.
     class Component < HakumiComponents::BaseComponent
-      SIZES = %i[small middle large].freeze
-      VARIANTS = %i[outlined filled borderless underlined].freeze
-      STATUSES = %i[error warning].freeze
-      FILTER_MODES = %i[contains starts_with].freeze
-
-      # @param name [String, Symbol] input name/id
-      # @param options [Array] list of options or groups
-      #   - "label" (String) -> label & value are the same
-      #   - [label, value]
-      #   - { label:, value: }
-      #   - { label:, options: [...] } for grouped options
+      extend T::Sig
+
+      include HakumiComponents::Concerns::SelectionControl
+
+      InputRenderer = T.type_alias do
+        T.proc.params(attrs: Types::HtmlAttributes).returns(T.any(String, ActiveSupport::SafeBuffer))
+      end
+
+      VARIANTS = T.let(%i[outlined filled borderless underlined].freeze, T::Array[Symbol])
+      STATUSES = T.let(%i[error warning].freeze, T::Array[Symbol])
+      FILTER_MODES = T.let(%i[contains starts_with].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          name: Types::FormFieldName,
+          options: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::EntryInput]),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: Types::FormFieldValue,
+          placeholder: T.nilable(String),
+          size: Symbol,
+          variant: Symbol,
+          status: T.nilable(Symbol),
+          disabled: T::Boolean,
+          required: T::Boolean,
+          allow_clear: T::Boolean,
+          clear_icon: Types::StringOrSymbol,
+          input_renderer: T.nilable(InputRenderer),
+          case_sensitive: T::Boolean,
+          filter_mode: Symbol,
+          not_found_content: T.nilable(String),
+          standalone: T::Boolean,
+          rules: T.nilable(T::Array[Types::ValidationRule]),
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         name:,
         options: [],
+        label: nil,
+        caption: nil,
         value: nil,
         placeholder: nil,
-        size: :middle,
+        size: :default,
         variant: :outlined,
         status: nil,
         disabled: false,
+        required: false,
         allow_clear: false,
         clear_icon: :close_circle,
         input_renderer: nil,
         case_sensitive: false,
         filter_mode: :contains,
-        not_found_content: "No options",
+        not_found_content: nil,
+        standalone: true,
+        rules: nil,
+        errors: [],
         **html_options
       )
-        @name = name
-        @options = options
-        @value = value
+        @name = T.let(name, Types::FormFieldName)
+        @options = T.let(HakumiComponents::SelectionControl::Coercion.entries(Array(options)), T::Array[HakumiComponents::SelectionControl::Entry])
+        @label = label
+        @caption = caption
+        @value = T.let(value, Types::FormFieldValue)
         @placeholder = placeholder
         @size = size
         @variant = variant
         @status = status
         @disabled = disabled
+        @required = required
         @allow_clear = allow_clear
         @clear_icon = clear_icon
-        @input_renderer = input_renderer
+        @input_renderer = T.let(input_renderer, T.nilable(InputRenderer))
         @case_sensitive = case_sensitive
         @filter_mode = filter_mode
         @not_found_content = not_found_content
-        @html_options = html_options
+        @standalone = standalone
+        @rules = T.let(rules, T.nilable(T::Array[Types::ValidationRule]))
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+        initialize_selection_control_contract!(
+          name: @name,
+          label: @label,
+          caption: @caption,
+          value: @value,
+          placeholder: @placeholder,
+          size: @size,
+          disabled: @disabled,
+          allow_clear: @allow_clear,
+          required: @required,
+          standalone: @standalone,
+          errors: @errors,
+          html_options: @html_options,
+          rules: @rules
+        )
 
         validate_props!
       end
 
       private
 
+      sig { returns(T::Array[HakumiComponents::SelectionControl::Entry]) }
+      attr_reader :options
+
+      sig { void }
       def validate_props!
         validate_inclusion!(:size, SIZES)
         validate_inclusion!(:variant, VARIANTS)
@@ -61,141 +117,111 @@ module HakumiComponents
         validate_inclusion!(:status, STATUSES) if @status
       end
 
+      sig { returns(String) }
       def wrapper_classes
         class_names(
           "auto-complete",
           {
-            @size => (@size != :middle),
+            selection_control_size => selection_control_size != :default,
             "status-error": @status == :error,
             "status-warning": @status == :warning,
             "varihakumi-outlined": @variant == :outlined,
             "varihakumi-filled": @variant == :filled,
             "varihakumi-borderless": @variant == :borderless,
             "varihakumi-underlined": @variant == :underlined,
-            disabled: @disabled
+            disabled: selection_control_disabled
           },
-          [ @html_options[:class] ]
+          [ selection_control_html_class_name ]
         )
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
         base_attrs = {
           class: wrapper_classes,
           data: {
             controller: "hakumi--autocomplete",
-            "hakumi--autocomplete-case-sensitive-value": @case_sensitive ? "true" : "false",
-            "hakumi--autocomplete-filter-mode-value": @filter_mode.to_s
+            "hakumi--autocomplete-case-sensitive-value": @case_sensitive,
+            "hakumi--autocomplete-filter-mode-value": @filter_mode.to_s,
+            "hakumi--autocomplete-disabled-value": selection_control_disabled
           }
         }
 
-        extra = @html_options.except(:class)
-        merge_attributes(base_attrs, extra)
+        merge_attributes(base_attrs, selection_control_html_options_without_class)
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def input_attributes
         attrs = {
           type: "text",
-          name: @name,
-          id: @html_options[:id] || @name,
-          value: @value,
-          placeholder: @placeholder,
-          disabled: (@disabled ? true : nil),
+          name: form_field_name,
+          id: input_id,
+          value: selection_control_value,
+          placeholder: selection_control_placeholder,
+          disabled: selection_control_disabled ? true : nil,
           autocomplete: "off",
           spellcheck: "false",
-          aria: {
-            autocomplete: "list",
-            controls: dropdown_id,
-            expanded: "false"
-          },
+          "aria-autocomplete": "list",
+          "aria-controls": dropdown_id,
+          "aria-expanded": "false",
+          "aria-haspopup": "listbox",
+          "aria-invalid": error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
           data: {
             action: "input->hakumi--autocomplete#onInput keydown->hakumi--autocomplete#onKeydown focus->hakumi--autocomplete#open blur->hakumi--autocomplete#onBlur",
             "hakumi--autocomplete-target": "input"
           }
-        }
+        }.compact
 
         attrs[:class] = input_classes unless custom_input_renderer?
-        attrs[:aria].compact!
         attrs
       end
 
+      sig { returns(String) }
       def input_classes
-        classes = [ "hakumi-input" ]
-        classes << "hakumi-input-#{@size}" if @size != :middle
+        classes = T.let([ "hakumi-input" ], T::Array[String])
+        classes << "hakumi-input-#{selection_control_size}" if selection_control_size != :default
         classes.join(" ")
       end
 
+      sig { returns(String) }
       def dropdown_id
-        @dropdown_id ||= "#{@name}_autocomplete_dropdown"
+        "#{input_id}_autocomplete_dropdown"
       end
 
+      sig { returns(T::Boolean) }
       def allow_clear?
-        @allow_clear
+        selection_control_allow_clear
       end
 
+      sig { returns(T::Boolean) }
       def custom_input_renderer?
-        @input_renderer.respond_to?(:call)
+        !@input_renderer.nil?
       end
 
+      sig { returns(T.nilable(InputRenderer)) }
       def input_renderer
         @input_renderer
       end
 
+      sig { returns(T::Boolean) }
       def disabled?
-        @disabled
+        selection_control_disabled
       end
 
+      sig { returns(Types::StringOrSymbol) }
       def clear_icon
         @clear_icon
       end
 
+      sig { returns(String) }
       def not_found_content
-        @not_found_content
+        @not_found_content || t_default(:not_found, default: "No options")
       end
 
+      sig { returns(T::Array[HakumiComponents::SelectionControl::Entry]) }
       def normalized_items
-        @normalized_items ||= begin
-          Array(@options).flat_map do |opt|
-            if opt.is_a?(Hash) && opt[:options]
-              {
-                type: :group,
-                label: opt[:label].to_s,
-                options: normalize_group_options(opt[:options])
-              }
-            else
-              normalize_simple_option(opt)
-            end
-          end
-        end
-      end
-
-      def normalize_group_options(options)
-        Array(options).map { |opt| normalize_simple_option(opt) }.compact
-      end
-
-      def normalize_simple_option(opt)
-        case opt
-        when nil
-          nil
-        when Hash
-          {
-            type: :option,
-            label: opt[:label].to_s,
-            value: (opt[:value] || opt[:label]).to_s
-          }
-        when Array
-          label, value = opt
-          {
-            type: :option,
-            label: label.to_s,
-            value: (value || label).to_s
-          }
-        else
-          {
-            type: :option,
-            label: opt.to_s,
-            value: opt.to_s
-          }
-        end
+        options
       end
     end
   end

data/app/components/hakumi_components/avatar/component.rb

@@ -1,11 +1,23 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Avatar
     class Component < HakumiComponents::BaseComponent
-      SHAPES = [ :circle, :square ].freeze
-      SIZES = [ :small, :default, :large ].freeze
+      extend T::Sig
 
+      SHAPES = T.let([ :circle, :square ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          shape: Symbol,
+          size: T.any(Symbol, Integer),
+          src: T.nilable(String),
+          icon: T.nilable(Types::StringOrSymbol),
+          alt: T.nilable(String),
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         shape: :circle,
         size: :default,
@@ -17,24 +29,27 @@ module HakumiComponents
         @shape = shape
         @size = size
         @src = src
-        @icon = icon
+        @icon = T.let(icon, T.nilable(Types::StringOrSymbol))
         @alt = alt
-        @html_options = html_options
+        @html_options = T.let(html_options, Types::HtmlAttributes)
 
         validate_props!
       end
 
+      sig { returns(ActiveSupport::SafeBuffer) }
       def call
         content_tag(:span, content_wrapper, wrapper_attributes)
       end
 
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:shape, SHAPES)
         validate_inclusion!(:size, SIZES) unless @size.is_a?(Integer)
       end
 
+      sig { returns(String) }
       def wrapper_classes
         class_names(
           "avatar",
@@ -42,24 +57,25 @@ module HakumiComponents
             @shape => true,
             lg: @size == :large,
             sm: @size == :small,
-            icon: @icon.present?,
+            icon: @icon.present? && @src.blank?,
             image: @src.present?
           },
-          [ @html_options[:class] ]
+          [ html_class_name ]
         )
       end
 
+      sig { returns(ActiveSupport::SafeBuffer) }
       def content_wrapper
         if @src
           image_tag(@src, alt: @alt, width: avatar_size, height: avatar_size)
         elsif @icon
-          # Pass size: nil to allow icon to inherit font-size from avatar
           render HakumiComponents::Icon::Component.new(name: @icon, size: nil)
         else
           tag.span(content, data: { hakumi__avatar_text_target: "text" })
         end
       end
 
+      sig { returns(Integer) }
       def avatar_size
         case @size
         when :large then 40
@@ -69,6 +85,7 @@ module HakumiComponents
         end
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
         attrs = {
           class: wrapper_classes
@@ -78,13 +95,29 @@ module HakumiComponents
           attrs[:style] = "width: #{@size}px; height: #{@size}px; font-size: #{@size / 2}px;"
         end
 
-        # Add controller for text avatars
-        unless @src || @icon
-          attrs[:data] ||= {}
-          attrs[:data][:controller] = "hakumi--avatar-text"
+        if text_avatar?
+          attrs[:data] = text_avatar_data
         end
 
-        merge_attributes(attrs, @html_options.except(:class))
+        merge_attributes(attrs, @html_options.except(:class, :data))
+      end
+
+      sig { returns(T::Boolean) }
+      def text_avatar?
+        @src.blank? && @icon.blank?
+      end
+
+      sig { returns(Types::DataAttributes) }
+      def text_avatar_data
+        data = data_attributes_from(@html_options[:data])
+        data[:controller] = append_data_token(data[:controller], "hakumi--avatar-text")
+        data
+      end
+
+      sig { returns(T.nilable(String)) }
+      def html_class_name
+        css_class = @html_options[:class]
+        css_class.is_a?(String) ? css_class : nil
       end
     end
   end