Add component setup instruction with CLI (#141)

Author: stephannv

app/components/component_setup/cli_steps.rb

@@ -0,0 +1,53 @@
+module Components
+  module ComponentSetup
+    class CLISteps < Components::Base
+      def initialize(component_name:)
+        @component_name = component_name
+      end
+
+      private
+
+      attr_reader :component_name
+
+      def view_template
+        div(class: "max-w-2xl mx-auto w-full py-10 space-y-6") do
+          Heading(level: 4, class: "pb-4 border-b") { "Using RubyUI CLI" }
+          Text do
+            "We provide a Ruby gem with useful generators to help you to setup RubyUI components in your apps."
+          end
+
+          render Steps::Builder.new do |steps|
+            steps.add_step do
+              render Steps::Container do
+                Text(size: "4", weight: "semibold") do
+                  plain "Add RubyUI gem to your Gemfile if you don't have it yet"
+                end
+
+                code = <<~CODE
+                  bundle add ruby_ui --group development --require false
+                CODE
+                div(class: "w-full") do
+                  Codeblock(code, syntax: :javascript)
+                end
+              end
+            end
+            steps.add_step do
+              render Steps::Container do
+                Text(size: "4", weight: "semibold") do
+                  "Run the install command"
+                end
+
+                code = <<~CODE
+                  rails g ruby_ui:component #{component_name.camelcase}
+                CODE
+                div(class: "w-full") do
+                  Codeblock(code, syntax: :javascript)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

app/components/component_setup/tabs.rb

@@ -0,0 +1,32 @@
+module Components
+  module ComponentSetup
+    class Tabs < Components::Base
+      def initialize(component_name:)
+        @component_name = component_name
+      end
+
+      private
+
+      attr_reader :component_name
+
+      def view_template
+        Heading(level: 2) { "Installation" }
+
+        Tabs(default_value: "cli", class: "w-full") do
+          TabsList do
+            TabsTrigger(value: "cli") { "CLI" }
+            TabsTrigger(value: "manual") { "Manual" }
+          end
+
+          TabsContent(value: "cli") do
+            render CLISteps.new(component_name:)
+          end
+
+          TabsContent(value: "manual") do
+            Text { "Coming soon" }
+          end
+        end
+      end
+    end
+  end
+end

app/views/components/shared/menu.rb

@@ -68,8 +68,8 @@ def components
       {name: "Avatar", path: helpers.docs_avatar_path},
       {name: "Badge", path: helpers.docs_badge_path},
       {name: "Button", path: helpers.docs_button_path},
-      {name: "Card", path: helpers.docs_card_path},
       {name: "Calendar", path: helpers.docs_calendar_path},
+      {name: "Card", path: helpers.docs_card_path},
       # { name: "Chart", path: helpers.docs_chart_path, badge: "New" },
       {name: "Checkbox", path: helpers.docs_checkbox_path},
       {name: "Checkbox Group", path: helpers.docs_checkbox_group_path},
@@ -83,8 +83,8 @@ def components
       {name: "Dialog / Modal", path: helpers.docs_dialog_path},
       {name: "Dropdown Menu", path: helpers.docs_dropdown_menu_path},
       {name: "Form", path: helpers.docs_form_path},
-      {name: "Input", path: helpers.docs_input_path},
       {name: "Hover Card", path: helpers.docs_hover_card_path},
+      {name: "Input", path: helpers.docs_input_path},
       {name: "Link", path: helpers.docs_link_path},
       {name: "Masked Input", path: helpers.masked_input_path},
       {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"},

app/views/components/steps/container.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Steps
+  class Container < ApplicationComponent
+    def view_template(&)
+      div(class: "space-y-4", &)
+    end
+  end
+end

app/views/docs/accordion_view.rb

@@ -45,6 +45,8 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

app/views/docs/alert_dialog_view.rb

@@ -27,6 +27,8 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

app/views/docs/alert_view.rb

@@ -57,6 +57,8 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

app/views/docs/aspect_ratio_view.rb

@@ -60,6 +60,8 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

app/views/docs/avatar_view.rb

@@ -84,6 +84,8 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

app/views/docs/badge_view.rb

@@ -2,6 +2,8 @@
 
 class Docs::BadgeView < ApplicationView
   def view_template
+    component = "Badge"
+
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Badge", description: "Displays a badge or a component that looks like a badge.")
 
@@ -69,8 +71,10 @@ def view_template
         RUBY
       end
 
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
       # components
-      render Docs::ComponentsTable.new(component_files("Badge"))
+      render Docs::ComponentsTable.new(component_files(component))
     end
   end
 end