Add Skeleton component to the docs (#156)

Author: lsouoliveira

app/components/ruby_ui/skeleton.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Skeleton < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "animate-pulse rounded-md bg-primary/10"
+      }
+    end
+  end
+end

app/controllers/docs_controller.rb

@@ -166,6 +166,10 @@ def shortcut_key
     render Docs::ShortcutKeyView.new
   end
 
+  def skeleton
+    render Docs::SkeletonView.new
+  end
+
   def switch
     render Docs::SwitchView.new
   end

app/views/components/shared/menu.rb

@@ -94,6 +94,7 @@ def components
       {name: "Select", path: helpers.docs_select_path, badge: "New"},
       {name: "Sheet", path: helpers.docs_sheet_path},
       {name: "Shortcut Key", path: helpers.docs_shortcut_key_path},
+      {name: "Skeleton", path: helpers.docs_skeleton_path, badge: "New"},
       {name: "Switch", path: helpers.docs_switch_path},
       {name: "Table", path: helpers.docs_table_path},
       {name: "Tabs", path: helpers.docs_tabs_path},

app/views/docs/skeleton_view.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Docs::SkeletonView < ApplicationView
+  def view_template
+    component = "Skeleton"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Skeleton", description: "Use to show a placeholder while content is loading.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-4") do
+            Skeleton(class: "h-12 w-12 rounded-full")
+            div(class: "space-y-2") do
+              Skeleton(class: "h-4 w-[250px]")
+              Skeleton(class: "h-4 w-[200px]")
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

config/routes.rb

@@ -47,6 +47,7 @@
     get "select", to: "docs#select", as: :docs_select
     get "sheet", to: "docs#sheet", as: :docs_sheet
     get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key
+    get "skeleton", to: "docs#skeleton", as: :docs_skeleton
     get "switch", to: "docs#switch", as: :docs_switch
     get "table", to: "docs#table", as: :docs_table
     get "tabs", to: "docs#tabs", as: :docs_tabs