ariadne_view_components 0.0.14 → 0.0.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/ariadne_view_components.css +2355 -0
  3. data/app/components/ariadne/ariadne-form-with.d.ts +20 -0
  4. data/app/components/ariadne/ariadne-form-with.js +85 -0
  5. data/app/components/ariadne/ariadne-form.d.ts +22 -0
  6. data/app/components/ariadne/ariadne-form.js +84 -0
  7. data/app/components/ariadne/ariadne.d.ts +2 -0
  8. data/app/components/ariadne/ariadne.js +16 -0
  9. data/app/components/ariadne/body_component.rb +1 -1
  10. data/app/components/ariadne/clipboard-copy-component.d.ts +4 -0
  11. data/app/components/ariadne/clipboard-copy-component.js +18 -0
  12. data/app/components/ariadne/clipboard_copy_component.d.ts +4 -0
  13. data/app/components/ariadne/clipboard_copy_component.js +18 -0
  14. data/app/components/ariadne/comment-component.d.ts +0 -0
  15. data/app/components/ariadne/comment-component.js +33 -0
  16. data/app/components/ariadne/component.rb +0 -2
  17. data/app/components/ariadne/header_component.rb +1 -1
  18. data/app/components/ariadne/link_component.rb +2 -2
  19. data/app/components/ariadne/rich-text-area-component.d.ts +4 -0
  20. data/app/components/ariadne/rich-text-area-component.js +27 -0
  21. data/app/components/ariadne/slideover-component.d.ts +9 -0
  22. data/app/components/ariadne/slideover-component.js +20 -0
  23. data/app/components/ariadne/slideover_component.d.ts +9 -0
  24. data/app/components/ariadne/slideover_component.js +19 -0
  25. data/app/components/ariadne/tab-component.js +1 -0
  26. data/app/components/ariadne/tab-container-component copy.d.ts +1 -0
  27. data/app/components/ariadne/tab-container-component copy.js +23 -0
  28. data/app/components/ariadne/tab-container-component.d.ts +1 -0
  29. data/app/components/ariadne/tab-container-component.js +23 -0
  30. data/app/components/ariadne/tab-nav-component.d.ts +9 -0
  31. data/app/components/ariadne/tab-nav-component.js +32 -0
  32. data/app/components/ariadne/table_nav_component.html.erb +1 -1
  33. data/app/components/ariadne/tabs-component.d.ts +0 -0
  34. data/app/components/ariadne/tabs-component.js +1 -0
  35. data/app/components/ariadne/time-ago-component.d.ts +1 -0
  36. data/app/components/ariadne/time-ago-component.js +1 -0
  37. data/app/components/ariadne/time_ago_component.d.ts +1 -0
  38. data/app/components/ariadne/time_ago_component.js +1 -0
  39. data/app/components/ariadne/tooltip-component.d.ts +24 -0
  40. data/app/components/ariadne/tooltip-component.js +42 -0
  41. data/app/lib/ariadne/form_builder.rb +2 -2
  42. data/config/importmap.rb +3 -0
  43. data/lib/ariadne/view_components/version.rb +1 -1
  44. data/lib/tasks/docs.rake +0 -1
  45. data/static/arguments.yml +0 -11
  46. data/static/audited_at.json +0 -1
  47. data/static/classes.yml +5 -5
  48. data/static/constants.json +3 -6
  49. data/static/statuses.json +0 -1
  50. metadata +41 -7
  51. data/app/components/ariadne/main_component.rb +0 -32
@@ -0,0 +1,42 @@
1
+ import { Controller } from '@hotwired/stimulus';
2
+ import { createPopper } from '@popperjs/core';
3
+ export default class TooltipComponent extends Controller {
4
+ // Create a new Popper instance
5
+ connect() {
6
+ this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
7
+ placement: this.placementValue,
8
+ modifiers: [
9
+ {
10
+ name: 'offset',
11
+ options: {
12
+ offset: this.offsetValue
13
+ }
14
+ }
15
+ ]
16
+ });
17
+ }
18
+ // Destroy the Popper instance
19
+ disconnect() {
20
+ if (this.popperInstance) {
21
+ this.popperInstance.destroy();
22
+ }
23
+ }
24
+ show() {
25
+ this.tooltipTarget.setAttribute('data-tooltip-show', '');
26
+ this.tooltipTarget.classList.remove('ariadne-invisible');
27
+ // We need to tell Popper to update the tooltip position
28
+ // after we show the tooltip, otherwise it will be incorrect
29
+ this.popperInstance.update();
30
+ this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
31
+ }
32
+ hide() {
33
+ this.tooltipTarget.removeAttribute('data-tooltip-show');
34
+ this.tooltipTarget.classList.add('ariadne-invisible');
35
+ this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
36
+ }
37
+ }
38
+ TooltipComponent.targets = ['trigger', 'tooltip'];
39
+ TooltipComponent.values = {
40
+ placement: { type: String, default: 'top' },
41
+ offset: { type: Array, default: [0, 8] }
42
+ };
@@ -5,14 +5,14 @@ module Ariadne
5
5
  class FormBuilder < ActionView::Helpers::FormBuilder
6
6
  include ClassNameHelper
7
7
 
8
- DEFAULT_SECTION_CLASSES = "ariadne-pt-8 ariadne-space-y-6 sm:ariadne-pt-10 sm:ariadne-space-y-5"
8
+ DEFAULT_SECTION_CLASSES = "ariadne-space-y-6 ariadne-px-4"
9
9
  def section(classes: "", attributes: {}, &block)
10
10
  actual_classes = class_names(DEFAULT_SECTION_CLASSES, classes)
11
11
  options = { class: actual_classes, **attributes }
12
12
  @template.content_tag(:div, **options, &block)
13
13
  end
14
14
 
15
- DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-font-medium ariadne-text-gray-900"
15
+ DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-py-4 ariadne-font-medium ariadne-text-gray-900"
16
16
  def heading(tag: :h3, classes: "", attributes: {}, &block)
17
17
  actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
18
18
  options = { class: actual_classes, **attributes }
@@ -0,0 +1,3 @@
1
+ # frozen_string_literal: true
2
+
3
+ pin_all_from File.expand_path("../app/assets/javascripts", __dir__)
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Ariadne
4
4
  module ViewComponents
5
- VERSION = "0.0.14"
5
+ VERSION = "0.0.16"
6
6
  end
7
7
  end
data/lib/tasks/docs.rake CHANGED
@@ -70,7 +70,6 @@ namespace :docs do
70
70
  Ariadne::InlineFlexComponent,
71
71
  Ariadne::LinkComponent,
72
72
  Ariadne::ListComponent,
73
- Ariadne::MainComponent,
74
73
  Ariadne::NarrowContainerComponent,
75
74
  Ariadne::PanelBarComponent,
76
75
  Ariadne::PillComponent,
data/static/arguments.yml CHANGED
@@ -475,17 +475,6 @@
475
475
  type: Hash
476
476
  default: "`{}`"
477
477
  description: "[Classes and attributes](/classes-attributes)"
478
- - component: Main
479
- source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/main_component.rb
480
- parameters:
481
- - name: classes
482
- type: String
483
- default: '`""`'
484
- description: "[Classes and attributes](/classes-attributes)"
485
- - name: attributes
486
- type: Hash
487
- default: "`{}`"
488
- description: "[Classes and attributes](/classes-attributes)"
489
478
  - component: NarrowContainer
490
479
  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/narrow_container_component.rb
491
480
  parameters:
@@ -28,7 +28,6 @@
28
28
  "Ariadne::LinkComponent": "",
29
29
  "Ariadne::ListComponent": "",
30
30
  "Ariadne::ListComponent::ListItem": "",
31
- "Ariadne::MainComponent": "",
32
31
  "Ariadne::NarrowContainerComponent": "",
33
32
  "Ariadne::PanelBarComponent": "",
34
33
  "Ariadne::PanelBarComponent::PanelItem": "",
data/static/classes.yml CHANGED
@@ -4,7 +4,6 @@
4
4
  - ".ariadne-ring-2"
5
5
  - ".ariadne-ring-white"
6
6
  - ".ariadne-cursor-pointer"
7
- - ".ariadne-font-semibold"
8
7
  - ".hover:ariadne-text-button-text-color"
9
8
  - ".focus:ariadne-outline-none"
10
9
  - ".focus:ariadne-ring-2"
@@ -46,8 +45,9 @@
46
45
  - ".sm:ariadne-text-4xl"
47
46
  - ".ariadne-mt-8"
48
47
  - ".ariadne-justify-center"
49
- - ".ariadne-flex-col"
50
- - ".ariadne-min-h-screen"
48
+ - ".ariadne-scroll-smooth"
49
+ - ".ariadne-bg-white"
50
+ - ".ariadne-antialiased"
51
51
  - ".ariadne-text-purple-800"
52
52
  - ".ariadne-bg-purple-50"
53
53
  - ".hover:ariadne-bg-purple-100"
@@ -85,6 +85,7 @@
85
85
  - ".ariadne-absolute"
86
86
  - ".ariadne-bg-slate-900"
87
87
  - ".ariadne-text-white"
88
+ - ".ariadne-font-semibold"
88
89
  - ".ariadne-max-w-xs"
89
90
  - ".ariadne-py-1"
90
91
  - ".ariadne-px-2"
@@ -94,7 +95,6 @@
94
95
  - ".ariadne-underline"
95
96
  - ".ariadne-decoration-double"
96
97
  - ".ariadne-text-green-600"
97
- - ".ariadne-bg-white"
98
98
  - ".ariadne-border-gray-300"
99
99
  - ".ariadne-shadow"
100
100
  - ".ariadne-py-5"
@@ -151,6 +151,7 @@
151
151
  - ".ariadne-mt-4"
152
152
  - ".ariadne-pt-5"
153
153
  - ".ariadne--mx-2"
154
+ - ".ariadne-flex-col"
154
155
  - ".ariadne-mt-6"
155
156
  - ".ariadne-text-slate-500"
156
157
  - ".sm:ariadne-mt-0"
@@ -170,7 +171,6 @@
170
171
  - ".ariadne-divide-gray-300"
171
172
  - ".ariadne-relative"
172
173
  - ".hover:ariadne-bg-button-hover-color"
173
- - ".ariadne-flex-auto"
174
174
  - ".md:ariadne-flex"
175
175
  - ".md:ariadne-divide-y-0"
176
176
  - ".ariadne-py-0.5"
@@ -96,7 +96,7 @@
96
96
  ]
97
97
  },
98
98
  "Ariadne::BodyComponent": {
99
- "DEFAULT_CLASSES": "ariadne-flex ariadne-flex-col ariadne-min-h-screen"
99
+ "DEFAULT_CLASSES": "ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
100
100
  },
101
101
  "Ariadne::ButtonComponent": {
102
102
  "DEFAULT_SCHEME": "default",
@@ -283,7 +283,7 @@
283
283
  "DEFAULT_ITEM_CLASSES": "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
284
284
  },
285
285
  "Ariadne::HeaderComponent": {
286
- "DEFAULT_CLASSES": "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-py-5 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500",
286
+ "DEFAULT_CLASSES": "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-h-16 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500",
287
287
  "DEFAULT_IMAGE_LOGO_CLASSES": "ariadne-h-10 ariadne-w-auto",
288
288
  "DEFAULT_NAV_LINK_CLASSES": "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900",
289
289
  "DEFAULT_PROFILE_LINK_CLASSES": "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2",
@@ -418,7 +418,7 @@
418
418
  },
419
419
  "Ariadne::LinkComponent": {
420
420
  "DEFAULT_ACTIONABLE_CLASSES": "ariadne-underline ariadne-decoration-double",
421
- "DEFAULT_CLASSES": "ariadne-cursor-pointer ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500",
421
+ "DEFAULT_CLASSES": "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500",
422
422
  "DEFAULT_TAG": "a",
423
423
  "TAG_OPTIONS": [
424
424
  "a",
@@ -433,9 +433,6 @@
433
433
  "Ariadne::ListComponent::ListItem": {
434
434
  "DEFAULT_ITEM_CLASSES": "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
435
435
  },
436
- "Ariadne::MainComponent": {
437
- "DEFAULT_CLASSES": "ariadne-flex-auto"
438
- },
439
436
  "Ariadne::NarrowContainerComponent": {
440
437
  "DEFAULT_CLASSES": "ariadne-max-w-7xl ariadne-mx-auto ariadne-py-12 ariadne-px-4 sm:ariadne-px-6 lg:ariadne-py-16 lg:ariadne-px-8",
441
438
  "DEFAULT_TAG": "div",
data/static/statuses.json CHANGED
@@ -28,7 +28,6 @@
28
28
  "Ariadne::LinkComponent": "stable",
29
29
  "Ariadne::ListComponent": "stable",
30
30
  "Ariadne::ListComponent::ListItem": "stable",
31
- "Ariadne::MainComponent": "stable",
32
31
  "Ariadne::NarrowContainerComponent": "stable",
33
32
  "Ariadne::PanelBarComponent": "stable",
34
33
  "Ariadne::PanelBarComponent::PanelItem": "stable",
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.14
4
+ version: 0.0.16
5
5
  platform: ruby
6
6
  authors:
7
7
  - Garen J. Torikian
8
- autorequire:
8
+ autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2022-10-03 00:00:00.000000000 Z
11
+ date: 2022-10-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: tailwind_merge
@@ -98,7 +98,7 @@ dependencies:
98
98
  - - "<"
99
99
  - !ruby/object:Gem::Version
100
100
  version: '3.0'
101
- description:
101
+ description:
102
102
  email:
103
103
  - gjtorikian@yettoapp.com
104
104
  executables:
@@ -108,6 +108,7 @@ extra_rdoc_files: []
108
108
  files:
109
109
  - LICENSE.txt
110
110
  - README.md
111
+ - app/assets/builds/ariadne_view_components.css
111
112
  - app/assets/config/manifest.js
112
113
  - app/assets/javascripts/ariadne-form-with.d.ts
113
114
  - app/assets/javascripts/ariadne-form.d.ts
@@ -127,7 +128,13 @@ files:
127
128
  - app/assets/stylesheets/dropdown.css
128
129
  - app/assets/stylesheets/prosemirror.css
129
130
  - app/assets/stylesheets/tooltip-component.css
131
+ - app/components/ariadne/ariadne-form-with.d.ts
132
+ - app/components/ariadne/ariadne-form-with.js
133
+ - app/components/ariadne/ariadne-form.d.ts
134
+ - app/components/ariadne/ariadne-form.js
130
135
  - app/components/ariadne/ariadne-form.ts
136
+ - app/components/ariadne/ariadne.d.ts
137
+ - app/components/ariadne/ariadne.js
131
138
  - app/components/ariadne/ariadne.ts
132
139
  - app/components/ariadne/avatar_component.rb
133
140
  - app/components/ariadne/avatar_stack_component.html.erb
@@ -139,9 +146,15 @@ files:
139
146
  - app/components/ariadne/body_component.rb
140
147
  - app/components/ariadne/button_component.html.erb
141
148
  - app/components/ariadne/button_component.rb
149
+ - app/components/ariadne/clipboard-copy-component.d.ts
150
+ - app/components/ariadne/clipboard-copy-component.js
142
151
  - app/components/ariadne/clipboard-copy-component.ts
152
+ - app/components/ariadne/clipboard_copy_component.d.ts
143
153
  - app/components/ariadne/clipboard_copy_component.html.erb
154
+ - app/components/ariadne/clipboard_copy_component.js
144
155
  - app/components/ariadne/clipboard_copy_component.rb
156
+ - app/components/ariadne/comment-component.d.ts
157
+ - app/components/ariadne/comment-component.js
145
158
  - app/components/ariadne/comment-component.ts
146
159
  - app/components/ariadne/comment_component.html.erb
147
160
  - app/components/ariadne/comment_component.rb
@@ -175,20 +188,32 @@ files:
175
188
  - app/components/ariadne/link_component.rb
176
189
  - app/components/ariadne/list_component.html.erb
177
190
  - app/components/ariadne/list_component.rb
178
- - app/components/ariadne/main_component.rb
179
191
  - app/components/ariadne/narrow_container_component.html.erb
180
192
  - app/components/ariadne/narrow_container_component.rb
181
193
  - app/components/ariadne/panel_bar_component.html.erb
182
194
  - app/components/ariadne/panel_bar_component.rb
183
195
  - app/components/ariadne/pill_component.html.erb
184
196
  - app/components/ariadne/pill_component.rb
197
+ - app/components/ariadne/rich-text-area-component.d.ts
198
+ - app/components/ariadne/rich-text-area-component.js
185
199
  - app/components/ariadne/rich-text-area-component.ts
186
200
  - app/components/ariadne/rich_text_area_component.html.erb
187
201
  - app/components/ariadne/rich_text_area_component.rb
202
+ - app/components/ariadne/slideover-component.d.ts
203
+ - app/components/ariadne/slideover-component.js
188
204
  - app/components/ariadne/slideover-component.ts
205
+ - app/components/ariadne/slideover_component.d.ts
189
206
  - app/components/ariadne/slideover_component.html.erb
207
+ - app/components/ariadne/slideover_component.js
190
208
  - app/components/ariadne/slideover_component.rb
209
+ - app/components/ariadne/tab-component.js
210
+ - app/components/ariadne/tab-container-component copy.d.ts
211
+ - app/components/ariadne/tab-container-component copy.js
212
+ - app/components/ariadne/tab-container-component.d.ts
213
+ - app/components/ariadne/tab-container-component.js
191
214
  - app/components/ariadne/tab-container-component.ts
215
+ - app/components/ariadne/tab-nav-component.d.ts
216
+ - app/components/ariadne/tab-nav-component.js
192
217
  - app/components/ariadne/tab-nav-component.ts
193
218
  - app/components/ariadne/tab_component.html.erb
194
219
  - app/components/ariadne/tab_component.rb
@@ -198,11 +223,19 @@ files:
198
223
  - app/components/ariadne/tab_nav_component.rb
199
224
  - app/components/ariadne/table_nav_component.html.erb
200
225
  - app/components/ariadne/table_nav_component.rb
226
+ - app/components/ariadne/tabs-component.d.ts
227
+ - app/components/ariadne/tabs-component.js
201
228
  - app/components/ariadne/text.rb
229
+ - app/components/ariadne/time-ago-component.d.ts
230
+ - app/components/ariadne/time-ago-component.js
202
231
  - app/components/ariadne/time-ago-component.ts
232
+ - app/components/ariadne/time_ago_component.d.ts
233
+ - app/components/ariadne/time_ago_component.js
203
234
  - app/components/ariadne/time_ago_component.rb
204
235
  - app/components/ariadne/timeline_component.html.erb
205
236
  - app/components/ariadne/timeline_component.rb
237
+ - app/components/ariadne/tooltip-component.d.ts
238
+ - app/components/ariadne/tooltip-component.js
206
239
  - app/components/ariadne/tooltip-component.ts
207
240
  - app/components/ariadne/tooltip_component.html.erb
208
241
  - app/components/ariadne/tooltip_component.rb
@@ -215,6 +248,7 @@ files:
215
248
  - app/lib/ariadne/logger_helper.rb
216
249
  - app/lib/ariadne/status/dsl.rb
217
250
  - app/lib/ariadne/view_helper.rb
251
+ - config/importmap.rb
218
252
  - exe/tailwindcss
219
253
  - lib/ariadne/view_components.rb
220
254
  - lib/ariadne/view_components/commands.rb
@@ -252,7 +286,7 @@ licenses:
252
286
  - MIT
253
287
  metadata:
254
288
  allowed_push_host: https://rubygems.org
255
- post_install_message:
289
+ post_install_message:
256
290
  rdoc_options: []
257
291
  require_paths:
258
292
  - lib
@@ -271,7 +305,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
271
305
  version: '0'
272
306
  requirements: []
273
307
  rubygems_version: 3.3.7
274
- signing_key:
308
+ signing_key:
275
309
  specification_version: 4
276
310
  summary: ViewComponents for the Ariadne Design System
277
311
  test_files: []
@@ -1,32 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Add a general description of component here
5
- # Add additional usage considerations or best practices that may aid the user to use the component correctly.
6
- # @accessibility Add any accessibility considerations
7
- class MainComponent < Ariadne::Component
8
- DEFAULT_CLASSES = "ariadne-flex-auto"
9
-
10
- # @example Default
11
- #
12
- # <%= render(Ariadne::MainComponent.new) { "Example" } %>
13
- #
14
- # @param classes [String] <%= link_to_classes_docs %>
15
- # @param attributes [Hash] <%= link_to_attributes_docs %>
16
- def initialize(classes: "", attributes: {})
17
- @tag = :main
18
- @classes = class_names(
19
- DEFAULT_CLASSES,
20
- classes,
21
- )
22
-
23
- @attributes = attributes
24
- end
25
-
26
- def call
27
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do
28
- render(Ariadne::ContainerComponent.new) { content }
29
- end
30
- end
31
- end
32
- end