hakumi_components 0.1.16.pre → 0.1.17.pre

data/app/form_builders/hakumi/form_builder.rb

@@ -49,18 +49,8 @@ module Hakumi
     # @param options [Hash] Options for the input
     # @return [String] Rendered HTML
     def number_field(method, **options)
-      options[:type] = :number
       enhance_options_with_introspection!(method, options)
-
-      # Apply numericality constraints
-      if @object
-        constraints = HakumiComponents::Rails::ValidationIntrospection.numericality_constraints(@object, method)
-        options[:min] ||= constraints[:min] if constraints[:min]
-        options[:max] ||= constraints[:max] if constraints[:max]
-        options[:step] ||= constraints[:step] if constraints[:step]
-      end
-
-      render_form_field(Hakumi::Input::Component, method, **options)
+      render_form_field(Hakumi::InputNumber::Component, method, **options)
     end
 
     # Renders a Hakumi select field
@@ -73,20 +63,11 @@ module Hakumi
       choices ||= [] # steep:ignore UnannotatedEmptyCollection
       enhance_options_with_introspection!(method, options)
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = options.delete(:value) || object_value(method)
-      errors = object_errors(method)
-
-      @template.render(Hakumi::Select::Component.new(
-        name: field_name,
-        options: choices,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(
+        Hakumi::Select::Component,
+        method,
+        **options.merge(options: choices)
+      )
     end
 
     # Renders a Hakumi tree select field
@@ -99,20 +80,11 @@ module Hakumi
       choices ||= [] # steep:ignore UnannotatedEmptyCollection
       enhance_options_with_introspection!(method, options)
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = options.delete(:value) || object_value(method)
-      errors = object_errors(method)
-
-      @template.render(Hakumi::TreeSelect::Component.new(
-        name: field_name,
-        options: choices,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(
+        Hakumi::TreeSelect::Component,
+        method,
+        **options.merge(options: choices)
+      )
     end
 
     # Renders a Hakumi radio button
@@ -124,25 +96,24 @@ module Hakumi
     def radio_button(method, tag_value, **options)
       enhance_options_with_introspection!(method, options)
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = options[:id] || "#{@object_name}_#{method}_#{tag_value}".parameterize.underscore
-
-      # Determine if checked
-      current_value = object_value(method)
-      checked = current_value.to_s == tag_value.to_s
+      # Use tag_value as ID suffix unless explicitly provided
+      id_suffix = options[:id] ? nil : tag_value.to_s
+      config = field_configuration(method, options, id_suffix: id_suffix)
 
-      # Get validation errors
-      errors = object_errors(method)
+      # Override with explicit ID if provided
+      config[:id] = options.delete(:id) if options[:id]
 
-      @template.render(Hakumi::Radio::Component.new(
-        name: field_name,
-        value: tag_value,
-        checked: checked,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      # Determine if checked
+      checked = config[:value].to_s == tag_value.to_s
+      config[:value] = tag_value
+      config[:checked] = checked
+
+      render_form_field(
+        Hakumi::Radio::Component,
+        method,
+        config_overrides: config,
+        **options
+      )
     end
 
     # Renders a Hakumi radio group from a collection
@@ -156,27 +127,19 @@ module Hakumi
     def collection_radio_buttons(method, collection, value_method, text_method, **options)
       enhance_options_with_introspection!(method, options)
 
-      # Convert collection to radio options format
+      # Convert collection to radio options format (Hash with :label and :value)
       radio_options = collection.map do |item|
-        value = item.send(value_method)
-        label = item.send(text_method)
-        [ label, value ]
+        {
+          label: item.send(text_method),
+          value: item.send(value_method)
+        }
       end
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = options.delete(:value) || object_value(method)
-      errors = object_errors(method)
-
-      @template.render(Hakumi::Radio::Group::Component.new(
-        name: field_name,
-        options: radio_options,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(
+        Hakumi::Radio::Group::Component,
+        method,
+        **options.merge(options: radio_options)
+      )
     end
 
     # Renders a Hakumi switch (checkbox) field
@@ -187,22 +150,16 @@ module Hakumi
     def check_box(method, **options)
       enhance_options_with_introspection!(method, options)
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
+      # Convert truthy/falsy value to boolean for checked attribute
       value = object_value(method)
-      errors = object_errors(method)
-
-      # Convert truthy/falsy values to boolean
       checked = value ? true : false
 
-      @template.render(Hakumi::Switch::Component.new(
-        name: field_name,
-        checked: checked,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(
+        Hakumi::Switch::Component,
+        method,
+        config_overrides: { checked: checked },
+        **options
+      )
     end
 
     # Renders a Hakumi rate (rating) field
@@ -212,20 +169,7 @@ module Hakumi
     # @return [String] Rendered HTML
     def rate_field(method, **options)
       enhance_options_with_introspection!(method, options)
-
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = object_value(method)
-      errors = object_errors(method)
-
-      @template.render(Hakumi::Rate::Component.new(
-        name: field_name,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(Hakumi::Rate::Component, method, **options)
     end
 
     # Renders a Hakumi slider field
@@ -236,19 +180,14 @@ module Hakumi
     def slider_field(method, **options)
       enhance_options_with_introspection!(method, options)
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = object_value(method)
-      errors = object_errors(method)
+      config = field_configuration(method, options)
 
-      @template.render(Hakumi::Slider::Component.new(
-        name: field_name,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(wrapper_id: field_id)
-      ))
+      render_form_field(
+        Hakumi::Slider::Component,
+        method,
+        config_overrides: config,
+        **options
+      )
     end
 
     # Renders a Hakumi date picker field
@@ -258,20 +197,7 @@ module Hakumi
     # @return [String] Rendered HTML
     def date_picker(method, **options)
       enhance_options_with_introspection!(method, options)
-
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = options.delete(:value) || object_value(method)
-      errors = object_errors(method)
-
-      @template.render(Hakumi::DatePicker::Component.new(
-        name: field_name,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+      render_form_field(Hakumi::DatePicker::Component, method, **options)
     end
 
     # Renders a Hakumi mentions field (textarea with @ mention suggestions)
@@ -286,23 +212,120 @@ module Hakumi
     def mentions_field(method, **options)
       enhance_options_with_introspection!(method, options)
 
-      # Extract mentions-specific options
+      # Extract mentions-specific options before field configuration
       mention_options = options.delete(:options) || []
 
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-      value = options.delete(:value) || object_value(method)
-      errors = object_errors(method)
+      render_form_field(
+        Hakumi::Mentions::Component,
+        method,
+        **options.merge(options: mention_options)
+      )
+    end
 
-      @template.render(Hakumi::Mentions::Component.new(
-        name: field_name,
-        options: mention_options,
-        value: value,
-        errors: errors,
-        standalone: false,  # Always render with form-item wrapper in FormBuilder
-        **options.merge(id: field_id)
-      ))
+    # Renders a Hakumi autocomplete field (input with dropdown suggestions)
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param choices [Array] Array of autocomplete options
+    # @param options [Hash] Options for the autocomplete component
+    # @return [String] Rendered HTML
+    def autocomplete_field(method, choices = nil, **options)
+      choices ||= [] # steep:ignore UnannotatedEmptyCollection
+      enhance_options_with_introspection!(method, options)
+
+      render_form_field(
+        Hakumi::Autocomplete::Component,
+        method,
+        **options.merge(options: choices)
+      )
+    end
+
+    # Renders a Hakumi cascader field (cascading dropdown selector)
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param choices [Array] Array of cascader options with children
+    # @param options [Hash] Options for the cascader component
+    # @return [String] Rendered HTML
+    def cascader_field(method, choices = nil, **options)
+      choices ||= [] # steep:ignore UnannotatedEmptyCollection
+      enhance_options_with_introspection!(method, options)
+
+      render_form_field(
+        Hakumi::Cascader::Component,
+        method,
+        **options.merge(options: choices)
+      )
+    end
+
+    # Renders a Hakumi checkbox field (traditional checkbox, different from switch)
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param options [Hash] Options for the checkbox
+    # @return [String] Rendered HTML
+    def checkbox_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+
+      # Convert truthy/falsy value to boolean for checked attribute
+      value = object_value(method)
+      checked = value ? true : false
+
+      render_form_field(
+        Hakumi::Checkbox::Component,
+        method,
+        config_overrides: { checked: checked },
+        **options
+      )
+    end
+
+    # Renders a Hakumi color picker field
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param options [Hash] Options for the color picker component
+    # @return [String] Rendered HTML
+    def color_picker_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+      render_form_field(Hakumi::ColorPicker::Component, method, **options)
+    end
+
+    # Renders a Hakumi time picker field
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param options [Hash] Options for the time picker component
+    # @return [String] Rendered HTML
+    def time_picker_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+      render_form_field(Hakumi::TimePicker::Component, method, **options)
+    end
+
+    # Renders a Hakumi transfer field (dual list box)
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param data_source [Array] Array of items to transfer
+    # @param options [Hash] Options for the transfer component
+    # @return [String] Rendered HTML
+    def transfer_field(method, data_source = nil, **options)
+      data_source ||= [] # steep:ignore UnannotatedEmptyCollection
+      enhance_options_with_introspection!(method, options)
+
+      render_form_field(
+        Hakumi::Transfer::Component,
+        method,
+        **options.merge(data_source: data_source)
+      )
+    end
+
+    # Renders a Hakumi upload field (file upload)
+    #
+    # @param method [Symbol] Name of the attribute
+    # @param options [Hash] Options for the upload component
+    # @option options [String] :action Upload URL (required)
+    # @return [String] Rendered HTML
+    def upload_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+
+      # Upload requires action parameter
+      raise ArgumentError, "action parameter is required for upload_field" unless options[:action]
+
+      render_form_field(Hakumi::Upload::Component, method, **options)
     end
 
     # Renders a Hakumi submit button
@@ -333,6 +356,29 @@ module Hakumi
 
     private
 
+    # Gets standard field configuration (name, id, value, errors)
+    #
+    # @param method [Symbol] Attribute name
+    # @param options [Hash] Options hash (modifies in place by deleting :value)
+    # @param id_suffix [String, nil] Optional suffix for field_id (for radio buttons)
+    # @return [Hash] Field configuration with :name, :id, :value, :errors
+    def field_configuration(method, options, id_suffix: nil)
+      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
+
+      base_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
+      field_id = id_suffix ? "#{base_id}_#{id_suffix}".parameterize.underscore : base_id
+
+      value = options.delete(:value) || object_value(method)
+      errors = object_errors(method)
+
+      {
+        name: field_name,
+        id: field_id,
+        value: value,
+        errors: errors
+      }
+    end
+
     # Enhances options hash with automatic detection from Rails validations and I18n
     #
     # @param method [Symbol] Attribute name
@@ -343,42 +389,50 @@ module Hakumi
 
       # Auto-detect label from I18n (if not provided)
       if options[:label].nil?
-        detected_label = HakumiComponents::Rails::AttributeIntrospection.human_attribute_name(@object, method)
+        detected_label = Hakumi::Rails::AttributeIntrospection.human_attribute_name(@object, method)
         options[:label] = detected_label if detected_label
       end
 
-      # Auto-detect required from presence validation (if not provided)
+      # Auto-detect required for UI purposes (asterisk display) - NOT for HTML5 validation
       if options[:required].nil?
-        options[:required] = HakumiComponents::Rails::ValidationIntrospection.required?(@object, method)
-      end
-
-      # Auto-detect maxlength from length validation (if not provided)
-      if options[:maxlength].nil?
-        detected_maxlength = HakumiComponents::Rails::ValidationIntrospection.maxlength(@object, method)
-        options[:maxlength] = detected_maxlength if detected_maxlength
+        options[:required] = Hakumi::Rails::ValidationIntrospection.required?(@object, method)
       end
 
       # Auto-detect placeholder from I18n (if not provided)
       if options[:placeholder].nil?
-        detected_placeholder = HakumiComponents::Rails::AttributeIntrospection.placeholder(@object, method)
+        detected_placeholder = Hakumi::Rails::AttributeIntrospection.placeholder(@object, method)
         options[:placeholder] = detected_placeholder if detected_placeholder
       end
 
       # Auto-detect caption (hint) from I18n (if not provided)
       if options[:caption].nil?
-        detected_hint = HakumiComponents::Rails::AttributeIntrospection.hint(@object, method)
+        detected_hint = Hakumi::Rails::AttributeIntrospection.hint(@object, method)
         options[:caption] = detected_hint if detected_hint
       end
 
+      # Auto-generate frontend validation rules from Rails validations
+      # If manual rules are provided, merge them with auto-detected rules
+      # Manual rules take priority over auto-detected ones for the same validation type
+      detected_rules = Hakumi::Rails::ValidationMapper.to_frontend_rules(@object, method)
+      manual_rules = options[:rules]
+
+      if manual_rules.nil?
+        options[:rules] = detected_rules unless detected_rules.empty?
+      elsif !detected_rules.empty?
+        # Merge manual and auto-detected rules, with manual rules taking priority
+        options[:rules] = Hakumi::Rails::ValidationMapper.merge_rules(manual_rules, detected_rules)
+      end
+      # If manual_rules is present but detected_rules is empty, keep manual_rules as-is
+
       # Auto-detect input type based on attribute name and validations (if not provided)
       if options[:type].nil?
-        if HakumiComponents::Rails::ValidationIntrospection.email_field?(@object, method)
+        if Hakumi::Rails::ValidationIntrospection.email_field?(@object, method)
           options[:type] = :email
-        elsif HakumiComponents::Rails::ValidationIntrospection.url_field?(@object, method)
+        elsif Hakumi::Rails::ValidationIntrospection.url_field?(@object, method)
           options[:type] = :url
         else
           # Fallback to column type
-          detected_type = HakumiComponents::Rails::AttributeIntrospection.input_type_from_column(@object, method)
+          detected_type = Hakumi::Rails::AttributeIntrospection.input_type_from_column(@object, method)
           options[:type] = detected_type if detected_type && detected_type != :text
         end
       end
@@ -391,29 +445,17 @@ module Hakumi
     # @param component_class [Class] Component class to render
     # @param method [Symbol] Name of the attribute
     # @param options [Hash] Options for the component
+    # @param config_overrides [Hash] Override field configuration (for special cases)
     # @return [String] Rendered HTML
-    def render_form_field(component_class, method, **options)
-      # Get field configuration
-      field_name = @object_name ? "#{@object_name}[#{method}]" : method.to_s
-      field_id = @object_name ? "#{@object_name}_#{method}" : method.to_s
-
-      # Get current value
-      value = options.delete(:value) || object_value(method)
-
-      # Get validation errors (use full_messages_for for better error messages)
-      errors = object_errors(method)
+    def render_form_field(component_class, method, config_overrides: {}, **options)
+      config = field_configuration(method, options)
+      config.merge!(config_overrides)
 
-      # Merge configuration
-      html_options = options.merge(
-        id: field_id,
-        name: field_name,
-        value: value,
-        errors: errors,
-        standalone: false  # Always render with form-item wrapper in FormBuilder
-      )
+      # Merge all options with standalone: false
+      component_options = config.merge(options).merge(standalone: false)
 
-      # Render the component
-      @template.render(component_class.new(**html_options))
+      # Render the component with merged configuration
+      @template.render(component_class.new(**component_options))
     end
 
     # Gets the current value of an attribute from the object

data/app/helpers/hakumi/form_helper.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module FormHelper
+    # Creates a form that uses Hakumi components.
+    # This is a wrapper around Rails' form_with that automatically sets the Hakumi::FormBuilder.
+    #
+    # @example Basic usage
+    #   <%= hakumi_form_with(model: @user) do |f| %>
+    #     <%= f.text_field :name, label: "Name" %>
+    #     <%= f.submit "Save" %>
+    #   <% end %>
+    #
+    # @example With URL
+    #   <%= hakumi_form_with(url: "/users", method: :post) do |f| %>
+    #     <%= f.text_field :email, label: "Email" %>
+    #   <% end %>
+    #
+    # @param options [Hash] Options to pass to form_with
+    # @option options [Object] :model Model object for the form
+    # @option options [String] :url URL to submit the form to
+    # @option options [Symbol] :method HTTP method (:get, :post, :patch, :delete)
+    # @option options [Class] :builder Custom form builder (defaults to Hakumi::FormBuilder)
+    # @option options [Symbol] :layout Form layout (:horizontal, :vertical, :inline)
+    # @return [String] HTML form
+    def hakumi_form_with(**options, &block)
+      options[:builder] ||= Hakumi::FormBuilder
+
+      layout = options.delete(:layout)
+      if layout
+        html_options = options[:html] || {}
+        html_options[:class] = class_names(html_options[:class], "hakumi-form", "hakumi-form-#{layout}")
+        options[:html] = html_options
+      end
+
+      form_with(**options, &block)
+    end
+  end
+end

data/app/javascript/hakumi_components/controllers/base/registry_controller.js

@@ -3,6 +3,14 @@ import { ensureId } from "../../core/dom.js"
 import { register, unregister } from "../../core/registry.js"
 
 export default class RegistryController extends Controller {
+  /**
+   * Declarative actions supported by this component.
+   * Each component must explicitly declare which actions it supports.
+   * Actions map to methods: 'close' -> close(), 'confirm' -> handleConfirm()
+   * @type {string[]}
+   */
+  static declarativeActions = []
+
   connect() {
     const isComponentController = this.isHakumiController()
 
@@ -21,6 +29,8 @@ export default class RegistryController extends Controller {
 
     if (typeof this.setup === "function") this.setup()
 
+    this.setupDeclarativeActions()
+
     this.validateContract()
     register(this.element.id, this.element.hakumiComponent.api)
 
@@ -28,12 +38,17 @@ export default class RegistryController extends Controller {
     if (this.element.hakumiComponent.singleton && typeof window !== "undefined" && window.HakumiComponents) {
       window.HakumiComponents[this.element.hakumiComponent.name] = this.element.hakumiComponent.api
     }
+
+    // Mark component as ready for testing
+    this.element.dataset.hakumiReady = "true"
   }
 
 
   disconnect() {
     if (typeof this.teardown === "function") this.teardown()
 
+    this.teardownDeclarativeActions()
+
     const c = this.element?.hakumiComponent
     if (c?.singleton && typeof window !== "undefined" && window.HakumiComponents) {
       if (window.HakumiComponents[c.name] === c.api) {
@@ -84,18 +99,83 @@ export default class RegistryController extends Controller {
     return String(this.identifier || "").startsWith("hakumi--")
   }
 
-  
+
   setup() {
 
   }
 
-  
+
   teardown() {
 
   }
 
-  
+
   registerApi() {
 
   }
+
+  /**
+   * Sets up declarative action handling for data-hakumi-action attributes.
+   * Listens for clicks on elements with data-hakumi-action and routes to
+   * the appropriate handler method (close, open, toggle, confirm, cancel).
+   */
+  setupDeclarativeActions() {
+    this.boundHandleDeclarativeAction = this.handleDeclarativeAction.bind(this)
+    this.element.addEventListener("click", this.boundHandleDeclarativeAction)
+  }
+
+  /**
+   * Cleans up declarative action event listener.
+   */
+  teardownDeclarativeActions() {
+    if (this.boundHandleDeclarativeAction) {
+      this.element.removeEventListener("click", this.boundHandleDeclarativeAction)
+      this.boundHandleDeclarativeAction = null
+    }
+  }
+
+  /**
+   * Handles clicks on elements with data-hakumi-action attribute.
+   * Routes to the appropriate method based on the action value.
+   * Supported actions: close, open, toggle, confirm, cancel
+   * @param {Event} event - The click event
+   */
+  handleDeclarativeAction(event) {
+    const actionElement = event.target.closest("[data-hakumi-action]")
+    if (!actionElement || !this.element.contains(actionElement)) return
+
+    const action = actionElement.dataset.hakumiAction
+    const actionMethod = this.getActionMethod(action)
+
+    if (typeof actionMethod === "function") {
+      event.preventDefault()
+      actionMethod.call(this, event, actionElement)
+    }
+  }
+
+  /**
+   * Returns the method to call for a given action name.
+   * Only returns methods for actions declared in static declarativeActions.
+   * @param {string} action - The action name
+   * @returns {Function|undefined} The method to call
+   */
+  getActionMethod(action) {
+    const allowedActions = this.constructor.declarativeActions || []
+    if (!allowedActions.includes(action)) {
+      return undefined
+    }
+
+    // Try direct method name: close, open, toggle
+    if (typeof this[action] === "function") {
+      return this[action]
+    }
+
+    // Try handleX pattern: confirm -> handleConfirm, cancel -> handleCancel
+    const handlerName = `handle${action.charAt(0).toUpperCase()}${action.slice(1)}`
+    if (typeof this[handlerName] === "function") {
+      return this[handlerName]
+    }
+
+    return undefined
+  }
 }