Update manual instructions to install components (#179)

Author: stephannv

app/assets/stylesheets/application.tailwind.css

@@ -49,11 +49,6 @@
   --warning-foreground: hsl(0 0% 100%);
   --success: hsl(87 100% 37%);
   --success-foreground: hsl(0 0% 100%);
-
-  /* Container settings */
-  --container-center: true;
-  --container-padding: hsl(2rem);
-  --container-max-width-2xl: hsl(1400px);
 }
 
 .dark {
@@ -142,6 +137,13 @@
   --color-success-foreground: var(--success-foreground);
 }
 
+/* Container settings */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  max-width: 1400px;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

app/components/component_setup/manual_steps.rb

@@ -15,8 +15,7 @@ def view_template
           Heading(level: 4, class: "pb-4 border-b") { "Manual installation" }
 
           render Steps::Builder.new do |steps|
-            main_component_step(steps)
-            related_component_steps(steps)
+            component_steps(steps)
             stimulus_controller_steps(steps)
             js_dependencies_steps(steps)
             ruby_dependencies_steps(steps)
@@ -25,47 +24,25 @@ def view_template
         end
       end
 
-      def main_component_step(steps)
-        main_component_code = RubyUI::FileManager.main_component_code(component_name)
+      def component_steps(steps)
+        component_file_paths = RubyUI::FileManager.component_file_paths(component_name)
 
-        return if main_component_code.blank?
+        component_file_paths.each do |component_path|
+          component_class = component_path.split("/").last.delete_suffix(".rb").camelcase
+          component_file_name = component_path.split("/").last
+          component_code = RubyUI::FileManager.component_code(component_path)
 
-        steps.add_step do
-          render Steps::Container do
-            Text(size: "4", weight: "semibold") do
-              plain "Add "
-              InlineCode(class: "whitespace-nowrap") { "RubyUI::#{component_name.camelcase}" }
-              plain " to "
-              InlineCode(class: "whitespace-nowrap") { "app/components/ruby_ui/#{component_name.underscore}.rb" }
-            end
-
-            div(class: "w-full") do
-              Codeblock(main_component_code, syntax: :ruby)
-            end
-          end
-        end
-      end
-
-      def related_component_steps(steps)
-        related_component_file_paths = RubyUI::FileManager.related_component_file_paths(component_name)
-
-        return if related_component_file_paths.empty?
-
-        related_component_file_paths.each do |component_path|
-          related_component_class = component_path.split("/").last.delete_suffix(".rb").camelcase
-          related_component_file_name = component_path.split("/").last
-          related_component_code = RubyUI::FileManager.component_code(component_path)
           steps.add_step do
             render Steps::Container do
               Text(size: "4", weight: "semibold") do
                 plain "Add "
-                InlineCode(class: "whitespace-nowrap") { "RubyUI::#{related_component_class}" }
+                InlineCode(class: "whitespace-nowrap") { "RubyUI::#{component_class}" }
                 plain " to "
-                InlineCode(class: "whitespace-nowrap") { "app/components/ruby_ui/#{component_name.underscore}/#{related_component_file_name}" }
+                InlineCode(class: "whitespace-nowrap") { "app/components/ruby_ui/#{component_name.underscore}/#{component_file_name}" }
               end
 
               div(class: "w-full") do
-                Codeblock(related_component_code, syntax: :ruby)
+                Codeblock(component_code, syntax: :ruby)
               end
             end
           end

app/lib/ruby_ui/file_manager.rb

@@ -10,13 +10,8 @@ def component_code(file_path)
       File.read(file_path) if File.exist?(file_path)
     end
 
-    def main_component_file_path(component_name)
-      component_name = component_name.underscore
-      File.join(component_folder(component_name), "#{component_name}.rb")
-    end
-
-    def related_component_file_paths(component_name)
-      Dir[File.join(component_folder(component_name), "*.rb")] - [main_component_file_path(component_name)]
+    def component_file_paths(component_name)
+      Dir[File.join(component_folder(component_name), "*.rb")]
     end
 
     def stimulus_controller_file_paths(component_name)

app/views/docs/installation/rails_bundler.rb

@@ -277,11 +277,6 @@ def default_attrs
                 --warning-foreground: hsl(0 0% 100%);
                 --success: hsl(87 100% 37%);
                 --success-foreground: hsl(0 0% 100%);
-
-                /* Container settings */
-                --container-center: true;
-                --container-padding: hsl(2rem);
-                --container-max-width-2xl: hsl(1400px);
               }
 
               .dark {
@@ -370,6 +365,14 @@ def default_attrs
                 --color-success-foreground: var(--success-foreground);
               }
 
+              /* Container settings */
+              @utility container {
+                margin-inline: auto;
+                padding-inline: 2rem;
+                max-width: 1400px;
+              }
+
+
               @layer base {
                 * {
                   @apply border-border outline-ring/50;

app/views/docs/installation/rails_importmaps.rb

@@ -278,11 +278,6 @@ def default_attrs
                 --warning-foreground: hsl(0 0% 100%);
                 --success: hsl(87 100% 37%);
                 --success-foreground: hsl(0 0% 100%);
-
-                /* Container settings */
-                --container-center: true;
-                --container-padding: hsl(2rem);
-                --container-max-width-2xl: hsl(1400px);
               }
 
               .dark {
@@ -371,6 +366,13 @@ def default_attrs
                 --color-success-foreground: var(--success-foreground);
               }
 
+              /* Container settings */
+              @utility container {
+                margin-inline: auto;
+                padding-inline: 2rem;
+                max-width: 1400px;
+              }
+
               @layer base {
                 * {
                   @apply border-border outline-ring/50;

package.json

@@ -5,6 +5,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@hotwired/stimulus": "3.2.2",
     "@hotwired/turbo-rails": "8.0.13",
+    "@tailwindcss/cli": "4.0.14",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "autoprefixer": "10.4.21",
@@ -17,9 +18,7 @@
     "maska": "^3.1.1",
     "motion": "^12.6.0",
     "mustache": "^4.2.0",
-    "postcss": "8.5.3",
-    "tailwindcss": "4.0.15",
-    "tailwindcss-animate": "1.0.7",
+    "tailwindcss": "4.0.14",
     "tippy.js": "^6.3.7",
     "tw-animate-css": "^1.2.4"
   },