hakumi_components 0.1.18.pre → 0.1.19.pre

data/app/components/hakumi_components/card/grid/component.rb

@@ -1,36 +1,42 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Card
     module Grid
-      # Hakumi Card Grid component
-      # A grid-style item within a Card
-      #
-      # @example Basic usage
-      #   <%= render HakumiComponents::Card::Component.new(title: "Title") do %>
-      #     <%= render HakumiComponents::Card::Grid::Component.new { "Content 1" } %>
-      #     <%= render HakumiComponents::Card::Grid::Component.new { "Content 2" } %>
-      #   <% end %>
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        sig do
+          params(
+            hoverable: T::Boolean,
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(
           hoverable: true,
           **html_options
         )
-          @hoverable = hoverable
-          @html_options = html_options
+          @hoverable = T.let(cast_boolean(hoverable) != false, T::Boolean)
+          @html_options = T.let(html_options, Types::HtmlAttributes)
         end
 
-        private
-
-        def classes
-          class_names(
-            "card-grid",
+        sig { returns(Types::HtmlAttributes) }
+        def wrapper_attributes
+          merge_attributes(
             {
-              hoverable: @hoverable
+              class: classes
             },
-            @html_options[:class]
+            @html_options.except(:class)
           )
         end
+
+        private
+
+        sig { returns(String) }
+        def classes
+          component_classes("card-grid", { hoverable: @hoverable }, @html_options)
+        end
       end
     end
   end

data/app/components/hakumi_components/card/meta/component.html.erb

@@ -1,21 +1,21 @@
-<div class="<%= classes %>" <%= tag.attributes(@html_options.except(:class)) %>>
-  <% if @avatar.present? %>
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% if avatar_content.present? %>
     <div class="hakumi-card-meta-avatar">
-      <%= @avatar %>
+      <%= avatar_content %>
     </div>
   <% end %>
 
-  <% if @title.present? || @description.present? %>
+  <% if detail_content? %>
     <div class="hakumi-card-meta-detail">
-      <% if @title.present? %>
+      <% if title_content.present? %>
         <div class="hakumi-card-meta-title">
-          <%= @title %>
+          <%= title_content %>
         </div>
       <% end %>
 
-      <% if @description.present? %>
+      <% if description_content.present? %>
         <div class="hakumi-card-meta-description">
-          <%= @description %>
+          <%= description_content %>
         </div>
       <% end %>
     </div>

data/app/components/hakumi_components/card/meta/component.rb

@@ -1,44 +1,62 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Card
     module Meta
-      # Hakumi Card Meta component
-      # A flexible content container for card metadata (title, description, avatar)
-      #
-      # @example Basic usage
-      #   <%= render HakumiComponents::Card::Meta::Component.new(
-      #     title: "Europe Street beat",
-      #     description: "www.instagram.com"
-      #   ) %>
-      #
-      # @example With avatar
-      #   <%= render HakumiComponents::Card::Meta::Component.new(
-      #     avatar: image_tag("avatar.png"),
-      #     title: "Card title",
-      #     description: "This is the description"
-      #   ) %>
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        sig do
+          params(
+            title: Types::Renderable,
+            description: Types::Renderable,
+            avatar: Types::Renderable,
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(
           title: nil,
           description: nil,
           avatar: nil,
           **html_options
         )
-          @title = title
-          @description = description
-          @avatar = avatar
-          @html_options = html_options
+          @title = T.let(title, Types::Renderable)
+          @description = T.let(description, Types::Renderable)
+          @avatar = T.let(avatar, Types::Renderable)
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def wrapper_attributes
+          merge_attributes({ class: classes }, @html_options.except(:class))
+        end
+
+        sig { returns(Types::RenderedContent) }
+        def avatar_content
+          render_value(@avatar)
+        end
+
+        sig { returns(Types::RenderedContent) }
+        def title_content
+          render_value(@title)
+        end
+
+        sig { returns(Types::RenderedContent) }
+        def description_content
+          render_value(@description)
+        end
+
+        sig { returns(T::Boolean) }
+        def detail_content?
+          title_content.present? || description_content.present?
         end
 
         private
 
+        sig { returns(String) }
         def classes
-          class_names(
-            "card-meta",
-            {},
-            @html_options[:class]
-          )
+          component_classes("card-meta", {}, @html_options)
         end
       end
     end

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

@@ -0,0 +1,27 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Carousel
+    class AutoplayConfig
+      extend T::Sig
+
+      sig { params(enabled: T::Boolean, dot_duration: T::Boolean).void }
+      def initialize(enabled:, dot_duration: false)
+        @enabled = T.let(enabled, T::Boolean)
+        @dot_duration = T.let(dot_duration, T::Boolean)
+      end
+
+      sig { returns(T::Boolean) }
+      attr_reader :enabled, :dot_duration
+
+      sig { params(value: T.any(T::Boolean, Types::HtmlAttributes)).returns(HakumiComponents::Carousel::AutoplayConfig) }
+      def self.coerce(value)
+        return new(enabled: value) if value == true || value == false
+
+        dot_duration = value[:dot_duration]
+        new(enabled: true, dot_duration: dot_duration == true)
+      end
+    end
+  end
+end

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

@@ -1,13 +1,35 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Carousel
     class Component < HakumiComponents::BaseComponent
-      EFFECTS = %i[scrollx fade].freeze
-      DOT_PLACEMENTS = %i[top bottom start end].freeze
+      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,
@@ -25,119 +47,115 @@ module HakumiComponents
         wait_for_animate: false,
         **html_options
       )
-        autoplay_dot_duration = false
-
-        if autoplay.is_a?(Hash)
-          autoplay_dot_duration = !!autoplay[:dot_duration]
-          autoplay = true
-        end
+        @autoplay_config = T.let(
+          HakumiComponents::Carousel::AutoplayConfig.coerce(autoplay),
+          HakumiComponents::Carousel::AutoplayConfig
+        )
+        @autoplay_speed = T.let(autoplay_speed, Integer)
 
-        if fade.nil?
-          fade = effect == :fade
+        resolved_fade = if fade.nil?
+          effect == :fade
         else
           effect = fade ? :fade : :scrollx
+          fade
         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
+        @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
 
-      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
+      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
-        class_names(
+        component_classes(
           "carousel",
           {
             "dot-#{@dot_placement}" => true,
             arrows: @arrows,
             fade: @fade
           },
-          [ @html_options[:class] ]
+          @html_options
         )
       end
 
+      sig { returns(T::Boolean) }
       def dots?
-        @dots && slides.any?
+        @dots_config.enabled && slides.any?
       end
 
+      sig { returns(T::Boolean) }
       def arrows?
         @arrows && slides.size > 1
       end
 
+      sig { returns(String) }
       def dots_classes
-        classes = [ "hakumi-carousel-dots", "hakumi-carousel-dots-#{@dot_placement}" ]
-        classes << @dots_class if @dots_class
-        classes.join(" ")
+        class_names(
+          "carousel-dots",
+          { @dot_placement => true },
+          @dots_config.class_name
+        )
       end
 
+      sig { params(index: Integer).returns(String) }
       def slide_classes(index)
-        classes = [ "hakumi-carousel-slide" ]
-        classes << "hakumi-carousel-slide-active" if index.zero?
-        classes.join(" ")
+        class_names("carousel-slide", { active: index.zero? })
       end
 
+      sig { params(index: Integer).returns(String) }
       def dot_classes(index)
-        classes = [ "hakumi-carousel-dot" ]
-        classes << "hakumi-carousel-dot-active" if index.zero?
-        classes.join(" ")
-      end
-
-      def stimulus_controller
-        "hakumi--carousel"
+        class_names("carousel-dot", { active: index.zero? })
       end
 
-      def stimulus_values
-        {
-          autoplay: @autoplay,
+      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,
+          dots: @dots_config.enabled,
           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))
+          autoplay_dot_duration: @autoplay_config.dot_duration
+        }, Types::StimulusValues))
+        merge_attributes({ class: carousel_classes, data: data }, @html_options.except(:class))
       end
 
-      private
-
+      sig { void }
       def validate_props!
         validate_inclusion!(:effect, EFFECTS)
         validate_inclusion!(:dot_placement, DOT_PLACEMENTS)

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

@@ -1,41 +1,59 @@
-<%= 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 HakumiComponents::Icon::Component.new(name: "close-circle", theme: :filled) %>
+<% 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>
-    <% end %>
 
-    <span class="hakumi-cascader-arrow">
-       <%= render HakumiComponents::Icon::Component.new(name: "down") %>
-    </span>
-  </div>
+      <% 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 %>
 
-  <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>
+      <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>
 
-  <input type="hidden" name="<%= @name %>" value="<%= @value.join(',') %>" data-hakumi--cascader-target="hiddenInput">
+    <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 %>