hakumi_components 0.1.3.pre

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

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Rate
+    # Hakumi Rate component
+    # Supports half selection, clearing, and form integration.
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      def initialize(
+        name: nil,
+        label: nil,
+        caption: nil,
+        value: nil,
+        default_value: 0,
+        count: 5,
+        allow_half: false,
+        allow_clear: false,
+        disabled: false,
+        readonly: false,
+        tooltips: [],
+        character: nil,
+        required: false,
+        standalone: true,
+        errors: [],
+        **html_options
+      )
+        @name = name || generate_id("rate")
+        @label = label
+        @caption = caption
+        @value = value
+        @default_value = default_value
+        @count = count
+        @allow_half = allow_half
+        @allow_clear = allow_clear
+        @disabled = disabled
+        @readonly = readonly
+        @tooltips = Array(tooltips)
+        @character = character
+        @required = required
+        @standalone = standalone
+        @errors = Array(errors)
+        @html_options = html_options
+      end
+
+      def current_value
+        base_value = @value.nil? ? @default_value : @value
+        base_value.to_f
+      end
+
+      def rate_classes
+        class_names(
+          "rate",
+          {
+            disabled: @disabled,
+            readonly: @readonly,
+            "allow-clear": @allow_clear,
+            "has-value": current_value.positive?
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def rate_wrapper_attributes
+        base_attrs = {
+          class: rate_classes,
+          role: "slider",
+          "aria-valuenow": current_value,
+          "aria-valuemin": @allow_clear ? 0 : (@allow_half ? 0.5 : 1),
+          "aria-valuemax": @count,
+          "aria-label": @label || "Rating",
+          "aria-readonly": @readonly ? "true" : nil,
+          "aria-disabled": @disabled ? "true" : nil,
+          data: {
+            controller: "hakumi--rate",
+            hakumi__rate_count_value: @count,
+            hakumi__rate_allow_half_value: @allow_half,
+            hakumi__rate_allow_clear_value: @allow_clear,
+            hakumi__rate_disabled_value: @disabled,
+            hakumi__rate_readonly_value: @readonly,
+            hakumi__rate_value_value: current_value
+          }
+        }
+
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def star_state(index)
+        value = current_value
+        return :full if value >= index + 1
+        return :half if @allow_half && value > index && value < index + 1
+
+        :zero
+      end
+
+      def star_classes(state)
+        class_names(
+          "rate-star",
+          {
+            full: state == :full,
+            half: state == :half,
+            zero: state == :zero
+          }
+        )
+      end
+
+      def tooltip_for(index)
+        @tooltips[index]
+      end
+
+      def character_content
+        render_value(@character || "★")
+      end
+
+      def input_attributes
+        {
+          type: "hidden",
+          name: @name,
+          id: input_id,
+          value: current_value,
+          disabled: @disabled ? true : nil,
+          required: @required ? true : nil,
+          "aria-invalid": has_error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          data: {
+            hakumi__rate_target: "input"
+          }
+        }.compact
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% if icon_present? %>
+    <div class="hakumi-result-icon">
+      <%= icon_content %>
+    </div>
+  <% end %>
+
+  <% if title_present? %>
+    <div class="hakumi-result-title"><%= title_content %></div>
+  <% end %>
+
+  <% if sub_title_present? %>
+    <div class="hakumi-result-subtitle"><%= sub_title_content %></div>
+  <% end %>
+
+  <% if content_present? %>
+    <div class="hakumi-result-content"><%= content %></div>
+  <% end %>
+
+  <% if extra_present? %>
+    <div class="hakumi-result-extra"><%= extra_content %></div>
+  <% end %>
+</div>

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

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Result
+    class Component < Hakumi::BaseComponent
+      STATUSES = %w[success info warning error].freeze
+
+      DEFAULT_TITLES = {
+        "success" => "Success",
+        "info" => "Information",
+        "warning" => "Warning",
+        "error" => "Error"
+      }.freeze
+
+      DEFAULT_ICON_NAME = "result_success"
+      STATUS_ICON_MAP = {
+        "success" => { name: "check-circle", theme: :filled, color: "var(--color-success)" },
+        "info" => { name: "info-circle", theme: :filled, color: "var(--color-primary)" },
+        "warning" => { name: "exclamation-circle", theme: :filled, color: "var(--color-warning)" },
+        "error" => { name: "close-circle", theme: :filled, color: "var(--color-error)" }
+      }.freeze
+      STATUS_ICON_SIZE = 72
+
+      def self.extract_controller_locals(params)
+        {
+          status: params[:status],
+          title: params[:title],
+          sub_title: params[:sub_title],
+          extra: params[:extra]
+        }
+      end
+
+      def initialize(status: :info, title: nil, sub_title: nil, icon: nil, extra: nil, **html_options)
+        @status = (status || :info).to_s
+        @title = title || DEFAULT_TITLES[@status]
+        @sub_title = sub_title
+        @icon = icon
+        @extra = extra
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        merge_attributes(
+          {
+            class: wrapper_classes,
+            role: "status",
+            "aria-live": "polite"
+          },
+          @html_options.except(:class)
+        )
+      end
+
+      def icon_present?
+        @icon != false
+      end
+
+      def icon_content
+        return nil unless icon_present?
+
+        render_value(@icon || status_icon_component || default_icon)
+      end
+
+      def title_content
+        render_value(@title)
+      end
+
+      def sub_title_content
+        render_value(@sub_title)
+      end
+
+      def extra_content
+        render_value(@extra)
+      end
+
+      def content_present?
+        content.present?
+      end
+
+      def extra_present?
+        @extra.present?
+      end
+
+      def title_present?
+        @title.present?
+      end
+
+      def sub_title_present?
+        @sub_title.present?
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:status, STATUSES)
+      end
+
+      def wrapper_classes
+        class_names(
+          "result",
+          { @status => true },
+          [ @html_options[:class] ]
+        )
+      end
+
+
+      def status_icon_component
+        config = STATUS_ICON_MAP[@status]
+        return unless config
+
+        Hakumi::Icon::Component.new(
+          name: config[:name],
+          theme: config[:theme],
+          size: STATUS_ICON_SIZE,
+          color: config[:color]
+        )
+      end
+
+      def default_icon
+        Hakumi::Illustrations::Loader.load(DEFAULT_ICON_NAME)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <span class="hakumi-segmented-track" data-hakumi--segmented-target="track"></span>
+  <% normalized_options.each_with_index do |option, index| %>
+    <%= tag.label(class: option_classes(option), data: option_data_attributes(option)) do %>
+      <%= radio_button_tag(
+            @name,
+            option[:value],
+            option_selected?(option),
+            **option_input_attributes(option, index)
+          ) %>
+      <span class="hakumi-segmented-item-label">
+        <%= safe_join([option_icon(option), option_label(option)].compact) %>
+      </span>
+    <% end %>
+  <% end %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,273 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Segmented
+    class Component < Hakumi::BaseComponent
+      SIZES = [ :small, :middle, :large ].freeze
+
+      def self.extract_controller_locals(params)
+        options = params[:options]
+        options = params[:options_json] if options.nil?
+        options = parse_options_param(options)
+
+        {
+          options: options,
+          value: params[:value],
+          default_value: params[:default_value],
+          disabled: truthy_param?(params[:disabled]),
+          block: truthy_param?(params[:block]),
+          vertical: truthy_param?(params[:vertical]),
+          round: truthy_param?(params[:round]),
+          name: params[:name],
+          size: params[:size],
+          aria_label: params[:aria_label]
+        }.compact
+      end
+
+      def initialize(
+        options: [],
+        value: nil,
+        default_value: nil,
+        disabled: false,
+        block: false,
+        vertical: false,
+        round: false,
+        name: nil,
+        size: :middle,
+        aria_label: nil,
+        **html_options
+      )
+        @options = normalize_options(options)
+        @value = normalize_value(value, default_value)
+        @value = @options.first[:value]&.to_s if @value.nil? && @options.any?
+        @disabled = cast_boolean(disabled)
+        @block = cast_boolean(block)
+        @vertical = cast_boolean(vertical)
+        @round = cast_boolean(round)
+        @name = normalize_string(name) || generate_id("segmented")
+        @size = normalize_size(size) || :middle
+        @aria_label = normalize_string(aria_label)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes,
+          role: "radiogroup",
+          "aria-disabled": @disabled ? "true" : nil,
+          "aria-orientation": @vertical ? "vertical" : nil,
+          "aria-label": @aria_label,
+          data: data_attributes
+        }
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+
+      def normalized_options
+        @options
+      end
+
+      def option_classes(option)
+        class_names(
+          "segmented-item",
+          {
+            selected: option_selected?(option),
+            disabled: option_disabled?(option)
+          },
+          [
+            option[:class_name],
+            ("hakumi-segmented-item-icon-only" if icon_only_option?(option))
+          ]
+        )
+      end
+
+      def option_data_attributes(option)
+        {
+          "hakumi--segmented-target": "item",
+          value: option[:value].to_s,
+          label: option[:label].is_a?(String) ? option[:label] : nil,
+          disabled: option_disabled?(option) ? "true" : nil
+        }.compact
+      end
+
+      def option_input_attributes(option, index)
+        attrs = {
+          id: option_id(index),
+          class: "hakumi-segmented-input",
+          disabled: option_disabled?(option),
+          data: {
+            "hakumi--segmented-target": "input",
+            action: "change->hakumi--segmented#select"
+          }
+        }
+
+        aria_label = option_aria_label(option)
+        attrs[:"aria-label"] = aria_label if aria_label
+
+        attrs
+      end
+
+      def option_selected?(option)
+        return false if @value.nil?
+
+        option[:value].to_s == @value.to_s
+      end
+
+      def option_disabled?(option)
+        @disabled || option[:disabled]
+      end
+
+      def option_id(index)
+        "#{@name}_#{index}"
+      end
+
+      def option_label(option)
+        label = option[:label]
+        return nil if label.nil?
+        return label if label.is_a?(String)
+        return render(label) if label.respond_to?(:render_in)
+
+        label.to_s
+      end
+
+      def option_icon(option)
+        icon = option[:icon]
+        return nil if icon.nil?
+
+        if icon.is_a?(String) || icon.is_a?(Symbol)
+          render Hakumi::Icon::Component.new(name: icon, color: "currentColor")
+        elsif icon.respond_to?(:render_in)
+          render(icon)
+        else
+          icon
+        end
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+      end
+
+      def wrapper_classes
+        modifiers = {
+          block: @block,
+          vertical: @vertical,
+          round: @round,
+          disabled: @disabled
+        }
+
+        modifiers[@size] = true if @size != :middle
+
+        class_names("segmented", modifiers, [ @html_options[:class] ])
+      end
+
+      def normalize_options(options)
+        Array(options).map.with_index do |option, index|
+          if option.is_a?(Hash)
+            label_key_present = option.key?(:label) || option.key?("label")
+            value_key_present = option.key?(:value) || option.key?("value")
+            label_value = if label_key_present
+                            option[:label] || option["label"]
+            else
+                            option[:value] || option["value"] || "Option #{index + 1}"
+            end
+            value_value = if value_key_present
+                            option[:value] || option["value"]
+            else
+                            label_value
+            end
+
+            {
+              label: label_value,
+              value: value_value,
+              disabled: cast_boolean(option[:disabled] || option["disabled"]),
+              icon: option[:icon] || option["icon"],
+              class_name: option[:class_name] || option["class_name"],
+              aria_label: option[:aria_label] || option["aria_label"]
+            }
+          else
+            {
+              label: option,
+              value: option,
+              disabled: false,
+              icon: nil,
+              class_name: nil,
+              aria_label: nil
+            }
+          end
+        end
+      end
+
+      def option_aria_label(option)
+        return option[:aria_label] if option[:aria_label].present?
+
+        label = option[:label]
+        return strip_tags(label.to_s) if label.is_a?(String)
+        return option[:value].to_s if option[:value].present?
+
+        nil
+      end
+
+      def icon_only_option?(option)
+        icon = option[:icon]
+        label = option[:label]
+        icon.present? && (label.nil? || (label.respond_to?(:empty?) && label.empty?))
+      end
+
+      def data_attributes
+        {
+          controller: "hakumi--segmented",
+          "hakumi--segmented-disabled-value": @disabled,
+          "hakumi--segmented-value-value": @value
+        }.compact
+      end
+
+      def normalize_value(value, default_value)
+        raw = value.nil? ? default_value : value
+        raw.nil? ? nil : raw.to_s
+      end
+
+      def normalize_size(size)
+        val = size.is_a?(String) ? size.strip : size
+        symbol = val.presence&.to_sym
+        symbol == :default ? :middle : symbol
+      end
+
+      def cast_boolean(value)
+        ActiveModel::Type::Boolean.new.cast(value)
+      end
+
+      def normalize_string(value)
+        return nil if value.nil?
+
+        value = value.to_s.strip
+        value.presence
+      end
+
+      def self.parse_options_param(options)
+        return options if options.is_a?(Array)
+        return nil if options.nil?
+
+        if options.is_a?(String)
+          begin
+            parsed = JSON.parse(options)
+            return parsed
+          rescue JSON::ParserError
+            return options.split(",")
+          end
+        end
+
+        options
+      end
+
+      def self.truthy_param?(value)
+        return value if value == true || value == false
+
+        value.to_s == "true"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,103 @@
+<% select_control = capture do %>
+  <div <%= tag.attributes(wrapper_attributes) %>>
+    <input type="hidden"
+           name="<%= @name %>"
+           id="<%= input_id %>"
+           value="<%= @value %>"
+           data-hakumi--select-target="input"
+           <%= 'required' if @required %>
+           <%= "aria-invalid=#{has_error?}" if has_error? %>
+           <%= "aria-describedby=#{describedby_ids}" if describedby_ids %>>
+
+    <% if borderless? %>
+      <div class="hakumi-select-selector" <%= "data-action=click->hakumi--select#toggle" unless hover_trigger? %>>
+        <span class="hakumi-select-selection-item" data-hakumi--select-target="label" style="display: none;"></span>
+        <%= render Hakumi::Icon::Component.new(name: icon || :ellipsis) %>
+      </div>
+    <% else %>
+      <div class="hakumi-select-selector" data-action="click->hakumi--select#toggle">
+        <% if @show_search %>
+          <span class="hakumi-select-selection-search">
+            <input type="search"
+                   class="hakumi-select-selection-search-input"
+                   data-hakumi--select-target="searchInput"
+                   data-action="input->hakumi--select#onSearchInput keydown->hakumi--select#onSearchKeydown"
+                   autocomplete="off"
+                   placeholder="<%= @placeholder %>"
+                   value="<%= selected_label || '' %>"
+                   role="combobox"
+                   aria-haspopup="listbox"
+                   aria-owns="<%= @name %>_list"
+                   aria-autocomplete="list"
+                   aria-controls="<%= @name %>_list"
+                   aria-activedescendant="">
+          </span>
+        <% else %>
+          <% if selected_label %>
+            <span class="hakumi-select-selection-item" data-hakumi--select-target="label"><%= selected_label %></span>
+          <% else %>
+            <span class="hakumi-select-selection-item" data-hakumi--select-target="label" style="display: none;"></span>
+          <% end %>
+
+          <% if @placeholder %>
+            <span class="hakumi-select-selection-placeholder"
+                  data-hakumi--select-target="placeholder"
+                  style="<%= selected_label ? 'display: none;' : '' %>">
+              <%= @placeholder %>
+            </span>
+          <% end %>
+        <% end %>
+      </div>
+
+      <% if @allow_clear %>
+        <span class="hakumi-select-clear"
+              data-action="click->hakumi--select#clear"
+              style="<%= @value.present? ? '' : 'display: none;' %>"
+              data-hakumi--select-target="clearBtn">
+          <%= render Hakumi::Icon::Component.new(name: :close_circle, theme: :filled) %>
+        </span>
+      <% end %>
+
+      <span class="hakumi-select-arrow">
+        <%= render Hakumi::Icon::Component.new(name: :down) %>
+      </span>
+    <% end %>
+
+    <div class="hakumi-select-dropdown hakumi-select-dropdown-hidden" data-hakumi--select-target="dropdown">
+      <div class="rc-virtual-list-holder-inner" role="listbox" id="<%= @name %>_list">
+        <% formatted_options.each do |label, value| %>
+          <div class="hakumi-select-item hakumi-select-item-option <%= 'hakumi-select-item-option-selected' if value.to_s == @value.to_s %>"
+               role="option"
+               aria-selected="<%= value.to_s == @value.to_s %>"
+               data-value="<%= value %>"
+               data-label="<%= label %>"
+               data-action="click->hakumi--select#select"
+               data-hakumi--select-target="option">
+            <div class="hakumi-select-item-option-content"><%= label %></div>
+          </div>
+        <% end %>
+        <div class="hakumi-select-item-empty" data-hakumi--select-target="empty" style="display: none;">
+          No data
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% if @standalone %>
+  <%= select_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <div class="hakumi-form-item-control-input-content">
+          <%= select_control %>
+        </div>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>