hakumi_components 0.1.18.pre → 0.1.19.pre

data/app/components/hakumi_components/collapse/panel/component.rb

@@ -1,9 +1,25 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Collapse
     module Panel
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        sig do
+          params(
+            key: T.any(String, Symbol, Integer),
+            header: T.nilable(Types::Renderable),
+            extra: T.nilable(Types::Renderable),
+            disabled: T::Boolean,
+            show_arrow: T::Boolean,
+            collapsible: T.nilable(Symbol),
+            force_render: T::Boolean,
+            parent: T.nilable(HakumiComponents::Collapse::Component),
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(
           key:,
           header: nil,
@@ -15,50 +31,77 @@ module HakumiComponents
           parent: nil,
           **html_options
         )
-          @key = key.to_s
-          @header = header
-          @extra = extra
-          @disabled = disabled
-          @show_arrow = show_arrow
-          @collapsible = collapsible
-          @force_render = force_render
-          @parent = parent
-          @html_options = html_options
-          @content = nil
+          @key = T.let(key.to_s, String)
+          @header = T.let(header, T.nilable(Types::Renderable))
+          @extra = T.let(extra, T.nilable(Types::Renderable))
+          @disabled = T.let(disabled, T::Boolean)
+          @show_arrow = T.let(show_arrow, T::Boolean)
+          @collapsible = T.let(collapsible, T.nilable(Symbol))
+          @force_render = T.let(force_render, T::Boolean)
+          @parent = T.let(parent, T.nilable(HakumiComponents::Collapse::Component))
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+          @panel_content = T.let(nil, Types::RenderedContent)
+
+          validate_props!
         end
 
-        attr_reader :key, :header, :extra, :disabled, :show_arrow, :collapsible, :force_render
-        attr_accessor :content
+        sig { returns(String) }
+        attr_reader :key
+
+        sig { returns(T.nilable(Types::Renderable)) }
+        attr_reader :header, :extra
 
+        sig { returns(T::Boolean) }
+        attr_reader :disabled, :show_arrow, :force_render
+
+        sig { returns(T.nilable(Symbol)) }
+        attr_reader :collapsible
+
+        sig { returns(Types::RenderedContent) }
+        def content
+          @panel_content
+        end
+
+        sig { params(value: Types::RenderedContent).void }
+        def content=(value)
+          @panel_content = value
+        end
+
+        sig { params(active: T::Boolean).returns(String) }
         def item_classes(active)
-          classes = [ "hakumi-collapse-item" ]
-          classes << "hakumi-collapse-item-active" if active
-          classes << "hakumi-collapse-item-disabled" if @disabled
-          classes << "hakumi-collapse-no-arrow" unless @show_arrow
-          classes << @html_options[:class] if @html_options[:class]
-          classes.compact.join(" ")
+          base = component_classes("collapse-item", { active: active, disabled: @disabled }, @html_options)
+          @show_arrow ? base : "#{base} hakumi-collapse-no-arrow"
         end
 
+        sig { params(active: T::Boolean).returns(Types::HtmlAttributes) }
         def item_attributes(active)
-          base = {
+          base = T.let({
             class: item_classes(active),
             data: {
               "hakumi--collapse-target": "item",
               key: @key,
               disabled: @disabled
             }
-          }
+          }, Types::HtmlAttributes)
           merge_attributes(base, @html_options.except(:class))
         end
 
-        # Content resolution for header: header prop > key fallback
+        sig { returns(T.any(String, Types::Renderable)) }
         def header_content
           @header || @key
         end
 
+        sig { returns(T::Boolean) }
         def extra?
           @extra.present?
         end
+
+        private
+
+        sig { void }
+        def validate_props!
+          validate_inclusion!(:collapsible, HakumiComponents::Collapse::Component::COLLAPSIBLES)
+        end
       end
     end
   end

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

@@ -5,15 +5,15 @@
       data-action="click->hakumi--color-picker#toggle"
       data-hakumi--color-picker-target="trigger"
       role="button"
-      tabindex="<%= @disabled ? -1 : 0 %>"
+      tabindex="<%= color_picker_disabled? ? -1 : 0 %>"
       aria-expanded="false"
-      aria-disabled="<%= @disabled %>"
+      aria-disabled="<%= color_picker_disabled? %>"
       aria-label="Color picker">
       <div
         class="hakumi-color-picker-color-block"
         data-hakumi--color-picker-target="colorBlock"
         style="<%= display_value.present? ? "background-color: #{display_value};" : "" %>">
-        <% if @allow_clear && display_value.present? %>
+        <% if clearable? %>
           <button
             type="button"
             class="hakumi-color-picker-clear-btn"
@@ -28,7 +28,7 @@
         <% end %>
       </div>
 
-      <% if @show_text %>
+      <% if show_text? %>
         <span class="hakumi-color-picker-text" data-hakumi--color-picker-target="displayText">
           <%= display_value %>
         </span>
@@ -40,7 +40,6 @@
       data-hakumi--color-picker-target="panel"
       role="dialog"
       aria-label="Color picker panel">
-      <%# Saturation/Brightness Panel %>
       <div class="hakumi-color-picker-panel-select">
         <div
           class="hakumi-color-picker-saturation"
@@ -67,7 +66,7 @@
         </div>
       </div>
 
-      <% unless @disabled_alpha %>
+      <% if alpha_enabled? %>
         <div class="hakumi-color-picker-slider-container">
           <div
             class="hakumi-color-picker-slider hakumi-color-picker-slider-alpha"
@@ -81,32 +80,32 @@
       <% end %>
 
       <div class="hakumi-color-picker-input-container">
-        <div class="hakumi-color-picker-color-input <%= @show_format_select ? '' : 'hakumi-color-picker-color-input-full' %>">
+        <div class="hakumi-color-picker-color-input <%= show_format_select? ? '' : 'hakumi-color-picker-color-input-full' %>">
           <input
             type="text"
             class="hakumi-color-picker-input-field"
             value="<%= display_value %>"
-            placeholder="<%= @format.to_s.upcase %>"
-            <%= @disabled ? "disabled" : nil %>
-            aria-invalid="<%= has_error? %>"
+            placeholder="<%= current_format.to_s.upcase %>"
+            <%= color_picker_disabled? ? 'disabled' : nil %>
+            aria-invalid="<%= error? %>"
             aria-describedby="<%= describedby_ids %>"
             data-action="input->hakumi--color-picker#handleColorInput change->hakumi--color-picker#handleColorInputChange"
             data-hakumi--color-picker-target="colorInput"
           />
         </div>
 
-        <% if @show_format_select %>
+        <% if show_format_select? %>
           <div class="hakumi-color-picker-format-select">
             <select
               class="hakumi-color-picker-format-selector"
               data-action="change->hakumi--color-picker#handleFormatChange"
               data-hakumi--color-picker-target="formatSelect"
-              <%= @disabled ? "disabled" : nil %>
+              <%= color_picker_disabled? ? 'disabled' : nil %>
             >
-              <option value="hex" <%= @format == :hex ? "selected" : nil %>>HEX</option>
-              <option value="rgb" <%= @format == :rgb ? "selected" : nil %>>RGB</option>
-              <option value="hsl" <%= @format == :hsl ? "selected" : nil %>>HSL</option>
-              <option value="hsb" <%= @format == :hsb ? "selected" : nil %>>HSB</option>
+              <option value="hex" <%= current_format == :hex ? 'selected' : nil %>>HEX</option>
+              <option value="rgb" <%= current_format == :rgb ? 'selected' : nil %>>RGB</option>
+              <option value="hsl" <%= current_format == :hsl ? 'selected' : nil %>>HSL</option>
+              <option value="hsb" <%= current_format == :hsb ? 'selected' : nil %>>HSB</option>
             </select>
           </div>
         <% end %>
@@ -116,11 +115,11 @@
         <div class="hakumi-color-picker-presets">
           <% all_preset_groups.each do |preset| %>
             <div class="hakumi-color-picker-preset-group">
-              <% if preset[:label].present? %>
-                <div class="hakumi-color-picker-preset-label"><%= preset[:label] %></div>
+              <% if preset.label.present? %>
+                <div class="hakumi-color-picker-preset-label"><%= preset.label %></div>
               <% end %>
               <div class="hakumi-color-picker-preset-colors">
-                <% preset[:colors].each do |color| %>
+                <% preset.colors.each do |color| %>
                   <div
                     class="hakumi-color-picker-preset-color"
                     style="background-color: <%= color %>;"
@@ -140,16 +139,16 @@
 
     <%= tag.input(
       type: "hidden",
-      name: @name,
+      name: form_field_name,
       id: input_id,
       value: display_value,
-      disabled: @disabled ? true : nil,
+      disabled: color_picker_disabled? ? true : nil,
       data: { "hakumi--color-picker-target": "hiddenInput" }
     ) %>
   <% end %>
 <% end %>
 
-<% if @standalone %>
+<% if standalone? %>
   <%= color_picker %>
 <% else %>
   <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>

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

@@ -1,18 +1,53 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module ColorPicker
-    # Hakumi Color Picker component
-    # A comprehensive color picker with saturation/brightness panel, hue and alpha sliders.
-    # Inspired by Ant Design's ColorPicker component.
     class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
       include HakumiComponents::Concerns::FormField
 
-      SIZES = [ :small, :middle, :large ].freeze
-      TRIGGERS = [ :click, :hover ].freeze
-      FORMATS = [ :hex, :rgb, :hsl, :hsb ].freeze
-      DEFAULT_PRESET_COLORS = %w[#F5222D #FA541C #FA8C16 #FAAD14 #FADB14 #A0D911 #52C41A #13C2C2 #1677FF #2F54EB #722ED1 #EB2F96].freeze
+      PresetHash = T.type_alias do
+        T::Hash[T.any(Symbol, String), T.any(String, T::Array[String])]
+      end
+      PresetInput = T.type_alias do
+        T.any(
+          T::Array[String],
+          T::Array[HakumiComponents::ColorPicker::PresetGroup],
+          T::Array[PresetHash],
+          T::Hash[Types::HtmlKey, T::Array[String]]
+        )
+      end
 
+      TRIGGERS = T.let([ :click, :hover ].freeze, T::Array[Symbol])
+      FORMATS = T.let([ :hex, :rgb, :hsl, :hsb ].freeze, T::Array[Symbol])
+      DEFAULT_PRESET_COLORS = T.let(%w[#F5222D #FA541C #FA8C16 #FAAD14 #FADB14 #A0D911 #52C41A #13C2C2 #1677FF #2F54EB #722ED1 #EB2F96].freeze, T::Array[String])
+
+      sig do
+        params(
+          name: T.nilable(Types::FormFieldName),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: T.nilable(String),
+          default_value: T.nilable(String),
+          format: Symbol,
+          show_text: T::Boolean,
+          show_format_select: T::Boolean,
+          disabled: T::Boolean,
+          disabled_alpha: T::Boolean,
+          allow_clear: T::Boolean,
+          show_preset_colors: T::Boolean,
+          default_preset_label: T.nilable(String),
+          presets: PresetInput,
+          size: Symbol,
+          trigger: Symbol,
+          placement: Symbol,
+          standalone: T::Boolean,
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         name: nil,
         label: nil,
@@ -26,45 +61,56 @@ module HakumiComponents
         disabled_alpha: false,
         allow_clear: false,
         show_preset_colors: true,
-        default_preset_label: "Recommended",
+        default_preset_label: nil,
         presets: [],
-        size: :middle,
+        size: :default,
         trigger: :click,
         placement: :bottom_left,
         standalone: true,
         errors: [],
-        **html_attrs
+        **html_options
       )
-        @name = name || generate_id("color_picker")
-        @label = label
-        @caption = caption
-        @value = value
-        @default_value = default_value || "#1677ff"
-        @format = format&.to_sym
-        @show_text = cast_boolean(show_text)
-        @show_format_select = cast_boolean(show_format_select)
-        @disabled = cast_boolean(disabled)
-        @disabled_alpha = cast_boolean(disabled_alpha)
-        @allow_clear = cast_boolean(allow_clear)
-        @show_preset_colors = cast_boolean(show_preset_colors)
-        @default_preset_label = default_preset_label
-        @presets = normalize_presets(presets)
-        @size = size
-        @trigger = trigger
-        @placement = placement
-        @standalone = cast_boolean(standalone)
-        @errors = Array(errors)
-        @html_attrs = html_attrs
+        @name = T.let(name || generate_id("color_picker"), Types::FormFieldName)
+        @label = T.let(label, T.nilable(String))
+        @caption = T.let(caption, T.nilable(String))
+        @value = T.let(value, T.nilable(String))
+        @default_value = T.let(default_value || "#1677ff", String)
+        @format = T.let(format, Symbol)
+        @show_text = T.let(cast_boolean(show_text) ? true : false, T::Boolean)
+        @show_format_select = T.let(cast_boolean(show_format_select) != false, T::Boolean)
+        @disabled = T.let(cast_boolean(disabled) ? true : false, T::Boolean)
+        @disabled_alpha = T.let(cast_boolean(disabled_alpha) ? true : false, T::Boolean)
+        @allow_clear = T.let(cast_boolean(allow_clear) ? true : false, T::Boolean)
+        @show_preset_colors = T.let(cast_boolean(show_preset_colors) != false, T::Boolean)
+        @default_preset_label = T.let(default_preset_label || t_default(:default_preset_label, default: "Recommended"), String)
+        @presets = T.let(normalize_presets(presets), T::Array[HakumiComponents::ColorPicker::PresetGroup])
+        @size = T.let(size, Symbol)
+        @trigger = T.let(trigger, Symbol)
+        @placement = T.let(placement, Symbol)
+        @standalone = T.let(cast_boolean(standalone) ? true : false, T::Boolean)
+        @required = T.let(false, T::Boolean)
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+        initialize_form_field_contract!(
+          name: @name,
+          label: @label,
+          caption: @caption,
+          errors: @errors,
+          standalone: @standalone,
+          required: @required,
+          html_options: @html_options
+        )
 
         validate_props!
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
         base_attrs = {
-          class: component_classes,
+          class: wrapper_classes,
           data: {
             controller: "hakumi--color-picker",
-            "hakumi--color-picker-format-value": @format.to_s,
+            "hakumi--color-picker-format-value": current_format.to_s,
             "hakumi--color-picker-trigger-value": @trigger.to_s,
             "hakumi--color-picker-placement-value": @placement.to_s,
             "hakumi--color-picker-disabled-value": @disabled,
@@ -77,9 +123,10 @@ module HakumiComponents
           }.compact
         }
 
-        merge_attributes(base_attrs, @html_attrs.except(:class))
+        merge_attributes(base_attrs, @html_options.except(:class))
       end
 
+      sig { returns(String) }
       def trigger_size_class
         case @size
         when :small then "hakumi-color-picker-trigger-sm"
@@ -88,44 +135,80 @@ module HakumiComponents
         end
       end
 
+      sig { returns(String) }
       def display_value
         @value.presence || @default_value.presence || ""
       end
 
+      sig { returns(T::Boolean) }
       def presets?
         @presets.any?
       end
 
+      sig { returns(T::Array[HakumiComponents::ColorPicker::PresetGroup]) }
       def preset_groups
         @presets
       end
 
+      sig { returns(T::Array[HakumiComponents::ColorPicker::PresetGroup]) }
       def default_presets
-        return [] if @presets.any? # Don't show defaults if custom presets provided
+        return [] if @presets.any?
         return [] unless @show_preset_colors
 
         [
-          {
+          HakumiComponents::ColorPicker::PresetGroup.new(
             label: @default_preset_label,
             colors: DEFAULT_PRESET_COLORS
-          }
+          )
         ]
       end
 
+      sig { returns(T::Array[HakumiComponents::ColorPicker::PresetGroup]) }
       def all_preset_groups
-        groups = default_presets + preset_groups
-        groups.reject { |g| g[:colors].empty? }
+        (default_presets + preset_groups).select(&:any_colors?)
+      end
+
+      sig { returns(T::Boolean) }
+      def color_picker_disabled?
+        @disabled
+      end
+
+      sig { returns(T::Boolean) }
+      def alpha_enabled?
+        !@disabled_alpha
+      end
+
+      sig { returns(T::Boolean) }
+      def show_text?
+        @show_text
+      end
+
+      sig { returns(T::Boolean) }
+      def show_format_select?
+        @show_format_select
+      end
+
+      sig { returns(T::Boolean) }
+      def clearable?
+        @allow_clear && display_value.present?
+      end
+
+      sig { returns(Symbol) }
+      def current_format
+        @format
       end
 
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:size, SIZES)
         validate_inclusion!(:trigger, TRIGGERS)
         validate_inclusion!(:format, FORMATS)
       end
 
-      def component_classes
+      sig { returns(String) }
+      def wrapper_classes
         class_names(
           "color-picker",
           {
@@ -136,34 +219,61 @@ module HakumiComponents
             "show-text": @show_text,
             "hover-trigger": @trigger == :hover
           },
-          @html_attrs[:class]
+          [ html_class_name ]
         )
       end
 
+      sig { params(value: T.nilable(String)).returns(T.nilable(String)) }
       def data_value(value)
         return nil if value.nil?
 
         value.to_s
       end
 
+      sig { params(presets: PresetInput).returns(T::Array[HakumiComponents::ColorPicker::PresetGroup]) }
       def normalize_presets(presets)
-        return [] if presets.blank?
+        return [] if presets.empty?
 
         if presets.is_a?(Hash)
           presets.map do |label, colors|
-            { label: label, colors: Array(colors).compact }
+            HakumiComponents::ColorPicker::PresetGroup.new(
+              label: label.to_s,
+              colors: Array(colors).compact.map(&:to_s)
+            )
+          end
+        elsif presets.all? { |preset| preset.is_a?(HakumiComponents::ColorPicker::PresetGroup) }
+          presets.each_with_object(T.let([], T::Array[HakumiComponents::ColorPicker::PresetGroup])) do |preset, groups|
+            groups << preset if preset.is_a?(HakumiComponents::ColorPicker::PresetGroup)
           end
-        elsif presets.is_a?(Array) && presets.first.is_a?(Hash)
-          presets.map do |preset|
-            {
-              label: preset[:label] || preset["label"],
-              colors: Array(preset[:colors] || preset["colors"]).compact
-            }
+        elsif presets.all? { |preset| preset.is_a?(Hash) }
+          presets.filter_map do |preset|
+            next unless preset.is_a?(Hash)
+
+            preset_hash = preset
+            label = preset_hash[:label] || preset_hash["label"]
+            colors = preset_hash[:colors] || preset_hash["colors"]
+            next nil unless colors.is_a?(Array)
+
+            HakumiComponents::ColorPicker::PresetGroup.new(
+              label: label&.to_s,
+              colors: colors.compact.map(&:to_s)
+            )
           end
         else
-          [ { label: "Presets", colors: Array(presets).compact } ]
+          [
+            HakumiComponents::ColorPicker::PresetGroup.new(
+              label: t_default(:presets_label, default: "Presets"),
+              colors: presets.compact.map(&:to_s)
+            )
+          ]
         end
       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
 end

data/app/components/hakumi_components/color_picker/preset_group.rb

@@ -0,0 +1,27 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module ColorPicker
+    class PresetGroup
+      extend T::Sig
+
+      sig { params(label: T.nilable(String), colors: T::Array[String]).void }
+      def initialize(label:, colors:)
+        @label = label
+        @colors = colors
+      end
+
+      sig { returns(T.nilable(String)) }
+      attr_reader :label
+
+      sig { returns(T::Array[String]) }
+      attr_reader :colors
+
+      sig { returns(T::Boolean) }
+      def any_colors?
+        @colors.any?
+      end
+    end
+  end
+end