protos 0.2.1 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +262 -70
  3. data/examples/list.rb +34 -0
  4. data/lib/protos/accordion/item.rb +9 -5
  5. data/lib/protos/accordion.rb +9 -3
  6. data/lib/protos/alert/actions.rb +2 -0
  7. data/lib/protos/alert/icon.rb +3 -0
  8. data/lib/protos/alert.rb +4 -0
  9. data/lib/protos/attributes.rb +8 -0
  10. data/lib/protos/avatar.rb +3 -0
  11. data/lib/protos/breadcrumbs/crumb.rb +2 -0
  12. data/lib/protos/breadcrumbs.rb +3 -0
  13. data/lib/protos/card/actions.rb +2 -0
  14. data/lib/protos/card/body.rb +2 -0
  15. data/lib/protos/card/image.rb +4 -0
  16. data/lib/protos/card/title.rb +2 -0
  17. data/lib/protos/card.rb +3 -0
  18. data/lib/protos/carousel/actions.rb +2 -0
  19. data/lib/protos/carousel/item.rb +2 -0
  20. data/lib/protos/carousel.rb +4 -0
  21. data/lib/protos/chat_bubble/content.rb +3 -0
  22. data/lib/protos/chat_bubble/footer.rb +2 -0
  23. data/lib/protos/chat_bubble/header.rb +3 -0
  24. data/lib/protos/chat_bubble/image.rb +3 -0
  25. data/lib/protos/chat_bubble.rb +5 -0
  26. data/lib/protos/collapse/content.rb +3 -0
  27. data/lib/protos/collapse/title.rb +12 -1
  28. data/lib/protos/collapse.rb +16 -4
  29. data/lib/protos/combobox.rb +4 -0
  30. data/lib/protos/command/dialog.rb +9 -1
  31. data/lib/protos/command/empty.rb +3 -0
  32. data/lib/protos/command/group.rb +4 -0
  33. data/lib/protos/command/input.rb +2 -0
  34. data/lib/protos/command/item.rb +2 -0
  35. data/lib/protos/command/list.rb +2 -0
  36. data/lib/protos/command/title.rb +3 -0
  37. data/lib/protos/command/trigger.rb +2 -0
  38. data/lib/protos/command.rb +4 -0
  39. data/lib/protos/component.rb +21 -9
  40. data/lib/protos/drawer/content.rb +3 -0
  41. data/lib/protos/drawer/side.rb +8 -1
  42. data/lib/protos/drawer/trigger.rb +3 -0
  43. data/lib/protos/drawer.rb +6 -1
  44. data/lib/protos/dropdown/item.rb +2 -0
  45. data/lib/protos/dropdown/menu.rb +4 -0
  46. data/lib/protos/dropdown/trigger.rb +2 -0
  47. data/lib/protos/dropdown.rb +8 -0
  48. data/lib/protos/engine.rb +3 -0
  49. data/lib/protos/hero/content.rb +3 -0
  50. data/lib/protos/hero/overlay.rb +4 -0
  51. data/lib/protos/hero.rb +4 -0
  52. data/lib/protos/list/item.rb +4 -0
  53. data/lib/protos/list.rb +3 -0
  54. data/lib/protos/modal/close_button.rb +2 -0
  55. data/lib/protos/modal/dialog.rb +9 -1
  56. data/lib/protos/modal/trigger.rb +2 -0
  57. data/lib/protos/modal.rb +3 -0
  58. data/lib/protos/popover/content.rb +5 -0
  59. data/lib/protos/popover/trigger.rb +3 -0
  60. data/lib/protos/popover.rb +8 -1
  61. data/lib/protos/stats/actions.rb +2 -0
  62. data/lib/protos/stats/description.rb +2 -0
  63. data/lib/protos/stats/figure.rb +2 -0
  64. data/lib/protos/stats/stat.rb +2 -0
  65. data/lib/protos/stats/title.rb +2 -0
  66. data/lib/protos/stats/value.rb +2 -0
  67. data/lib/protos/stats.rb +3 -0
  68. data/lib/protos/swap/off.rb +2 -0
  69. data/lib/protos/swap/on.rb +2 -0
  70. data/lib/protos/swap.rb +4 -0
  71. data/lib/protos/table/body.rb +2 -0
  72. data/lib/protos/table/caption.rb +2 -0
  73. data/lib/protos/table/cell.rb +2 -0
  74. data/lib/protos/table/footer.rb +2 -0
  75. data/lib/protos/table/head.rb +2 -0
  76. data/lib/protos/table/header.rb +3 -0
  77. data/lib/protos/table/row.rb +2 -0
  78. data/lib/protos/table.rb +3 -0
  79. data/lib/protos/tabs/tab.rb +2 -0
  80. data/lib/protos/tabs.rb +3 -0
  81. data/lib/protos/theme.rb +15 -1
  82. data/lib/protos/timeline/center.rb +3 -0
  83. data/lib/protos/timeline/item.rb +4 -0
  84. data/lib/protos/timeline/left.rb +3 -0
  85. data/lib/protos/timeline/right.rb +3 -0
  86. data/lib/protos/timeline.rb +3 -0
  87. data/lib/protos/toast/close_button.rb +2 -0
  88. data/lib/protos/toast.rb +4 -0
  89. data/lib/protos/token_list.rb +8 -18
  90. data/lib/protos/typography/heading.rb +3 -0
  91. data/lib/protos/typography/inline_link.rb +2 -0
  92. data/lib/protos/typography/paragraph.rb +2 -0
  93. data/lib/protos/typography.rb +3 -0
  94. data/lib/protos/version.rb +1 -1
  95. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5001f5f332c249597cb0f0c40cb8ff83429d7843db7c2f3f6cfc3b3ad6e9b50
4
- data.tar.gz: 4e0426a89a66cd600cafe5411b02f6b3c5088dcc12bf64148d238bc542878459
3
+ metadata.gz: 939a00cb6d422dc749d734683f4eceedf4c1857f21ab770dae704a99e06cdf8a
4
+ data.tar.gz: 60525463c5531256d9cac2139791b112c477b746a8ed2a643d29856fe548517a
5
5
  SHA512:
6
- metadata.gz: eab1e457a004e0501c698f22a3c1aefb389a28a7970f864762320d4a4628e3b502d4a70080f05cdafc112d4dedd3d8a79637428ecef2194ccdf98d93111f2312
7
- data.tar.gz: 3b1325007d6ad4c99bc478213aebf31bc03463308f591de7051d5542a95f1d9fd76d176d8e2a6d1396887b7f997e8bb19f14bde22d8544036144d2633317b98b
6
+ metadata.gz: '094affdf956f0ff06aba676408ee34d20e6af8ed5ac92afa04576bbc52b83499e491bfd74c3b27c281d20f32fcada8dbad27ec2fbedcb79cb519e9e0a318d2e7'
7
+ data.tar.gz: 953db1b5c57a9202a3f87e0a3ac8e32ed226f48c85588b7d1041559fd8a0749952c76619cc85eb075717b697623bb1dc045cf0dcc9c23370c1622e67c460d993
data/README.md CHANGED
@@ -11,99 +11,232 @@ You can see a full list of the components at
11
11
  [tailwind\_merge](https://github.com/gjtorikian/tailwind_merge).
12
12
  - Uses [tippy.js](https://atomiks.github.io/tippyjs/v6/getting-started/) for
13
13
  dropdowns, combobox, and popovers
14
+ - All components avoid using
15
+ [`Phlex::DeferredRender`](https://www.phlex.fun/#slots)
16
+ so you can reorder components exactly how you like them.
14
17
 
15
18
  Other Phlex based UI libraries worth checking out:
16
19
 
17
20
  - [PhlexUI](https://phlexui.com/)
18
21
  - [ZestUI](https://zestui.com/)
19
22
 
20
- This library avoids re-making Protos components for extremely simple daisyui
21
- components such as:
23
+ ## Protos::Component
22
24
 
23
- - Badge
24
- - Buttons
25
- - Checkbox
26
- - File input
27
- - Indicator
28
- - Join
29
- - Kbd
30
- - Link
31
- - Loading
32
- - Mask
33
- - Progress
34
- - Radial progress
35
- - Radio
36
- - Range
37
- - Select
38
- - Skeleton
39
- - Stack
40
- - Text input
41
- - Textarea
42
- - Toggle
43
- - Tooltip
25
+ A protos component follows some conventions that make them easy to work with as
26
+ components in your app.
27
+
28
+ Every UI component library will have a tension between being too general or
29
+ narrow to be useful. Making components that look good out of the box can make
30
+ them hard to customize.
31
+
32
+ We try and resolve this tensions by making the components have a minimal style
33
+ that can be easily overridden using some ergonomic conventions.
34
+
35
+ There are 3 core conventions:
36
+ - [Slots and themes](#slots-and-themes)
37
+ - [Attrs and default attrs](#attrs-and-default-attrs)
38
+ - [Params and options](#params-and-options)
44
39
 
45
- All components avoid using
46
- [`Phlex::DeferredRender`](https://www.phlex.fun/#slots)
47
- so you can reorder components exactly how you like them.
40
+ ### Slots and themes
48
41
 
49
- Components are easy to style, positioning them is usually done through the
50
- `class` option which applies the style to the outer most container of the
51
- component:
42
+ Components are styled with `css` slots that are filled with values from
43
+ a `theme`:
52
44
 
53
45
  ```ruby
54
- render Protos::Avatar.new(class: "my-lg") do |avatar|
55
- # ...
46
+ class List < Protos::Component
47
+ def template
48
+ ul(class: css[:list]) do
49
+ li(class: css[:item]) { "Item 1" }
50
+ li(class: css[:item]) { "Item 2" }
51
+ end
52
+ end
53
+
54
+ def theme
55
+ {
56
+ list: tokens("space-y-4"),
57
+ item: tokens("font-bold", "text-2xl")
58
+ }
59
+ end
56
60
  end
57
61
  ```
58
62
 
59
- But they are also extensible to all styles by injecting a `theme` into the
60
- component:
63
+ Here we are using conditional `tokens` from Phlex but you can also use
64
+ simple strings.
65
+
66
+ If you want to change the method we define our default theme you can override the
67
+ `theme_method` on the class:
61
68
 
62
69
  ```ruby
63
- render Protos::Avatar.new(theme: {
64
- container: "my-lg",
65
- figure: "p-sm" # Apply this padding to the image container
66
- }) do |avatar|
70
+ class List < Protos::Component
71
+ theme_method :custom_theme
72
+
67
73
  # ...
74
+
75
+ private
76
+
77
+ def custom_theme
78
+ {
79
+ list: tokens("space-y-4"),
80
+ item: tokens("font-bold", "text-2xl")
81
+ }
82
+ end
68
83
  end
69
84
  ```
70
85
 
71
- You can even override or negate certain parts of the theme:
86
+ Using a theme and css slots allows us to easily override any part of a component
87
+ when we render:
72
88
 
73
89
  ```ruby
74
- render Protos::Avatar.new(theme: {
75
- container!: "my-lg", # Override the original container style
76
- "!figure": "p-sm" # Remove this class from the figure style
77
- }) do |avatar|
78
- # ...
90
+ render List.new(
91
+ theme: {
92
+ list: "space-y-8",
93
+ item: "bg-red-500"
94
+ }
95
+ )
96
+ ```
97
+
98
+ This would combine the default and our theme using tailwind\_merge:
99
+
100
+ ```html
101
+ <ul class="space-y-8">
102
+ <li class="font-bold text-2xl bg-red-500">Item 1</li>
103
+ <li class="font-bold text-2xl bg-red-500">Item 2</li>
104
+ </ul>
105
+ ```
106
+
107
+ We can override the slot entirely by using a `!` at the end of the key:
108
+
109
+ ```ruby
110
+ render List.new(
111
+ theme: {
112
+ item!: "bg-red-500"
113
+ }
114
+ )
115
+ ```
116
+
117
+ The css slot `css[:item]` would be overridden rather than merged:
118
+
119
+ ```html
120
+ <li class="bg-red-500">Item 1</li>
121
+ ```
122
+
123
+ We can also negate a certain class or classes from the slot by putting a `!`
124
+ at the start of the key:
125
+
126
+ ```ruby
127
+ render List.new(
128
+ theme: {
129
+ "!item": "text-2xl"
130
+ }
131
+ )
132
+ ```
133
+
134
+ The new `css[:item]` slot would be:
135
+
136
+ ```html
137
+ <li class="font-bold">Item 1</li>
138
+ ```
139
+
140
+ ### Attrs and default attrs
141
+
142
+ By convention, all components spread in an `attrs` hash on their outermost
143
+ element of the component.
144
+
145
+ By doing this we enable 2 main conveniences:
146
+ 1. We can pass `class` when initializing the component
147
+ 2. We can add default attributes that can be merged with defaults
148
+
149
+ ```ruby
150
+ class List < Protos::Component
151
+ def template
152
+ ul(**attrs) do
153
+ # ...
154
+ end
155
+ end
156
+
157
+ private
158
+
159
+ def default_attrs
160
+ {
161
+ data: {
162
+ controller: "list"
163
+ }
164
+ }
165
+ end
166
+
167
+ def theme
168
+ {
169
+ container: tokens("space-y-4"),
170
+ item: tokens("font-bold")
171
+ }
172
+ end
79
173
  end
80
174
  ```
81
175
 
82
- If the component uses a stimulus controller on the data component, or any other
83
- default attributes you can safely add to them without overriding:
176
+ Attrs will by default merge `class` into the `css[:container]` slot so we
177
+ changed that in our theme. We also added `default_attrs` and gave a controller.
178
+ These could be any html options.
179
+
180
+ If we wanted to, just like for our theme we can change the method from
181
+ `default_attrs` by defining the `default_attrs_method` on the class:
84
182
 
85
183
  ```ruby
86
- render Protos::Avatar.new(data: { controller: "my-controller" }) do |avatar|
184
+ class List < Protos::Component
185
+ default_attrs_method :custom_attrs
186
+
87
187
  # ...
188
+
189
+ private
190
+
191
+ def custom_attrs
192
+ {
193
+ data: {
194
+ controller: "list"
195
+ }
196
+ }
197
+ end
198
+
199
+ # ...
200
+ end
201
+ ```
202
+
203
+ Now we get some additional convenience:
204
+
205
+ ```ruby
206
+ render List.new(
207
+ class: "my-lg",
208
+ data: { controller: "confetti" }
209
+ )
210
+ ```
211
+
212
+ This would merge our `data` and `class` safely into the attributes:
213
+
214
+ ```html
215
+ <ul data-controller="list confetti" class="space-y-4 my-lg">
216
+ ```
217
+
218
+ ### Params and options
219
+
220
+ Components extend
221
+ [`Dry::Initializer`](https://dry-rb.org/gems/dry-initializer/3.1/)
222
+ which lets us easily add new positional arguments with `param` or keyword
223
+ arguments with `option`
224
+
225
+ ```ruby
226
+ class List < Protos::Component
227
+ option :ordered
88
228
  end
89
229
  ```
90
230
 
91
- This will add your attributes without removing the important ones that help the
92
- components be accessible.
231
+ The following keywords are reserved in the base class:
93
232
 
94
- Protos uses a set of conventions that make it easier to work with tailwindcss
95
- and components in Phlex which you can use in your own components by inheriting
96
- from the base component.
233
+ - `class`
234
+ - `theme`
235
+ - `html_options`
97
236
 
98
- This adds:
99
- 1. extends `Dry::Initializer` to easily add initialization params and options
100
- 2. adds `attrs` which merges html attributes onto defaults
101
- 3. adds `default_attrs` for default html attributes on a component
102
- 4. adds `theme` for default styles hash
103
- 5. adds `css` for accessing theme slots
237
+ ## Putting it all together
104
238
 
105
- You can find this example in `examples/navbar.rb` which you can run with `ruby
106
- examples/navbar.rb`:
239
+ Here is an example of a small navbar component:
107
240
 
108
241
  ```ruby
109
242
  require "protos"
@@ -179,10 +312,20 @@ If bundler is not being used to manage dependencies, install the gem by executin
179
312
 
180
313
  ## Usage
181
314
 
182
- Setup tailwindcss to add the protos path to your content.
315
+ Setup [Tailwindcss](https://tailwindcss.com/), [daisyUI](https://daisyui.com)
316
+ and add the protos path to your content.
317
+
318
+ ```
319
+ npm install -D tailwindcss postcss autoprefixer daisyui
320
+ npx tailwindcss init
321
+ ```
322
+
323
+ Then we need to add the protos path to the `content` of our tailwindcss config
324
+ so tailwind will read the styles defined in the Protos gem.
183
325
 
184
326
  Protos also uses semantic spacing such as `p-sm` or `m-md` instead of set
185
- numbers so you can easily choose the spacing you want.
327
+ numbers so you can easily choose the spacing you want. So we will need to extend
328
+ `spacing` in your theme.
186
329
 
187
330
  ```js
188
331
  // tailwind.config.js
@@ -233,14 +376,14 @@ And somewhere in your entrypoints import as a side effect:
233
376
  import "protos-stimulus"
234
377
  ```
235
378
 
236
- Then you can use the components
379
+ Then you can use the components in your apps.
237
380
 
238
381
  ```ruby
239
382
  render Protos::Card.new(class: "bg-base-100") do |card|
240
- card.body(class: "gap-sm") do
241
- card.title(class: "font-bold") { "Hello world" }
383
+ render card.body(class: "gap-sm") do
384
+ render card.title(class: "font-bold") { "Hello world" }
242
385
  span { "This is some more content" }
243
- card.actions do
386
+ render card.actions do
244
387
  button(class: "btn btn-primary") { "Action 1" }
245
388
  end
246
389
  end
@@ -249,9 +392,31 @@ end
249
392
 
250
393
  ## Building your own components
251
394
 
252
- A good idea would be to encapsulate these proto components with your own
253
- components as a wrapper. For example you could use `Proto::List` to create your
254
- own list and even use `Phlex::DeferredRender` to make the API more convenient.
395
+ You can override components simply by redefining the class in your own app:
396
+
397
+ ```ruby
398
+ module Protos
399
+ class Swap < Component
400
+ private
401
+
402
+ def on(...)
403
+ MyOnButton.new(...)
404
+ end
405
+
406
+ def theme
407
+ super.merge({
408
+ input: tokens("block", "bg-red-500")
409
+ })
410
+ end
411
+ end
412
+ end
413
+ ```
414
+
415
+ You could also encapsulate these more primitive proto components into your own
416
+ components. You could use `Proto::List` to create your own list and even use
417
+ `Phlex::DeferredRender` to make the API more convenient.
418
+
419
+ Let's create a list component with headers and actions:
255
420
 
256
421
  ```ruby
257
422
  module Ui
@@ -314,9 +479,9 @@ Now the component is specific to our application, and the styles are still
314
479
  overridable at all levels:
315
480
 
316
481
  ```ruby
317
- render Ui::List.new(title: "Project Names") do |list|
482
+ render Ui::List.new(title: "Project Names", ordered: true) do |list|
318
483
  list.with_action { link_to("Add item", "#") }
319
- list.with_item { "Project 1" }
484
+ list.with_item(class: "active") { "Project 1" }
320
485
  list.with_item { "Project 2" }
321
486
  list.with_item { "Project 3" }
322
487
  end
@@ -452,6 +617,33 @@ render Ui::Table.new(title: "A table", collection:) do |table|
452
617
  end
453
618
  ```
454
619
 
620
+ ## No unnecessary components
621
+
622
+ This library avoids re-making Protos components for extremely simple daisyui
623
+ components such as:
624
+
625
+ - Badge
626
+ - Buttons
627
+ - Checkbox
628
+ - File input
629
+ - Indicator
630
+ - Join
631
+ - Kbd
632
+ - Link
633
+ - Loading
634
+ - Mask
635
+ - Progress
636
+ - Radial progress
637
+ - Radio
638
+ - Range
639
+ - Select
640
+ - Skeleton
641
+ - Stack
642
+ - Text input
643
+ - Textarea
644
+ - Toggle
645
+ - Tooltip
646
+
455
647
  ## Development
456
648
 
457
649
  After checking out the repo, run `bin/setup` to install dependencies. Then, run
data/examples/list.rb ADDED
@@ -0,0 +1,34 @@
1
+ require "protos"
2
+
3
+ class List < Protos::Component
4
+ def template
5
+ ul(**attrs) do
6
+ li(class: css[:item]) { "Item 1" }
7
+ li(class: css[:item]) { "Item 2" }
8
+ end
9
+ end
10
+
11
+ def default_attrs
12
+ {
13
+ data: {
14
+ controller: "list"
15
+ }
16
+ }
17
+ end
18
+
19
+ def theme
20
+ {
21
+ container: tokens("space-y-4"),
22
+ item: tokens("font-bold")
23
+ }
24
+ end
25
+ end
26
+
27
+ list = List.new(
28
+ theme: {
29
+ container: "space-y-8",
30
+ item: "bg-red-500"
31
+ }
32
+ )
33
+
34
+ puts list.call
@@ -3,12 +3,16 @@
3
3
  module Protos
4
4
  class Accordion
5
5
  class Item < Component
6
+ # DOCS: An accorion is just a collapse with radio buttons.
7
+
6
8
  option :id, type: Types::Coercible::String
7
9
 
8
10
  def template(&block)
9
11
  li(**attrs) do
10
- render collapse do |_collapse|
11
- input(type: :radio, name: id, id:)
12
+ render collapse_component do
13
+ # form: "" prevents the radio button from being submitted if its
14
+ # within a form
15
+ input(type: :radio, name: id, form: "")
12
16
  yield if block
13
17
  end
14
18
  end
@@ -16,11 +20,11 @@ module Protos
16
20
 
17
21
  private
18
22
 
19
- def collapse
23
+ def collapse_component
20
24
  collapse_theme = { "!container": tokens("bg-base-100") }
21
- collapse_theme[:container!] = css[:collapse]
25
+ collapse_theme[:container!] = css[:collapse] if css[:collapse]
22
26
 
23
- Collapse.new(theme: collapse_theme.compact)
27
+ Collapse.new(theme: collapse_theme)
24
28
  end
25
29
 
26
30
  def theme
@@ -2,7 +2,13 @@
2
2
 
3
3
  module Protos
4
4
  class Accordion < Component
5
- option :id, default: -> { SecureRandom.uuid }
5
+ # DOCS: The accordion component. Accordion is a collapse with radio buttons.
6
+ # Only one item can be open at a time. If you want to allow multiple items
7
+ # to be open at the same time, use the collapse component.
8
+ # https://daisyui.com/components/accordion/
9
+
10
+ option :id,
11
+ default: -> { "collapse-#{SecureRandom.hex(4)}" }
6
12
 
7
13
  def template(&block)
8
14
  ul(**attrs, &block)
@@ -12,8 +18,8 @@ module Protos
12
18
  Item.new(id:, **kwargs)
13
19
  end
14
20
 
15
- def title(...)
16
- Collapse::Title.new(...)
21
+ def title(*args, **kwargs, &block)
22
+ Collapse::Title.new(*args, id:, **kwargs, &block)
17
23
  end
18
24
 
19
25
  def content(...)
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Alert
5
5
  class Actions < Component
6
+ # DOCS: Area for actions (e.g buttons) within an alert
7
+
6
8
  def template(&block)
7
9
  nav(**attrs, &block)
8
10
  end
@@ -3,6 +3,9 @@
3
3
  module Protos
4
4
  class Alert
5
5
  class Icon < Component
6
+ # DOCS: Icon for the alert, usually showing at the top left corner aligned
7
+ # to the text
8
+
6
9
  def template(&block)
7
10
  div(**attrs, &block)
8
11
  end
data/lib/protos/alert.rb CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  module Protos
4
4
  class Alert < Component
5
+ # DOCS: A component that displays messages (usually from flashes). These can
6
+ # be used in combination with Protos::Toast to have popup notifications.
7
+ # https://daisyui.com/components/alert/
8
+
5
9
  AlertTypes = Types::Coercible::Symbol.enum(
6
10
  :info,
7
11
  :success,
@@ -2,6 +2,14 @@
2
2
 
3
3
  module Protos
4
4
  class Attributes
5
+ # DOCS: A class that represents the attributes of a component. This would be
6
+ # all html options except for `class` and `theme`.
7
+ #
8
+ # This class is responsible for safely merging in both user supplied and
9
+ # default attributes. When a user adds { data: { controller: "foo" }} to
10
+ # their component. This will merge the value in so that any default
11
+ # controllers do not get overridden.
12
+
5
13
  def initialize(attrs = {}, **kwargs)
6
14
  @attrs = attrs.merge(kwargs)
7
15
  end
data/lib/protos/avatar.rb CHANGED
@@ -2,6 +2,9 @@
2
2
 
3
3
  module Protos
4
4
  class Avatar < Component
5
+ # DOCS: The avatar component is used to represent a user or entity.
6
+ # https://daisyui.com/components/avatar/
7
+
5
8
  IndicatorTypes = Types::Coercible::Symbol.enum(:none, :online, :offline)
6
9
 
7
10
  option :placeholder, type: Types::Bool, default: -> { false }
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Breadcrumbs
5
5
  class Crumb < Component
6
+ # DOCS: A crumb is a single item within a breadcrumb
7
+
6
8
  def template(&block)
7
9
  li(**attrs, &block)
8
10
  end
@@ -2,6 +2,9 @@
2
2
 
3
3
  module Protos
4
4
  class Breadcrumbs < Component
5
+ # DOCS: A list of breadcrumbs (e.g links) for navigation
6
+ # https://daisyui.com/components/breadcrumbs/
7
+
5
8
  def template(&block)
6
9
  nav(**attrs) do
7
10
  ul(class: css[:list], &block)
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Card
5
5
  class Actions < Component
6
+ # DOCS: Area for actions (e.g buttons) within a card
7
+
6
8
  def template(&block)
7
9
  nav(**attrs, &block)
8
10
  end
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Card
5
5
  class Body < Component
6
+ # DOCS: The main content area of a card
7
+
6
8
  def template(&block)
7
9
  div(**attrs, &block)
8
10
  end
@@ -3,6 +3,10 @@
3
3
  module Protos
4
4
  class Card
5
5
  class Image < Component
6
+ # DOCS: A container for an image for on a card. This matches the examples
7
+ # on daisyui which will style the <figure> tag depending on whether
8
+ # image-overlay is present on the card.
9
+
6
10
  def template(&block)
7
11
  figure(**attrs, &block)
8
12
  end
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Card
5
5
  class Title < Component
6
+ # DOCS: The title of a card
7
+
6
8
  def template(&block)
7
9
  div(**attrs, &block)
8
10
  end
data/lib/protos/card.rb CHANGED
@@ -2,6 +2,9 @@
2
2
 
3
3
  module Protos
4
4
  class Card < Component
5
+ # DOCS: A card component
6
+ # https://daisyui.com/components/card/
7
+
5
8
  ImageDisplayTypes = Types::Coercible::Symbol.enum(:default, :overlay, :side)
6
9
 
7
10
  option :border, type: Types::Bool, default: -> { true }, reader: :private
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Carousel
5
5
  class Actions < Component
6
+ # DOCS: Area for actions (e.g buttons) within a carousel
7
+
6
8
  def template(&block)
7
9
  div(**attrs, &block)
8
10
  end
@@ -3,6 +3,8 @@
3
3
  module Protos
4
4
  class Carousel
5
5
  class Item < Component
6
+ # DOCS: A single item within a carousel
7
+
6
8
  def template(&block)
7
9
  div(**attrs, &block)
8
10
  end
@@ -2,6 +2,10 @@
2
2
 
3
3
  module Protos
4
4
  class Carousel < Component
5
+ # DOCS: A carousel component that contains items that can be scrolled
6
+ # through in a mobile friendly manner.
7
+ # https://daisyui.com/components/carousel/
8
+
5
9
  option :vertical, type: Types::Bool, default: -> { false }
6
10
  option :snap_to,
7
11
  default: -> { :none },