Skip to content

Commit 271d07c

Browse files
djalmaaraujodjalmaaraujo
authored
[Documentation] Add documentation for batch 2 components (#337)
* Add docs generator and button documentation Introduce a new generator (`ruby_ui:install:docs`) that copies component documentation files from the gem to Rails applications. Documentation files follow the naming convention `{component}_docs.rb` and are copied to `app/views/docs/` with the `_docs` suffix removed. Usage: bin/rails g ruby_ui:install:docs bin/rails g ruby_ui:install:docs --force Include stub classes for docs dependencies (Views::Base, Docs::Header, Docs::VisualCodeExample, etc.) so docs files can be loaded without errors. Rails apps can override these with full implementations. Includes button component documentation as the first example. * Add documentation for batch 1 components Add docs files for: - accordion - alert - alert_dialog - aspect_ratio - avatar - badge - breadcrumb - calendar - card * Add documentation for batch 2 components Add documentation files for: carousel, chart, checkbox, clipboard, codeblock, collapsible, combobox, command, context_menu, dialog
1 parent f9d703f commit 271d07c

File tree

10 files changed

+933
-0
lines changed

10 files changed

+933
-0
lines changed

‎lib/ruby_ui/carousel/carousel_docs.rb‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Carousel < Views::Base
4+
def view_template
5+
component = "Carousel"
6+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
7+
render Docs::Header.new(title: "Carousel", description: "A carousel with motion and swipe built using Embla.")
8+
9+
Heading(level: 2) { "Usage" }
10+
11+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
12+
<<~RUBY
13+
Carousel(options: {loop:false}, class: "w-full max-w-xs") do
14+
CarouselContent do
15+
5.times do |index|
16+
CarouselItem do
17+
div(class: "p-1") do
18+
Card do
19+
CardContent(class: "flex aspect-square items-center justify-center p-6") do
20+
span(class: "text-4xl font-semibold") { index + 1 }
21+
end
22+
end
23+
end
24+
end
25+
end
26+
end
27+
CarouselPrevious()
28+
CarouselNext()
29+
end
30+
RUBY
31+
end
32+
33+
render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
34+
<<~RUBY
35+
Carousel(class: "w-full max-w-sm") do
36+
CarouselContent do
37+
5.times do |index|
38+
CarouselItem(class: "md:basis-1/2 lg:basis-1/3") do
39+
div(class: "p-1") do
40+
Card do
41+
CardContent(class: "flex aspect-square items-center justify-center p-6") do
42+
span(class: "text-3xl font-semibold") { index + 1 }
43+
end
44+
end
45+
end
46+
end
47+
end
48+
end
49+
CarouselPrevious()
50+
CarouselNext()
51+
end
52+
RUBY
53+
end
54+
55+
render Docs::VisualCodeExample.new(title: "Spacing", context: self) do
56+
<<~RUBY
57+
Carousel(class: "w-full max-w-sm") do
58+
CarouselContent(class: "-ml-1") do
59+
5.times do |index|
60+
CarouselItem(class: "pl-1 md:basis-1/2 lg:basis-1/3") do
61+
div(class: "p-1") do
62+
Card do
63+
CardContent(class: "flex aspect-square items-center justify-center p-6") do
64+
span(class: "text-2xl font-semibold") { index + 1 }
65+
end
66+
end
67+
end
68+
end
69+
end
70+
end
71+
CarouselPrevious()
72+
CarouselNext()
73+
end
74+
RUBY
75+
end
76+
77+
render Docs::VisualCodeExample.new(title: "Orientation", context: self) do
78+
<<~RUBY
79+
Carousel(orientation: :vertical, options: {align: "start"}, class: "w-full max-w-xs") do
80+
CarouselContent(class: "-mt-1 h-[200px]") do
81+
5.times do |index|
82+
CarouselItem(class: "pt-1 md:basis-1/2") do
83+
div(class: "p-1") do
84+
Card do
85+
CardContent(class: "flex items-center justify-center p-6") do
86+
span(class: "text-3xl font-semibold") { index + 1 }
87+
end
88+
end
89+
end
90+
end
91+
end
92+
end
93+
CarouselPrevious()
94+
CarouselNext()
95+
end
96+
RUBY
97+
end
98+
99+
render Components::ComponentSetup::Tabs.new(component_name: component)
100+
101+
render Docs::ComponentsTable.new(component_files(component))
102+
end
103+
end
104+
end

‎lib/ruby_ui/chart/chart_docs.rb‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Chart < Views::Base
4+
def view_template
5+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
6+
render Docs::Header.new(title: "Chart", description: "Displays information in a visual way.")
7+
8+
Heading(level: 2) { "Introduction" }
9+
10+
Text do
11+
plain "RubyUI uses "
12+
InlineLink(href: "https://www.chartjs.org/") { "Chart.js" }
13+
plain " to render charts. Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter. If you're unfamiliar with Chart.js. We recommend the "
14+
InlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" }
15+
plain ". "
16+
end
17+
18+
Heading(level: 2) { "Usage" }
19+
20+
render Docs::VisualCodeExample.new(title: "Bar Chart", context: self) do
21+
<<~RUBY
22+
options = {
23+
type: 'bar',
24+
data: {
25+
labels: ['Phlex', 'VC', 'ERB'],
26+
datasets: [{
27+
label: 'render time (ms)',
28+
data: [100, 520, 1200],
29+
}]
30+
},
31+
options: {
32+
indexAxis: 'y',
33+
scales: {
34+
y: {
35+
beginAtZero: true
36+
}
37+
},
38+
},
39+
}
40+
41+
Chart(options: options)
42+
RUBY
43+
end
44+
45+
render Docs::VisualCodeExample.new(title: "Line Graph", context: self) do
46+
<<~RUBY
47+
options = {
48+
type: 'line',
49+
data: {
50+
labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
51+
datasets: [{
52+
label: 'Github Stars',
53+
data: [40, 30, 79, 140, 290, 550],
54+
}]
55+
},
56+
options: {
57+
scales: {
58+
y: {
59+
beginAtZero: true
60+
}
61+
},
62+
plugins: {
63+
legend: {
64+
display: false
65+
}
66+
}
67+
},
68+
}
69+
70+
Chart(options: options)
71+
RUBY
72+
end
73+
74+
render Docs::VisualCodeExample.new(title: "Pie Chart", description: "Setting custom background color", context: self) do
75+
<<~RUBY
76+
options = {
77+
type: 'pie',
78+
data: {
79+
labels: [
80+
'Red',
81+
'Blue',
82+
'Yellow'
83+
],
84+
datasets: [{
85+
label: 'My First Dataset',
86+
data: [300, 50, 100],
87+
backgroundColor: [
88+
'rgb(255, 99, 132)',
89+
'rgb(54, 162, 235)',
90+
'rgb(255, 205, 86)'
91+
],
92+
hoverOffset: 4
93+
}]
94+
},
95+
}
96+
97+
Chart(options: options)
98+
RUBY
99+
end
100+
101+
render Components::ComponentSetup::Tabs.new(component_name: "Chart")
102+
103+
render Docs::ComponentsTable.new(components)
104+
end
105+
end
106+
107+
private
108+
109+
def components
110+
[
111+
::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus),
112+
::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
113+
]
114+
end
115+
end

‎lib/ruby_ui/checkbox/checkbox_docs.rb‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Checkbox < Views::Base
4+
def view_template
5+
component = "Checkbox"
6+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
7+
render Docs::Header.new(title: "Checkbox", description: "A control that allows the user to toggle between checked and not checked.")
8+
9+
Heading(level: 2) { "Usage" }
10+
11+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
12+
<<~RUBY
13+
div(class: 'flex items-center space-x-3') do
14+
Checkbox(id: 'terms')
15+
label(for: 'terms', class: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70') { "Accept terms and conditions" }
16+
end
17+
RUBY
18+
end
19+
20+
render Docs::VisualCodeExample.new(title: "Checked", context: self) do
21+
<<~RUBY
22+
div(class: "items-top flex space-x-3") do
23+
Checkbox(id: 'terms1', checked: true)
24+
div(class: "grid gap-1.5 leading-none") do
25+
label(
26+
for: "terms1",
27+
class:
28+
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
29+
) { " Accept terms and conditions " }
30+
p(class: "text-sm text-muted-foreground") { " You agree to our Terms of Service and Privacy Policy." }
31+
end
32+
end
33+
RUBY
34+
end
35+
36+
render Components::ComponentSetup::Tabs.new(component_name: component)
37+
38+
render Docs::ComponentsTable.new(component_files(component))
39+
end
40+
end
41+
end

‎lib/ruby_ui/clipboard/clipboard_docs.rb‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Clipboard < Views::Base
4+
def view_template
5+
component = "Clipboard"
6+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
7+
render Docs::Header.new(title: "Clipboard", description: "A control to allow you to copy content to the clipboard.")
8+
9+
Heading(level: 2) { "Usage" }
10+
11+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
12+
<<~RUBY
13+
Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
14+
ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
15+
16+
ClipboardTrigger do
17+
Link(href: "#", class: "gap-1") do
18+
Text(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
19+
end
20+
end
21+
end
22+
RUBY
23+
end
24+
25+
render Components::ComponentSetup::Tabs.new(component_name: component)
26+
27+
render Docs::ComponentsTable.new(component_files(component))
28+
end
29+
end
30+
end

‎lib/ruby_ui/codeblock/codeblock_docs.rb‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Codeblock < Views::Base
4+
def view_template
5+
component = "Codeblock"
6+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
7+
render Docs::Header.new(title: "Codeblock", description: "A component for displaying highlighted code.")
8+
9+
Heading(level: 2) { "Usage" }
10+
11+
render Docs::VisualCodeExample.new(title: "With clipboard", context: self) do
12+
<<~RUBY
13+
code = <<~CODE
14+
def hello_world
15+
puts "Hello, world!"
16+
end
17+
CODE
18+
div(class: 'w-full') do
19+
Codeblock(code, syntax: :ruby)
20+
end
21+
RUBY
22+
end
23+
24+
render Docs::VisualCodeExample.new(title: "Without clipboard", context: self) do
25+
<<~RUBY
26+
code = <<~CODE
27+
def hello_world
28+
puts "Hello, world!"
29+
end
30+
CODE
31+
div(class: 'w-full') do
32+
Codeblock(code, syntax: :ruby, clipboard: false)
33+
end
34+
RUBY
35+
end
36+
37+
render Docs::VisualCodeExample.new(title: "Custom message", description: "Copy the code to see the message", context: self) do
38+
<<~RUBY
39+
code = <<~CODE
40+
def hello_world
41+
puts "Hello, world!"
42+
end
43+
CODE
44+
div(class: 'w-full') do
45+
Codeblock(code, syntax: :ruby, clipboard_success: "Nice one!")
46+
end
47+
RUBY
48+
end
49+
50+
render Components::ComponentSetup::Tabs.new(component_name: component)
51+
52+
render Docs::ComponentsTable.new(component_files(component))
53+
end
54+
end
55+
end

0 commit comments

Comments
 (0)