hakumi_components 0.1.3.pre

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

@@ -0,0 +1,73 @@
+module Hakumi
+  module Splitter
+    module Panel
+      class Component < ViewComponent::Base
+        def initialize(size: nil, min: nil, max: nil, resizable: true, collapsible: false, **html_options)
+          @size = size
+          @min = min
+          @max = max
+          @resizable = resizable
+          @collapsible = collapsible
+          @html_options = html_options
+        end
+
+        private
+
+        def html_attributes
+          attrs = @html_options.dup
+          attrs[:class] = css_classes
+          attrs[:style] = inline_styles
+          attrs[:data] ||= {}
+          attrs[:data][:hakumi__splitter_target] = "panel"
+          attrs[:data][:hakumi__splitter_size_value] = @size.to_s if @size
+          attrs[:data][:hakumi__splitter_min_value] = @min.to_s if @min
+          attrs[:data][:hakumi__splitter_max_value] = @max.to_s if @max
+          attrs[:data][:hakumi__splitter_resizable_value] = @resizable
+          attrs[:data][:hakumi__splitter_collapsible_value] = collapsible_config
+          attrs
+        end
+
+        def css_classes
+          classes = [ "hakumi-splitter-panel" ]
+          classes << @html_options[:class] if @html_options[:class]
+          classes.join(" ")
+        end
+
+        def inline_styles
+          styles = []
+
+          if @size
+            size_value = @size.is_a?(String) ? @size : "#{@size}px"
+            styles << "flex: 0 0 #{size_value}"
+            styles << "width: #{size_value}" if horizontal_layout?
+            styles << "height: #{size_value}" if vertical_layout?
+          else
+            styles << "flex: 1"
+          end
+
+          styles << @html_options[:style] if @html_options[:style]
+          styles.join("; ")
+        end
+
+        def collapsible_config
+          return "false" unless @collapsible
+
+          if @collapsible.is_a?(Hash)
+            @collapsible.to_json
+          else
+            "true"
+          end
+        end
+
+        def horizontal_layout?
+          # This is a simplification - in real implementation we'd get this from parent
+          true
+        end
+
+        def vertical_layout?
+          false
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% if title_content.present? %>
+    <div class="hakumi-statistic-title"><%= title_content %></div>
+  <% end %>
+  <div class="hakumi-statistic-content">
+    <% if prefix_content.present? %>
+      <span class="hakumi-statistic-prefix"><%= prefix_content %></span>
+    <% end %>
+    <span class="hakumi-statistic-value" data-hakumi--statistic-target="value">
+      <%= display_value %>
+    </span>
+    <% if suffix_content.present? %>
+      <span class="hakumi-statistic-suffix"><%= suffix_content %></span>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,291 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Statistic
+    class Component < Hakumi::BaseComponent
+      include ActionView::Helpers::NumberHelper
+
+      DEFAULT_DURATION = 800
+      DEFAULT_COUNTDOWN_FORMAT = "HH:mm:ss"
+
+      def self.extract_controller_locals(params)
+        {
+          title: params[:title],
+          value: parse_value_param(params[:value]),
+          precision: parse_integer(params[:precision]),
+          prefix: params[:prefix],
+          suffix: params[:suffix],
+          animated: truthy_param?(params[:animated]),
+          duration: parse_number(params[:duration]),
+          countdown: truthy_param?(params[:countdown]),
+          format: params[:format],
+          aria_label: params[:aria_label]
+        }
+      end
+
+      def self.parse_value_param(value)
+        return nil if value.nil?
+        return value if value.is_a?(Numeric)
+
+        string_value = value.to_s.strip
+        return nil if string_value.empty?
+
+        Float(string_value)
+      rescue ArgumentError
+        value
+      end
+
+      def self.parse_number(value)
+        return nil if value.nil?
+        return value if value.is_a?(Numeric)
+
+        Float(value) if value.to_s.strip != ""
+      rescue ArgumentError
+        nil
+      end
+
+      def self.parse_integer(value)
+        return nil if value.nil?
+        return value if value.is_a?(Integer)
+
+        Integer(value) if value.to_s.strip != ""
+      rescue ArgumentError
+        nil
+      end
+
+      def self.truthy_param?(value)
+        return value if value == true || value == false
+
+        value.to_s == "true"
+      end
+
+      def initialize(
+        title: nil,
+        value: nil,
+        precision: nil,
+        prefix: nil,
+        suffix: nil,
+        animated: false,
+        duration: DEFAULT_DURATION,
+        countdown: false,
+        format: nil,
+        aria_label: nil,
+        **html_options
+      )
+        @title = title
+        @value = value
+        @precision = normalize_precision(precision)
+        @prefix = prefix
+        @suffix = suffix
+        @animated = cast_boolean(animated)
+        @duration = normalize_duration(duration)
+        @countdown = cast_boolean(countdown)
+        @format = normalize_format(format)
+        @aria_label = normalize_string(aria_label)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes,
+          role: countdown? ? "timer" : "status",
+          "aria-live": countdown? || animated? ? "polite" : nil,
+          "aria-label": @aria_label,
+          data: data_attributes
+        }
+
+        merge_attributes(attrs, @html_options)
+      end
+
+      def title_content
+        render_value(@title)
+      end
+
+      def prefix_content
+        render_value(@prefix)
+      end
+
+      def suffix_content
+        render_value(@suffix)
+      end
+
+      def display_value
+        return content if content.present?
+        return formatted_countdown_value if countdown?
+        return formatted_numeric_value if numeric_value?
+
+        render_value(@value).presence || "-"
+      end
+
+      def countdown?
+        @countdown
+      end
+
+      def animated?
+        @animated
+      end
+
+      def countdown_target_timestamp
+        return nil unless countdown?
+
+        target = normalize_countdown_target(@value)
+        return nil unless target
+
+        (target.to_f * 1000).round
+      end
+
+      def countdown_format
+        return nil unless countdown?
+
+        @format || DEFAULT_COUNTDOWN_FORMAT
+      end
+
+      def numeric_value
+        return nil unless numeric_value?
+
+        @numeric_value
+      end
+
+      private
+
+      def validate_props!
+        if @precision && @precision.negative?
+          raise ArgumentError, "precision must be greater than or equal to 0"
+        end
+
+        raise ArgumentError, "duration must be greater than 0" if @duration.to_f <= 0
+      end
+
+      def wrapper_classes
+        modifiers = {
+          countdown: countdown?
+        }
+
+        class_names("statistic", modifiers, [ @html_options[:class] ])
+      end
+
+      def data_attributes
+        {
+          controller: "hakumi--statistic",
+          "hakumi--statistic-animated-value": animated?,
+          "hakumi--statistic-duration-value": @duration,
+          "hakumi--statistic-precision-value": @precision,
+          "hakumi--statistic-countdown-value": countdown?,
+          "hakumi--statistic-target-timestamp-value": countdown_target_timestamp,
+          "hakumi--statistic-format-value": countdown_format,
+          "hakumi--statistic-value-value": numeric_value
+        }.compact
+      end
+
+      def formatted_numeric_value
+        value = numeric_value
+        return "-" if value.nil?
+
+        if @precision
+          number_with_precision(value, precision: @precision, delimiter: ",")
+        else
+          number_with_delimiter(value)
+        end
+      end
+
+      def formatted_countdown_value
+        remaining_ms = countdown_remaining_ms
+        format_duration(remaining_ms, countdown_format || DEFAULT_COUNTDOWN_FORMAT)
+      end
+
+      def countdown_remaining_ms
+        target = normalize_countdown_target(@value)
+        return 0 unless target
+
+        remaining = (target.to_f - Time.current.to_f) * 1000
+        remaining.positive? ? remaining.round : 0
+      end
+
+      def numeric_value?
+        return @numeric_value if defined?(@numeric_value)
+
+        @numeric_value = begin
+          if @value.is_a?(Numeric)
+            @value
+          else
+            Float(@value)
+          end
+        rescue ArgumentError, TypeError
+          nil
+        end
+
+        @numeric_value.present?
+      end
+
+      def normalize_countdown_target(value)
+        return nil if value.nil?
+        return value.to_time if value.respond_to?(:to_time)
+
+        if value.is_a?(Numeric)
+          seconds = value > 1_000_000_000_000 ? value / 1000.0 : value
+          return Time.at(seconds)
+        end
+
+        parsed = Time.zone ? Time.zone.parse(value.to_s) : Time.parse(value.to_s)
+        parsed
+      rescue ArgumentError, TypeError
+        nil
+      end
+
+      def format_duration(milliseconds, format)
+        total_seconds = (milliseconds.to_f / 1000).floor
+        total_seconds = 0 if total_seconds.negative?
+
+        days = total_seconds / 86_400
+        hours_total = total_seconds / 3_600
+        hours = hours_total % 24
+        minutes = (total_seconds / 60) % 60
+        seconds = total_seconds % 60
+
+        format_string = format || DEFAULT_COUNTDOWN_FORMAT
+        use_days = format_string.include?("DD")
+        hours_value = use_days ? hours : hours_total
+
+        format_string
+          .gsub("DD", days.to_s.rjust(2, "0"))
+          .gsub("HH", hours_value.to_s.rjust(2, "0"))
+          .gsub("mm", minutes.to_s.rjust(2, "0"))
+          .gsub("ss", seconds.to_s.rjust(2, "0"))
+      end
+
+      def cast_boolean(value)
+        ActiveModel::Type::Boolean.new.cast(value)
+      end
+
+      def normalize_precision(value)
+        return nil if value.nil?
+        return value if value.is_a?(Integer)
+
+        Integer(value)
+      rescue ArgumentError, TypeError
+        raise ArgumentError, "precision must be an integer"
+      end
+
+      def normalize_duration(value)
+        return DEFAULT_DURATION if value.nil?
+        return value if value.is_a?(Numeric)
+
+        Float(value)
+      rescue ArgumentError, TypeError
+        raise ArgumentError, "duration must be numeric"
+      end
+
+      def normalize_format(value)
+        value.to_s.strip.presence
+      end
+
+      def normalize_string(value)
+        return nil if value.nil?
+
+        value.to_s.strip.presence
+      end
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% items.each_with_index do |item, index| %>
+    <% computed_status = item_status(index) %>
+    <% is_clickable = item_clickable?(index) %>
+    <%= tag.div(**item.wrapper_attributes(index, computed_status, is_clickable)) do %>
+      <% container_content = capture do %>
+        <div class="hakumi-steps-item-icon">
+          <div class="hakumi-steps-item-tail"></div>
+          <% if progress_dot || type == :inline %>
+            <span class="hakumi-steps-icon hakumi-steps-icon-dot"></span>
+          <% elsif item.icon %>
+            <span class="hakumi-steps-icon">
+              <%= render Hakumi::Icon::Component.new(name: item.icon, spin: item.icon_spin) %>
+            </span>
+          <% elsif computed_status == :finish %>
+            <span class="hakumi-steps-icon">
+              <%= render Hakumi::Icon::Component.new(name: :check) %>
+            </span>
+          <% elsif computed_status == :error %>
+            <span class="hakumi-steps-icon">
+              <%= render Hakumi::Icon::Component.new(name: :close) %>
+            </span>
+          <% else %>
+            <span class="hakumi-steps-icon"><%= index + 1 %></span>
+          <% end %>
+          <% if percent.present? && index == current %>
+            <div class="hakumi-steps-progress">
+              <svg viewBox="0 0 100 100" class="hakumi-steps-progress-circle" style="width: 100%; height: 100%;">
+                <circle cx="50" cy="50" r="45" class="hakumi-steps-progress-track" style="fill: none; stroke-width: 4;" />
+                <circle cx="50" cy="50" r="45" class="hakumi-steps-progress-indicator"
+                        style="fill: none; stroke-width: 4; stroke-dasharray: <%= (percent / 100.0 * 283).round(2) %> 283" />
+              </svg>
+            </div>
+          <% end %>
+        </div>
+        <div class="hakumi-steps-item-content">
+          <div class="hakumi-steps-item-title">
+            <%= item.title %>
+            <% if item.subtitle %>
+              <span class="hakumi-steps-item-subtitle"><%= item.subtitle %></span>
+            <% end %>
+          </div>
+          <% if item.description && type != :inline %>
+            <div class="hakumi-steps-item-description"><%= item.description %></div>
+          <% end %>
+        </div>
+      <% end %>
+      <% if item.tooltip.present? %>
+        <%= render Hakumi::Tooltip::Component.new(title: item.tooltip) do %>
+          <div class="hakumi-steps-item-container"><%= container_content %></div>
+        <% end %>
+      <% else %>
+        <div class="hakumi-steps-item-container"><%= container_content %></div>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Steps
+    class Component < Hakumi::BaseComponent
+      DIRECTIONS = %i[horizontal vertical].freeze
+      TYPES = %i[default navigation inline].freeze
+      SIZES = %i[default small].freeze
+      STATUSES = %i[wait process finish error].freeze
+      LABEL_PLACEMENTS = %i[horizontal vertical].freeze
+      VARIANTS = %i[filled outlined].freeze
+
+      renders_many :items, ->(
+        title: nil,
+        subtitle: nil,
+        description: nil,
+        tooltip: nil,
+        icon: nil,
+        icon_spin: false,
+        status: nil,
+        disabled: false,
+        **options
+      ) do
+        Hakumi::Steps::Item::Component.new(
+          title: title,
+          subtitle: subtitle,
+          description: description,
+          tooltip: tooltip,
+          icon: icon,
+          icon_spin: icon_spin,
+          status: status,
+          disabled: disabled,
+          parent: self,
+          **options
+        )
+      end
+
+      def initialize(
+        current: 0,
+        direction: :horizontal,
+        type: :default,
+        size: :default,
+        status: :process,
+        label_placement: nil,
+        percent: nil,
+        progress_dot: false,
+        responsive: true,
+        initial: 0,
+        clickable: false,
+        variant: :filled,
+        **html_options
+      )
+        @current = current
+        @direction = direction
+        @type = type
+        @size = size
+        @status = status
+        @label_placement = label_placement
+        @percent = percent
+        @progress_dot = progress_dot
+        @responsive = responsive
+        @initial = initial
+        @clickable = clickable
+        @variant = variant
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      attr_reader :current, :direction, :type, :size, :status, :label_placement,
+                  :percent, :progress_dot, :responsive, :initial, :clickable, :variant
+
+      def steps_classes
+        class_names(
+          "steps",
+          {
+            direction => true,
+            type => @type != :default,
+            small: @size == :small,
+            "label-#{effective_label_placement}" => @direction == :horizontal && @type == :default,
+            "with-progress" => @percent.present?,
+            dot: @progress_dot,
+            navigation: @type == :navigation,
+            inline: @type == :inline,
+            variant => @variant != :filled
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def effective_label_placement
+        return :vertical if @progress_dot && @direction == :horizontal
+        @label_placement || :horizontal
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: steps_classes,
+          data: stimulus_data
+        }
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def stimulus_controller
+        "hakumi--steps"
+      end
+
+      def stimulus_data
+        {
+          controller: stimulus_controller,
+          "#{stimulus_controller}-current-value" => @current,
+          "#{stimulus_controller}-clickable-value" => @clickable
+        }
+      end
+
+      def item_status(index)
+        return items[index].status if items[index].status.present?
+
+        if index < @current
+          :finish
+        elsif index == @current
+          @status
+        else
+          :wait
+        end
+      end
+
+      def item_clickable?(index)
+        return false unless @clickable
+        !items[index].disabled
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:direction, DIRECTIONS)
+        validate_inclusion!(:type, TYPES)
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:status, STATUSES)
+        validate_inclusion!(:label_placement, LABEL_PLACEMENTS) if @label_placement
+        validate_inclusion!(:variant, VARIANTS)
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= content %>

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

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Steps
+    module Item
+      class Component < Hakumi::BaseComponent
+        STATUSES = %i[wait process finish error].freeze
+
+        def initialize(
+          title: nil,
+          subtitle: nil,
+          description: nil,
+          tooltip: nil,
+          icon: nil,
+          icon_spin: false,
+          status: nil,
+          disabled: false,
+          parent: nil,
+          **html_options
+        )
+          @title = title
+          @subtitle = subtitle
+          @description = description
+          @tooltip = tooltip
+          @icon = icon
+          @icon_spin = icon_spin
+          @status = status
+          @disabled = disabled
+          @parent = parent
+          @html_options = html_options
+
+          validate_props!
+        end
+
+        attr_reader :title, :subtitle, :description, :tooltip, :icon, :icon_spin, :status, :disabled
+
+        def item_classes(computed_status, clickable)
+          classes = [ "hakumi-steps-item" ]
+          classes << "hakumi-steps-item-#{computed_status}"
+          classes << "hakumi-steps-item-disabled" if @disabled
+          classes << "hakumi-steps-item-clickable" if clickable && !@disabled
+          classes << "hakumi-steps-item-custom" if @icon
+          classes.join(" ")
+        end
+
+        def wrapper_attributes(index, computed_status, clickable)
+          base_attrs = {
+            class: item_classes(computed_status, clickable)
+          }
+
+          if clickable && !@disabled
+            base_attrs[:data] = {
+              action: "click->hakumi--steps#selectStep",
+              "step-index" => index
+            }
+          end
+
+          merge_attributes(base_attrs, @html_options)
+        end
+
+        def icon_content(computed_status, index, progress_dot, percent)
+          return nil if progress_dot
+
+          if @icon
+            @icon
+          else
+            case computed_status
+            when :finish
+              :check
+            when :error
+              :close
+            else
+              nil
+            end
+          end
+        end
+
+        def show_number?(computed_status)
+          return false if @icon
+          %i[wait process].include?(computed_status)
+        end
+
+        private
+
+        def validate_props!
+          validate_inclusion!(:status, STATUSES) if @status
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+<% switch_control = capture do %>
+  <%= content_tag(:label, **wrapper_attributes) do %>
+    <%= tag.input(**input_attributes) %>
+    <span class="hakumi-switch-handle">
+      <span class="hakumi-switch-loading-icon" aria-hidden="true"></span>
+    </span>
+    <span class="hakumi-switch-inner">
+      <span class="hakumi-switch-inner-checked"><%= checked_content %></span>
+      <span class="hakumi-switch-inner-unchecked"><%= unchecked_content %></span>
+    </span>
+  <% end %>
+<% end %>
+
+<% if standalone? %>
+  <%= switch_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">
+        <%= switch_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>