hakumi_components 0.1.17.pre → 0.1.19.pre

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

@@ -16,7 +16,7 @@
             data-action="click->hakumi--carousel#prev"
             data-hakumi--carousel-target="prevArrow">
       <span class="hakumi-carousel-arrow-icon hakumi-carousel-arrow-icon-prev">
-        <%= render Hakumi::Icon::Component.new(name: :left) %>
+        <%= render HakumiComponents::Icon::Component.new(name: :left) %>
       </span>
     </button>
 
@@ -26,7 +26,7 @@
             data-action="click->hakumi--carousel#next"
             data-hakumi--carousel-target="nextArrow">
       <span class="hakumi-carousel-arrow-icon hakumi-carousel-arrow-icon-next">
-        <%= render Hakumi::Icon::Component.new(name: :right) %>
+        <%= render HakumiComponents::Icon::Component.new(name: :right) %>
       </span>
     </button>
   <% end %>

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

@@ -0,0 +1,165 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Carousel
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      EFFECTS = T.let(%i[scrollx fade].freeze, T::Array[Symbol])
+      DOT_PLACEMENTS = T.let(%i[top bottom start end].freeze, T::Array[Symbol])
+
+      renders_many :slides
+
+      sig do
+        params(
+          autoplay: T.any(T::Boolean, Types::HtmlAttributes),
+          autoplay_speed: Integer,
+          dot_placement: Symbol,
+          dots: T.any(T::Boolean, Types::HtmlAttributes),
+          dots_class: T.nilable(String),
+          arrows: T::Boolean,
+          adaptive_height: T::Boolean,
+          draggable: T::Boolean,
+          infinite: T::Boolean,
+          fade: T.nilable(T::Boolean),
+          effect: Symbol,
+          speed: Integer,
+          easing: String,
+          wait_for_animate: T::Boolean,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        autoplay: false,
+        autoplay_speed: 3000,
+        dot_placement: :bottom,
+        dots: true,
+        dots_class: nil,
+        arrows: false,
+        adaptive_height: false,
+        draggable: false,
+        infinite: true,
+        fade: nil,
+        effect: :scrollx,
+        speed: 500,
+        easing: "linear",
+        wait_for_animate: false,
+        **html_options
+      )
+        @autoplay_config = T.let(
+          HakumiComponents::Carousel::AutoplayConfig.coerce(autoplay),
+          HakumiComponents::Carousel::AutoplayConfig
+        )
+        @autoplay_speed = T.let(autoplay_speed, Integer)
+
+        resolved_fade = if fade.nil?
+          effect == :fade
+        else
+          effect = fade ? :fade : :scrollx
+          fade
+        end
+
+        @dots_config = T.let(
+          HakumiComponents::Carousel::DotsConfig.coerce(dots, override_class_name: dots_class),
+          HakumiComponents::Carousel::DotsConfig
+        )
+
+        @dot_placement = T.let(dot_placement, Symbol)
+        @arrows = T.let(arrows, T::Boolean)
+        @adaptive_height = T.let(adaptive_height, T::Boolean)
+        @draggable = T.let(draggable, T::Boolean)
+        @infinite = T.let(infinite, T::Boolean)
+        @fade = T.let(resolved_fade, T::Boolean)
+        @effect = T.let(effect, Symbol)
+        @speed = T.let(speed, Integer)
+        @easing = T.let(easing, String)
+        @wait_for_animate = T.let(wait_for_animate, T::Boolean)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      private
+
+      sig { returns(HakumiComponents::Carousel::AutoplayConfig) }
+      attr_reader :autoplay_config
+
+      sig { returns(HakumiComponents::Carousel::DotsConfig) }
+      attr_reader :dots_config
+
+      sig { returns(T::Boolean) }
+      def autoplay_dot_duration
+        @autoplay_config.dot_duration
+      end
+
+      sig { returns(String) }
+      def carousel_classes
+        component_classes(
+          "carousel",
+          {
+            "dot-#{@dot_placement}" => true,
+            arrows: @arrows,
+            fade: @fade
+          },
+          @html_options
+        )
+      end
+
+      sig { returns(T::Boolean) }
+      def dots?
+        @dots_config.enabled && slides.any?
+      end
+
+      sig { returns(T::Boolean) }
+      def arrows?
+        @arrows && slides.size > 1
+      end
+
+      sig { returns(String) }
+      def dots_classes
+        class_names(
+          "carousel-dots",
+          { @dot_placement => true },
+          @dots_config.class_name
+        )
+      end
+
+      sig { params(index: Integer).returns(String) }
+      def slide_classes(index)
+        class_names("carousel-slide", { active: index.zero? })
+      end
+
+      sig { params(index: Integer).returns(String) }
+      def dot_classes(index)
+        class_names("carousel-dot", { active: index.zero? })
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        data = stimulus_attrs("hakumi--carousel", T.let({
+          autoplay: @autoplay_config.enabled,
+          autoplay_speed: @autoplay_speed,
+          infinite: @infinite,
+          fade: @fade,
+          adaptive_height: @adaptive_height,
+          draggable: @draggable,
+          arrows: @arrows,
+          dots: @dots_config.enabled,
+          dot_placement: @dot_placement.to_s,
+          speed: @speed,
+          easing: @easing,
+          wait_for_animate: @wait_for_animate,
+          autoplay_dot_duration: @autoplay_config.dot_duration
+        }, Types::StimulusValues))
+        merge_attributes({ class: carousel_classes, data: data }, @html_options.except(:class))
+      end
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:effect, EFFECTS)
+        validate_inclusion!(:dot_placement, DOT_PLACEMENTS)
+      end
+    end
+  end
+end

data/app/components/hakumi_components/carousel/dots_config.rb

@@ -0,0 +1,36 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Carousel
+    class DotsConfig
+      extend T::Sig
+
+      sig { params(enabled: T::Boolean, class_name: T.nilable(String)).void }
+      def initialize(enabled:, class_name: nil)
+        @enabled = T.let(enabled, T::Boolean)
+        @class_name = T.let(class_name, T.nilable(String))
+      end
+
+      sig { returns(T::Boolean) }
+      attr_reader :enabled
+
+      sig { returns(T.nilable(String)) }
+      attr_reader :class_name
+
+      sig do
+        params(
+          value: T.any(T::Boolean, Types::HtmlAttributes),
+          override_class_name: T.nilable(String)
+        ).returns(HakumiComponents::Carousel::DotsConfig)
+      end
+      def self.coerce(value, override_class_name: nil)
+        return new(enabled: value, class_name: override_class_name) if value == true || value == false
+
+        raw_class_name = value[:class_name] || value[:class]
+        class_name = raw_class_name.is_a?(String) ? raw_class_name : override_class_name
+        new(enabled: true, class_name: class_name)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+<% cascader_control = capture do %>
+  <%= tag.div(**wrapper_attributes) do %>
+    <div class="hakumi-cascader-selector" data-action="click->hakumi--cascader#toggle">
+      <span class="hakumi-cascader-selection-search">
+        <input type="search"
+               class="hakumi-cascader-selection-search-input"
+               role="combobox"
+               aria-haspopup="listbox"
+               aria-autocomplete="list"
+               readonly
+               autocomplete="off"
+               data-hakumi--cascader-target="input">
+      </span>
+
+      <% if selected_label.present? %>
+        <span class="hakumi-cascader-selection-item" data-hakumi--cascader-target="label" title="<%= selected_label %>"><%= selected_label %></span>
+      <% else %>
+        <span class="hakumi-cascader-selection-item" data-hakumi--cascader-target="label" style="display: none;"></span>
+      <% end %>
+
+      <span class="hakumi-cascader-selection-placeholder" data-hakumi--cascader-target="placeholder" style="<%= 'display: none;' if selected_label.present? %>">
+        <%= selection_control_placeholder %>
+      </span>
+
+      <% if selection_control_allow_clear %>
+        <span class="hakumi-cascader-clear" data-hakumi--cascader-target="clearBtn" data-action="click->hakumi--cascader#clear">
+          <%= render HakumiComponents::Icon::Component.new(name: "close-circle", theme: :filled) %>
+        </span>
+      <% end %>
+
+      <span class="hakumi-cascader-arrow">
+         <%= render HakumiComponents::Icon::Component.new(name: "down") %>
+      </span>
+    </div>
+
+    <div class="hakumi-cascader-menus hakumi-cascader-menus-hidden" data-hakumi--cascader-target="menus" data-action="click->hakumi--cascader#preventClose">
+    </div>
+
+    <input type="hidden" name="<%= form_field_name %>" value="<%= Array(selection_control_value).join(',') %>" data-hakumi--cascader-target="hiddenInput">
+  <% end %>
+<% end %>
+
+<% if standalone? %>
+  <%= cascader_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <div class="hakumi-form-item-control-input-content">
+          <%= cascader_control %>
+        </div>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,168 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Cascader
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      include HakumiComponents::Concerns::SelectionControl
+
+      TRIGGERS = T.let([ :click, :hover ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          name: T.nilable(Types::FormFieldName),
+          options: T.nilable(T::Array[HakumiComponents::SelectionControl::TreeNode::Input]),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: Types::FormFieldValue,
+          placeholder: T.nilable(String),
+          size: Symbol,
+          disabled: T::Boolean,
+          required: T::Boolean,
+          allow_clear: T::Boolean,
+          show_search: T::Boolean,
+          change_on_select: T::Boolean,
+          expand_trigger: Symbol,
+          display_render: T.nilable(T.proc.params(labels: T::Array[String]).returns(String)),
+          standalone: T::Boolean,
+          rules: T.nilable(T::Array[Types::ValidationRule]),
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        name: nil,
+        options: [],
+        label: nil,
+        caption: nil,
+        value: [],
+        placeholder: nil,
+        size: :default,
+        disabled: false,
+        required: false,
+        allow_clear: true,
+        show_search: false,
+        change_on_select: false,
+        expand_trigger: :click,
+        display_render: nil,
+        standalone: true,
+        rules: nil,
+        errors: [],
+        **html_options
+      )
+        @name = T.let(name || generate_id("cascader"), Types::FormFieldName)
+        @options = T.let(
+          HakumiComponents::SelectionControl::Coercion.tree_nodes(Array(options)),
+          T::Array[HakumiComponents::SelectionControl::TreeNode]
+        )
+        @label = label
+        @caption = caption
+        @value = T.let(value || [], Types::FormFieldValue)
+        @placeholder = T.let(placeholder || t_default(:placeholder, default: "Select"), T.nilable(String))
+        @size = size
+        @disabled = disabled
+        @required = required
+        @allow_clear = allow_clear
+        @show_search = show_search
+        @change_on_select = change_on_select
+        @expand_trigger = expand_trigger
+        @display_render = T.let(display_render, T.nilable(T.proc.params(labels: T::Array[String]).returns(String)))
+        @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
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:expand_trigger, TRIGGERS)
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "cascader",
+          {
+            lg: selection_control_size == :large,
+            sm: selection_control_size == :small,
+            disabled: selection_control_disabled,
+            "allow-clear": selection_control_allow_clear
+          },
+          [ selection_control_html_class_name ]
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        base_attrs = {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--cascader",
+            hakumi__cascader_options_value: normalized_options.map(&:to_cascader_option).to_json,
+            hakumi__cascader_value_value: Array(selection_control_value).to_json,
+            hakumi__cascader_trigger_value: @expand_trigger,
+            hakumi__cascader_change_on_select_value: @change_on_select,
+            hakumi__cascader_disabled_value: selection_control_disabled
+          }
+        }
+        merge_attributes(base_attrs, selection_control_html_options_without_class)
+      end
+
+      sig { returns(T.nilable(String)) }
+      def selected_label
+        labels = labels_for_path(Array(selection_control_value))
+        return nil if labels.empty?
+
+        return @display_render.call(labels) if @display_render
+
+        labels.join(" / ")
+      end
+
+      private
+
+      sig { returns(T::Array[HakumiComponents::SelectionControl::TreeNode]) }
+      attr_reader :options
+
+      sig { returns(T::Array[HakumiComponents::SelectionControl::TreeNode]) }
+      def normalized_options
+        options
+      end
+
+      sig { params(path: T::Array[HakumiComponents::Types::FormFieldScalar]).returns(T::Array[String]) }
+      def labels_for_path(path)
+        labels = T.let([], T::Array[String])
+        current_nodes = normalized_options
+
+        path.each do |segment|
+          current_node = current_nodes.find { |node| node.string_value == segment.to_s }
+          break if current_node.nil?
+
+          labels << current_node.label
+          current_nodes = current_node.children
+        end
+
+        labels
+      end
+    end
+  end
+end

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

@@ -2,10 +2,10 @@
   <label id="<%= @wrapper_id %>" class="<%= wrapper_classes %>" data-controller="<%= data_controllers %>" data-hakumi--checkbox-checked-value="<%= @checked %>" data-hakumi--checkbox-indeterminate-value="<%= @indeterminate %>">
     <span class="<%= checkbox_classes %>" data-hakumi--checkbox-target="checkbox">
       <%= check_box_tag(
-            @name,
+            form_field_name,
             @value,
             @checked,
-            id: @id,
+            id: input_id,
             disabled: @disabled,
             class: "hakumi-checkbox-input",
             data: {
@@ -16,8 +16,8 @@
           ) %>
       <span class="hakumi-checkbox-inner"></span>
     </span>
-    <% if @label.present? || content.present? %>
-      <span><%= @label || content %></span>
+    <% if form_field_label.present? || content.present? %>
+      <span><%= form_field_label || content %></span>
     <% end %>
   </label>
 <% end %>
@@ -26,7 +26,7 @@
   <%= checkbox_control %>
 <% else %>
   <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
-    <%= render_label(field_id: @id) %>
+    <%= render_label(field_id: input_id) %>
 
     <div class="hakumi-form-item-control">
       <div class="hakumi-form-item-control-input">

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

@@ -0,0 +1,98 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Checkbox
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      include HakumiComponents::Concerns::FormField
+
+      sig do
+        params(
+          checked: T::Boolean,
+          disabled: T::Boolean,
+          indeterminate: T::Boolean,
+          value: HakumiComponents::Types::FormFieldScalar,
+          name: T.nilable(Types::FormFieldName),
+          id: T.nilable(Types::FormFieldName),
+          wrapper_id: T.nilable(String),
+          auto_focus: T::Boolean,
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          standalone: T::Boolean,
+          required: T::Boolean,
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        checked: false,
+        disabled: false,
+        indeterminate: false,
+        value: nil,
+        name: nil,
+        id: nil,
+        wrapper_id: nil,
+        auto_focus: false,
+        label: nil,
+        caption: nil,
+        standalone: true,
+        required: false,
+        errors: [],
+        **html_options
+      )
+        @checked = checked
+        @disabled = disabled
+        @indeterminate = indeterminate
+        @value = T.let(value || "1", HakumiComponents::Types::FormFieldScalar)
+        @name = T.let(name || generate_id("checkbox"), Types::FormFieldName)
+        @id = T.let(id || generate_id("checkbox"), Types::FormFieldName)
+        @auto_focus = auto_focus
+        @label = label
+        @caption = caption
+        @standalone = standalone
+        @required = required
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @wrapper_id = T.let(wrapper_id || "#{@id}-wrapper", String)
+        @html_options = T.let(html_options.merge(id: @id), Types::HtmlAttributes)
+        initialize_form_field_contract!(
+          name: @name,
+          label: @label,
+          caption: @caption,
+          errors: @errors,
+          standalone: @standalone,
+          required: @required,
+          html_options: @html_options
+        )
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "checkbox-wrapper",
+          {
+            "disabled": @disabled
+          }
+        )
+      end
+
+      sig { returns(String) }
+      def checkbox_classes
+        class_names(
+          "checkbox",
+          {
+            "checked": @checked,
+            "disabled": @disabled,
+            "indeterminate": @indeterminate
+          }
+        )
+      end
+
+      sig { returns(String) }
+      def data_controllers
+        "hakumi--checkbox"
+      end
+    end
+  end
+end

data/app/components/hakumi_components/checkbox/group/component.html.erb

@@ -0,0 +1,12 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% normalized_options.each do |option| %>
+    <%= render HakumiComponents::Checkbox::Component.new(
+          name: "#{@name}[]",
+          value: option.value,
+          checked: option_checked?(option.value),
+          disabled: @disabled || option.disabled,
+          label: option.label
+        ) %>
+  <% end %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,91 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Checkbox
+    module Group
+      class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        sig do
+          params(
+            name: T.nilable(HakumiComponents::Types::FormFieldName),
+            value: T::Array[HakumiComponents::Types::FormFieldScalar],
+            default_value: T::Array[HakumiComponents::Types::FormFieldScalar],
+            options: T::Array[T.any(String, HakumiComponents::Checkbox::Group::Option)],
+            disabled: T::Boolean,
+            html_options: HakumiComponents::Types::HtmlAttributeValue
+          ).void
+        end
+        def initialize(
+          name: nil,
+          value: [],
+          default_value: [],
+          options: [],
+          disabled: false,
+          **html_options
+        )
+          @name = T.let(name || generate_id("checkbox_group"), HakumiComponents::Types::FormFieldName)
+          @value = T.let(value.empty? ? default_value : value, T::Array[HakumiComponents::Types::FormFieldScalar])
+          @options = T.let(options, T::Array[T.any(String, HakumiComponents::Checkbox::Group::Option)])
+          @disabled = T.let(disabled, T::Boolean)
+          @html_options = T.let(html_options, HakumiComponents::Types::HtmlAttributes)
+        end
+
+        sig { returns(String) }
+        def wrapper_classes
+          class_names("checkbox-group")
+        end
+
+        sig { returns(HakumiComponents::Types::HtmlAttributes) }
+        def wrapper_attributes
+          merged = merge_attributes(
+            {
+              class: wrapper_classes,
+              role: "group"
+            },
+            @html_options.except(:data)
+          )
+
+          data = existing_data_attributes
+          existing_controller = data[:controller]
+          controllers = existing_controller.to_s.split(/\s+/).reject(&:blank?)
+          controllers << "hakumi--checkbox-group"
+          data[:controller] = controllers.uniq.join(" ")
+          data[:"hakumi--checkbox-group-value-value"] ||= @value.map(&:to_s).to_json
+
+          merged[:data] = data
+          merged
+        end
+
+        sig { returns(T::Array[HakumiComponents::Checkbox::Group::Option]) }
+        def normalized_options
+          @options.map do |option|
+            if option.is_a?(String)
+              HakumiComponents::Checkbox::Group::Option.new(label: option, value: option)
+            else
+              option
+            end
+          end
+        end
+
+        sig { params(option_value: HakumiComponents::Types::FormFieldScalar).returns(T::Boolean) }
+        def option_checked?(option_value)
+          @value.include?(option_value.to_s) || @value.include?(option_value)
+        end
+
+        private
+
+        sig { returns(HakumiComponents::Types::DataAttributes) }
+        def existing_data_attributes
+          value = @html_options[:data]
+          return {} unless value.is_a?(Hash)
+
+          data = T.let({}, HakumiComponents::Types::DataAttributes)
+          value.each { |key, entry| data[key] = entry }
+          data
+        end
+      end
+    end
+  end
+end