hakumi_components 0.1.17.pre → 0.1.19.pre

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

@@ -0,0 +1,354 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Progress
+    class AttributeRenderer
+      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)) }
+      DisplaySize = T.type_alias { T.nilable(BaseComponent::SizeValue) }
+      StepStateValue = T.type_alias { Types::HtmlPrimitive }
+      StepState = T.type_alias { T::Hash[Symbol, StepStateValue] }
+      StyleBuilder = T.type_alias { T.proc.params(styles: T.nilable(Types::StyleValue)).returns(T.nilable(String)) }
+
+      sig do
+        params(
+          type: Symbol,
+          percent: ProgressValue,
+          success_percent: T.nilable(ProgressValue),
+          size: DisplaySize,
+          stroke_width: T.nilable(Float),
+          stroke_color: StrokeColor,
+          trail_color: T.nilable(String),
+          stroke_linecap: Symbol,
+          steps: T.nilable(Integer),
+          gap_degree: T.nilable(Float),
+          gap_position: T.nilable(Symbol),
+          gradient_id: String,
+          style_builder: StyleBuilder
+        ).void
+      end
+      def initialize(
+        type:,
+        percent:,
+        success_percent:,
+        size:,
+        stroke_width:,
+        stroke_color:,
+        trail_color:,
+        stroke_linecap:,
+        steps:,
+        gap_degree:,
+        gap_position:,
+        gradient_id:,
+        style_builder:
+      )
+        @type = T.let(type, Symbol)
+        @percent = T.let(percent, ProgressValue)
+        @success_percent = T.let(success_percent, T.nilable(ProgressValue))
+        @size = T.let(size, DisplaySize)
+        @stroke_width = T.let(stroke_width, T.nilable(Float))
+        @stroke_color = T.let(stroke_color, StrokeColor)
+        @trail_color = T.let(trail_color, T.nilable(String))
+        @stroke_linecap = T.let(stroke_linecap, Symbol)
+        @steps = T.let(steps, T.nilable(Integer))
+        @gap_degree = T.let(gap_degree, T.nilable(Float))
+        @gap_position = T.let(gap_position, T.nilable(Symbol))
+        @gradient_id = T.let(gradient_id, String)
+        @style_builder = T.let(style_builder, StyleBuilder)
+        @circle_geometry = T.let(nil, T.nilable(Progress::CircleGeometry))
+        @stroke_gradient = T.let(nil, T.nilable(Progress::StrokeGradientValue))
+      end
+
+      sig { returns(T.nilable(String)) }
+      def line_style
+        style(
+          "--hakumi-progress-stroke-width" => "#{line_stroke_width}px",
+          "--hakumi-progress-trail-color" => @trail_color
+        )
+      end
+
+      sig { returns(T.nilable(String)) }
+      def line_bar_style
+        styles = T.let({ "width" => "#{@percent}%" }, Types::StyleMap)
+        if gradient?
+          styles["background"] = gradient_css
+        elsif @stroke_color.is_a?(String)
+          styles["background-color"] = @stroke_color
+        end
+        style(styles)
+      end
+
+      sig { returns(T.nilable(String)) }
+      def line_success_style
+        success = @success_percent
+        return nil if success.nil?
+
+        style("width" => "#{success}%")
+      end
+
+      sig { returns(T::Array[StepState]) }
+      def line_steps
+        steps_renderer.line_steps
+      end
+
+      sig { returns(Integer) }
+      def circle_size
+        return @size if @size.is_a?(Integer)
+
+        120
+      end
+
+      sig { returns(T.nilable(String)) }
+      def circle_inner_style
+        style(
+          "width" => "#{circle_size}px",
+          "height" => "#{circle_size}px"
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def circle_trail_attributes
+        return {} if circle_steps?
+
+        {
+          class: "hakumi-progress-circle-trail",
+          cx: 50,
+          cy: 50,
+          r: circle_radius,
+          fill: "none",
+          stroke: "var(--hakumi-progress-trail-color, var(--color-border-secondary))",
+          "stroke-width": circle_stroke_width,
+          "stroke-dasharray": circle_trail_dasharray,
+          "stroke-dashoffset": circle_dashoffset,
+          transform: circle_transform
+        }
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def circle_path_attributes
+        return {} if circle_steps?
+
+        attrs = T.let(
+          {
+            class: "hakumi-progress-circle-path",
+            cx: 50,
+            cy: 50,
+            r: circle_radius,
+            fill: "none",
+            "stroke-linecap": @stroke_linecap,
+            "stroke-width": circle_stroke_width,
+            "stroke-dasharray": circle_path_dasharray,
+            "stroke-dashoffset": circle_dashoffset,
+            transform: circle_transform
+          },
+          Types::HtmlAttributes
+        )
+
+        stroke = circle_stroke
+        attrs[:style] = style("stroke" => stroke) if stroke
+        attrs
+      end
+
+      sig { returns(T.nilable(String)) }
+      def circle_trail_style
+        style("--hakumi-progress-trail-color" => @trail_color)
+      end
+
+      sig { returns(T::Array[[ String, String ]]) }
+      def circle_gradient_attributes
+        gradient = gradient_value
+        return [] if gradient.nil?
+
+        gradient.stop_pairs
+      end
+
+      sig { returns(String) }
+      attr_reader :gradient_id
+
+      sig { returns(Types::HtmlAttributes) }
+      def gradient_svg_direction
+        gradient = gradient_value
+        return Progress::StrokeGradientValue.default_svg_direction if gradient.nil?
+
+        gradient.svg_direction
+      end
+
+      sig { returns(T::Boolean) }
+      def gradient?
+        @stroke_color.is_a?(Hash)
+      end
+
+      sig { returns(T.nilable(String)) }
+      def gradient_css
+        gradient = gradient_value
+        return nil if gradient.nil?
+
+        gradient.css
+      end
+
+      sig { returns(Float) }
+      def circle_stroke_width
+        stroke_width_value.to_f
+      end
+
+      sig { returns(Float) }
+      def circle_radius
+        circle_geometry.radius
+      end
+
+      sig { returns(String) }
+      def circle_transform
+        circle_geometry.transform
+      end
+
+      sig { returns(T::Boolean) }
+      def circle_steps?
+        steps_renderer.circle_steps?
+      end
+
+      sig { returns(T::Array[StepState]) }
+      def circle_steps
+        steps_renderer(
+          circle_geometry: circle_geometry,
+          gradient_id: gradient? ? gradient_id : nil
+        ).circle_steps
+      end
+
+      sig { params(step: StepState).returns(T.nilable(String)) }
+      def circle_step_style(step)
+        stroke = step[:stroke]
+        style("stroke" => stroke&.to_s)
+      end
+
+      sig { returns(Symbol) }
+      def circle_gap_position
+        return @gap_position unless @gap_position.nil?
+
+        dashboard? ? :bottom : :top
+      end
+
+      sig { returns(ProgressValue) }
+      def stroke_width_value
+        return whole_number?(@stroke_width) ? @stroke_width.to_i : @stroke_width unless @stroke_width.nil?
+
+        return 6 if circle? || dashboard?
+
+        width = line_stroke_width
+        whole_number?(width) ? width.to_i : width
+      end
+
+      sig { returns(Progress::CircleGeometry) }
+      def circle_geometry
+        geometry = @circle_geometry
+        return geometry unless geometry.nil?
+
+        geometry = Progress::CircleGeometry.new(
+          stroke_width: circle_stroke_width,
+          gap_degree: circle_gap_degree,
+          gap_position: circle_gap_position
+        )
+        @circle_geometry = geometry
+      end
+
+      private
+
+      sig { params(styles: T.nilable(Types::StyleValue)).returns(T.nilable(String)) }
+      def style(styles)
+        @style_builder.call(styles)
+      end
+
+      sig { returns(T::Boolean) }
+      def circle?
+        @type == :circle
+      end
+
+      sig { returns(T::Boolean) }
+      def dashboard?
+        @type == :dashboard
+      end
+
+      sig { returns(Float) }
+      def line_stroke_width
+        return @stroke_width unless @stroke_width.nil?
+        return 6.0 if @size == :small
+
+        8.0
+      end
+
+      sig { returns(T.nilable(String)) }
+      def circle_stroke
+        return "url(##{gradient_id})" if gradient?
+        return @stroke_color if @stroke_color.is_a?(String) && @stroke_color.present?
+
+        nil
+      end
+
+      sig { returns(Float) }
+      def circle_gap_degree
+        return @gap_degree unless @gap_degree.nil?
+
+        dashboard? ? 75.0 : 0.0
+      end
+
+      sig { returns(String) }
+      def circle_dashoffset
+        format_float(circle_geometry.dashoffset)
+      end
+
+      sig { returns(String) }
+      def circle_path_dasharray
+        circle_geometry.dasharray(circle_geometry.path_length(@percent))
+      end
+
+      sig { returns(String) }
+      def circle_trail_dasharray
+        circle_geometry.dasharray(circle_geometry.effective_length)
+      end
+
+      sig { params(value: Float).returns(String) }
+      def format_float(value)
+        format("%.2f", value)
+      end
+
+      sig { returns(T.nilable(Progress::StrokeGradientValue)) }
+      def gradient_value
+        gradient = @stroke_gradient
+        return gradient unless gradient.nil?
+
+        value = @stroke_color
+        return nil unless value.is_a?(Hash)
+
+        gradient = Progress::StrokeGradientValue.new(value)
+        @stroke_gradient = gradient
+      end
+
+      sig do
+        params(
+          circle_geometry: T.nilable(Progress::CircleGeometry),
+          gradient_id: T.nilable(String)
+        ).returns(Progress::StepsRenderer)
+      end
+      def steps_renderer(circle_geometry: nil, gradient_id: nil)
+        Progress::StepsRenderer.new(
+          type: @type,
+          percent: @percent,
+          steps: @steps,
+          stroke_color: @stroke_color,
+          circle_geometry: circle_geometry,
+          gradient_id: gradient_id
+        )
+      end
+
+      sig { params(value: T.nilable(Float)).returns(T::Boolean) }
+      def whole_number?(value)
+        return false if value.nil?
+
+        (value.to_f % 1.0).zero?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Progress
+    class CircleGeometry
+      extend T::Sig
+
+      ProgressValue = T.type_alias { Numeric }
+
+      sig { params(stroke_width: Float, gap_degree: Float, gap_position: Symbol).void }
+      def initialize(stroke_width:, gap_degree:, gap_position:)
+        @stroke_width = T.let(stroke_width, Float)
+        @gap_degree = T.let(gap_degree, Float)
+        @gap_position = T.let(gap_position, Symbol)
+      end
+
+      sig { returns(Float) }
+      def radius
+        50 - (@stroke_width / 2.0)
+      end
+
+      sig { returns(Float) }
+      def total_length
+        2 * Math::PI * radius
+      end
+
+      sig { returns(Float) }
+      def gap_length
+        total_length * (@gap_degree / 360.0)
+      end
+
+      sig { returns(Float) }
+      def effective_length
+        total_length - gap_length
+      end
+
+      sig { params(percent: ProgressValue).returns(Float) }
+      def path_length(percent)
+        effective_length * (percent.to_f / 100.0)
+      end
+
+      sig { returns(Float) }
+      def dashoffset
+        gap_length / 2.0
+      end
+
+      sig { params(length: Float).returns(String) }
+      def dasharray(length)
+        "#{format_float(length)} #{format_float(total_length)}"
+      end
+
+      sig { returns(String) }
+      def transform
+        "rotate(#{rotation} 50 50)"
+      end
+
+      sig { returns(Integer) }
+      def rotation
+        case @gap_position
+        when :left then 180
+        when :right then 0
+        when :bottom then 90
+        else -90
+        end
+      end
+
+      private
+
+      sig { params(value: Float).returns(String) }
+      def format_float(value)
+        format("%.2f", value)
+      end
+    end
+  end
+end

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

@@ -1,11 +1,12 @@
 <% component_markup = capture do %>
+  <% attributes = attribute_renderer %>
   <div <%= tag.attributes(wrapper_attributes) %>>
     <% if line? %>
       <div class="hakumi-progress-outer">
-        <div class="hakumi-progress-inner" style="<%= line_style %>">
+        <div class="hakumi-progress-inner" style="<%= attributes.line_style %>">
           <% if steps? %>
             <div class="hakumi-progress-steps">
-              <% line_steps.each do |step| %>
+              <% attributes.line_steps.each do |step| %>
                 <% step_classes = ["hakumi-progress-steps-item"] %>
                 <% step_classes << "hakumi-progress-steps-item-active" if step[:active] %>
                 <% step_classes << "hakumi-progress-steps-item-current" if step[:current] %>
@@ -17,9 +18,9 @@
               <% end %>
             </div>
           <% else %>
-            <div class="hakumi-progress-bg" style="<%= line_bar_style %>"></div>
-            <% if @success_percent.present? && @success_percent.positive? %>
-              <div class="hakumi-progress-success-bg" style="<%= line_success_style %>"></div>
+            <div class="hakumi-progress-bg" style="<%= attributes.line_bar_style %>"></div>
+            <% if success_segment? %>
+              <div class="hakumi-progress-success-bg" style="<%= attributes.line_success_style %>"></div>
             <% end %>
           <% end %>
         </div>
@@ -28,19 +29,19 @@
         <span class="hakumi-progress-text"><%= formatted_info %></span>
       <% end %>
     <% else %>
-      <div class="hakumi-progress-inner" style="<%= circle_inner_style %>">
+      <div class="hakumi-progress-inner" style="<%= attributes.circle_inner_style %>">
         <svg class="hakumi-progress-circle" viewBox="0 0 100 100">
-          <% if gradient? && circle_gradient_attributes.present? %>
+          <% if attributes.gradient? && attributes.circle_gradient_attributes.present? %>
             <defs>
-              <linearGradient id="<%= gradient_id %>" <%= tag.attributes(gradient_svg_direction) %>>
-                <% circle_gradient_attributes[:stops].each do |stop, color| %>
+              <linearGradient id="<%= attributes.gradient_id %>" <%= tag.attributes(attributes.gradient_svg_direction) %>>
+                <% attributes.circle_gradient_attributes.each do |stop, color| %>
                   <stop offset="<%= stop %>" stop-color="<%= color %>"></stop>
                 <% end %>
               </linearGradient>
             </defs>
           <% end %>
-          <% if circle_steps? %>
-            <% circle_steps.each do |step| %>
+          <% if attributes.circle_steps? %>
+            <% attributes.circle_steps.each do |step| %>
               <% step_classes = ["hakumi-progress-circle-step"] %>
               <% step_classes << "hakumi-progress-circle-step-active" if step[:active] %>
               <% step_classes << "hakumi-progress-circle-step-current" if step[:current] %>
@@ -48,20 +49,20 @@
                 class="<%= step_classes.join(" ") %>"
                 cx="50"
                 cy="50"
-                r="<%= circle_radius %>"
+                r="<%= attributes.circle_radius %>"
                 fill="none"
                 stroke-linecap="butt"
-                stroke-width="<%= circle_stroke_width %>"
+                stroke-width="<%= attributes.circle_stroke_width %>"
                 stroke-dasharray="<%= step[:dasharray] %>"
                 stroke-dashoffset="<%= step[:dashoffset] %>"
-                transform="<%= circle_transform %>"
-                style="<%= build_inline_style("stroke" => step[:stroke]) %>"
+                transform="<%= attributes.circle_transform %>"
+                style="<%= attributes.circle_step_style(step) %>"
                 data-step-index="<%= step[:index] %>"
               ></circle>
             <% end %>
           <% else %>
-            <circle <%= tag.attributes(circle_trail_attributes.merge(style: circle_trail_style.presence)) %>></circle>
-            <circle <%= tag.attributes(circle_path_attributes) %>></circle>
+            <circle <%= tag.attributes(attributes.circle_trail_attributes.merge(style: attributes.circle_trail_style.presence)) %>></circle>
+            <circle <%= tag.attributes(attributes.circle_path_attributes) %>></circle>
           <% end %>
         </svg>
         <% if inline_info? && formatted_info.present? %>
@@ -73,7 +74,7 @@
 <% end %>
 
 <% if wrap_with_tooltip? %>
-  <%= render Hakumi::Tooltip::Component.new(**tooltip_component_options) do %>
+  <%= render HakumiComponents::Tooltip::Component.new(**tooltip_component_options) do %>
     <%= component_markup %>
   <% end %>
 <% else %>