ariadne_view_components 0.0.4 → 0.0.5

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.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/builds/ariadne_view_components.css +1874 -0
  4. data/app/assets/javascripts/ariadne.d.ts +1 -0
  5. data/app/assets/javascripts/ariadne_view_components.js +1 -1
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/javascripts/clipboard-copy-component.d.ts +4 -0
  8. data/app/assets/javascripts/slideover-component.d.ts +9 -0
  9. data/app/assets/javascripts/time_ago_component.d.ts +1 -0
  10. data/app/assets/javascripts/tooltip-component.d.ts +24 -0
  11. data/app/assets/stylesheets/application.ariadne_view_components.css +5 -3
  12. data/app/assets/stylesheets/tooltip-component.css +37 -0
  13. data/app/components/ariadne/ariadne.d.ts +1 -0
  14. data/app/components/ariadne/ariadne.js +9 -0
  15. data/app/components/ariadne/ariadne.ts +3 -0
  16. data/app/components/ariadne/base_button.rb +9 -8
  17. data/app/components/ariadne/blankslate_component.rb +1 -1
  18. data/app/components/ariadne/body_component.rb +30 -0
  19. data/app/components/ariadne/button_component.rb +5 -10
  20. data/app/components/ariadne/clipboard-copy-component.d.ts +4 -0
  21. data/app/components/ariadne/clipboard-copy-component.js +18 -0
  22. data/app/components/ariadne/clipboard_copy_component.d.ts +4 -0
  23. data/app/components/ariadne/clipboard_copy_component.html.erb +2 -2
  24. data/app/components/ariadne/clipboard_copy_component.js +18 -0
  25. data/app/components/ariadne/clipboard_copy_component.rb +41 -3
  26. data/app/components/ariadne/comment_component.html.erb +25 -0
  27. data/app/components/ariadne/comment_component.rb +45 -0
  28. data/app/components/ariadne/component.rb +2 -1
  29. data/app/components/ariadne/container_component.rb +1 -1
  30. data/app/components/ariadne/flash_component.rb +1 -1
  31. data/app/components/ariadne/flex_component.rb +51 -0
  32. data/app/components/ariadne/grid_component.html.erb +12 -3
  33. data/app/components/ariadne/grid_component.rb +18 -7
  34. data/app/components/ariadne/header_component.rb +1 -1
  35. data/app/components/ariadne/heading_component.rb +2 -2
  36. data/app/components/ariadne/heroicon_component.html.erb +4 -6
  37. data/app/components/ariadne/heroicon_component.rb +18 -7
  38. data/app/components/ariadne/inline_flex_component.rb +11 -9
  39. data/app/components/ariadne/link_component.rb +13 -8
  40. data/app/components/ariadne/list_component.html.erb +5 -7
  41. data/app/components/ariadne/list_component.rb +4 -34
  42. data/app/components/ariadne/main_component.rb +32 -0
  43. data/app/components/ariadne/slideover-component.d.ts +9 -0
  44. data/app/components/ariadne/slideover-component.js +20 -0
  45. data/app/components/ariadne/slideover_component.d.ts +9 -0
  46. data/app/components/ariadne/slideover_component.html.erb +1 -4
  47. data/app/components/ariadne/slideover_component.js +19 -0
  48. data/app/components/ariadne/slideover_component.rb +19 -15
  49. data/app/components/ariadne/time_ago_component.d.ts +1 -0
  50. data/app/components/ariadne/time_ago_component.js +1 -0
  51. data/app/components/ariadne/tooltip-component.d.ts +24 -0
  52. data/app/components/ariadne/tooltip-component.js +42 -0
  53. data/app/components/ariadne/tooltip-component.ts +57 -0
  54. data/app/components/ariadne/tooltip_component.html.erb +4 -0
  55. data/app/components/ariadne/tooltip_component.rb +34 -31
  56. data/app/lib/ariadne/form_builder.rb +14 -14
  57. data/lib/ariadne/classify.rb +4 -98
  58. data/lib/ariadne/view_components/version.rb +1 -1
  59. data/lib/ariadne/view_components.rb +31 -29
  60. data/lib/rubocop/cop/ariadne/ariadne_heroicon.rb +2 -2
  61. data/lib/tasks/docs.rake +4 -0
  62. data/static/arguments.yml +89 -13
  63. data/static/audited_at.json +4 -0
  64. data/static/classes.yml +40 -8
  65. data/static/constants.json +83 -101
  66. data/static/statuses.json +4 -0
  67. metadata +48 -6
data/static/classes.yml CHANGED
@@ -1,10 +1,13 @@
1
1
  ---
2
2
  - ".-"
3
+ - ".-m-0.5"
3
4
  - ".-mb-8"
5
+ - ".-mr-px"
4
6
  - ".-mx-1.5"
5
7
  - ".-mx-2"
6
8
  - ".-my-1.5"
7
9
  - ".a"
10
+ - ".absolute"
8
11
  - ".all"
9
12
  - ".alt:"
10
13
  - ".and"
@@ -20,24 +23,26 @@
20
23
  - ".bg-green-50"
21
24
  - ".bg-purple-50"
22
25
  - ".bg-red-50"
26
+ - ".bg-slate-900"
23
27
  - ".bg-state-closed"
24
28
  - ".bg-state-open"
25
29
  - ".bg-white"
26
30
  - ".bg-yellow-50"
27
31
  - ".billion:"
32
+ - ".block"
28
33
  - ".bold"
29
34
  - ".bold-button-0"
30
35
  - ".border"
36
+ - ".border-b"
31
37
  - ".border-billy-purple"
38
+ - ".border-black"
32
39
  - ".border-blue-300"
33
40
  - ".border-gray-300"
34
41
  - ".border-green-300"
35
- - ".border-our-purple-300"
36
42
  - ".border-purple-300"
37
43
  - ".border-red-300"
38
44
  - ".border-state-closed"
39
45
  - ".border-state-open"
40
- - ".border-t"
41
46
  - ".border-transparent"
42
47
  - ".border-yellow-300"
43
48
  - ".button-with-tooltip"
@@ -49,6 +54,7 @@
49
54
  - ".clock"
50
55
  - ".color-fg-success"
51
56
  - ".cursor-pointer"
57
+ - ".decoration-double"
52
58
  - ".divide-gray-200"
53
59
  - ".divide-gray-300"
54
60
  - ".divide-y"
@@ -58,13 +64,14 @@
58
64
  - ".fill-state-closed"
59
65
  - ".fill-state-open"
60
66
  - ".flex"
67
+ - ".flex-1"
61
68
  - ".flex-auto"
62
69
  - ".flex-col"
63
- - ".flex-row"
64
70
  - ".flex-shrink-0"
65
71
  - ".flow-root"
66
72
  - ".focus-visible:outline-2"
67
73
  - ".focus-visible:outline-offset-2"
74
+ - ".focus:border-indigo-500"
68
75
  - ".focus:outline-none"
69
76
  - ".focus:ring-2"
70
77
  - ".focus:ring-blue-600"
@@ -93,9 +100,11 @@
93
100
  - ".group"
94
101
  - ".h-10"
95
102
  - ".h-full"
103
+ - ".h-screen"
96
104
  - ".hidden"
97
105
  - ".hover:bg-blue-100"
98
106
  - ".hover:bg-button-hover-color"
107
+ - ".hover:bg-gray-100"
99
108
  - ".hover:bg-gray-50"
100
109
  - ".hover:bg-gray-700"
101
110
  - ".hover:bg-green-100"
@@ -103,6 +112,9 @@
103
112
  - ".hover:bg-red-100"
104
113
  - ".hover:bg-slate-100"
105
114
  - ".hover:bg-yellow-100"
115
+ - ".hover:text-button-text-color"
116
+ - ".hover:text-gray-500"
117
+ - ".hover:text-gray-900"
106
118
  - ".hover:text-slate-900"
107
119
  - ".id:"
108
120
  - ".immediately"
@@ -110,16 +122,17 @@
110
122
  - ".information-circle"
111
123
  - ".inline-block"
112
124
  - ".inline-flex"
113
- - ".inset-0"
125
+ - ".invisible"
114
126
  - ".is"
115
127
  - ".items-baseline"
116
128
  - ".items-center"
117
129
  - ".justify-between"
118
130
  - ".justify-center"
131
+ - ".justify-end"
119
132
  - ".leading-4"
120
133
  - ".leading-5"
121
134
  - ".leading-7"
122
- - ".lg:grid-cols-4"
135
+ - ".lg:grid-cols-3"
123
136
  - ".lg:px-8"
124
137
  - ".lg:py-16"
125
138
  - ".link"
@@ -129,28 +142,35 @@
129
142
  - ".m:"
130
143
  - ".mail"
131
144
  - ".max-w-7xl"
132
- - ".md:grid-cols-3"
145
+ - ".max-w-xs"
133
146
  - ".members"
134
147
  - ".menu"
135
148
  - ".million:"
136
149
  - ".min-h-screen"
137
150
  - ".ml-2"
138
151
  - ".ml-3"
139
- - ".mt-1"
140
152
  - ".mt-2"
141
153
  - ".mt-4"
142
154
  - ".mt-6"
143
155
  - ".mt-8"
156
+ - ".mt-px"
144
157
  - ".mx-auto"
158
+ - ".mx-px"
159
+ - ".my-4"
145
160
  - ".organization"
161
+ - ".p-0.5"
146
162
  - ".p-1"
147
163
  - ".p-1.5"
148
164
  - ".p-4"
165
+ - ".p-8"
166
+ - ".pb-12"
167
+ - ".pb-2"
149
168
  - ".pb-4"
150
169
  - ".pencil"
151
170
  - ".pl-2"
152
171
  - ".pl-3"
153
172
  - ".plus-sm"
173
+ - ".pt-2"
154
174
  - ".pt-5"
155
175
  - ".pt-6"
156
176
  - ".pt:"
@@ -165,10 +185,12 @@
165
185
  - ".py-12"
166
186
  - ".py-2"
167
187
  - ".py-3"
188
+ - ".py-4"
168
189
  - ".py-5"
169
190
  - ".question-mark-circle"
170
191
  - ".relative"
171
192
  - ".rounded"
193
+ - ".rounded-bl-lg"
172
194
  - ".rounded-full"
173
195
  - ".rounded-lg"
174
196
  - ".rounded-m"
@@ -177,6 +199,7 @@
177
199
  - ".scroll-smooth"
178
200
  - ".search"
179
201
  - ".secure"
202
+ - ".shadow"
180
203
  - ".shadow-sm"
181
204
  - ".should"
182
205
  - ".sm:grid-cols-2"
@@ -184,6 +207,7 @@
184
207
  - ".sm:px-6"
185
208
  - ".sm:text-3xl"
186
209
  - ".sm:text-4xl"
210
+ - ".sm:text-sm"
187
211
  - ".sr-only"
188
212
  - ".sticky"
189
213
  - ".stroke-billy-purple"
@@ -196,12 +220,15 @@
196
220
  - ".text-3xl"
197
221
  - ".text-base"
198
222
  - ".text-billy-purple"
223
+ - ".text-black-700"
199
224
  - ".text-blue-500"
200
225
  - ".text-blue-700"
201
226
  - ".text-blue-800"
202
227
  - ".text-button-text-color"
203
228
  - ".text-center"
229
+ - ".text-gray-500"
204
230
  - ".text-gray-700"
231
+ - ".text-gray-800"
205
232
  - ".text-gray-900"
206
233
  - ".text-green-500"
207
234
  - ".text-green-700"
@@ -227,14 +254,18 @@
227
254
  - ".the"
228
255
  - ".to"
229
256
  - ".tooltip"
257
+ - ".tooltip-arrow"
258
+ - ".tooltip-component"
230
259
  - ".top-0"
231
- - ".top-4"
232
260
  - ".tracking-tight"
233
261
  - ".transition"
234
262
  - ".trash"
263
+ - ".trigger"
235
264
  - ".type:"
265
+ - ".underline"
236
266
  - ".up"
237
267
  - ".vault"
268
+ - ".w-0"
238
269
  - ".w-auto"
239
270
  - ".w-full"
240
271
  - ".whitespace-nowrap"
@@ -243,3 +274,4 @@
243
274
  - ".x"
244
275
  - ".z-10"
245
276
  - ".z-50"
277
+ - ".z-max"
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "Ariadne::BaseButton": {
3
3
  "DEFAULT_CLASSES": "inline-flex items-center px-4 py-2 text-sm border border-gray-300 shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
4
- "DEFAULT_SIZE": "m",
4
+ "DEFAULT_SIZE": "md",
5
5
  "DEFAULT_TAG": "button",
6
6
  "DEFAULT_TYPE": "button",
7
7
  "SIZE_CLASS_MAPPINGS": {
8
8
  "xs": "inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded",
9
- "s": "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
10
- "m": "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
11
- "l": "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
9
+ "sm": "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
10
+ "md": "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
11
+ "lg": "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
12
12
  "xl": "inline-flex items-center px-6 py-3 text-base font-medium rounded-md"
13
13
  },
14
14
  "TAG_OPTIONS": [
@@ -21,11 +21,12 @@
21
21
  "reset",
22
22
  "submit"
23
23
  ],
24
+ "TYPE_SUBMIT": "submit",
24
25
  "VALID_SIZES": [
25
26
  "xs",
26
- "s",
27
- "m",
28
- "l",
27
+ "sm",
28
+ "md",
29
+ "lg",
29
30
  "xl"
30
31
  ]
31
32
  },
@@ -56,6 +57,9 @@
56
57
  "div"
57
58
  ]
58
59
  },
60
+ "Ariadne::BodyComponent": {
61
+ "DEFAULT_CLASSES": "flex flex-col min-h-screen"
62
+ },
59
63
  "Ariadne::ButtonComponent": {
60
64
  "DEFAULT_SCHEME": "default",
61
65
  "LINK_SCHEME": "link",
@@ -77,11 +81,28 @@
77
81
  "Ariadne::ClipboardCopyComponent": {
78
82
  "DATA_ACTION": "click->clipboard-copy-component#copy",
79
83
  "DATA_CONTROLLER": "clipboard-copy-component",
80
- "DEFAULT_CLASSES": "cursor-pointer",
84
+ "DATA_CONTROLLERS": {
85
+ "data-controller": "clipboard-copy-component",
86
+ "data-action": "click->clipboard-copy-component#copy"
87
+ },
88
+ "DATA_CONTROLLERS_WITH_TOOLTIPS": {
89
+ "data-controller": "clipboard-copy-component tooltip-component",
90
+ "data-action": "click->clipboard-copy-component#copy mouseover->tooltip-component#show mouseout->tooltip-component#hide",
91
+ "data-tooltip-component-target": "trigger"
92
+ },
93
+ "DEFAULT_CLASSES": " cursor-pointer underline decoration-double font-semibold hover:text-button-text-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
81
94
  "DEFAULT_TAG": "clipboard-copy"
82
95
  },
96
+ "Ariadne::CommentComponent": {
97
+ "DEFAULT_CLASSES": "",
98
+ "DEFAULT_TAB_CLASSES": "text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md",
99
+ "DEFAULT_TAG": "form",
100
+ "TAG_OPTIONS": [
101
+ "form"
102
+ ]
103
+ },
83
104
  "Ariadne::ContainerComponent": {
84
- "DEFAULT_CLASSES": "px-4 py-5 sm:px-6 lg:px-8"
105
+ "DEFAULT_CLASSES": "px-4 sm:px-6 lg:px-8"
85
106
  },
86
107
  "Ariadne::Content": {
87
108
  },
@@ -133,84 +154,34 @@
133
154
  "danger"
134
155
  ]
135
156
  },
136
- "Ariadne::FooterComponent": {
137
- "DEFAULT_CLASSES": "py-5"
138
- },
139
- "Ariadne::FormComponent": {
140
- "CheckboxField": "Ariadne::FormComponent::CheckboxField",
141
- "DEFAULT_CLASSES": "space-y-8 divide-y divide-gray-200 sm:space-y-5",
142
- "DEFAULT_TAG": "form",
143
- "EmailField": "Ariadne::FormComponent::EmailField",
144
- "FORM_TYPE_CHECKBOX": "checkbox",
145
- "FORM_TYPE_EMAIL": "email",
146
- "FORM_TYPE_HIDDEN": "hidden",
147
- "FORM_TYPE_PASSWORD": "password",
148
- "FORM_TYPE_RADIO": "radio",
149
- "FORM_TYPE_TEXT": "text",
150
- "FORM_TYPE_TEXTAREA": "textarea",
151
- "HiddenField": "Ariadne::FormComponent::HiddenField",
152
- "PasswordField": "Ariadne::FormComponent::PasswordField",
153
- "RadioField": "Ariadne::FormComponent::RadioField",
154
- "Section": "Ariadne::FormComponent::Section",
157
+ "Ariadne::FlexComponent": {
158
+ "DEFAULT_CLASSES": "flex",
159
+ "DEFAULT_TAG": "div",
155
160
  "TAG_OPTIONS": [
156
- "form"
157
- ],
158
- "TextField": "Ariadne::FormComponent::TextField",
159
- "TextareaField": "Ariadne::FormComponent::TextareaField",
160
- "VALID_FORM_TYPES": [
161
- "text",
162
- "checkbox",
163
- "radio",
164
- "textarea",
165
- "hidden",
166
- "password",
167
- "email"
161
+ "div"
168
162
  ],
169
- "VALID_METHODS": [
170
- "get",
171
- "post",
172
- "put",
173
- "delete",
174
- "patch"
163
+ "VALID_TYPES": [
164
+ "row",
165
+ "column",
166
+ "row_reverse",
167
+ "column_reverse"
175
168
  ]
176
169
  },
177
- "Ariadne::FormComponent::CheckboxField": {
178
- "DEFAULT_CHECKBOX_CLASSES": "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
179
- },
180
- "Ariadne::FormComponent::EmailField": {
181
- "AUTOCOMPLETE": "email",
182
- "DEFAULT_EMAIL_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
183
- },
184
- "Ariadne::FormComponent::HiddenField": {
185
- },
186
- "Ariadne::FormComponent::PasswordField": {
187
- "AUTOCOMPLETE": "current-password",
188
- "DEFAULT_PASSWORD_CLASSES": "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
189
- },
190
- "Ariadne::FormComponent::RadioField": {
191
- "DEFAULT_RADIO_CLASSES": "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
192
- },
193
- "Ariadne::FormComponent::Section": {
194
- "DEFAULT_SECTION_CLASSES": "divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5",
195
- "DEFAULT_SECTION_HEADING_CLASSES": "text-lg leading-6 font-medium text-gray-900",
196
- "DEFAULT_SECTION_SUBHEADING_CLASSES": "mt-1 max-w-2xl text-sm text-gray-500",
197
- "ITEMS_LAMBDA": "#<Proc:0x00007f117916e6a8 /home/runner/work/ariadne/ariadne/ruby/ariadne_view_components/app/components/ariadne/form_component.rb:71 (lambda)>"
198
- },
199
- "Ariadne::FormComponent::TextField": {
200
- "DEFAULT_TEXT_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
201
- },
202
- "Ariadne::FormComponent::TextareaField": {
203
- "DEFAULT_TEXTAREA_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
170
+ "Ariadne::FooterComponent": {
171
+ "DEFAULT_CLASSES": "py-5"
204
172
  },
205
173
  "Ariadne::GridComponent": {
206
- "DEFAULT_CLASSES": "grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
207
- "DEFAULT_LINK_COLOR_CLASSES": "text-button-text-color bg-button-bg-color hover:bg-button-hover-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
174
+ "DEFAULT_CLASSES": "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",
175
+ "DEFAULT_LINK_COLOR_CLASSES": "text-button-text-color bg-button-bg-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
208
176
  "Item": "Ariadne::GridComponent::Item"
209
177
  },
210
178
  "Ariadne::GridComponent::Item": {
179
+ "DEFAULT_ACTION_LINK_CLASSES": "text-button-text-color relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm font-medium border border-transparent rounded-bl-lg rounded-lg",
180
+ "DEFAULT_ENTRY_CLASSES": "group flex-1 flex flex-col p-8 hover:bg-button-hover-color hover:text-gray-500 rounded-lg",
181
+ "DEFAULT_ITEM_CLASSES": "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
211
182
  },
212
183
  "Ariadne::HeaderComponent": {
213
- "DEFAULT_CLASSES": "sticky top-0 z-50 px-4 py-2 bg-white shadow-sm shadow-slate-900/5 transition duration-500",
184
+ "DEFAULT_CLASSES": "sticky top-0 z-50 px-4 py-5 bg-white shadow-sm shadow-slate-900/5 transition duration-500",
214
185
  "DEFAULT_IMAGE_LOGO_CLASSES": "h-10 w-auto",
215
186
  "DEFAULT_NAV_LINK_CLASSES": "inline-block rounded-lg py-1 px-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900",
216
187
  "DEFAULT_PROFILE_LINK_CLASSES": "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -229,11 +200,12 @@
229
200
  ],
230
201
  "TAG_TO_CLASSES": {
231
202
  "h1": "font-bold leading-7 sm:text-3xl",
232
- "h2": "text-3xl font-extrabold text-gray-900",
233
- "h3": "text-2xl font-extrabold text-gray-900"
203
+ "h2": "text-3xl font-extrabold",
204
+ "h3": "text-2xl font-extrabold"
234
205
  }
235
206
  },
236
207
  "Ariadne::HeroiconComponent": {
208
+ "DEFAULT_TEXT_CLASSES": "pl-2",
237
209
  "PRELOADED_ICONS": [
238
210
  {
239
211
  "name": "bell",
@@ -308,15 +280,18 @@
308
280
  "variant": "outline"
309
281
  }
310
282
  ],
311
- "SIZE_DEFAULT": "s",
283
+ "SIZE_DEFAULT": "sm",
284
+ "SIZE_LARGE": "lg",
312
285
  "SIZE_MAPPINGS": {
313
- "s": 16,
314
- "m": 24
286
+ "sm": 16,
287
+ "md": 24,
288
+ "lg": 128
315
289
  },
316
- "SIZE_MEDIUM": "m",
290
+ "SIZE_MEDIUM": "md",
317
291
  "SIZE_OPTIONS": [
318
- "s",
319
- "m"
292
+ "sm",
293
+ "md",
294
+ "lg"
320
295
  ]
321
296
  },
322
297
  "Ariadne::ImageComponent": {
@@ -324,8 +299,9 @@
324
299
  },
325
300
  "Ariadne::InlineFlexComponent": {
326
301
  "DEFAULT_CLASSES": "inline-flex items-baseline",
302
+ "DEFAULT_LABEL_CLASSES": "pl-2 text-sm font-medium text-gray-900",
327
303
  "DEFAULT_TAG": "span",
328
- "DEFAULT_TEXT_CLASSES": "pl-2 text-sm font-medium text-gray-900 text-sm",
304
+ "DEFAULT_TEXT_CLASSES": "pl-2 text-sm font-medium text-gray-900",
329
305
  "DEFAULT_TEXT_CLOSED_CLASSES": "text-state-closed",
330
306
  "DEFAULT_TEXT_OPEN_CLASSES": "text-state-open",
331
307
  "STATE_CLOSED_SVG": "<svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" class=\"stroke-state-closed fill-state-closed \" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n</svg>\n",
@@ -336,6 +312,8 @@
336
312
  ]
337
313
  },
338
314
  "Ariadne::LinkComponent": {
315
+ "DEFAULT_ACTIONABLE_CLASSES": " cursor-pointer underline decoration-double font-semibold hover:text-button-text-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
316
+ "DEFAULT_CLASSES": "cursor-pointer",
339
317
  "DEFAULT_TAG": "a",
340
318
  "TAG_OPTIONS": [
341
319
  "a",
@@ -347,6 +325,10 @@
347
325
  "Item": "Ariadne::ListComponent::Item"
348
326
  },
349
327
  "Ariadne::ListComponent::Item": {
328
+ "DEFAULT_ITEM_CLASSES": "relative p-1.5 focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 hover:bg-button-hover-color"
329
+ },
330
+ "Ariadne::MainComponent": {
331
+ "DEFAULT_CLASSES": "flex-auto"
350
332
  },
351
333
  "Ariadne::PillComponent": {
352
334
  "DEFAULT_CLASSES": "flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium rounded-full",
@@ -356,17 +338,17 @@
356
338
  ]
357
339
  },
358
340
  "Ariadne::SlideoverComponent": {
359
- "DEFAULT_BUTTON_CLASSES": "inline-flex items-center shadow-sm px-4 py-1.5 border border-our-purple-300 z-50 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
341
+ "DEFAULT_BUTTON_CLASSES": "inline-flex items-center shadow-sm px-4 py-1.5 pb-2 text-sm leading-5 font-medium rounded-full text-purple-800 bg-purple-50 hover:bg-purple-100 border-purple-300 focus:ring-offset-purple-50 focus:ring-purple-600",
360
342
  "DEFAULT_CLASSES": "",
361
343
  "DEFAULT_TAG": "div",
362
- "DIRECTION_X": "x",
363
- "DIRECTION_Y": "y",
344
+ "DIRECTION_X_LEFT": "xl",
345
+ "DIRECTION_Y_DOWN": "yd",
364
346
  "TAG_OPTIONS": [
365
347
  "div"
366
348
  ],
367
349
  "VALID_DIRECTIONS": [
368
- "y",
369
- "x"
350
+ "yd",
351
+ "xl"
370
352
  ]
371
353
  },
372
354
  "Ariadne::Text": {
@@ -384,21 +366,21 @@
384
366
  "DEFAULT_TAG": "div"
385
367
  },
386
368
  "Ariadne::TooltipComponent": {
387
- "DIRECTION_DEFAULT": "s",
388
- "DIRECTION_OPTIONS": [
389
- "s",
390
- "n",
391
- "e",
392
- "w",
393
- "ne",
394
- "nw",
395
- "se",
396
- "sw"
397
- ],
369
+ "DATA_ACTION": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
370
+ "DATA_CONTROLLER": "tooltip-component",
371
+ "DEFAULT_CLASSES": "invisible absolute bg-slate-900 text-white font-semibold max-w-xs py-1 px-2 rounded z-max",
372
+ "DEFAULT_PLACEMENT": "top",
373
+ "DEFAULT_TAG": "tooltip",
398
374
  "TYPE_DEFAULT": "description",
399
375
  "TYPE_OPTIONS": [
400
376
  "label",
401
377
  "description"
378
+ ],
379
+ "VALID_PLACEMENTS": [
380
+ "top",
381
+ "right",
382
+ "bottom",
383
+ "left"
402
384
  ]
403
385
  }
404
386
  }
data/static/statuses.json CHANGED
@@ -2,12 +2,15 @@
2
2
  "Ariadne::BaseButton": "stable",
3
3
  "Ariadne::BaseComponent": "stable",
4
4
  "Ariadne::BlankslateComponent": "stable",
5
+ "Ariadne::BodyComponent": "stable",
5
6
  "Ariadne::ButtonComponent": "stable",
6
7
  "Ariadne::ClipboardCopyComponent": "stable",
8
+ "Ariadne::CommentComponent": "stable",
7
9
  "Ariadne::ContainerComponent": "stable",
8
10
  "Ariadne::Content": "stable",
9
11
  "Ariadne::CounterComponent": "stable",
10
12
  "Ariadne::FlashComponent": "stable",
13
+ "Ariadne::FlexComponent": "stable",
11
14
  "Ariadne::FooterComponent": "stable",
12
15
  "Ariadne::GridComponent": "stable",
13
16
  "Ariadne::GridComponent::Item": "stable",
@@ -19,6 +22,7 @@
19
22
  "Ariadne::LinkComponent": "stable",
20
23
  "Ariadne::ListComponent": "stable",
21
24
  "Ariadne::ListComponent::Item": "stable",
25
+ "Ariadne::MainComponent": "stable",
22
26
  "Ariadne::PillComponent": "stable",
23
27
  "Ariadne::SlideoverComponent": "stable",
24
28
  "Ariadne::Text": "stable",
metadata CHANGED
@@ -1,15 +1,29 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Garen J. Torikian
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-07-25 00:00:00.000000000 Z
11
+ date: 2022-08-15 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: tailwind_merge
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '0.1'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '0.1'
13
27
  - !ruby/object:Gem::Dependency
14
28
  name: actionview
15
29
  requirement: !ruby/object:Gem::Requirement
@@ -84,7 +98,7 @@ dependencies:
84
98
  - - "<"
85
99
  - !ruby/object:Gem::Version
86
100
  version: '3.0'
87
- description:
101
+ description:
88
102
  email:
89
103
  - gjtorikian@yettoapp.com
90
104
  executables: []
@@ -93,20 +107,36 @@ extra_rdoc_files: []
93
107
  files:
94
108
  - LICENSE.txt
95
109
  - README.md
110
+ - app/assets/builds/ariadne_view_components.css
96
111
  - app/assets/config/manifest.js
112
+ - app/assets/javascripts/ariadne.d.ts
97
113
  - app/assets/javascripts/ariadne_view_components.js
98
114
  - app/assets/javascripts/ariadne_view_components.js.map
115
+ - app/assets/javascripts/clipboard-copy-component.d.ts
116
+ - app/assets/javascripts/slideover-component.d.ts
117
+ - app/assets/javascripts/time_ago_component.d.ts
118
+ - app/assets/javascripts/tooltip-component.d.ts
99
119
  - app/assets/stylesheets/application.ariadne_view_components.css
120
+ - app/assets/stylesheets/tooltip-component.css
121
+ - app/components/ariadne/ariadne.d.ts
122
+ - app/components/ariadne/ariadne.js
100
123
  - app/components/ariadne/ariadne.ts
101
124
  - app/components/ariadne/base_button.rb
102
125
  - app/components/ariadne/base_component.rb
103
126
  - app/components/ariadne/blankslate_component.html.erb
104
127
  - app/components/ariadne/blankslate_component.rb
128
+ - app/components/ariadne/body_component.rb
105
129
  - app/components/ariadne/button_component.html.erb
106
130
  - app/components/ariadne/button_component.rb
131
+ - app/components/ariadne/clipboard-copy-component.d.ts
132
+ - app/components/ariadne/clipboard-copy-component.js
107
133
  - app/components/ariadne/clipboard-copy-component.ts
134
+ - app/components/ariadne/clipboard_copy_component.d.ts
108
135
  - app/components/ariadne/clipboard_copy_component.html.erb
136
+ - app/components/ariadne/clipboard_copy_component.js
109
137
  - app/components/ariadne/clipboard_copy_component.rb
138
+ - app/components/ariadne/comment_component.html.erb
139
+ - app/components/ariadne/comment_component.rb
110
140
  - app/components/ariadne/component.rb
111
141
  - app/components/ariadne/container_component.html.erb
112
142
  - app/components/ariadne/container_component.rb
@@ -114,6 +144,7 @@ files:
114
144
  - app/components/ariadne/counter_component.rb
115
145
  - app/components/ariadne/flash_component.html.erb
116
146
  - app/components/ariadne/flash_component.rb
147
+ - app/components/ariadne/flex_component.rb
117
148
  - app/components/ariadne/footer_component.html.erb
118
149
  - app/components/ariadne/footer_component.rb
119
150
  - app/components/ariadne/grid_component.html.erb
@@ -129,16 +160,27 @@ files:
129
160
  - app/components/ariadne/link_component.rb
130
161
  - app/components/ariadne/list_component.html.erb
131
162
  - app/components/ariadne/list_component.rb
163
+ - app/components/ariadne/main_component.rb
132
164
  - app/components/ariadne/pill_component.html.erb
133
165
  - app/components/ariadne/pill_component.rb
166
+ - app/components/ariadne/slideover-component.d.ts
167
+ - app/components/ariadne/slideover-component.js
134
168
  - app/components/ariadne/slideover-component.ts
169
+ - app/components/ariadne/slideover_component.d.ts
135
170
  - app/components/ariadne/slideover_component.html.erb
171
+ - app/components/ariadne/slideover_component.js
136
172
  - app/components/ariadne/slideover_component.rb
137
173
  - app/components/ariadne/text.rb
174
+ - app/components/ariadne/time_ago_component.d.ts
175
+ - app/components/ariadne/time_ago_component.js
138
176
  - app/components/ariadne/time_ago_component.rb
139
177
  - app/components/ariadne/time_ago_component.ts
140
178
  - app/components/ariadne/timeline_component.html.erb
141
179
  - app/components/ariadne/timeline_component.rb
180
+ - app/components/ariadne/tooltip-component.d.ts
181
+ - app/components/ariadne/tooltip-component.js
182
+ - app/components/ariadne/tooltip-component.ts
183
+ - app/components/ariadne/tooltip_component.html.erb
142
184
  - app/components/ariadne/tooltip_component.rb
143
185
  - app/lib/ariadne/action_view_extensions/form_helper.rb
144
186
  - app/lib/ariadne/audited/dsl.rb
@@ -194,7 +236,7 @@ licenses:
194
236
  - MIT
195
237
  metadata:
196
238
  allowed_push_host: https://rubygems.org
197
- post_install_message:
239
+ post_install_message:
198
240
  rdoc_options: []
199
241
  require_paths:
200
242
  - lib
@@ -213,7 +255,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
213
255
  version: '0'
214
256
  requirements: []
215
257
  rubygems_version: 3.3.7
216
- signing_key:
258
+ signing_key:
217
259
  specification_version: 4
218
260
  summary: ViewComponents for the Ariadne Design System
219
261
  test_files: []