hakumi_components 0.1.18.pre → 0.1.19.pre

data/app/components/hakumi_components/date_picker/range_picker.rb

@@ -1,11 +1,40 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module DatePicker
     class RangePicker < HakumiComponents::BaseComponent
+      extend T::Sig
+
       include HakumiComponents::Concerns::FormField
       include SharedRendering
 
+      PlaceholderInput = T.type_alias { T.nilable(T.any(String, T::Array[String])) }
+      InputId = T.type_alias { Types::HtmlKey }
+
+      sig do
+        params(
+          name: T.nilable(Types::FormFieldName),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          start_value: Types::FormFieldScalar,
+          end_value: Types::FormFieldScalar,
+          default_value: Types::FormFieldValue,
+          format: T.nilable(String),
+          picker: Symbol,
+          show_time: T::Boolean,
+          disabled: T::Boolean,
+          disabled_date: T.nilable(Proc),
+          allow_clear: T::Boolean,
+          placeholder: PlaceholderInput,
+          size: Symbol,
+          bordered: T::Boolean,
+          required: T::Boolean,
+          errors: Types::FormFieldErrors,
+          standalone: T::Boolean,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         name: nil,
         label: nil,
@@ -20,44 +49,54 @@ module HakumiComponents
         disabled_date: nil,
         allow_clear: false,
         placeholder: nil,
-        size: :middle,
+        size: :default,
         bordered: true,
         required: false,
         errors: [],
         standalone: true,
         **html_options
       )
-        @name = name || generate_id("range_picker")
-        @label = label
-        @caption = caption
-        @start_value = start_value
-        @end_value = end_value
-        @value = @start_value || @end_value
-        @default_value = default_value
-        @format = format
-        @picker = picker
-        @show_time = show_time
-        @disabled = disabled
-        @disabled_date = disabled_date
-        @allow_clear = allow_clear
-        @placeholder = placeholder
-        @size = size
-        @bordered = bordered
-        @required = required
-        @errors = Array(errors)
-        @standalone = standalone
-        @html_options = html_options
+        @name = T.let(name || generate_id("range_picker"), Types::FormFieldName)
+        @label = T.let(label, T.nilable(String))
+        @caption = T.let(caption, T.nilable(String))
+        @start_value = T.let(start_value, Types::FormFieldScalar)
+        @end_value = T.let(end_value, Types::FormFieldScalar)
+        @value = T.let(@start_value || @end_value, Types::FormFieldValue)
+        @default_value = T.let(default_value, Types::FormFieldValue)
+        @format = T.let(format, T.nilable(String))
+        @picker = T.let(picker, Symbol)
+        @show_time = T.let(show_time, T::Boolean)
+        @disabled = T.let(disabled, T::Boolean)
+        @disabled_date = T.let(disabled_date, T.nilable(Proc))
+        @allow_clear = T.let(allow_clear, T::Boolean)
+        @placeholder = T.let(placeholder, PlaceholderInput)
+        @size = T.let(size, Symbol)
+        @bordered = T.let(bordered, T::Boolean)
+        @required = T.let(required, T::Boolean)
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @standalone = T.let(standalone, T::Boolean)
+        @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: base_wrapper_classes(base: "date-picker", extra_classes: [ "hakumi-range-picker", @html_options[:class] ]),
+          class: base_wrapper_classes(base: "date-picker", extra_classes: range_picker_classes),
           data: {
             controller: "hakumi--date-picker",
-            hakumi__date_picker_allow_clear_value: @allow_clear ? "true" : "false",
-            hakumi__date_picker_disabled_value: @disabled ? "true" : "false",
+            hakumi__date_picker_allow_clear_value: @allow_clear,
+            hakumi__date_picker_disabled_value: @disabled,
             hakumi__date_picker_format_value: display_format,
             hakumi__date_picker_picker_value: @picker.to_s,
             hakumi__date_picker_range_value: "true"
@@ -67,6 +106,7 @@ module HakumiComponents
         merge_attributes(base_attrs, @html_options.except(:class))
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def start_input_attributes
         {
           type: :text,
@@ -77,7 +117,7 @@ module HakumiComponents
           class: "hakumi-date-picker-input-field",
           readonly: true,
           disabled: @disabled ? true : nil,
-          "aria-invalid": has_error? ? "true" : nil,
+          "aria-invalid": error? ? "true" : nil,
           "aria-describedby": describedby_ids,
           data: {
             "hakumi--date-picker-target": "startInput",
@@ -86,6 +126,7 @@ module HakumiComponents
         }.compact
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def end_input_attributes
         {
           type: :text,
@@ -96,7 +137,7 @@ module HakumiComponents
           class: "hakumi-date-picker-input-field",
           readonly: true,
           disabled: @disabled ? true : nil,
-          "aria-invalid": has_error? ? "true" : nil,
+          "aria-invalid": error? ? "true" : nil,
           "aria-describedby": describedby_ids,
           data: {
             "hakumi--date-picker-target": "endInput",
@@ -105,32 +146,122 @@ module HakumiComponents
         }.compact
       end
 
+      sig { returns(String) }
       def start_input_name
         "#{@name}_start"
       end
 
+      sig { returns(String) }
       def end_input_name
         "#{@name}_end"
       end
 
+      sig { returns(InputId) }
       def start_input_id
-        @html_options[:start_id] || "#{@name}_start"
+        custom_id = @html_options[:start_id]
+        return custom_id if custom_id.is_a?(String) || custom_id.is_a?(Symbol)
+
+        "#{@name}_start"
       end
 
+      sig { returns(InputId) }
       def end_input_id
-        @html_options[:end_id] || "#{@name}_end"
+        custom_id = @html_options[:end_id]
+        return custom_id if custom_id.is_a?(String) || custom_id.is_a?(Symbol)
+
+        "#{@name}_end"
       end
 
+      sig { returns(T::Array[T.nilable(String)]) }
       def display_values
         [ formatted_value(@start_value), formatted_value(@end_value) ]
       end
 
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:size, SIZES)
         validate_inclusion!(:picker, PICKERS)
       end
+
+      sig { returns(T::Array[T.nilable(String)]) }
+      def range_picker_classes
+        [ "hakumi-range-picker", html_class_name ]
+      end
+
+      sig { returns(T.nilable(String)) }
+      def html_class_name
+        css_class = @html_options[:class]
+        css_class.is_a?(String) ? css_class : nil
+      end
+
+      public
+
+      sig { override.returns(T.nilable(String)) }
+      def date_picker_format
+        @format
+      end
+
+      sig { override.returns(T.nilable(String)) }
+      def date_picker_display_format
+        nil
+      end
+
+      sig { override.returns(Symbol) }
+      def date_picker_picker
+        @picker
+      end
+
+      sig { override.returns(T::Boolean) }
+      def date_picker_show_time
+        @show_time
+      end
+
+      sig { override.returns(T::Boolean) }
+      def date_picker_show_seconds
+        @show_time
+      end
+
+      sig { override.returns(Symbol) }
+      def date_picker_size
+        @size
+      end
+
+      sig { override.returns(T::Boolean) }
+      def date_picker_bordered
+        @bordered
+      end
+
+      sig { override.returns(T::Boolean) }
+      def date_picker_disabled
+        @disabled
+      end
+
+      sig { override.returns(T::Boolean) }
+      def date_picker_allow_clear
+        @allow_clear
+      end
+
+      sig { override.returns(Types::FormFieldValue) }
+      def date_picker_value
+        @value
+      end
+
+      sig { override.returns(Types::FormFieldValue) }
+      def date_picker_default_value
+        @default_value
+      end
+
+      sig { override.returns(T.nilable(Proc)) }
+      def date_picker_disabled_date
+        @disabled_date
+      end
+
+      sig { override.returns(T.nilable(T.any(String, T::Array[String]))) }
+      def date_picker_placeholder
+        @placeholder
+      end
     end
   end
 end

data/app/components/hakumi_components/date_picker/shared_rendering.rb

@@ -1,71 +1,136 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module DatePicker
     module SharedRendering
-      SIZES = [ :small, :middle, :large ].freeze
-      PICKERS = [ :date, :week, :month, :quarter, :year ].freeze
+      extend T::Sig
+      extend T::Helpers
 
-      # Default Day.js display formats
-      DEFAULT_DATE_FORMAT = "YYYY-MM-DD"
-      DEFAULT_DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss"
-      DEFAULT_DATETIME_NO_SECONDS_FORMAT = "YYYY-MM-DD HH:mm"
+      abstract!
 
-      # ISO value for hidden input (always standard format for Rails)
+      requires_ancestor { HakumiComponents::BaseComponent }
+
+      DateTimeLike = T.type_alias { T.any(Date, Time, DateTime) }
+      PlaceholderValue = T.type_alias { T.nilable(T.any(String, T::Array[String])) }
+      CalendarOptionValue = T.type_alias do
+        T.nilable(T.any(
+          Date,
+          Types::FormFieldValue,
+          Symbol,
+          T::Boolean,
+          Proc,
+          Types::DataAttributes
+        ))
+      end
+
+      PICKERS = T.let([ :date, :week, :month, :quarter, :year ].freeze, T::Array[Symbol])
+      DEFAULT_DATE_FORMAT = T.let("YYYY-MM-DD", String)
+      DEFAULT_DATETIME_FORMAT = T.let("YYYY-MM-DD HH:mm:ss", String)
+      DEFAULT_DATETIME_NO_SECONDS_FORMAT = T.let("YYYY-MM-DD HH:mm", String)
+
+      sig { abstract.returns(T.nilable(String)) }
+      def date_picker_format; end
+
+      sig { abstract.returns(T.nilable(String)) }
+      def date_picker_display_format; end
+
+      sig { abstract.returns(Symbol) }
+      def date_picker_picker; end
+
+      sig { abstract.returns(T::Boolean) }
+      def date_picker_show_time; end
+
+      sig { abstract.returns(T::Boolean) }
+      def date_picker_show_seconds; end
+
+      sig { abstract.returns(Symbol) }
+      def date_picker_size; end
+
+      sig { abstract.returns(T::Boolean) }
+      def date_picker_bordered; end
+
+      sig { abstract.returns(T::Boolean) }
+      def date_picker_disabled; end
+
+      sig { abstract.returns(T::Boolean) }
+      def date_picker_allow_clear; end
+
+      sig { abstract.returns(Types::FormFieldValue) }
+      def date_picker_value; end
+
+      sig { abstract.returns(Types::FormFieldValue) }
+      def date_picker_default_value; end
+
+      sig { abstract.returns(T.nilable(Proc)) }
+      def date_picker_disabled_date; end
+
+      sig { abstract.returns(PlaceholderValue) }
+      def date_picker_placeholder; end
+
+      sig { params(value: Types::FormFieldScalar).returns(T.nilable(String)) }
       def iso_value(value)
         return nil if value.blank?
 
         datetime_value = parse_datetime(value)
         return nil if datetime_value.nil?
 
-        if @show_time
+        if date_picker_show_time
           show_seconds? ? datetime_value.strftime("%Y-%m-%d %H:%M:%S") : datetime_value.strftime("%Y-%m-%d %H:%M")
         else
           datetime_value.strftime("%Y-%m-%d")
         end
       end
 
-      # Formatted value for visible input (uses display_format or default)
+      sig { params(value: Types::FormFieldScalar).returns(T.nilable(String)) }
       def formatted_value(value)
         return nil if value.blank?
 
         datetime_value = parse_datetime(value)
         return value.to_s if datetime_value.nil?
 
-        return format_quarter(datetime_value) if @picker == :quarter && !@display_format.present? && !@format.present?
+        if date_picker_picker == :quarter && date_picker_display_format.blank? && date_picker_format.blank?
+          return format_quarter(datetime_value.to_date)
+        end
 
-        # Priority: display_format (Day.js) > format (strftime legacy) > default
-        if @display_format.present?
-          datetime_value.strftime(dayjs_to_strftime(@display_format))
-        elsif @format.present?
-          datetime_value.strftime(@format)
+        display_format_value = date_picker_display_format
+        format_value = date_picker_format
+
+        if display_format_value.present?
+          datetime_value.strftime(dayjs_to_strftime(display_format_value))
+        elsif format_value.present?
+          datetime_value.strftime(format_value)
         else
           datetime_value.strftime(default_strftime_format)
         end
       end
 
-      # Day.js format string for JS controller
+      sig { returns(String) }
       def js_display_format
-        return @display_format if @display_format.present?
+        display_format_value = date_picker_display_format
+        return display_format_value if display_format_value.present?
 
-        if @show_time
+        if date_picker_show_time
           show_seconds? ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATETIME_NO_SECONDS_FORMAT
         else
           DEFAULT_DATE_FORMAT
         end
       end
 
-      # Ruby strftime format (for legacy @format support)
+      sig { returns(String) }
       def display_format
-        return @format if @format.present?
+        format_value = date_picker_format
+        return format_value if format_value.present?
+
         default_strftime_format
       end
 
+      sig { returns(String) }
       def default_strftime_format
-        if @show_time
+        if date_picker_show_time
           show_seconds? ? "%Y-%m-%d %H:%M:%S" : "%Y-%m-%d %H:%M"
         else
-          case @picker
+          case date_picker_picker
           when :month
             "%Y-%m"
           when :year
@@ -78,17 +143,17 @@ module HakumiComponents
         end
       end
 
-      # Convert Day.js format to Ruby strftime format
+      sig { params(dayjs_format: String).returns(String) }
       def dayjs_to_strftime(dayjs_format)
         dayjs_format
           .gsub("YYYY", "%Y")
           .gsub("YY", "%y")
-          .gsub("MMMM", "%B")  # Full month name
-          .gsub("MMM", "%b")   # Abbreviated month name
-          .gsub("MM", "%m")    # Month with zero-padding
-          .gsub("M", "%-m")    # Month without padding
-          .gsub("DD", "%d")    # Day with zero-padding
-          .gsub("D", "%-d")    # Day without padding
+          .gsub("MMMM", "%B")
+          .gsub("MMM", "%b")
+          .gsub("MM", "%m")
+          .gsub("M", "%-m")
+          .gsub("DD", "%d")
+          .gsub("D", "%-d")
           .gsub("HH", "%H")
           .gsub("hh", "%I")
           .gsub("mm", "%M")
@@ -97,102 +162,127 @@ module HakumiComponents
           .gsub("a", "%P")
       end
 
+      sig { params(value: Types::FormFieldScalar).returns(T.nilable(DateTimeLike)) }
       def parse_datetime(value)
         return nil if value.nil?
         return value if value.is_a?(Time) || value.is_a?(DateTime)
-        return @show_time ? value.to_time : value if value.is_a?(Date)
+        return Time.parse(value.to_s) if value.is_a?(ActiveSupport::TimeWithZone)
+        return date_picker_show_time ? value.to_time : value if value.is_a?(Date)
 
-        str = value.to_s
-        if @show_time && str.include?(" ")
-          # Parse datetime string like "2026-03-15 14:30:00"
-          Time.parse(str)
+        string_value = value.to_s
+        if date_picker_show_time && string_value.include?(" ")
+          Time.parse(string_value)
         else
-          Date.parse(str)
+          Date.parse(string_value)
         end
       rescue ArgumentError, TypeError
         nil
       end
 
+      sig { params(value: Types::FormFieldScalar).returns(T.nilable(Date)) }
       def parse_date(value)
-        parse_datetime(value)&.to_date
+        datetime_value = parse_datetime(value)
+        datetime_value&.to_date
       end
 
+      sig { returns(T::Boolean) }
       def show_seconds?
-        # Use explicit @show_seconds if defined, otherwise derive from @show_time
-        return @show_seconds if instance_variable_defined?(:@show_seconds) && !@show_seconds.nil?
-        @show_time
+        date_picker_show_seconds
       end
 
+      sig { returns(T::Boolean) }
       def use_12_hours?
-        return false unless @display_format.present?
-        # Check if format has 'hh' (12-hour) and 'A' or 'a' (AM/PM)
-        @display_format.include?("hh") && (@display_format.include?("A") || @display_format.include?("a"))
+        display_format_value = date_picker_display_format
+        return false unless display_format_value.present?
+
+        display_format_value.include?("hh") && (display_format_value.include?("A") || display_format_value.include?("a"))
       end
 
+      sig { params(date_value: Date).returns(String) }
       def format_quarter(date_value)
         quarter = ((date_value.month - 1) / 3) + 1
         "Q#{quarter} #{date_value.year}"
       end
 
+      sig { returns(Symbol) }
       def picker_mode
-        case @picker
+        case date_picker_picker
         when :date, :week
-          :month  # Date and week both show month view
+          :month
         when :month
-          :year   # Month picker shows year view (12 months)
+          :year
         when :quarter
-          :quarter  # Quarter picker shows quarter view (Q1-Q4)
+          :quarter
         when :year
-          :decade  # Year picker shows decade view (years)
+          :decade
         else
           :month
         end
       end
 
+      sig { params(base: String, extra_classes: T.any(String, T::Array[T.nilable(String)])).returns(String) }
       def base_wrapper_classes(base:, extra_classes: [])
         class_names(
           base,
           {
-            lg: @size == :large,
-            sm: @size == :small,
-            borderless: !@bordered,
-            disabled: @disabled,
-            "allow-clear": @allow_clear,
-            "has-value": value_present?(@value)
+            lg: date_picker_size == :large,
+            sm: date_picker_size == :small,
+            borderless: !date_picker_bordered,
+            disabled: date_picker_disabled,
+            "allow-clear": date_picker_allow_clear,
+            "has-value": value_present?(date_picker_value)
           },
           extra_classes
         )
       end
 
+      sig { params(range: T.nilable(String)).returns(Types::DataAttributes) }
       def picker_panel_attributes(range: nil)
-        data_attrs = {
+        data_attrs = T.let({
           action: "hakumi--calendar:select->hakumi--date-picker#handleCalendarSelect"
-        }
+        }, Types::DataAttributes)
         data_attrs[:date_range] = range if range
         data_attrs
       end
 
+      sig { params(value: T.nilable(Date), range: T.nilable(String)).returns(T::Hash[Symbol, CalendarOptionValue]) }
       def calendar_component_options(value:, range: nil)
         {
           value: value,
-          default_value: @default_value,
+          default_value: date_picker_default_value,
           fullscreen: false,
           mode: picker_mode,
-          show_week: @picker == :week,  # Show week column for week picker
+          show_week: date_picker_picker == :week,
           static: true,
-          disabled_date: @disabled_date,
+          disabled_date: date_picker_disabled_date,
           data: picker_panel_attributes(range: range)
         }
       end
 
+      sig { returns(String) }
       def placeholder_text
-        @placeholder || "Select date"
+        placeholder = date_picker_placeholder
+        return placeholder if placeholder.is_a?(String)
+
+        t_default(:placeholder, default: "Select date")
       end
 
+      sig { returns(T::Array[String]) }
       def range_placeholders
-        return @placeholder if @placeholder.is_a?(Array)
+        placeholder = date_picker_placeholder
+        if placeholder.is_a?(Array)
+          values = placeholder.filter_map do |item|
+            next if item.nil?
+
+            item.to_s
+          end
+          return values if values.length == 2
+        end
 
-        [ "Start date", "End date" ]
+        [
+          t_default(:start_placeholder, default: "Start date"),
+          t_default(:end_placeholder, default: "End date")
+        ]
       end
     end
   end

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

@@ -1,11 +1,11 @@
 <div <%= tag.attributes(wrapper_attributes) %>>
-  <% if @title || @extra %>
+  <% if header? %>
     <div class="hakumi-descriptions-header">
-      <% if @title %>
-        <%= render_title %>
+      <% if title_content.present? %>
+        <div class="hakumi-descriptions-title"><%= title_content %></div>
       <% end %>
-      <% if @extra %>
-        <%= render_extra %>
+      <% if extra_content.present? %>
+        <div class="hakumi-descriptions-extra"><%= extra_content %></div>
       <% end %>
     </div>
   <% end %>
@@ -14,7 +14,7 @@
     <table class="hakumi-descriptions-table">
       <tbody>
         <% rows.each do |row| %>
-          <% if @layout == :vertical %>
+          <% if vertical_layout? %>
             <tr class="hakumi-descriptions-row">
               <% row.each do |item, span| %>
                 <% col_span = (span.to_i * 2) %>