hakumi_components 0.1.3.pre

data/app/components/hakumi/carousel/component.html.erb

@@ -0,0 +1,56 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <div class="hakumi-carousel-container" data-hakumi--carousel-target="container">
+    <div class="hakumi-carousel-track" data-hakumi--carousel-target="track">
+      <% slides.each_with_index do |slide, index| %>
+        <div class="<%= slide_classes(index) %>" data-index="<%= index %>" data-hakumi--carousel-target="slide" aria-hidden="<%= index.zero? ? 'false' : 'true' %>">
+          <%= slide %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <% if arrows? %>
+    <button type="button"
+            class="hakumi-carousel-arrow hakumi-carousel-arrow-prev"
+            aria-label="Previous"
+            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) %>
+      </span>
+    </button>
+
+    <button type="button"
+            class="hakumi-carousel-arrow hakumi-carousel-arrow-next"
+            aria-label="Next"
+            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) %>
+      </span>
+    </button>
+  <% end %>
+
+  <% if dots? %>
+    <ul class="<%= dots_classes %>" data-hakumi--carousel-target="dots" role="tablist">
+      <% slides.each_with_index do |slide, index| %>
+        <li class="<%= dot_classes(index) %>"
+            data-index="<%= index %>"
+            data-action="click->hakumi--carousel#goToFromDot"
+            data-hakumi--carousel-target="dot"
+            role="presentation">
+          <button type="button"
+                  class="hakumi-carousel-dot-button"
+                  aria-label="Go to slide <%= index + 1 %>"
+                  aria-current="<%= index.zero? ? 'true' : 'false' %>">
+            <span class="hakumi-carousel-dot-inner">
+              <% if autoplay_dot_duration %>
+                <span class="hakumi-carousel-dot-progress" data-hakumi--carousel-target="dotProgress"></span>
+              <% end %>
+            </span>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Carousel
+    class Component < Hakumi::BaseComponent
+      EFFECTS = %i[scrollx fade].freeze
+      DOT_PLACEMENTS = %i[top bottom start end].freeze
+
+      renders_many :slides
+
+      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_dot_duration = false
+
+        if autoplay.is_a?(Hash)
+          autoplay_dot_duration = !!autoplay[:dot_duration]
+          autoplay = true
+        end
+
+        if fade.nil?
+          fade = effect == :fade
+        else
+          effect = fade ? :fade : :scrollx
+        end
+
+        @autoplay = autoplay
+        @autoplay_speed = autoplay_speed
+        @dot_placement = dot_placement
+        @dots = dots.is_a?(Hash) ? true : dots
+        @dots_class = dots.is_a?(Hash) ? dots[:class_name] || dots[:class] || dots_class : dots_class
+        @arrows = arrows
+        @adaptive_height = adaptive_height
+        @draggable = draggable
+        @infinite = infinite
+        @fade = fade
+        @effect = effect
+        @speed = speed
+        @easing = easing
+        @wait_for_animate = wait_for_animate
+        @autoplay_dot_duration = autoplay_dot_duration
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      attr_reader :autoplay, :autoplay_speed, :dot_placement, :dots, :dots_class,
+                  :arrows, :adaptive_height, :draggable, :infinite, :fade, :effect,
+                  :speed, :easing, :wait_for_animate, :autoplay_dot_duration
+
+      def carousel_classes
+        class_names(
+          "carousel",
+          {
+            "dot-#{@dot_placement}" => true,
+            arrows: @arrows,
+            fade: @fade
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def dots?
+        @dots && slides.any?
+      end
+
+      def arrows?
+        @arrows && slides.size > 1
+      end
+
+      def dots_classes
+        classes = [ "hakumi-carousel-dots", "hakumi-carousel-dots-#{@dot_placement}" ]
+        classes << @dots_class if @dots_class
+        classes.join(" ")
+      end
+
+      def slide_classes(index)
+        classes = [ "hakumi-carousel-slide" ]
+        classes << "hakumi-carousel-slide-active" if index.zero?
+        classes.join(" ")
+      end
+
+      def dot_classes(index)
+        classes = [ "hakumi-carousel-dot" ]
+        classes << "hakumi-carousel-dot-active" if index.zero?
+        classes.join(" ")
+      end
+
+      def stimulus_controller
+        "hakumi--carousel"
+      end
+
+      def stimulus_values
+        {
+          autoplay: @autoplay,
+          autoplay_speed: @autoplay_speed,
+          infinite: @infinite,
+          fade: @fade,
+          adaptive_height: @adaptive_height,
+          draggable: @draggable,
+          arrows: @arrows,
+          dots: @dots,
+          dot_placement: @dot_placement.to_s,
+          speed: @speed,
+          easing: @easing,
+          wait_for_animate: @wait_for_animate,
+          autoplay_dot_duration: @autoplay_dot_duration
+        }
+      end
+
+      def stimulus_data_attributes
+        stimulus_values.transform_keys { |k| "#{stimulus_controller}-#{k.to_s.dasherize}-value" }
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: carousel_classes,
+          data: {
+            controller: stimulus_controller
+          }.merge(stimulus_data_attributes)
+        }
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:effect, EFFECTS)
+        validate_inclusion!(:dot_placement, DOT_PLACEMENTS)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+<%= 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? %>">
+      <%= @placeholder %>
+    </span>
+
+    <% if @allow_clear %>
+      <span class="hakumi-cascader-clear" data-hakumi--cascader-target="clearBtn" data-action="click->hakumi--cascader#clear">
+        <%= render Hakumi::Icon::Component.new(name: "close-circle", theme: :filled) %>
+      </span>
+    <% end %>
+
+    <span class="hakumi-cascader-arrow">
+       <%= render Hakumi::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">
+    <%# Menus will be rendered by Stimulus or recursively here %>
+    <%# For robust implementation, we can render the first level here if options exist %>
+  </div>
+
+  <input type="hidden" name="<%= @name %>" value="<%= @value.join(',') %>" data-hakumi--cascader-target="hiddenInput">
+<% end %>

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

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Cascader
+    # Public API
+    #
+    # ```erb
+    # <%= render Hakumi::Cascader::Component.new(
+    #       options: [
+    #         { value: "spain", label: "Spain", children: [
+    #             { value: "madrid", label: "Madrid", children: [
+    #                 { value: "salamanca", label: "Salamanca" }
+    #               ] }
+    #           ]
+    #         },
+    #         { value: "france", label: "France", children: [
+    #             { value: "paris", label: "Paris", children: [
+    #                 { value: "montmartre", label: "Montmartre" }
+    #               ] }
+    #           ]
+    #         }
+    #       ],
+    #       value: ["spain", "madrid", "salamanca"],
+    #       placeholder: "Select a city",
+    #       trigger: :click,
+    #       change_on_select: false,
+    #       allow_clear: true
+    #     ) %>
+    # ```
+    #
+    # Options:
+    # - `options` (`Array<Hash>`, default: `[]`): tree of nodes (`value`, `label`, optional `children`).
+    # - `value` (`Array`, default: `[]`): pre-selected value path.
+    # - `placeholder` (`String`, default: `"Select"`).
+    # - `size` (`:small`, `:middle`, `:large`, default: `:middle`).
+    # - `disabled` (`Boolean`, default: `false`).
+    # - `allow_clear` (`Boolean`, default: `true`).
+    # - `show_search` (`Boolean`, default: `false`).
+    # - `change_on_select` (`Boolean`, default: `false`).
+    # - `expand_trigger` (`:click`, `:hover`, default: `:click`).
+    # - `display_render` (callable, optional) for custom label rendering.
+    # - Additional `html_options` are merged into the wrapper div.
+    class Component < Hakumi::BaseComponent
+      SIZES = [ :small, :middle, :large ].freeze
+      TRIGGERS = [ :click, :hover ].freeze
+
+      def initialize(
+        name: nil,
+        options: [],
+        value: [],
+        placeholder: "Select",
+        size: :middle,
+        disabled: false,
+        allow_clear: true,
+        show_search: false,
+        change_on_select: false,
+        expand_trigger: :click,
+        display_render: nil,
+        **html_options
+      )
+        @name = name || generate_id("cascader")
+        @options = options
+        @value = value || []
+        @placeholder = placeholder
+        @size = size
+        @disabled = disabled
+        @allow_clear = allow_clear
+        @show_search = show_search
+        @change_on_select = change_on_select
+        @expand_trigger = expand_trigger
+        @display_render = display_render
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:expand_trigger, TRIGGERS)
+      end
+
+      def wrapper_classes
+        class_names(
+          "cascader",
+          {
+            lg: @size == :large,
+            sm: @size == :small,
+            disabled: @disabled,
+            "allow-clear": @allow_clear
+          },
+          @html_options[:class]
+        )
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--cascader",
+            hakumi__cascader_options_value: @options.to_json,
+            hakumi__cascader_value_value: @value.to_json,
+            hakumi__cascader_trigger_value: @expand_trigger,
+            hakumi__cascader_change_on_select_value: @change_on_select,
+            hakumi__cascader_disabled_value: @disabled
+          }
+        }
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def selected_label
+        # Logic to find labels for the current @value path
+        # Simplistic implementation: this will likely be handled by JS for dynamic updates
+        # But for SSR, we should try to render it if possible.
+        # For complex implementation, let's rely on Stimulus to populate on connect if value exists.
+        nil
+      end
+    end
+  end
+end

data/app/components/hakumi/checkbox/component.html.erb

@@ -0,0 +1,21 @@
+<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,
+          @value,
+          @checked,
+          id: @id,
+          disabled: @disabled,
+          class: "hakumi-checkbox-input",
+          data: {
+            hakumi__checkbox_target: "input",
+            action: "change->hakumi--checkbox#toggle"
+          }.merge(@html_options[:data] || {}),
+          **@html_options.except(:class, :data, :style)
+        ) %>
+    <span class="hakumi-checkbox-inner"></span>
+  </span>
+  <% if @label.present? || content.present? %>
+    <span><%= @label || content %></span>
+  <% end %>
+</label>

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Checkbox
+    class Component < Hakumi::BaseComponent
+      def initialize(
+        checked: false,
+        disabled: false,
+        indeterminate: false,
+        value: nil,
+        name: nil,
+        id: nil,
+        auto_focus: false,
+        label: nil,
+        **html_options
+      )
+        @checked = checked
+        @disabled = disabled
+        @indeterminate = indeterminate
+        @value = value
+        @name = name
+        @id = id || generate_id("checkbox")
+        @auto_focus = auto_focus
+        @label = label
+        @wrapper_id = html_options.delete(:id) || generate_id("hakumi-checkbox", length: 6)
+        @html_options = html_options
+      end
+
+      def wrapper_classes
+        class_names(
+          "checkbox-wrapper",
+          {
+            "disabled": @disabled
+          }
+        )
+      end
+
+      def checkbox_classes
+        class_names(
+          "checkbox",
+          {
+            "checked": @checked,
+            "disabled": @disabled,
+            "indeterminate": @indeterminate
+          }
+        )
+      end
+
+      def data_controllers
+        "hakumi--checkbox"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% normalized_options.each do |option| %>
+    <%= render Hakumi::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/checkbox/group/component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Checkbox
+    module Group
+      class Component < Hakumi::BaseComponent
+        def initialize(
+          name: nil,
+          value: [],
+          default_value: [],
+          options: [],
+          disabled: false,
+          **html_options
+        )
+          @name = name || generate_id("checkbox_group")
+          @value = value.presence || default_value || []
+          @options = options
+          @disabled = disabled
+          @html_options = html_options
+        end
+
+        def wrapper_classes
+          class_names("checkbox-group")
+        end
+
+        def wrapper_attributes
+          merged = merge_attributes(
+            {
+              class: wrapper_classes,
+              role: "group"
+            },
+            @html_options
+          )
+
+          data = merged[:data] ||= {}
+
+          existing_controller = data[:controller] || data["controller"]
+          controllers = existing_controller.to_s.split(/\s+/).reject(&:blank?)
+          controllers << "hakumi--checkbox-group"
+          data[:controller] = controllers.uniq.join(" ")
+
+          data_key = "hakumi--checkbox-group-value-value"
+          data[data_key] ||= @value.map(&:to_s).to_json
+
+          merged
+        end
+
+        def normalized_options
+          @options.map do |option|
+            if option.is_a?(String)
+              { label: option, value: option }
+            else
+              option
+            end
+          end
+        end
+
+        def option_checked?(option_value)
+          @value.include?(option_value.to_s) || @value.include?(option_value)
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/collapse/component.html.erb

@@ -0,0 +1,31 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% panels.each_with_index do |item, index| %>
+    <% is_active = initial_active_keys.include?(item.key) || (initial_active_keys.empty? && index == 0 && !accordion) %>
+    <% mode = item.collapsible || collapsible %>
+    <%= tag.div(**item.item_attributes(is_active)) do %>
+      <div class="hakumi-collapse-header" data-hakumi--collapse-target="header" data-key="<%= item.key %>"
+           <% unless item.disabled || mode == :icon || mode == :disabled %>data-action="click->hakumi--collapse#toggle"<% end %>>
+        <% 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) %>
+          </span>
+        <% end %>
+        <span class="hakumi-collapse-header-text">
+          <%= item.header || item.key %>
+        </span>
+        <% if item.extra.present? %>
+          <div class="hakumi-collapse-extra">
+            <%= item.extra %>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="hakumi-collapse-content <%= 'hakumi-collapse-content-active' if is_active %>" data-hakumi--collapse-target="content" data-key="<%= item.key %>">
+        <div class="hakumi-collapse-content-box">
+          <%= item.content %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Collapse
+    class Component < Hakumi::BaseComponent
+      SIZES = %i[default small large].freeze
+      COLLAPSIBLES = [ nil, :header, :icon, :disabled ].freeze
+
+      renders_many :panels, ->(
+        key:,
+        header: nil,
+        extra: nil,
+        disabled: false,
+        show_arrow: true,
+        collapsible: nil,
+        force_render: false,
+        **options,
+        &block
+      ) do
+        item = Hakumi::Collapse::Panel::Component.new(
+          key: key,
+          header: header,
+          extra: extra,
+          disabled: disabled,
+          show_arrow: show_arrow,
+          collapsible: collapsible,
+          force_render: force_render,
+          parent: self,
+          **options
+        )
+        item.content = capture(&block) if block
+        item
+      end
+
+      def initialize(
+        size: :default,
+        accordion: false,
+        bordered: true,
+        ghost: false,
+        collapsible: nil,
+        active_keys: nil,
+        default_active_keys: nil,
+        **html_options
+      )
+        @size = size
+        @accordion = accordion
+        @bordered = bordered
+        @ghost = ghost
+        @collapsible = collapsible
+        @active_keys = normalize_keys(active_keys)
+        @default_active_keys = normalize_keys(default_active_keys)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      attr_reader :size, :accordion, :bordered, :ghost, :collapsible
+
+      def collapse_classes
+        classes = [ "hakumi-collapse" ]
+        classes << "hakumi-collapse-small" if @size == :small
+        classes << "hakumi-collapse-large" if @size == :large
+        classes << "hakumi-collapse-borderless" unless @bordered
+        classes << "hakumi-collapse-ghost" if @ghost
+        classes << @html_options[:class] if @html_options[:class]
+        classes.compact.join(" ")
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: collapse_classes,
+          data: {
+            controller: stimulus_controller
+          }.merge(stimulus_data_attributes)
+        }
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def stimulus_controller
+        "hakumi--collapse"
+      end
+
+      def initial_active_keys
+        @active_keys || @default_active_keys || []
+      end
+
+      def stimulus_values
+        {
+          accordion: @accordion,
+          activeKeys: initial_active_keys,
+          collapsible: (@collapsible&.to_s),
+          bordered: @bordered,
+          ghost: @ghost
+        }
+      end
+
+      def stimulus_data_attributes
+        stimulus_values.each_with_object({}) do |(k, v), h|
+          h["#{stimulus_controller}-#{k.to_s.dasherize}-value"] = v.is_a?(Array) ? v.to_json : v
+        end
+      end
+
+      private
+
+      def normalize_keys(value)
+        return nil if value.nil?
+        arr = value.is_a?(Array) ? value : [ value ]
+        arr.compact.map(&:to_s)
+      end
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:collapsible, COLLAPSIBLES)
+      end
+    end
+  end
+end