Skip to content

Commit

Permalink
Add explanation of when to include PhlexyUI in ApplicationComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
davidalejandroaguilar committed Oct 10, 2024
1 parent 242ca68 commit e6edaf3
Showing 1 changed file with 42 additions and 6 deletions.
48 changes: 42 additions & 6 deletions app/views/docs/installations/show_view.rb
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,11 @@ def render_ruby_dependencies_section
RB
end

p do
"2. (Optional) Include the PhlexyUI module in ApplicationComponent:"
div do
span do
"2. (Optional) Include the PhlexyUI module in "
end
Code(:ruby, source: "ApplicationComponent:", inline: true)
end

Code(:ruby, source: <<~RB, mockup: true) do
Expand All @@ -193,8 +196,12 @@ class ApplicationComponent < Phlex::HTML
RB
end

p do
"Including PhlexyUI is necessary if you want to use PhlexyUI components using the short-form syntax provided by Phlex::Kit. For example:"
div do
span do
<<~TEXT
This will allow you to use PhlexyUI components using the short-form syntax. For example:
TEXT
end
end

Code(:ruby, source: <<~RB, mockup: true) do
Expand All @@ -208,8 +215,10 @@ def view_template
RB
end

p do
"If you don't include PhlexyUI in ApplicationComponent, you can use the long-form syntax:"
div do
span do
"If you don't include PhlexyUI, you can still use the namespaced syntax:"
end
end

Code(:ruby, source: <<~RB, mockup: true) do
Expand All @@ -223,6 +232,33 @@ def view_template
RB
end

p do
plain "Consider "
b do
"not"
end
plain " including PhlexyUI in ApplicationComponent if:"
end

ul class: "list-disc list-inside" do
li do
plain "You have your own component library with the same component names as PhlexyUI."
end
li do
plain "You're including your own components module in "
Code(:ruby, source: "ApplicationComponent", inline: true)
plain "."
end
end

div do
span do
plain "In this scenario, including both PhlexyUI and your own component library in "
Code(:ruby, source: "ApplicationComponent", inline: true)
plain " will lead to naming conflicts."
end
end

p do
"3. Update your tailwind.config.js file to include PhlexyUI styles:"
end
Expand Down

0 comments on commit e6edaf3

Please sign in to comment.