hakumi_components 0.1.3.pre

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

@@ -0,0 +1,202 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Autocomplete
+    # Hakumi Autocomplete component
+    # Text input with dropdown suggestions, built on top of Ant Design styles.
+    class Component < Hakumi::BaseComponent
+      SIZES = %i[small middle large].freeze
+      VARIANTS = %i[outlined filled borderless underlined].freeze
+      STATUSES = %i[error warning].freeze
+      FILTER_MODES = %i[contains starts_with].freeze
+
+      # @param name [String, Symbol] input name/id
+      # @param options [Array] list of options or groups
+      #   - "label" (String) -> label & value are the same
+      #   - [label, value]
+      #   - { label:, value: }
+      #   - { label:, options: [...] } for grouped options
+      def initialize(
+        name:,
+        options: [],
+        value: nil,
+        placeholder: nil,
+        size: :middle,
+        variant: :outlined,
+        status: nil,
+        disabled: false,
+        allow_clear: false,
+        clear_icon: :close_circle,
+        input_renderer: nil,
+        case_sensitive: false,
+        filter_mode: :contains,
+        not_found_content: "No options",
+        **html_options
+      )
+        @name = name
+        @options = options
+        @value = value
+        @placeholder = placeholder
+        @size = size
+        @variant = variant
+        @status = status
+        @disabled = disabled
+        @allow_clear = allow_clear
+        @clear_icon = clear_icon
+        @input_renderer = input_renderer
+        @case_sensitive = case_sensitive
+        @filter_mode = filter_mode
+        @not_found_content = not_found_content
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:variant, VARIANTS)
+        validate_inclusion!(:filter_mode, FILTER_MODES)
+        validate_inclusion!(:status, STATUSES) if @status
+      end
+
+      def wrapper_classes
+        class_names(
+          "auto-complete",
+          {
+            @size => (@size != :middle),
+            "status-error": @status == :error,
+            "status-warning": @status == :warning,
+            "varihakumi-outlined": @variant == :outlined,
+            "varihakumi-filled": @variant == :filled,
+            "varihakumi-borderless": @variant == :borderless,
+            "varihakumi-underlined": @variant == :underlined,
+            disabled: @disabled
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--autocomplete",
+            "hakumi--autocomplete-case-sensitive-value": @case_sensitive ? "true" : "false",
+            "hakumi--autocomplete-filter-mode-value": @filter_mode.to_s
+          }
+        }
+
+        extra = @html_options.except(:class)
+        merge_attributes(base_attrs, extra)
+      end
+
+      def input_attributes
+        attrs = {
+          type: "text",
+          name: @name,
+          id: @html_options[:id] || @name,
+          value: @value,
+          placeholder: @placeholder,
+          disabled: (@disabled ? true : nil),
+          autocomplete: "off",
+          spellcheck: "false",
+          aria: {
+            autocomplete: "list",
+            controls: dropdown_id,
+            expanded: "false"
+          },
+          data: {
+            action: "input->hakumi--autocomplete#onInput keydown->hakumi--autocomplete#onKeydown focus->hakumi--autocomplete#open blur->hakumi--autocomplete#onBlur",
+            "hakumi--autocomplete-target": "input"
+          }
+        }
+
+        attrs[:class] = input_classes unless custom_input_renderer?
+        attrs[:aria].compact!
+        attrs
+      end
+
+      def input_classes
+        classes = [ "hakumi-input" ]
+        classes << "hakumi-input-#{@size}" if @size != :middle
+        classes.join(" ")
+      end
+
+      def dropdown_id
+        @dropdown_id ||= "#{@name}_autocomplete_dropdown"
+      end
+
+      def allow_clear?
+        @allow_clear
+      end
+
+      def custom_input_renderer?
+        @input_renderer.respond_to?(:call)
+      end
+
+      def input_renderer
+        @input_renderer
+      end
+
+      def disabled?
+        @disabled
+      end
+
+      def clear_icon
+        @clear_icon
+      end
+
+      def not_found_content
+        @not_found_content
+      end
+
+      def normalized_items
+        @normalized_items ||= begin
+          Array(@options).flat_map do |opt|
+            if opt.is_a?(Hash) && opt[:options]
+              {
+                type: :group,
+                label: opt[:label].to_s,
+                options: normalize_group_options(opt[:options])
+              }
+            else
+              normalize_simple_option(opt)
+            end
+          end
+        end
+      end
+
+      def normalize_group_options(options)
+        Array(options).map { |opt| normalize_simple_option(opt) }.compact
+      end
+
+      def normalize_simple_option(opt)
+        case opt
+        when nil
+          nil
+        when Hash
+          {
+            type: :option,
+            label: opt[:label].to_s,
+            value: (opt[:value] || opt[:label]).to_s
+          }
+        when Array
+          label, value = opt
+          {
+            type: :option,
+            label: label.to_s,
+            value: (value || label).to_s
+          }
+        else
+          {
+            type: :option,
+            label: opt.to_s,
+            value: opt.to_s
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Avatar
+    class Component < Hakumi::BaseComponent
+      SHAPES = [ :circle, :square ].freeze
+      SIZES = [ :small, :default, :large ].freeze
+
+      def initialize(
+        shape: :circle,
+        size: :default,
+        src: nil,
+        icon: nil,
+        alt: nil,
+        **html_options
+      )
+        @shape = shape
+        @size = size
+        @src = src
+        @icon = icon
+        @alt = alt
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def call
+        content_tag(:span, content_wrapper, wrapper_attributes)
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:shape, SHAPES)
+        validate_inclusion!(:size, SIZES) unless @size.is_a?(Integer)
+      end
+
+      def wrapper_classes
+        class_names(
+          "avatar",
+          {
+            @shape => true,
+            lg: @size == :large,
+            sm: @size == :small,
+            icon: @icon.present?,
+            image: @src.present?
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def content_wrapper
+        if @src
+          image_tag(@src, alt: @alt, width: avatar_size, height: avatar_size)
+        elsif @icon
+          # Pass size: nil to allow icon to inherit font-size from avatar
+          render Hakumi::Icon::Component.new(name: @icon, size: nil)
+        else
+          tag.span(content, data: { hakumi__avatar_text_target: "text" })
+        end
+      end
+
+      def avatar_size
+        case @size
+        when :large then 40
+        when :small then 24
+        when Integer then @size
+        else 32
+        end
+      end
+
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes
+        }
+
+        if @size.is_a?(Integer)
+          attrs[:style] = "width: #{@size}px; height: #{@size}px; font-size: #{@size / 2}px;"
+        end
+
+        # Add controller for text avatars
+        unless @src || @icon
+          attrs[:data] ||= {}
+          attrs[:data][:controller] = "hakumi--avatar-text"
+        end
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Badge
+    class Component < Hakumi::BaseComponent
+      def initialize(count: nil, dot: false, overflow_count: 99, status: nil, text: nil, color: nil, show_zero: false, icon: nil, **html_options)
+        @count = count
+        @dot = dot
+        @overflow_count = overflow_count
+        @status = status
+        @text = text
+        @color = color
+        @show_zero = show_zero
+        @icon = icon
+        @html_options = html_options
+      end
+
+      def call
+        # Direct rendering to ensure class is present
+        classes = [ "hakumi-badge", @html_options[:class] ].compact.join(" ")
+
+        if @status || @text
+          classes += " hakumi-badge-status"
+        elsif content.blank?
+          classes += " hakumi-badge-not-a-wrapper"
+        end
+
+        content_tag(:span, class: classes, **@html_options.except(:class)) do
+          safe_join([
+            content,
+            badge_element,
+            status_text_element
+          ].compact)
+        end
+      end
+
+      private
+
+      def badge_element
+        if @status || @text
+          styles = []
+          styles << "background: #{@color}" if @color
+
+          classes = [ "hakumi-badge-status-dot" ]
+          classes << "hakumi-badge-status-#{@status}" if @status
+
+          tag.span(class: classes.join(" "), style: (styles.join(";") if styles.any?))
+        elsif @dot
+          tag.sup(class: "hakumi-badge-dot", style: ("background: #{@color}" if @color))
+        elsif @count || @icon || @show_zero
+          # Show if count is present (and valid) OR icon is present OR show_zero is true
+          should_show = @icon.present? || @show_zero || (@count && (@count.is_a?(String) || @count > 0))
+
+          if should_show
+            classes = [ "hakumi-badge-count" ]
+            classes << "hakumi-badge-custom-component" if @icon
+
+            styles = []
+            styles << "background: #{@color}" if @color && !@icon
+            styles << "color: #{@color}" if @color && @icon
+
+            tag.sup(class: classes.join(" "), title: @count, style: (styles.join("; ") if styles.any?)) do
+              if @icon
+                render Hakumi::Icon::Component.new(name: @icon)
+              else
+                display_count.to_s
+              end
+            end
+          end
+        end
+      end
+
+      def status_text_element
+        return unless @text
+        tag.span(@text, class: "hakumi-badge-status-text")
+      end
+
+      def display_count
+        return @count if @count.is_a?(String)
+        return "#{@overflow_count}+" if @count > @overflow_count
+        @count
+      end
+    end
+  end
+end

data/app/components/hakumi/base_component.rb

@@ -0,0 +1,179 @@
+# frozen_string_literal: true
+
+module Hakumi
+  # Base class for all Hakumi components
+  # Provides shared utilities and helpers
+  class BaseComponent < ViewComponent::Base
+    # Generate class names with the hakumi- prefix
+    # @param base [String] Base class name (e.g., 'btn', 'icon')
+    # @param modifiers [Hash] Hash of modifier keys and their values
+    # @param extras [Array<String>] Additional classes to append
+    # @return [String] Combined class string
+    #
+    # Example:
+    #   class_names('button', { type: :primary, size: :large }, ['custom-class'])
+    #   # => "hakumi-button hakumi-button-primary hakumi-button-large custom-class"
+    def class_names(base, modifiers = {}, extras = [])
+      classes = [ "hakumi-#{base}" ]
+
+      modifiers.each do |key, value|
+        next if value.nil? || value == false
+
+        if value == true
+          classes << "hakumi-#{base}-#{key}"
+        else
+          classes << "hakumi-#{base}-#{key}-#{value}"
+        end
+      end
+
+      classes.concat(Array(extras).compact)
+      classes.join(" ")
+    end
+
+    # Merge HTML attributes with defaults
+    # @param defaults [Hash] Default attributes
+    # @param overrides [Hash] User-provided attributes
+    # @return [Hash] Merged attributes
+    def merge_attributes(defaults = {}, overrides = {})
+      merged = defaults.deep_dup
+
+      # Special handling for class attribute
+      if defaults[:class] && overrides[:class]
+        merged[:class] = [ defaults[:class], overrides[:class] ].join(" ")
+      elsif overrides[:class]
+        merged[:class] = overrides[:class]
+      end
+
+      # Special handling for style attribute
+      if defaults[:style] && overrides[:style]
+        merged[:style] = [ defaults[:style].to_s.chomp(";"), overrides[:style] ].join("; ")
+      elsif overrides[:style]
+        merged[:style] = overrides[:style]
+      end
+
+      # Merge data attributes
+      if overrides[:data]
+        merged[:data] = (defaults[:data] || {}).merge(overrides[:data])
+      elsif defaults[:data]
+        merged[:data] = defaults[:data]
+      end
+
+      # Merge other attributes
+      merged.merge!(overrides.except(:class, :data, :style))
+
+      ensure_dom_id!(merged)
+
+      merged
+    end
+
+    # Internal helper to check presence without clobbering ActiveSupport#present?
+    # @param value [Object] Value to check
+    # @return [Boolean]
+    def value_present?(value)
+      !value.nil? && value != false && (value.respond_to?(:empty?) ? !value.empty? : true)
+    end
+
+    # Validate required props
+    # @param props [Array<Symbol>] List of required prop names
+    # @raise [ArgumentError] if any prop is missing
+    def validate_required!(*props)
+      props.each do |prop|
+        value = instance_variable_get("@#{prop}")
+        raise ArgumentError, "#{prop} is required" unless value_present?(value)
+      end
+    end
+
+    # Validate prop is one of allowed values
+    # @param prop [Symbol] Prop name
+    # @param allowed [Array] Allowed values
+    # @raise [ArgumentError] if value is not allowed
+    def validate_inclusion!(prop, allowed)
+      value = instance_variable_get("@#{prop}")
+      return if value.nil?
+      return if allowed.include?(value)
+
+      raise ArgumentError, "#{prop} must be one of #{allowed.inspect}, got #{value.inspect}"
+    end
+
+    def ensure_dom_id!(attrs)
+      controllers = attrs.dig(:data, :controller)
+      return unless value_present?(controllers)
+      return if value_present?(attrs[:id])
+
+      attrs[:id] = generate_id("hakumi-component")
+    end
+
+    # Generate a unique ID with a prefix
+    # @param prefix [String] Prefix for the ID
+    # @param length [Integer] Length of the random hex (default: 4)
+    # @return [String] Generated ID
+    #
+    # Example:
+    #   generate_id("radio") # => "radio_a3f8"
+    #   generate_id("select", 6) # => "select_a3f8b2"
+    def generate_id(prefix, length: 4)
+      "#{prefix}_#{SecureRandom.hex(length)}"
+    end
+
+    # Render a value that can be a String, ViewComponent, or other object
+    # @param value [Object] Value to render
+    # @return [String, nil] Rendered value
+    def render_value(value)
+      return nil unless value.present?
+      return value if value.is_a?(String) || value.is_a?(ActiveSupport::SafeBuffer)
+      return render(value) if value.respond_to?(:render_in)
+
+      value
+    end
+
+    # Convert size string/symbol to integer pixels
+    # Useful for components that accept both symbolic (:small, :large) and numeric sizes
+    # @param size [Symbol, Integer] Size value
+    # @param mapping [Hash] Size to pixel mapping
+    # @return [Integer] Size in pixels
+    def size_to_pixels(size, mapping = {})
+      return size if size.is_a?(Integer)
+      mapping[size] || size
+    end
+
+    # Convert dimension value to CSS string
+    # @param value [Numeric, String, nil] Dimension value
+    # @return [String, nil] CSS dimension string
+    #
+    # Examples:
+    #   dimension_to_css(100) # => "100px"
+    #   dimension_to_css("50%") # => "50%"
+    #   dimension_to_css("2rem") # => "2rem"
+    #   dimension_to_css(nil) # => nil
+    def dimension_to_css(value)
+      return nil if value.nil?
+      return value if value.is_a?(String) && value.strip.present?
+      return "#{value}px" if value.is_a?(Numeric)
+
+      string = value.to_s.strip
+      string.empty? ? nil : string
+    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
+    #
+    # Example with array:
+    #   build_inline_style(["color: red", "font-size: 14px"]) # => "color: red; font-size: 14px"
+    #
+    # Example with hash:
+    #   build_inline_style(color: "red", "font-size": "14px") # => "color: red; font-size: 14px"
+    def build_inline_style(styles)
+      return nil if styles.blank?
+
+      style_array = if styles.is_a?(Hash)
+        styles.compact.map { |key, value| "#{key}: #{value}" }
+      else
+        Array(styles).compact
+      end
+
+      return nil if style_array.empty?
+      style_array.join("; ")
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<nav <%= tag.attributes(wrapper_attributes) %>>
+  <ol class="hakumi-breadcrumb-list">
+    <% items.each_with_index do |item, index| %>
+      <li class="hakumi-breadcrumb-item">
+        <%= item %>
+        <% unless index == items.size - 1 %>
+          <span class="hakumi-breadcrumb-separator"><%= separator %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Breadcrumb
+    class Component < Hakumi::BaseComponent
+      renders_many :items, ->(title: nil, href: nil, target: nil, **options, &block) do
+        Hakumi::Breadcrumb::Item::Component.new(title: title, href: href, target: target, **options, &block)
+      end
+
+      def initialize(separator: "/", **html_options)
+        @separator = separator
+        @html_options = html_options
+      end
+
+      attr_reader :separator
+
+      def breadcrumb_classes
+        "hakumi-breadcrumb"
+      end
+
+      def wrapper_attributes
+        base_attrs = { class: breadcrumb_classes }
+        merge_attributes(base_attrs, @html_options)
+      end
+    end
+  end
+end

data/app/components/hakumi/breadcrumb/item/component.html.erb

@@ -0,0 +1,17 @@
+<% if menu? %>
+  <%= render Hakumi::Dropdown::Component.new do |dropdown| %>
+    <% dropdown.with_trigger do %>
+      <span class="hakumi-breadcrumb-link hakumi-breadcrumb-link-dropdown">
+        <%= display_title %>
+        <%= render Hakumi::Icon::Component.new(name: :down, size: 10) %>
+      </span>
+    <% end %>
+    <% menu.each do |item| %>
+      <% dropdown.with_item(key: item[:key] || item[:title], label: item[:title], href: item[:href], target: item[:target]) %>
+    <% end %>
+  <% end %>
+<% elsif link? %>
+  <a class="<%= item_classes %>" href="<%= href %>"<% if target.present? %> target="<%= target %>"<% end %>><%= display_title %></a>
+<% else %>
+  <span class="<%= item_classes %>"><%= display_title %></span>
+<% end %>

data/app/components/hakumi/breadcrumb/item/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Breadcrumb
+    module Item
+      class Component < Hakumi::BaseComponent
+        def initialize(title: nil, href: nil, target: nil, menu: nil, **html_options)
+          @title = title
+          @href = href
+          @target = target
+          @menu = menu
+          @html_options = html_options
+        end
+
+        attr_reader :title, :href, :target, :menu
+
+        def item_classes
+          "hakumi-breadcrumb-link"
+        end
+
+        def link?
+          href.present?
+        end
+
+        def menu?
+          menu.present? && menu.is_a?(Array) && menu.any?
+        end
+
+        def display_title
+          content.presence || title
+        end
+      end
+    end
+  end
+end