Add Progress component to the docs (#158)

Author: lsouoliveira

Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: d29fac6edc255c352beb688c38e8365c1b277c4b
+  revision: 500b8d98fbee73f15a3182feb4eca8e8e146d6b5
   branch: main
   specs:
     ruby_ui (1.0.0.beta1)

app/components/ruby_ui/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

app/controllers/docs_controller.rb

@@ -150,6 +150,10 @@ def popover
     render Docs::PopoverView.new
   end
 
+  def progress
+    render Docs::ProgressView.new
+  end
+
   def radio_button
     render Docs::RadioButtonView.new
   end

app/views/components/shared/menu.rb

@@ -90,6 +90,7 @@ def components
       {name: "Masked Input", path: helpers.masked_input_path},
       {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"},
       {name: "Popover", path: helpers.docs_popover_path},
+      {name: "Progress", path: helpers.docs_progress_path, badge: "New"},
       {name: "Radio Button", path: helpers.docs_radio_button_path, badge: "New"},
       {name: "Select", path: helpers.docs_select_path, badge: "New"},
       {name: "Sheet", path: helpers.docs_sheet_path},

app/views/docs/progress_view.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Docs::ProgressView < ApplicationView
+  def view_template
+    component = "Progress"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Progress", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.")
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Progress(value: 50, class: "w-[60%]")
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With custom indicator color", context: self) do
+        <<~RUBY
+          Progress(value: 35, class: "w-[60%] [&>*]:bg-success")
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

config/routes.rb

@@ -43,6 +43,7 @@
     get "masked_input", to: "docs#masked_input", as: :masked_input
     get "pagination", to: "docs#pagination", as: :docs_pagination
     get "popover", to: "docs#popover", as: :docs_popover
+    get "progress", to: "docs#progress", as: :docs_progress
     get "radio_button", to: "docs#radio_button", as: :docs_radio_button
     get "select", to: "docs#select", as: :docs_select
     get "sheet", to: "docs#sheet", as: :docs_sheet