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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 396bd8424d9be7d44d3d2ebcd27fb5bbcfb8c06de62a9bb1b8cf01fc50d9214e
4
- data.tar.gz: f536874ad166bc77a0817199bc62e6f5505865a61beae8c22afad7b4b6b219a7
3
+ metadata.gz: 5f0cbce70d804580aab642e9b099b3eb3de37af48c39314fe396b84db192c60c
4
+ data.tar.gz: 21a82750e78f2325286bdbf4c1d741ce9ab8ccb79d946eca324ef128ec1a0604
5
5
  SHA512:
6
- metadata.gz: 158b684976d5124c7e6cb2b779fa85305a42b44a9578ddaf7a6b5960ddecc07da71c96734cd1cd663ee2d9f4f65b14a4a2f1e8493293639dfe15eb5640c22f89
7
- data.tar.gz: 111f6aca758b7f21cc7a3021448c4d323e13699d40533b43b10fc39a492c7d9a62d48d2a761c57af32b5c3bfd0d6ef7dd32cf9ddc9de22d3bec7f99c54afe449
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 by inheriting from the base component.
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
@@ -14,7 +14,7 @@ module Protos
14
14
 
15
15
  private
16
16
 
17
- def css
17
+ def theme
18
18
  {
19
19
  container: tokens(
20
20
  "join",
@@ -26,7 +26,7 @@ module Protos
26
26
 
27
27
  private
28
28
 
29
- def css
29
+ def theme
30
30
  {
31
31
  container: tokens(
32
32
  "timeline",
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Protos
4
- VERSION = "0.1.0"
4
+ VERSION = "0.1.1"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: protos
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nolan J Tait