Skip to content

Update manual instructions to install components #179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stephannv merged 1 commit into from
Mar 25, 2025
Merged

Update manual instructions to install components #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions app/assets/stylesheets/application.tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -142,6 +137,13 @@
--color-success-foreground: var(--success-foreground);
}

/* Container settings */
@utility container {
margin-inline: auto;
padding-inline: 2rem;
max-width: 1400px;
}

Comment on lines +140 to +146
Copy link
Contributor Author

@stephannv stephannv Mar 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related: ruby-ui/ruby_ui#240

@layer base {
* {
@apply border-border outline-ring/50;
Expand Down
43 changes: 10 additions & 33 deletions app/components/component_setup/manual_steps.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down
9 changes: 2 additions & 7 deletions app/lib/ruby_ui/file_manager.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
13 changes: 8 additions & 5 deletions app/views/docs/installation/rails_bundler.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 7 additions & 5 deletions app/views/docs/installation/rails_importmaps.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
Loading