Skip to content

Commit a9a3be1

Browse files
djalmaaraujodjalmaaraujo
committed
Add documentation for batch 4 components
1 parent a02202c commit a9a3be1

8 files changed

Lines changed: 1497 additions & 0 deletions

File tree

‎lib/ruby_ui/popover/popover_docs.rb‎

Lines changed: 971 additions & 0 deletions
Large diffs are not rendered by default.

‎lib/ruby_ui/progress/progress_docs.rb‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Progress < Views::Base
4+
def view_template
5+
component = "Progress"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Progress", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.")
9+
10+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
11+
<<~RUBY
12+
Progress(value: 50, class: "w-[60%]")
13+
RUBY
14+
end
15+
16+
render Docs::VisualCodeExample.new(title: "With custom indicator color", context: self) do
17+
<<~RUBY
18+
Progress(value: 35, class: "w-[60%] [&>*]:bg-success")
19+
RUBY
20+
end
21+
22+
render Components::ComponentSetup::Tabs.new(component_name: component)
23+
24+
render Docs::ComponentsTable.new(component_files(component))
25+
end
26+
end
27+
end

‎lib/ruby_ui/radio_button/radio_button_docs.rb‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::RadioButton < Views::Base
4+
def view_template
5+
component = "RadioButton"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Radio Button", description: "A control that allows users to make a single selection from a list of options.")
9+
10+
Heading(level: 2) { "Usage" }
11+
12+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
13+
<<~RUBY
14+
div(class: "flex items-center space-x-2") do
15+
RadioButton(id: "default")
16+
FormFieldLabel(for: "default") { "Default" }
17+
end
18+
RUBY
19+
end
20+
21+
render Docs::VisualCodeExample.new(title: "Checked", context: self) do
22+
<<~RUBY
23+
div(class: "flex items-center space-x-2") do
24+
RadioButton(id: "checked", checked: true)
25+
FormFieldLabel(for: "checked") { "Checked" }
26+
end
27+
RUBY
28+
end
29+
30+
render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
31+
<<~RUBY
32+
div(class: "flex flex-row items-center gap-2") do
33+
RadioButton(class: "peer",id: "disabled", disabled: true)
34+
FormFieldLabel(for: "disabled") { "Disabled" }
35+
end
36+
RUBY
37+
end
38+
39+
render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
40+
<<~RUBY
41+
div(class: "flex flex-row items-center gap-2") do
42+
RadioButton(class: "peer", id: "aria-disabled", aria: {disabled: "true"})
43+
FormFieldLabel(for: "aria-disabled") { "Aria Disabled" }
44+
end
45+
RUBY
46+
end
47+
48+
render Components::ComponentSetup::Tabs.new(component_name: component)
49+
50+
render Docs::ComponentsTable.new(component_files(component))
51+
end
52+
end
53+
end

‎lib/ruby_ui/select/select_docs.rb‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Select < Views::Base
4+
def view_template
5+
component = "Select"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Select", description: "Displays a list of options for the user to pick from—triggered by a button.")
9+
10+
Heading(level: 2) { "Usage" }
11+
12+
render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
13+
<<~RUBY
14+
Select(class: "w-56") do
15+
SelectInput(value: "apple", id: "select-a-fruit")
16+
17+
SelectTrigger do
18+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
19+
end
20+
21+
SelectContent(outlet_id: "select-a-fruit") do
22+
SelectGroup do
23+
SelectLabel { "Fruits" }
24+
SelectItem(value: "apple") { "Apple" }
25+
SelectItem(value: "orange") { "Orange" }
26+
SelectItem(value: "banana") { "Banana" }
27+
SelectItem(value: "watermelon") { "Watermelon" }
28+
end
29+
end
30+
end
31+
RUBY
32+
end
33+
34+
render Docs::VisualCodeExample.new(title: "Pre-selected Item", context: self) do
35+
<<~RUBY
36+
Select(class: "w-56") do
37+
SelectInput(value: "banana", id: "select-preselected-fruit")
38+
39+
SelectTrigger do
40+
SelectValue(placeholder: "Select a fruit", id: "select-preselected-fruit") { "Banana" }
41+
end
42+
43+
SelectContent(outlet_id: "select-preselected-fruit") do
44+
SelectGroup do
45+
SelectLabel { "Fruits" }
46+
SelectItem(value: "apple") { "Apple" }
47+
SelectItem(value: "orange") { "Orange" }
48+
SelectItem(value: "banana") { "Banana" }
49+
SelectItem(value: "watermelon") { "Watermelon" }
50+
end
51+
end
52+
end
53+
RUBY
54+
end
55+
56+
render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
57+
<<~RUBY
58+
Select(class: "w-56") do
59+
SelectInput(value: "apple", id: "select-a-fruit")
60+
61+
SelectTrigger(disabled: true) do
62+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
63+
end
64+
end
65+
RUBY
66+
end
67+
68+
render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do
69+
<<~RUBY
70+
Select(class: "w-56") do
71+
SelectInput(value: "apple", id: "select-a-fruit")
72+
73+
SelectTrigger do
74+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
75+
end
76+
77+
SelectContent(outlet_id: "select-a-fruit") do
78+
SelectGroup do
79+
SelectLabel { "Fruits" }
80+
SelectItem(data: {disabled: true}, value: "apple") { "Apple" }
81+
SelectItem(value: "orange") { "Orange" }
82+
SelectItem(value: "banana") { "Banana" }
83+
SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" }
84+
end
85+
end
86+
end
87+
RUBY
88+
end
89+
90+
render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do
91+
<<~RUBY
92+
Select(class: "w-56") do
93+
SelectInput(value: "apple", id: "select-a-fruit")
94+
95+
SelectTrigger(aria: {disabled: "true"}) do
96+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
97+
end
98+
end
99+
RUBY
100+
end
101+
102+
render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do
103+
<<~RUBY
104+
Select(class: "w-56") do
105+
SelectInput(value: "apple", id: "select-a-fruit")
106+
107+
SelectTrigger do
108+
SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
109+
end
110+
111+
SelectContent(outlet_id: "select-a-fruit") do
112+
SelectGroup do
113+
SelectLabel { "Fruits" }
114+
SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" }
115+
SelectItem(value: "orange") { "Orange" }
116+
SelectItem(value: "banana") { "Banana" }
117+
SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" }
118+
end
119+
end
120+
end
121+
RUBY
122+
end
123+
124+
render Components::ComponentSetup::Tabs.new(component_name: component)
125+
126+
render Docs::ComponentsTable.new(component_files(component))
127+
end
128+
end
129+
end

‎lib/ruby_ui/separator/separator_docs.rb‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Separator < Views::Base
4+
def view_template
5+
component = "Separator"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Separator", description: "Visually or semantically separates content.")
9+
10+
Heading(level: 2) { "Usage" }
11+
12+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
13+
<<~RUBY
14+
div do
15+
div(class: "space-y-1") do
16+
h4(class: "text-sm font-medium leading-none") { "RubyUI" }
17+
p(class: "text-sm text-muted-foreground") { "An open-source UI component library." }
18+
end
19+
Separator(class: "my-4")
20+
div(class: "flex h-5 items-center space-x-4 text-sm") do
21+
div { "Blog" }
22+
Separator(as: :hr, orientation: :vertical)
23+
div { "Docs" }
24+
Separator(orientation: :vertical)
25+
div { "Source" }
26+
end
27+
end
28+
RUBY
29+
end
30+
31+
render Components::ComponentSetup::Tabs.new(component_name: component)
32+
33+
render Docs::ComponentsTable.new(component_files(component))
34+
end
35+
end
36+
end

‎lib/ruby_ui/sheet/sheet_docs.rb‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Sheet < Views::Base
4+
def view_template
5+
component = "Sheet"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.")
9+
10+
Heading(level: 2) { "Usage" }
11+
12+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
13+
<<~RUBY
14+
Sheet do
15+
SheetTrigger do
16+
Button(variant: :outline) { "Open Sheet" }
17+
end
18+
SheetContent(class: 'sm:max-w-sm') do
19+
SheetHeader do
20+
SheetTitle { "Edit profile" }
21+
SheetDescription { "Make changes to your profile here. Click save when you're done." }
22+
end
23+
24+
SheetMiddle do
25+
label { "Name" }
26+
Input(placeholder: "Joel Drapper") { "Joel Drapper" }
27+
label { "Email" }
28+
Input(placeholder: "joel@drapper.me")
29+
end
30+
SheetFooter do
31+
Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
32+
Button(type: "submit") { "Save" }
33+
end
34+
end
35+
end
36+
RUBY
37+
end
38+
39+
render Docs::VisualCodeExample.new(title: "Side", description: "Use the side property to indicate the edge of the screen where the component will appear.", context: self) do
40+
<<~RUBY
41+
div(class: 'grid grid-cols-2 gap-4') do
42+
# -- TOP --
43+
Sheet do
44+
SheetTrigger do
45+
Button(variant: :outline, class: 'w-full justify-center') { :top }
46+
end
47+
SheetContent(side: :top, class: ("sm:max-w-sm" if [:left, :right].include?(:top))) do
48+
SheetHeader do
49+
SheetTitle { "Edit profile" }
50+
SheetDescription { "Make changes to your profile here. Click save when you're done." }
51+
end
52+
Form do
53+
SheetMiddle do
54+
label { "Name" }
55+
Input(placeholder: "Joel Drapper") { "Joel Drapper" }
56+
57+
label { "Email" }
58+
Input(placeholder: "joel@drapper.me")
59+
end
60+
SheetFooter do
61+
Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
62+
Button(type: "submit") { "Save" }
63+
end
64+
end
65+
end
66+
end
67+
end
68+
RUBY
69+
end
70+
71+
render Components::ComponentSetup::Tabs.new(component_name: component)
72+
73+
render Docs::ComponentsTable.new(component_files(component))
74+
end
75+
end
76+
end

‎lib/ruby_ui/shortcut_key/shortcut_key_docs.rb‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::ShortcutKey < Views::Base
4+
def view_template
5+
component = "ShortcutKey"
6+
7+
div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
8+
render Docs::Header.new(title: "Shortcut Key", description: "A component for displaying keyboard shortcuts.")
9+
10+
Heading(level: 2) { "Usage" }
11+
12+
render Docs::VisualCodeExample.new(title: "Example", context: self) do
13+
<<~RUBY
14+
div(class: "flex flex-col items-center gap-y-4") do
15+
ShortcutKey do
16+
span(class: "text-xs") { "⌘" }
17+
plain "K"
18+
end
19+
p(class: "text-muted-foreground text-sm text-center") { "Note this does not trigger anything, it is purely a visual prompt" }
20+
end
21+
RUBY
22+
end
23+
24+
render Components::ComponentSetup::Tabs.new(component_name: component)
25+
26+
render Docs::ComponentsTable.new(component_files(component))
27+
end
28+
end
29+
end

0 commit comments

Comments
 (0)