hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/components/hakumi_components/checkbox/group/option.rb

@@ -0,0 +1,34 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Checkbox
+    module Group
+      class Option
+        extend T::Sig
+
+        sig do
+          params(
+            label: String,
+            value: HakumiComponents::Types::FormFieldScalar,
+            disabled: T::Boolean
+          ).void
+        end
+        def initialize(label:, value:, disabled: false)
+          @label = label
+          @value = value
+          @disabled = disabled
+        end
+
+        sig { returns(String) }
+        attr_reader :label
+
+        sig { returns(HakumiComponents::Types::FormFieldScalar) }
+        attr_reader :value
+
+        sig { returns(T::Boolean) }
+        attr_reader :disabled
+      end
+    end
+  end
+end

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

@@ -8,7 +8,7 @@
         <% if item.show_arrow %>
           <span class="hakumi-collapse-arrow" aria-hidden="true" data-hakumi--collapse-target="arrow" data-key="<%= item.key %>"
                 <% if mode.nil? || mode == :icon %>data-action="click->hakumi--collapse#toggle"<% end %>>
-            <%= render Hakumi::Icon::Component.new(name: :caret_right, size: 12) %>
+            <%= render HakumiComponents::Icon::Component.new(name: :caret_right, size: 12) %>
           </span>
         <% end %>
         <span class="hakumi-collapse-header-text">

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

@@ -0,0 +1,133 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Collapse
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      COLLAPSIBLES = T.let([ nil, :header, :icon, :disabled ].freeze, T::Array[T.nilable(Symbol)])
+
+      renders_many :panels, ->(
+        key:,
+        header: nil,
+        extra: nil,
+        disabled: false,
+        show_arrow: true,
+        collapsible: nil,
+        force_render: false,
+        &block
+      ) do
+        T.bind(self, HakumiComponents::Collapse::Component)
+        item = HakumiComponents::Collapse::Panel::Component.new(
+          key: key,
+          header: header,
+          extra: extra,
+          disabled: disabled,
+          show_arrow: show_arrow,
+          collapsible: collapsible,
+          force_render: force_render,
+          parent: self
+        )
+        item.content = capture(&block) if block
+        item
+      end
+
+      sig do
+        params(
+          size: Symbol,
+          accordion: T::Boolean,
+          bordered: T::Boolean,
+          ghost: T::Boolean,
+          collapsible: T.nilable(Symbol),
+          active_keys: T.nilable(T.any(String, Integer, T::Array[T.any(String, Integer)])),
+          default_active_keys: T.nilable(T.any(String, Integer, T::Array[T.any(String, Integer)])),
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        size: :default,
+        accordion: false,
+        bordered: true,
+        ghost: false,
+        collapsible: nil,
+        active_keys: nil,
+        default_active_keys: nil,
+        **html_options
+      )
+        @size = T.let(size, Symbol)
+        @accordion = T.let(accordion, T::Boolean)
+        @bordered = T.let(bordered, T::Boolean)
+        @ghost = T.let(ghost, T::Boolean)
+        @collapsible = T.let(collapsible, T.nilable(Symbol))
+        @active_keys = T.let(normalize_keys(active_keys), T.nilable(T::Array[String]))
+        @default_active_keys = T.let(normalize_keys(default_active_keys), T.nilable(T::Array[String]))
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      private
+
+      sig { returns(Symbol) }
+      attr_reader :size
+
+      sig { returns(T::Boolean) }
+      attr_reader :accordion, :bordered, :ghost
+
+      sig { returns(T.nilable(Symbol)) }
+      attr_reader :collapsible
+
+      sig { returns(T::Array[String]) }
+      def initial_active_keys
+        @active_keys || @default_active_keys || []
+      end
+
+      sig { returns(String) }
+      def collapse_classes
+        component_classes(
+          "collapse",
+          {
+            small: @size == :small,
+            large: @size == :large,
+            borderless: !@bordered,
+            ghost: @ghost
+          },
+          @html_options
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        data = stimulus_attrs("hakumi--collapse", T.let({
+          accordion: @accordion,
+          active_keys: initial_active_keys,
+          collapsible: @collapsible&.to_s,
+          bordered: @bordered,
+          ghost: @ghost
+        }, Types::StimulusValues))
+        merge_attributes({ class: collapse_classes, data: data }, @html_options.except(:class))
+      end
+
+      sig do
+        params(value: T.nilable(T.any(String, Integer, T::Array[T.any(String, Integer)]))).returns(T.nilable(T::Array[String]))
+      end
+      def normalize_keys(value)
+        return nil if value.nil?
+
+        arr = if value.is_a?(Array)
+          value
+        else
+          [ value ]
+        end
+        arr.map(&:to_s)
+      end
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:collapsible, COLLAPSIBLES)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,108 @@
+# 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,
+          extra: nil,
+          disabled: false,
+          show_arrow: true,
+          collapsible: nil,
+          force_render: false,
+          parent: nil,
+          **html_options
+        )
+          @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
+
+        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)
+          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 = 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
+
+        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
+end

data/app/components/{hakumi → 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

@@ -0,0 +1,279 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module ColorPicker
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      include HakumiComponents::Concerns::FormField
+
+      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,
+        caption: nil,
+        value: nil,
+        default_value: nil,
+        format: :hex,
+        show_text: false,
+        show_format_select: true,
+        disabled: false,
+        disabled_alpha: false,
+        allow_clear: false,
+        show_preset_colors: true,
+        default_preset_label: nil,
+        presets: [],
+        size: :default,
+        trigger: :click,
+        placement: :bottom_left,
+        standalone: true,
+        errors: [],
+        **html_options
+      )
+        @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: wrapper_classes,
+          data: {
+            controller: "hakumi--color-picker",
+            "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,
+            "hakumi--color-picker-disabled-alpha-value": @disabled_alpha,
+            "hakumi--color-picker-allow-clear-value": @allow_clear,
+            "hakumi--color-picker-show-text-value": @show_text,
+            "hakumi--color-picker-show-format-select-value": @show_format_select,
+            "hakumi--color-picker-value-value": data_value(@value),
+            "hakumi--color-picker-default-value-value": data_value(@default_value)
+          }.compact
+        }
+
+        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"
+        when :large then "hakumi-color-picker-trigger-lg"
+        else "hakumi-color-picker-trigger-md"
+        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?
+        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
+        (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
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "color-picker",
+          {
+            sm: @size == :small,
+            lg: @size == :large,
+            disabled: @disabled,
+            "allow-clear": @allow_clear,
+            "show-text": @show_text,
+            "hover-trigger": @trigger == :hover
+          },
+          [ 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.empty?
+
+        if presets.is_a?(Hash)
+          presets.map do |label, colors|
+            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.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
+          [
+            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