hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/components/hakumi_components/progress/steps_renderer.rb

@@ -0,0 +1,149 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Progress
+    class StepsRenderer
+      extend T::Sig
+
+      ProgressValue = T.type_alias { Numeric }
+      StrokeGradient = T.type_alias { T::Hash[String, String] }
+      StrokeColor = T.type_alias { T.nilable(T.any(String, StrokeGradient)) }
+      StepStateValue = T.type_alias { Types::HtmlPrimitive }
+      StepState = T.type_alias { T::Hash[Symbol, StepStateValue] }
+
+      CIRCLE_STEP_GAP = T.let(2, Integer)
+
+      sig do
+        params(
+          type: Symbol,
+          percent: ProgressValue,
+          steps: T.nilable(Integer),
+          stroke_color: StrokeColor,
+          circle_geometry: T.nilable(CircleGeometry),
+          gradient_id: T.nilable(String)
+        ).void
+      end
+      def initialize(type:, percent:, steps:, stroke_color:, circle_geometry: nil, gradient_id: nil)
+        @type = T.let(type, Symbol)
+        @percent = T.let(percent, ProgressValue)
+        @steps = T.let(steps, T.nilable(Integer))
+        @stroke_color = T.let(stroke_color, StrokeColor)
+        @circle_geometry = T.let(circle_geometry, T.nilable(CircleGeometry))
+        @gradient_id = T.let(gradient_id, T.nilable(String))
+      end
+
+      sig { returns(T::Boolean) }
+      def circle_steps?
+        (circle? || dashboard?) && steps?
+      end
+
+      sig { returns(T::Array[StepState]) }
+      def line_steps
+        return [] unless line? && steps?
+
+        total = step_count
+        progress_units = (@percent.to_f / 100.0) * total
+
+        (0...total).map do |index|
+          {
+            active: progress_units > index,
+            current: index == progress_units.floor && progress_units < total,
+            width: "#{(100.0 / total).round(2)}%",
+            custom_color: line_custom_color
+          }
+        end
+      end
+
+      sig { returns(T::Array[StepState]) }
+      def circle_steps
+        return [] unless circle_steps?
+
+        geometry = @circle_geometry
+        return [] if geometry.nil?
+
+        total = step_count
+        effective = geometry.effective_length
+        segment_length = (effective - (CIRCLE_STEP_GAP * total)) / total.to_f
+        progress_units = (@percent.to_f / 100.0) * total
+        base_offset = format_float(geometry.dashoffset).to_f
+
+        (0...total).map do |index|
+          active = progress_units > index
+          current = index == progress_units.floor && progress_units < total
+          offset = base_offset + ((segment_length + CIRCLE_STEP_GAP) * index)
+          {
+            index: index,
+            active: active,
+            current: current,
+            dasharray: geometry.dasharray(segment_length),
+            dashoffset: format_float(offset),
+            stroke: circle_step_stroke(active)
+          }
+        end
+      end
+
+      private
+
+      sig { returns(T::Boolean) }
+      def line?
+        @type == :line
+      end
+
+      sig { returns(T::Boolean) }
+      def circle?
+        @type == :circle
+      end
+
+      sig { returns(T::Boolean) }
+      def dashboard?
+        @type == :dashboard
+      end
+
+      sig { returns(T::Boolean) }
+      def steps?
+        !@steps.nil? && @steps.positive?
+      end
+
+      sig { returns(Integer) }
+      def step_count
+        steps = @steps
+        return 0 if steps.nil?
+
+        steps
+      end
+
+      sig { returns(T.nilable(String)) }
+      def line_custom_color
+        color = @stroke_color
+        return nil unless color.is_a?(String)
+        return nil if color.empty?
+
+        color
+      end
+
+      sig { params(active: T::Boolean).returns(T.nilable(String)) }
+      def circle_step_stroke(active)
+        return "var(--hakumi-progress-trail-color, var(--color-border-secondary))" unless active
+
+        gradient_id = @gradient_id
+        return "url(##{gradient_id})" if gradient? && !gradient_id.nil?
+
+        color = @stroke_color
+        return color if color.is_a?(String) && !color.empty?
+
+        nil
+      end
+
+      sig { returns(T::Boolean) }
+      def gradient?
+        @stroke_color.is_a?(Hash)
+      end
+
+      sig { params(value: Float).returns(String) }
+      def format_float(value)
+        format("%.2f", value)
+      end
+    end
+  end
+end

data/app/components/hakumi_components/progress/stroke_gradient_value.rb

@@ -0,0 +1,90 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Progress
+    class StrokeGradientValue
+      extend T::Sig
+
+      StrokeGradient = T.type_alias { T::Hash[String, String] }
+      StrokeColor = T.type_alias { T.nilable(T.any(String, StrokeGradient)) }
+
+      sig { params(source: T::Hash[T.untyped, T.untyped], compact_blank: T::Boolean).returns(StrokeColor) }
+      def self.normalize(source, compact_blank: true)
+        gradient = T.let({}, StrokeGradient)
+        source.each do |key, value|
+          next if value.nil?
+
+          string_value = compact_blank ? value.to_s.strip : value.to_s
+          next if compact_blank && string_value.empty?
+
+          gradient[key.to_s] = string_value
+        end
+        gradient.empty? ? nil : gradient
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def self.default_svg_direction
+        { x1: "0%", y1: "0%", x2: "100%", y2: "0%" }
+      end
+
+      sig { params(stops: T::Array[[ String, String ]]).returns(String) }
+      def self.stop_list(stops)
+        stops.map { |key, color| "#{color} #{key}" }.join(", ")
+      end
+
+      sig { params(source: StrokeGradient).void }
+      def initialize(source)
+        @source = T.let(source, StrokeGradient)
+      end
+
+      sig { returns(String) }
+      def direction
+        @source["direction"] || "to right"
+      end
+
+      sig { returns(T::Array[[ String, String ]]) }
+      def stop_pairs
+        entries = @source.reject { |key, value| key == "direction" || value.nil? }
+
+        if entries.key?("from") || entries.key?("to")
+          pairs = T.let([], T::Array[[ String, String ]])
+          from = entries["from"]
+          to = entries["to"]
+          pairs << [ "0%", from ] if from
+          pairs << [ "100%", to ] if to
+          return pairs
+        end
+
+        entries.map { |key, value| [ key, value ] }
+      end
+
+      sig { returns(T.nilable(String)) }
+      def css
+        stops = stop_pairs
+        return nil if stops.empty?
+
+        "linear-gradient(#{direction}, #{stop_list(stops)})"
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def svg_direction
+        case direction
+        when "to left"
+          { x1: "100%", y1: "0%", x2: "0%", y2: "0%" }
+        when "to bottom"
+          { x1: "0%", y1: "0%", x2: "0%", y2: "100%" }
+        when "to top"
+          { x1: "0%", y1: "100%", x2: "0%", y2: "0%" }
+        else
+          self.class.default_svg_direction
+        end
+      end
+
+      sig { params(stops: T::Array[[ String, String ]]).returns(String) }
+      def stop_list(stops)
+        self.class.stop_list(stops)
+      end
+    end
+  end
+end

data/app/components/hakumi_components/qr_code/component.rb

@@ -0,0 +1,405 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module QrCode
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      NumberValue = T.type_alias { Numeric }
+      NumberInput = T.type_alias { BaseComponent::DimensionInput }
+      OptionInput = T.type_alias { BaseComponent::SymbolInput }
+      IconRenderable = T.type_alias { T.nilable(Types::ComponentRenderable) }
+      IconInput = T.type_alias { T.nilable(T.any(Symbol, Types::Renderable)) }
+      StatusRender = T.type_alias { T.nilable(T.any(Types::Renderable, T.proc.params(status: Symbol).returns(Types::RenderedContent))) }
+      ControllerOptions = T.type_alias { BaseComponent::ControllerOptions }
+      ImageAttributes = T.type_alias { T::Hash[Symbol, Types::HtmlPrimitive] }
+      TYPES = T.let([ :canvas, :svg ].freeze, T::Array[Symbol])
+      STATUSES = T.let([ :active, :expired, :loading, :scanned ].freeze, T::Array[Symbol])
+      ERROR_LEVELS = T.let([ :L, :M, :Q, :H ].freeze, T::Array[Symbol])
+
+      sig do
+        params(params: ControllerOptions).returns(Types::HtmlAttributes)
+      end
+      def self.extract_controller_locals(params)
+        bordered_value = html_param(params, :bordered)
+
+        {
+          value: string_html_param(html_param(params, :value)),
+          size: parse_number(html_param(params, :size)),
+          type: symbol_html_param(html_param(params, :type)),
+          color: string_html_param(html_param(params, :color)),
+          bg_color: string_html_param(html_param(params, :bg_color)),
+          icon: html_param(params, :icon),
+          icon_size: parse_number(html_param(params, :icon_size)),
+          status: symbol_html_param(html_param(params, :status)),
+          status_render: string_html_param(html_param(params, :status_render)),
+          bordered: bordered_value.nil? ? nil : boolean_html_param(bordered_value),
+          error_level: parse_error_level(html_param(params, :error_level)),
+          download_name: string_html_param(html_param(params, :download_name)),
+          aria_label: string_html_param(html_param(params, :aria_label))
+        }
+      end
+
+      sig { params(value: Types::HtmlAttributeValue).returns(T.nilable(NumberValue)) }
+      def self.parse_number(value)
+        return nil if value.nil?
+        return value if value.is_a?(Integer)
+        return value if value.is_a?(Float)
+        raw = value.to_s.strip
+        return nil if raw.empty?
+
+        raw.include?(".") ? raw.to_f : raw.to_i
+      end
+
+      sig { params(value: Types::HtmlAttributeValue).returns(T.nilable(Symbol)) }
+      def self.parse_error_level(value)
+        return nil if value.nil?
+
+        value.to_s.strip.presence&.upcase&.to_sym
+      end
+
+      sig do
+        params(
+          value: String,
+          size: NumberInput,
+          type: OptionInput,
+          color: T.nilable(String),
+          bg_color: T.nilable(String),
+          icon: IconInput,
+          icon_size: NumberInput,
+          status: OptionInput,
+          status_render: StatusRender,
+          bordered: T.nilable(T::Boolean),
+          error_level: OptionInput,
+          download_name: T.nilable(String),
+          aria_label: T.nilable(String),
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        value:,
+        size: 160,
+        type: :canvas,
+        color: nil,
+        bg_color: nil,
+        icon: nil,
+        icon_size: 40,
+        status: :active,
+        status_render: nil,
+        bordered: true,
+        error_level: :M,
+        download_name: nil,
+        aria_label: nil,
+        **html_options
+      )
+        @value = T.let(value, String)
+        @size = T.let(self.class.parse_number(size) || 160, NumberValue)
+        @type = T.let(normalize_symbol(type) || :canvas, Symbol)
+        @color = T.let(normalize_string(color), T.nilable(String))
+        @bg_color = T.let(normalize_string(bg_color), T.nilable(String))
+        @icon_input = T.let(icon, IconInput)
+        @icon_size = T.let(self.class.parse_number(icon_size) || 40, NumberValue)
+        resolve_icon!
+        @status = T.let(normalize_symbol(status) || :active, Symbol)
+        @status_render = T.let(status_render, StatusRender)
+        @bordered = T.let(bordered.nil? ? true : cast_boolean(bordered) == true, T::Boolean)
+        @error_level = T.let(normalize_error_level(error_level) || :M, Symbol)
+        @download_name = T.let(normalize_string(download_name), T.nilable(String))
+        @aria_label = T.let(normalize_string(aria_label), T.nilable(String))
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        merge_attributes(
+          {
+            class: wrapper_classes,
+            style: wrapper_styles,
+            role: "img",
+            "aria-label": @aria_label || t_default(:aria_label, default: "QR Code"),
+            "aria-busy": loading? ? "true" : "false",
+            data: data_attributes
+          },
+          @html_options
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def renderer_attributes
+        T.let({
+          class: "hakumi-qr-code-inner",
+          data: { "hakumi--qr-code-target": "renderer" }
+        }, Types::HtmlAttributes)
+      end
+
+      sig { returns(T::Boolean) }
+      def icon?
+        icon_component? || icon_image?
+      end
+
+      sig { returns(Types::RenderedContent) }
+      def icon_markup
+        icon_component = @icon_component
+        if icon_image?
+          tag.img(**icon_image_attributes)
+        elsif !icon_component.nil?
+          render(icon_component)
+        end
+      end
+
+      sig { returns(ImageAttributes) }
+      def icon_image_attributes
+        T.let({
+          src: @icon_url,
+          alt: "",
+          class: "hakumi-qr-code-icon-image",
+          "aria-hidden": true,
+          role: "presentation"
+        }, ImageAttributes)
+      end
+
+      sig { returns(T::Boolean) }
+      def status_overlay?
+        @status != :active
+      end
+
+      sig { returns(Types::RenderedContent) }
+      def status_overlay_markup
+        return nil unless status_overlay?
+
+        custom = custom_status_overlay
+        return custom if custom
+
+        default_status_overlay
+      end
+
+      sig { returns(String) }
+      def status_text
+        key = "status.#{@status}"
+        default = case @status
+        when :expired then "Expired"
+        when :loading then "Loading"
+        when :scanned then "Scanned"
+        else "Active"
+        end
+        t_default(key, default: default)
+      end
+
+      sig { returns(T.nilable(String)) }
+      def status_description
+        case @status
+        when :expired
+          t_default("description.expired", default: "Please refresh to continue")
+        when :scanned
+          t_default("description.scanned", default: "You can now continue")
+        else
+          nil
+        end
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_required!(:value)
+        validate_inclusion!(:type, TYPES)
+        validate_inclusion!(:status, STATUSES)
+        validate_inclusion!(:error_level, ERROR_LEVELS)
+
+        if @size.to_f <= 0
+          raise ArgumentError, "size must be a positive number"
+        end
+
+        if icon? && @icon_size.to_f <= 0
+          raise ArgumentError, "icon_size must be a positive number"
+        end
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        modifiers = {
+          @type => true,
+          "status-#{@status}" => true,
+          bordered: @bordered,
+          "with-icon" => icon?,
+          "custom-status" => custom_status_render?
+        }
+
+        component_classes("qr-code", modifiers, @html_options)
+      end
+
+      sig { returns(String) }
+      def wrapper_styles
+        styles = {
+          "--hakumi-qr-code-size" => size_css_value,
+          "--hakumi-qr-code-icon-size" => icon_css_value,
+          "--hakumi-qr-code-color" => @color,
+          "--hakumi-qr-code-bg-color" => @bg_color
+        }
+
+        styles.compact.map { |key, value| "#{key}: #{value}" }.join("; ")
+      end
+
+      sig { returns(String) }
+      def size_css_value
+        "#{formatted_number(@size)}px"
+      end
+
+      sig { returns(T.nilable(String)) }
+      def icon_css_value
+        return nil unless icon?
+
+        "#{formatted_number(@icon_size)}px"
+      end
+
+      sig { void }
+      def resolve_icon!
+        @icon_component = T.let(nil, IconRenderable)
+        @icon_url = T.let(nil, T.nilable(String))
+
+        if @icon_input.is_a?(ViewComponent::Base) || @icon_input.is_a?(ViewComponent::Slot)
+          @icon_component = @icon_input
+          return
+        end
+
+        if @icon_input.is_a?(String)
+          trimmed = @icon_input.strip
+          if trimmed.downcase.start_with?("http://", "https://", "data:")
+            @icon_url = trimmed
+            return
+          end
+        end
+
+        icon_name = extract_icon_name(@icon_input)
+        return unless icon_name
+
+        @icon_component = HakumiComponents::Icon::Component.new(name: icon_name, size: icon_component_size)
+      end
+
+      sig { returns(T::Boolean) }
+      def icon_component?
+        !@icon_component.nil?
+      end
+
+      sig { returns(T::Boolean) }
+      def icon_image?
+        @icon_url.present?
+      end
+
+      sig { returns(Types::DataAttributes) }
+      def data_attributes
+        data = T.let({
+          controller: "hakumi--qr-code",
+          "hakumi--qr-code-value-value": @value,
+          "hakumi--qr-code-size-value": @size,
+          "hakumi--qr-code-type-value": @type,
+          "hakumi--qr-code-color-value": @color,
+          "hakumi--qr-code-bg-color-value": @bg_color,
+          "hakumi--qr-code-error-level-value": @error_level,
+          "hakumi--qr-code-status-value": @status
+        }, Types::DataAttributes)
+
+        data["hakumi--qr-code-download-name-value"] = @download_name if @download_name.present?
+        data
+      end
+
+      sig { returns(T::Boolean) }
+      def loading?
+        @status == :loading
+      end
+
+      sig { returns(T::Boolean) }
+      def custom_status_render?
+        @status_render.present?
+      end
+
+      sig { returns(Types::RenderedContent) }
+      def custom_status_overlay
+        return unless custom_status_render?
+
+        if @status_render.is_a?(Proc)
+          return view_context.capture { @status_render.call(@status) }
+        end
+
+        if @status_render.is_a?(ViewComponent::Base) || @status_render.is_a?(ViewComponent::Slot)
+          return render(@status_render)
+        end
+
+        @status_render
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def default_status_overlay
+        content = T.let([], T::Array[Types::RenderedContent])
+        if loading?
+          content << render(HakumiComponents::Spin::Component.new(size: :small))
+        end
+
+        content << tag.span(status_text, class: "hakumi-qr-code-status-text")
+        if status_description.present?
+          content << tag.span(status_description, class: "hakumi-qr-code-status-description")
+        end
+
+        tag.div(class: "hakumi-qr-code-status-content") do
+          safe_join(content)
+        end
+      end
+
+      sig { params(value: OptionInput).returns(T.nilable(Symbol)) }
+      def normalize_symbol(value)
+        return nil if value.nil?
+
+        raw = value.is_a?(String) ? value.dup : value.to_s.dup
+        raw.strip!
+        return nil if raw.empty?
+
+        raw.to_sym
+      end
+
+      sig { params(value: OptionInput).returns(T.nilable(Symbol)) }
+      def normalize_error_level(value)
+        symbol = normalize_symbol(value)
+        symbol&.to_s&.upcase&.to_sym
+      end
+
+      sig { params(value: T.nilable(Types::ValidationComparable)).returns(T.nilable(String)) }
+      def normalize_string(value)
+        return nil if value.nil?
+
+        raw = value.to_s.strip
+        raw.empty? ? nil : raw
+      end
+
+      sig { params(value: IconInput).returns(T.nilable(Symbol)) }
+      def extract_icon_name(value)
+        case value
+        when Symbol
+          value
+        when String
+          trimmed = value.strip
+          return nil if trimmed.empty?
+          trimmed.to_sym
+        else
+          nil
+        end
+      end
+
+      sig { returns(Integer) }
+      def icon_component_size
+        size = (@icon_size.to_f * 0.65).round
+        size.positive? ? size : 24
+      end
+
+      sig { params(value: NumberValue).returns(NumberValue) }
+      def formatted_number(value)
+        return value if value.is_a?(Integer)
+
+        remainder = value % 1
+        remainder.zero? ? value.to_i : value
+      end
+    end
+  end
+end

data/app/components/{hakumi → hakumi_components}/radio/component.html.erb

@@ -2,15 +2,15 @@
   <label class="<%= wrapper_classes %>" data-controller="<%= data_controllers %>" data-hakumi--radio-checked-value="<%= @checked %>" data-hakumi--radio-variant-value="default">
     <span class="<%= radio_classes %>" data-hakumi--radio-target="radio">
       <%= radio_button_tag(
-            @name,
+            form_field_name,
             @value,
             @checked,
             id: input_id,
             disabled: @disabled,
             autofocus: @auto_focus,
-            required: @required,
+            required: form_field_required,
             class: "hakumi-radio-input",
-            "aria-invalid": has_error? ? "true" : nil,
+            "aria-invalid": error? ? "true" : nil,
             "aria-describedby": describedby_ids,
             data: (@html_options[:data] || {}).merge({
               hakumi__radio_target: "input",