hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/components/hakumi_components/concerns/selection_control_interface.rb

@@ -0,0 +1,34 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Concerns
+    module SelectionControlInterface
+      extend T::Sig
+      extend T::Helpers
+
+      interface!
+
+      sig { abstract.returns(HakumiComponents::Concerns::SelectionControlContract) }
+      def selection_control_contract; end
+
+      sig { abstract.returns(HakumiComponents::Types::FormFieldValue) }
+      def selection_control_value; end
+
+      sig { abstract.returns(T.nilable(String)) }
+      def selection_control_placeholder; end
+
+      sig { abstract.returns(Symbol) }
+      def selection_control_size; end
+
+      sig { abstract.returns(T::Boolean) }
+      def selection_control_disabled; end
+
+      sig { abstract.returns(T::Boolean) }
+      def selection_control_allow_clear; end
+
+      sig { abstract.returns(T::Boolean) }
+      def selection_control_has_value?; end
+    end
+  end
+end

data/app/components/{hakumi → hakumi_components}/container/component.rb

@@ -1,16 +1,30 @@
+# typed: strict
 # frozen_string_literal: true
 
-module Hakumi
+module HakumiComponents
   module Container
-    class Component < Hakumi::BaseComponent
-      WIDTH_PRESETS = {
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      Width = T.type_alias { T.any(Symbol, Numeric, String) }
+
+      WIDTH_PRESETS = T.let({
         narrow: "640px",
         default: "960px",
         wide: "1200px",
         xl: "1600px",
         fluid: "100%"
-      }.freeze
+      }.freeze, T::Hash[Symbol, String])
 
+      sig do
+        params(
+          width: Width,
+          padded: T::Boolean,
+          centered: T::Boolean,
+          full_height: T::Boolean,
+          html_options: HakumiComponents::Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         width: :default,
         padded: true,
@@ -18,30 +32,31 @@ module Hakumi
         full_height: false,
         **html_options
       )
-        @width = width
-        @padded = padded
-        @centered = centered
-        @full_height = full_height
-        @html_options = html_options
+        @width = T.let(width, Width)
+        @padded = T.let(padded, T::Boolean)
+        @centered = T.let(centered, T::Boolean)
+        @full_height = T.let(full_height, T::Boolean)
+        @html_options = T.let(html_options, HakumiComponents::Types::HtmlAttributes)
       end
 
+      sig { returns(ActiveSupport::SafeBuffer) }
       def call
         content_tag(:div, content, wrapper_attributes)
       end
 
       private
 
+      sig { returns(HakumiComponents::Types::HtmlAttributes) }
       def wrapper_attributes
-        attrs = {
-          class: wrapper_classes
-        }
+        attrs = T.let({ class: wrapper_classes }, HakumiComponents::Types::HtmlAttributes)
 
-        style_string = [ @html_options[:style], width_style ].compact.join("; ")
+        style_string = [ html_style(@html_options), width_style ].compact.join("; ")
         attrs[:style] = style_string if style_string.present?
 
         merge_attributes(attrs, @html_options.except(:class, :style))
       end
 
+      sig { returns(String) }
       def wrapper_classes
         modifiers = {
           padded: @padded,
@@ -50,11 +65,12 @@ module Hakumi
           fluid: @width == :fluid
         }
 
-        extras = [ width_class, @html_options[:class] ].compact
+        extras = [ width_class, html_classes(@html_options) ].compact.flatten
 
         class_names("container", modifiers, extras)
       end
 
+      sig { returns(T.nilable(String)) }
       def width_class
         return nil unless @width.is_a?(Symbol)
         return "hakumi-container--#{@width}" if WIDTH_PRESETS.key?(@width)
@@ -62,13 +78,12 @@ module Hakumi
         nil
       end
 
+      sig { returns(T.nilable(String)) }
       def width_style
         if @width.is_a?(Numeric)
           "--hakumi-container-max-width: #{@width}px"
         elsif @width.is_a?(String)
           "--hakumi-container-max-width: #{@width}"
-        else
-          nil
         end
       end
     end

data/app/components/{hakumi → hakumi_components}/date_picker/component.html.erb

@@ -1,10 +1,8 @@
 <% date_picker_control = capture do %>
   <div <%= tag.attributes(wrapper_attributes) %>>
-    <%# Hidden input for form submission - always ISO format %>
     <input <%= tag.attributes(hidden_input_attributes) %> />
 
     <div class="hakumi-date-picker-input" data-action="click->hakumi--date-picker#toggle">
-      <%# Visible input for display - shows formatted value %>
       <input <%= tag.attributes(visible_input_attributes) %> />
 
       <% if @allow_clear %>
@@ -13,18 +11,18 @@
                 data-action="click->hakumi--date-picker#clear"
                 data-hakumi--date-picker-target="clear"
                 style="<%= @value.present? ? '' : 'display: none;' %>">
-          <%= render Hakumi::Icon::Component.new(name: :close_circle, theme: :filled) %>
+          <%= render HakumiComponents::Icon::Component.new(name: :close_circle, theme: :filled) %>
         </button>
       <% end %>
 
       <span class="hakumi-date-picker-suffix">
-        <%= render Hakumi::Icon::Component.new(name: :calendar) %>
+        <%= render HakumiComponents::Icon::Component.new(name: :calendar) %>
       </span>
     </div>
 
     <div class="hakumi-date-picker-panel-wrapper <%= @show_time ? 'hakumi-date-picker-panel-wrapper-with-time' : '' %> hakumi-date-picker-panel-hidden" data-hakumi--date-picker-target="panel">
       <div class="hakumi-date-picker-panel">
-        <%= render Hakumi::Calendar::Component.new(**calendar_component_options(value: parse_date(@value) || parse_date(@default_value))) %>
+        <%= render HakumiComponents::Calendar::Component.new(**calendar_component_options(value: parse_date(@value) || parse_date(@default_value))) %>
 
         <% if @show_time %>
           <div class="hakumi-date-picker-time-panel">
@@ -61,7 +59,7 @@
   </div>
 <% end %>
 
-<% if @standalone %>
+<% if standalone? %>
   <%= date_picker_control %>
 <% else %>
   <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>

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

@@ -0,0 +1,254 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module DatePicker
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      include HakumiComponents::Concerns::FormField
+      include SharedRendering
+
+      sig do
+        params(
+          name: T.nilable(Types::FormFieldName),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: Types::FormFieldScalar,
+          default_value: Types::FormFieldScalar,
+          format: T.nilable(String),
+          display_format: T.nilable(String),
+          picker: Symbol,
+          show_time: T::Boolean,
+          show_seconds: T.nilable(T::Boolean),
+          disabled: T::Boolean,
+          disabled_date: T.nilable(Proc),
+          allow_clear: T::Boolean,
+          placeholder: T.nilable(String),
+          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,
+        caption: nil,
+        value: nil,
+        default_value: nil,
+        format: nil,
+        display_format: nil,
+        picker: :date,
+        show_time: false,
+        show_seconds: nil,
+        disabled: false,
+        disabled_date: nil,
+        allow_clear: false,
+        placeholder: nil,
+        size: :default,
+        bordered: true,
+        required: false,
+        errors: [],
+        standalone: true,
+        **html_options
+      )
+        @name = T.let(name || generate_id("date_picker"), Types::FormFieldName)
+        @label = label
+        @caption = caption
+        @value = value
+        @default_value = default_value
+        @format = format
+        @display_format = display_format
+        @picker = picker
+        @show_time = show_time
+        @show_seconds = T.let(show_seconds.nil? ? show_time : show_seconds, T::Boolean)
+        @disabled = disabled
+        @disabled_date = disabled_date
+        @allow_clear = allow_clear
+        @placeholder = placeholder
+        @size = size
+        @bordered = bordered
+        @required = required
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @standalone = standalone
+        @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: [ html_class_name ]),
+          data: {
+            controller: "hakumi--date-picker",
+            hakumi__date_picker_allow_clear_value: @allow_clear,
+            hakumi__date_picker_disabled_value: @disabled,
+            hakumi__date_picker_picker_value: @picker.to_s,
+            hakumi__date_picker_show_time_value: @show_time,
+            hakumi__date_picker_show_seconds_value: @show_seconds,
+            hakumi__date_picker_display_format_value: js_display_format
+          }
+        }
+
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def hidden_input_attributes
+        {
+          type: :hidden,
+          name: form_field_name,
+          id: input_id,
+          value: iso_value(@value),
+          disabled: @disabled ? true : nil,
+          data: {
+            "hakumi--date-picker-target": "hiddenInput"
+          }
+        }.compact
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def visible_input_attributes
+        {
+          type: :text,
+          value: display_value,
+          placeholder: placeholder_text,
+          class: "hakumi-date-picker-input-field",
+          readonly: true,
+          disabled: @disabled ? true : nil,
+          "aria-invalid": error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          data: {
+            "hakumi--date-picker-target": "displayInput",
+            action: "focus->hakumi--date-picker#focus blur->hakumi--date-picker#blur"
+          }
+        }.compact
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def input_attributes
+        visible_input_attributes
+      end
+
+      sig { returns(T.nilable(String)) }
+      def display_value
+        formatted_value(@value || @default_value)
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:picker, PICKERS)
+      end
+
+      sig { returns(T::Array[String]) }
+      def formatted_hours
+        hours = if use_12_hours?
+          (1..12).to_a
+        else
+          (0..23).to_a
+        end
+
+        hours.map { |hour| format("%02d", hour) }
+      end
+
+      sig { returns(T::Array[String]) }
+      def formatted_minutes
+        (0..59).map { |minute| format("%02d", minute) }
+      end
+
+      sig { returns(T::Array[String]) }
+      def formatted_seconds
+        (0..59).map { |second| format("%02d", second) }
+      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
+        @display_format
+      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_seconds
+      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 → hakumi_components}/date_picker/range_picker.html.erb

@@ -11,12 +11,12 @@
                 data-action="click->hakumi--date-picker#clear"
                 data-hakumi--date-picker-target="clear"
                 style="<%= @start_value.present? || @end_value.present? ? '' : 'display: none;' %>">
-          <%= render Hakumi::Icon::Component.new(name: :close_circle, theme: :filled) %>
+          <%= render HakumiComponents::Icon::Component.new(name: :close_circle, theme: :filled) %>
         </button>
       <% end %>
 
       <span class="hakumi-date-picker-suffix">
-        <%= render Hakumi::Icon::Component.new(name: :calendar) %>
+        <%= render HakumiComponents::Icon::Component.new(name: :calendar) %>
       </span>
     </div>
 
@@ -24,10 +24,10 @@
       <div class="hakumi-date-picker-panel">
         <div class="hakumi-range-picker-panel">
           <div class="hakumi-range-picker-panel-section">
-            <%= render Hakumi::Calendar::Component.new(**calendar_component_options(value: parse_date(@start_value), range: "start")) %>
+            <%= render HakumiComponents::Calendar::Component.new(**calendar_component_options(value: parse_date(@start_value), range: "start")) %>
           </div>
           <div class="hakumi-range-picker-panel-section">
-            <%= render Hakumi::Calendar::Component.new(**calendar_component_options(value: parse_date(@end_value), range: "end")) %>
+            <%= render HakumiComponents::Calendar::Component.new(**calendar_component_options(value: parse_date(@end_value), range: "end")) %>
           </div>
         </div>
       </div>