hakumi_components 0.1.16.pre → 0.1.17.pre

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

@@ -1,7 +1,11 @@
 <div <%= tag.attributes(wrapper_attributes) %>>
   <% if show_icon? %>
     <span class="hakumi-alert-icon">
-      <%= icon_element %>
+      <% if icon? %>
+        <%= icon %>
+      <% else %>
+        <%= default_icon_element %>
+      <% end %>
     </span>
   <% end %>
 
@@ -9,19 +13,19 @@
     <% if message_content.present? %>
       <div class="hakumi-alert-message" data-hakumi--alert-target="message"><%= message_content %></div>
     <% end %>
-    <% if description_present? %>
-      <div class="hakumi-alert-description" data-hakumi--alert-target="description"><%= description_content %></div>
+    <% if description? %>
+      <div class="hakumi-alert-description" data-hakumi--alert-target="description"><%= description %></div>
     <% end %>
   </div>
 
-  <% if action_present? %>
-    <div class="hakumi-alert-action"><%= action_content %></div>
+  <% if action? %>
+    <div class="hakumi-alert-action"><%= action %></div>
   <% end %>
 
   <% if @closable %>
-    <button type="button" class="<%= close_button_classes %>" data-action="click->hakumi--alert#close" aria-label="Close">
-      <% if @close_text.present? %>
-        <span><%= @close_text %></span>
+    <button type="button" class="hakumi-alert-close-icon" data-hakumi-action="close" aria-label="Close">
+      <% if close_icon? %>
+        <%= close_icon %>
       <% else %>
         <%= render Hakumi::Icon::Component.new(name: :close) %>
       <% end %>

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

@@ -5,41 +5,24 @@ module Hakumi
     class Component < Hakumi::BaseComponent
       TYPES = [ :success, :info, :warning, :error ].freeze
 
-      # Extracts locals from controller params for dynamic rendering
-      # @param params [ActionController::Parameters]
-      # @return [Hash] Arguments for initialize
-      def self.extract_controller_locals(params)
-        {
-          type: params[:type]&.to_sym,
-          message: params[:message].presence || "Generated Alert content",
-          description: params[:description],
-          show_icon: ActiveModel::Type::Boolean.new.cast(params[:show_icon]),
-          closable: ActiveModel::Type::Boolean.new.cast(params[:closable]),
-          banner: ActiveModel::Type::Boolean.new.cast(params[:banner])
-        }
-      end
+      # Slots for content
+      renders_one :icon
+      renders_one :message
+      renders_one :description
+      renders_one :action
+      renders_one :close_icon
 
       def initialize(
         type: nil,
-        message: nil,
-        description: nil,
         show_icon: nil,
-        icon: nil,
         closable: false,
-        close_text: nil,
         banner: false,
-        action: nil,
         **html_options
       )
         @type = type || :info
-        @message = message
-        @description = description
         @show_icon = show_icon.nil? ? banner : show_icon
-        @icon = icon
-        @closable = closable || close_text.present?
-        @close_text = close_text
+        @closable = closable
         @banner = banner
-        @action = action
         @html_options = html_options
 
         validate_props!
@@ -54,7 +37,7 @@ module Hakumi
       def wrapper_classes
         classes = [ "hakumi-alert" ]
         classes << "hakumi-alert-#{@type}" if @type
-        classes << "hakumi-alert-with-description" if description_present?
+        classes << "hakumi-alert-with-description" if description?
         classes << "hakumi-alert-with-icon" if show_icon?
         classes << "hakumi-alert-no-icon" unless show_icon?
         classes << "hakumi-alert-closable" if @closable
@@ -72,57 +55,30 @@ module Hakumi
         )
       end
 
+      # Content resolution: message slot > block content
       def message_content
-        content.presence || @message
-      end
-
-      def description_present?
-        @description.present?
-      end
-
-      def description_content
-        render_value(@description)
-      end
-
-      def action_present?
-        @action.present?
-      end
-
-      def action_content
-        render_value(@action)
+        message? ? message : content
       end
 
       def show_icon?
         @show_icon
       end
 
-      def icon_element
+      def default_icon_element
         return nil unless show_icon?
 
-        icon = @icon || default_icon
-        return icon unless icon.is_a?(String) || icon.is_a?(Symbol)
-
-        render Hakumi::Icon::Component.new(name: icon)
+        icon_name = default_icon_name
+        render Hakumi::Icon::Component.new(name: icon_name)
       end
 
-      def default_icon
+      def default_icon_name
         case @type
-        when :success
-          :check_circle
-        when :warning
-          :exclamation_circle
-        when :error
-          :close_circle
-        else
-          :info_circle
+        when :success then :check_circle
+        when :warning then :exclamation_circle
+        when :error then :close_circle
+        else :info_circle
         end
       end
-
-      def close_button_classes
-        classes = [ "hakumi-alert-close-icon" ]
-        classes << "hakumi-alert-close-text" if @close_text.present?
-        classes.join(" ")
-      end
     end
   end
 end

data/app/components/hakumi/base_component.rb

@@ -154,6 +154,19 @@ module Hakumi
       string.empty? ? nil : string
     end
 
+    # Cast a value to boolean using ActiveModel::Type::Boolean
+    # @param value [Object] Value to cast
+    # @return [Boolean] Casted boolean value
+    #
+    # Example:
+    #   cast_boolean("true") # => true
+    #   cast_boolean("1") # => true
+    #   cast_boolean(0) # => false
+    #   cast_boolean(nil) # => nil
+    def cast_boolean(value)
+      ActiveModel::Type::Boolean.new.cast(value)
+    end
+
     # Build inline style string from array or hash
     # @param styles [Array<String>, Hash] Styles as array of CSS strings or hash of property => value
     # @return [String, nil] Combined style string

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

@@ -1,36 +1,28 @@
-<% wrapper_tag = @href.present? ? :a : :div %>
-<% wrapper_attrs = @html_options.except(:class).dup %>
-<% wrapper_attrs[:class] = classes %>
-<% if @href.present? %>
-  <% wrapper_attrs[:href] = @href %>
-  <% wrapper_attrs[:target] = @target if @target %>
-  <% wrapper_attrs[:class] = [wrapper_attrs[:class], "hakumi-card-link-wrapper"].compact.join(" ") %>
-<% end %>
-<%= content_tag(wrapper_tag, **wrapper_attrs) do %>
-  <% if @head_style.present? || @title.present? || @extra.present? %>
-    <div class="<%= head_classes %>" style="<%= @head_style %>">
+<%= content_tag(wrapper_tag, **wrapper_attributes) do %>
+  <% if render_header? %>
+    <div class="hakumi-card-head">
       <div class="hakumi-card-head-wrapper">
-        <% if @title.present? %>
+        <% if header? %>
           <div class="hakumi-card-head-title">
-            <%= render_title %>
+            <%= header %>
           </div>
         <% end %>
-        <% if @extra.present? %>
+        <% if extra? %>
           <div class="hakumi-card-extra">
-            <%= render_extra %>
+            <%= extra %>
           </div>
         <% end %>
       </div>
     </div>
   <% end %>
 
-  <% if @cover.present? %>
+  <% if cover? %>
     <div class="hakumi-card-cover">
-      <%= @cover %>
+      <%= cover %>
     </div>
   <% end %>
 
-  <div class="<%= body_classes %>" style="<%= @body_style %>">
+  <div class="hakumi-card-body">
     <% if @loading %>
       <div class="hakumi-card-loading-content">
         <div class="hakumi-row" style="margin-bottom: 16px;">
@@ -49,14 +41,14 @@
         </div>
       </div>
     <% else %>
-      <%= content %>
+      <%= body_content %>
     <% end %>
   </div>
 
-  <% if @actions.any? %>
+  <% if actions.any? %>
     <ul class="hakumi-card-actions">
-      <% @actions.each_with_index do |action, index| %>
-        <li style="width: <%= 100.0 / @actions.length %>%">
+      <% actions.each do |action| %>
+        <li style="width: <%= 100.0 / actions.length %>%">
           <span><%= action %></span>
         </li>
       <% end %>

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

@@ -5,43 +5,44 @@ module Hakumi
     # Hakumi Card component
     # A container for displaying content in a box.
     #
-    # @example Basic usage
-    #   <%= render Hakumi::Card::Component.new(title: "Card Title", extra: "More") do %>
+    # @example Basic usage with slots
+    #   <%= render Hakumi::Card::Component.new do |card| %>
+    #     <% card.with_header { "Card Title" } %>
+    #     <% card.with_extra { "More" } %>
     #     Card content
     #   <% end %>
     #
-    # @example With actions and cover
-    #   <%= render Hakumi::Card::Component.new(
-    #     title: "Card Title",
-    #     cover: image_tag("example.png"),
-    #     actions: [link_to("Edit"), link_to("Delete")]
-    #   ) do %>
+    # @example With cover and actions
+    #   <%= render Hakumi::Card::Component.new do |card| %>
+    #     <% card.with_cover { image_tag("example.png") } %>
+    #     <% card.with_header { "Card Title" } %>
     #     Card content
+    #     <% card.with_action { link_to "Edit", edit_path } %>
+    #     <% card.with_action { link_to "Delete", "#" } %>
     #   <% end %>
     class Component < Hakumi::BaseComponent
+      # Slots for content
+      renders_one :header
+      renders_one :cover
+      renders_one :body
+      renders_one :extra
+      renders_many :actions
+
       def initialize(
-        title: nil,
-        extra: nil,
         bordered: true,
         hoverable: false,
         loading: false,
         size: :default, # :default, :small
         type: nil, # :inner, nil
-        actions: [],
-        cover: nil,
         href: nil,
         target: nil,
         **html_options
       )
-        @title = title
-        @extra = extra
         @bordered = bordered
         @hoverable = hoverable
         @loading = loading
         @size = size
         @type = type
-        @actions = actions
-        @cover = cover
         @href = href
         @target = target
         @html_options = html_options
@@ -49,6 +50,22 @@ module Hakumi
 
       private
 
+      def wrapper_tag
+        @href.present? ? :a : :div
+      end
+
+      def wrapper_attributes
+        attrs = @html_options.dup
+        attrs[:class] = classes
+
+        if @href.present?
+          attrs[:href] = @href
+          attrs[:target] = @target if @target
+        end
+
+        attrs
+      end
+
       def classes
         class_names(
           "card",
@@ -58,29 +75,19 @@ module Hakumi
             small: @size == :small,
             "type-inner": @type == :inner,
             loading: @loading,
-            "contain-grid": false,
             link: @href.present?
           },
           @html_options[:class]
         )
       end
 
-      def head_classes
-        "hakumi-card-head"
-      end
-
-      def body_classes
-        "hakumi-card-body"
-      end
-
-      def render_title
-        return @title if @title.is_a?(String)
-        @title
+      def render_header?
+        header? || extra?
       end
 
-      def render_extra
-        return @extra if @extra.is_a?(String)
-        @extra
+      # Content resolution: body slot > block content
+      def body_content
+        body? ? body : content
       end
     end
   end

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

@@ -1,21 +1,39 @@
-<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>
+<% checkbox_control = capture do %>
+  <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(:id, :class, :data, :style)
+          ) %>
+      <span class="hakumi-checkbox-inner"></span>
+    </span>
+    <% if @label.present? || content.present? %>
+      <span><%= @label || content %></span>
+    <% end %>
+  </label>
+<% end %>
+
+<% if standalone? %>
+  <%= checkbox_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: @id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <%= checkbox_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

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

@@ -3,6 +3,8 @@
 module Hakumi
   module Checkbox
     class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
       def initialize(
         checked: false,
         disabled: false,
@@ -12,17 +14,25 @@ module Hakumi
         id: nil,
         auto_focus: false,
         label: nil,
+        caption: nil,
+        standalone: true,
+        required: false,
+        errors: [],
         **html_options
       )
         @checked = checked
         @disabled = disabled
         @indeterminate = indeterminate
-        @value = value
+        @value = value || "1"
         @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)
+        @caption = caption
+        @standalone = standalone
+        @required = required
+        @errors = Array(errors)
+        @wrapper_id = html_options.delete(:id) || generate_id("hakumi-checkbox")
         @html_options = html_options
       end
 

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

@@ -12,9 +12,9 @@
           </span>
         <% end %>
         <span class="hakumi-collapse-header-text">
-          <%= item.header || item.key %>
+          <%= item.header_content %>
         </span>
-        <% if item.extra.present? %>
+        <% if item.extra? %>
           <div class="hakumi-collapse-extra">
             <%= item.extra %>
           </div>

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

@@ -87,7 +87,7 @@ module Hakumi
       def stimulus_values
         {
           accordion: @accordion,
-          activeKeys: initial_active_keys,
+          active_keys: initial_active_keys,
           collapsible: (@collapsible&.to_s),
           bordered: @bordered,
           ghost: @ghost

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

@@ -50,6 +50,15 @@ module Hakumi
           }
           merge_attributes(base, @html_options.except(:class))
         end
+
+        # Content resolution for header: header prop > key fallback
+        def header_content
+          @header || @key
+        end
+
+        def extra?
+          @extra.present?
+        end
       end
     end
   end

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

@@ -164,10 +164,6 @@ module Hakumi
           [ { label: "Presets", colors: Array(presets).compact } ]
         end
       end
-
-      def cast_boolean(value)
-        ActiveModel::Type::Boolean.new.cast(value)
-      end
     end
   end
 end

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

@@ -17,26 +17,26 @@
           <div class="hakumi-drawer-header">
             <div class="hakumi-drawer-header-title">
               <% if @closable %>
-                <button type="button" class="hakumi-drawer-close" aria-label="Close" data-action="click->hakumi--drawer#close">
+                <button type="button" class="hakumi-drawer-close" aria-label="Close" data-hakumi-action="close">
                   <span class="hakumi-drawer-close-x">
                     <%= render Hakumi::Icon::Component.new(name: :close) %>
                   </span>
                 </button>
               <% end %>
-              <% if @title.present? %>
-                <div class="hakumi-drawer-title"><%= @title %></div>
+              <% if header? %>
+                <div class="hakumi-drawer-title"><%= header %></div>
               <% end %>
             </div>
-            <% if @extra.present? %>
-              <div class="hakumi-drawer-extra"><%= @extra %></div>
+            <% if extra? %>
+              <div class="hakumi-drawer-extra"><%= extra %></div>
             <% end %>
           </div>
         <% end %>
         <div class="hakumi-drawer-body" data-hakumi--drawer-target="body">
-          <%= content %>
+          <%= body_content %>
         </div>
         <% if render_footer? %>
-          <div class="hakumi-drawer-footer"><%= @footer %></div>
+          <div class="hakumi-drawer-footer"><%= footer %></div>
         <% end %>
       </div>
     </div>

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

@@ -9,21 +9,14 @@ module Hakumi
         large: 736
       }.freeze
 
-      # Extracts locals from controller params for dynamic rendering
-      # @param params [ActionController::Parameters]
-      # @return [Hash] Arguments for initialize
-      def self.extract_controller_locals(params)
-        {
-          title: params[:title].presence || "Drawer",
-          message: params[:message].presence || params[:body].presence || "Generated drawer content.",
-          open: ActiveModel::Type::Boolean.new.cast(params[:open]),
-          placement: (params[:placement].presence || :right).to_sym
-        }
-      end
+      # Slots for content
+      renders_one :header
+      renders_one :body
+      renders_one :footer
+      renders_one :extra
 
       def initialize(
         open: false,
-        title: nil,
         placement: :right,
         size: :default,
         width: nil,
@@ -32,13 +25,10 @@ module Hakumi
         mask: true,
         mask_closable: true,
         keyboard: true,
-        footer: nil,
-        extra: nil,
         destroy_on_close: false,
         **html_attributes
       )
         @open = open
-        @title = title
         @placement = placement
         @size = size
         @width = width
@@ -47,8 +37,6 @@ module Hakumi
         @mask = mask
         @mask_closable = mask_closable
         @keyboard = keyboard
-        @footer = footer
-        @extra = extra
         @destroy_on_close = destroy_on_close
         @html_attributes = html_attributes
 
@@ -91,11 +79,16 @@ module Hakumi
       end
 
       def render_header?
-        @title.present? || @closable || @extra.present?
+        header? || @closable || extra?
       end
 
       def render_footer?
-        @footer.present?
+        footer?
+      end
+
+      # Content resolution: body slot > block content
+      def body_content
+        body? ? body : content
       end
 
       private

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

@@ -115,8 +115,6 @@ module Hakumi
           class: has_affix? ? nil : input_classes,
           disabled: @disabled ? true : nil,
           readonly: @readonly ? true : nil,
-          required: @required ? true : nil,
-          maxlength: @maxlength,
           "aria-invalid": has_error? ? "true" : nil,
           "aria-describedby": describedby_ids,
           data: { action: "input->hakumi--input#handleInput" }

data/app/components/hakumi/input/text_area/component.rb

@@ -106,8 +106,6 @@ module Hakumi
             placeholder: @placeholder,
             disabled: @disabled ? true : nil,
             readonly: @readonly ? true : nil,
-            required: @required ? true : nil,
-            maxlength: @maxlength,
             "aria-invalid": has_error? ? "true" : nil,
             "aria-describedby": describedby_ids,
             data: { action: "input->hakumi--input-textarea#handleInput" }

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

@@ -134,8 +134,8 @@ module Hakumi
             }.compact
           },
           {
-            id: @html_attrs[:wrapper_id],
-            data: @html_attrs[:wrapper_data]
+            id: @html_attrs[:id],
+            data: @html_attrs[:data]
           }.compact
         )
       end
@@ -156,7 +156,6 @@ module Hakumi
             class: input_classes,
             disabled: @disabled ? true : nil,
             readonly: @readonly ? true : nil,
-            required: @required ? true : nil,
             autocomplete: "off",
             role: "spinbutton",
             "aria-invalid": has_error? ? "true" : nil,
@@ -169,7 +168,7 @@ module Hakumi
               hakumi__input_number_target: "input"
             }
           }.compact,
-          @html_attrs.except(:wrapper_class, :wrapper_id, :wrapper_data)
+          @html_attrs.except(:id, :wrapper_class)
         )
       end