From 64aab07121820250bb6766ca1d1c2b2fd0b9627c Mon Sep 17 00:00:00 2001
From: Lucas Sousa <ls442336@gmail.com>
Date: Wed, 29 Jan 2025 19:10:45 -0300
Subject: [PATCH] Add Progress component

---
 lib/ruby_ui/progress/progress.rb | 37 ++++++++++++++++++++++++++++++++
 test/ruby_ui/progress_test.rb    | 17 +++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 lib/ruby_ui/progress/progress.rb
 create mode 100644 test/ruby_ui/progress_test.rb

diff --git a/lib/ruby_ui/progress/progress.rb b/lib/ruby_ui/progress/progress.rb
new file mode 100644
index 00000000..ecccf714
--- /dev/null
+++ b/lib/ruby_ui/progress/progress.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0, 100)
+
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        div(**indicator_attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "progressbar",
+        aria_valuenow: @value,
+        aria_valuemin: 0,
+        aria_valuemax: 100,
+        aria_valuetext: "#{@value}%",
+        class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary"
+      }
+    end
+
+    def indicator_attrs
+      {
+        class: "h-full w-full flex-1",
+        style: "transform: translateX(-#{100 - @value}%)"
+      }
+    end
+  end
+end
diff --git a/test/ruby_ui/progress_test.rb b/test/ruby_ui/progress_test.rb
new file mode 100644
index 00000000..3de6b789
--- /dev/null
+++ b/test/ruby_ui/progress_test.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::ProgressTest < ComponentTest
+  def test_render
+    output = phlex do
+      RubyUI::Progress(value: 50)
+    end
+
+    assert_match(/aria-valuemin="0"/, output)
+    assert_match(/aria-valuemax="100"/, output)
+    assert_match(/aria-valuenow="50.0"/, output)
+    assert_match(/aria-valuetext="50.0%"/, output)
+    assert_match(/translateX\(-50.0%\)/, output)
+  end
+end