ariadne_view_components 0.0.14 → 0.0.16

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 (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