protos 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +109 -2
- data/lib/protos/list.rb +1 -1
- data/lib/protos/timeline.rb +1 -1
- data/lib/protos/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5f0cbce70d804580aab642e9b099b3eb3de37af48c39314fe396b84db192c60c
|
4
|
+
data.tar.gz: 21a82750e78f2325286bdbf4c1d741ce9ab8ccb79d946eca324ef128ec1a0604
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 926c96c62de37324ea452b002c533dd61a32c1a5319415d8ef6a4592d1854325e58ad2b93e03d9b7f79c1f9b3ff8ec742f0d9bc4aed1c5caa651b0a747a8bd8d
|
7
|
+
data.tar.gz: 21ece1afc62a9d5ee521eebbda4347e6111d343965807e80b443b1ea607c43bf6411db97dedb8d395ae332054eaf232932faf1ac850f65e7b5718c8dff01610b
|
data/README.md
CHANGED
@@ -2,8 +2,64 @@
|
|
2
2
|
|
3
3
|
A UI component library for Phlex using daisyui.
|
4
4
|
|
5
|
+
All components avoid using `Phlex::DeferredRender` so you can reorder components
|
6
|
+
exactly how you like them.
|
7
|
+
|
8
|
+
Components are easy to style, positioning them is usually done through the
|
9
|
+
`class` option which applies the style to the outer most container of the
|
10
|
+
component:
|
11
|
+
|
12
|
+
```ruby
|
13
|
+
render Protos::Avatar.new(class: "my-lg") do |avatar|
|
14
|
+
# ...
|
15
|
+
end
|
16
|
+
```
|
17
|
+
|
18
|
+
But they are also extensible to all styles by injecting a `theme` into the
|
19
|
+
component:
|
20
|
+
|
21
|
+
```ruby
|
22
|
+
render Protos::Avatar.new(theme: {
|
23
|
+
container: "my-lg",
|
24
|
+
figure: "p-sm" # Apply this padding to the image container
|
25
|
+
}) do |avatar|
|
26
|
+
# ...
|
27
|
+
end
|
28
|
+
```
|
29
|
+
|
30
|
+
You can even override or negate certain parts of the theme:
|
31
|
+
|
32
|
+
```ruby
|
33
|
+
render Protos::Avatar.new(theme: {
|
34
|
+
container!: "my-lg", # Override the original container style
|
35
|
+
"!figure": "p-sm" # Remove this class from the figure style
|
36
|
+
}) do |avatar|
|
37
|
+
# ...
|
38
|
+
end
|
39
|
+
```
|
40
|
+
|
41
|
+
If the component uses a stimulus controller on the data component, or any other
|
42
|
+
default attributes you can safely add to them without overriding:
|
43
|
+
|
44
|
+
```ruby
|
45
|
+
render Protos::Avatar.new(data: { controller: "my-controller" }) do |avatar|
|
46
|
+
# ...
|
47
|
+
end
|
48
|
+
```
|
49
|
+
|
50
|
+
This will add your attributes without removing the important ones that help the
|
51
|
+
components be accessible.
|
52
|
+
|
5
53
|
Protos uses a set of conventions that make it easier to work with tailwindcss
|
6
|
-
and components in Phlex which you can use
|
54
|
+
and components in Phlex which you can use in your own components by inheriting
|
55
|
+
from the base component.
|
56
|
+
|
57
|
+
This adds:
|
58
|
+
1. extends `Dry::Initializer` to easily add initialization params and options
|
59
|
+
2. adds `attrs` which merges html attributes onto defaults
|
60
|
+
3. adds `default_attrs` for default html attributes on a component
|
61
|
+
4. adds `theme` for default styles hash
|
62
|
+
5. adds `css` for accessing theme slots
|
7
63
|
|
8
64
|
You can find this example in `examples/navbar.rb` which you can run with `ruby
|
9
65
|
examples/navbar.rb`:
|
@@ -82,7 +138,10 @@ If bundler is not being used to manage dependencies, install the gem by executin
|
|
82
138
|
|
83
139
|
## Usage
|
84
140
|
|
85
|
-
Setup tailwindcss
|
141
|
+
Setup tailwindcss to add the protos path to your content.
|
142
|
+
|
143
|
+
Protos also uses semantic spacing such as `p-sm` or `m-md` instead of set
|
144
|
+
numbers so you can easily choose the spacing you want.
|
86
145
|
|
87
146
|
```js
|
88
147
|
// tailwind.config.js
|
@@ -96,6 +155,26 @@ module.exports = {
|
|
96
155
|
"./app/views/**/*.{rb,html,html.erb,erb}",
|
97
156
|
protos_path
|
98
157
|
],
|
158
|
+
theme: {
|
159
|
+
extend: {
|
160
|
+
spacing: {
|
161
|
+
xs: "var(--spacing-xs)",
|
162
|
+
sm: "var(--spacing-sm)",
|
163
|
+
md: "var(--spacing-md)",
|
164
|
+
lg: "var(--spacing-lg)",
|
165
|
+
xl: "var(--spacing-xl)",
|
166
|
+
},
|
167
|
+
// If you use % based spacing you might want different spacing
|
168
|
+
// for any vertical gaps to prevent overflow
|
169
|
+
gap: {
|
170
|
+
xs: "var(--spacing-gap-xs)",
|
171
|
+
sm: "var(--spacing-gap-sm)",
|
172
|
+
md: "var(--spacing-gap-md)",
|
173
|
+
lg: "var(--spacing-gap-lg)",
|
174
|
+
xl: "var(--spacing-gap-xl)",
|
175
|
+
},
|
176
|
+
},
|
177
|
+
}
|
99
178
|
// ....
|
100
179
|
}
|
101
180
|
```
|
@@ -127,6 +206,34 @@ render Protos::Card.new(class: "bg-base-100") do |card|
|
|
127
206
|
end
|
128
207
|
```
|
129
208
|
|
209
|
+
A good idea would be to encapsulate these proto components with your own
|
210
|
+
components as a wrapper. For example you could use `Proto::List` to create your
|
211
|
+
own list and even use `Phlex::DeferredRender` to make the API more convenient.
|
212
|
+
|
213
|
+
```ruby
|
214
|
+
module Ui
|
215
|
+
class List < Protos::Component
|
216
|
+
include Protos::Typography
|
217
|
+
include Phlex::DeferredRender
|
218
|
+
|
219
|
+
def template
|
220
|
+
article(**attrs) do
|
221
|
+
header class: css[:header] do
|
222
|
+
h3(size: :md) { title }
|
223
|
+
nav { render_actions }
|
224
|
+
end
|
225
|
+
|
226
|
+
render Protos::List do |list|
|
227
|
+
items.each do |item|
|
228
|
+
render list.item { render item }
|
229
|
+
end
|
230
|
+
end
|
231
|
+
end
|
232
|
+
end
|
233
|
+
end
|
234
|
+
end
|
235
|
+
```
|
236
|
+
|
130
237
|
## Development
|
131
238
|
|
132
239
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
data/lib/protos/list.rb
CHANGED
data/lib/protos/timeline.rb
CHANGED
data/lib/protos/version.rb
CHANGED