ariadne_view_components 0.0.64 → 0.0.65

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: 559de735ef06bf1761862479d159bba1e22b2db11d1e673dd800b3d17ba02d1f
4
- data.tar.gz: 26c2fa077d5b3d0891017cf88ca31bfb40560ba3b210f0516033a89989550e52
3
+ metadata.gz: 25ccf8068907120ea6f4590719bb2062ff4a38ce97ebb3846ef5a28c1e5cb25f
4
+ data.tar.gz: 3d28c350db0b1d7c0c295e64e6cf06e8dfe4a636461dd52214bf02b4b56205dc
5
5
  SHA512:
6
- metadata.gz: db0f794f45094885e5e2d5c5fc3a645a3a1e6ab03fb2c8de2245317f88bb2835af138ad151831971643320cdcff4cc42e0b3dd221577eff2e35ce543a4ae5e27
7
- data.tar.gz: 2de4beedc7bc2239bb226b487c0f3949cc120493387d9655fdc5ed230fa2d9e19f50b7a8df6fad8d78c1506898f6751e287098a6ecbdc0ac1af5da4b31b84d51
6
+ metadata.gz: b87643f46b71707855adffca18747d9e284f876158dff83a7fcab9223d09127f48a4e6ea9f3beed0bdfae7bdfeee043fd51cfe95c864805be79691173495b988
7
+ data.tar.gz: 5f9bfdd0743f61bc4a98c3c891a8bf982efcdb124bd7846a78a3a9dcd1ff486d27d5b11162b85c81685f155fc4d47523b0bdc393625c3365ef2a87706c6dafdd
data/CHANGELOG.md CHANGED
@@ -1,3 +1,5 @@
1
+ ## [v0.0.64] - 05-04-2024
2
+ **Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.63.1...v0.0.64
1
3
  ## [v0.0.63.1] - 05-04-2024
2
4
  **Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.63...v0.0.63.1
3
5
  ## [v0.0.63] - 05-04-2024
@@ -0,0 +1,14 @@
1
+ import '@github/auto-check-element'
2
+ import '@github/auto-complete-element'
3
+ import '@github/details-menu-element'
4
+ import '@github/image-crop-element'
5
+ import '@github/include-fragment-element'
6
+ import '@github/markdown-toolbar-element'
7
+ import '@github/relative-time-element'
8
+
9
+ import '~/stylesheets/ariadne_view_components.css'
10
+ import '~/stylesheets/typography.css'
11
+
12
+ import './theme'
13
+
14
+ export * from './stimulus_app'
@@ -0,0 +1,53 @@
1
+ import {Application, type ControllerConstructor} from '@hotwired/stimulus'
2
+
3
+ const application = Application.start()
4
+
5
+ application.debug = import.meta.env.DEV
6
+
7
+ declare global {
8
+ interface Window {
9
+ Stimulus: Application
10
+ }
11
+ }
12
+
13
+ window.Stimulus = application
14
+
15
+ // Force Vite to process component JS
16
+ const componentModules = import.meta.glob(['../../components/**/component.ts'], {eager: true})
17
+ import.meta.glob(['../../components/**/component.css'], {eager: true})
18
+
19
+ for (const [path, module] of Object.entries(componentModules)) {
20
+ const dirs = path.split('/')
21
+
22
+ // Dropping ../../components and component.ts parts to end up
23
+ // with something like "ariadne-ui-component-name"
24
+ const name = dirs
25
+ .slice(3, dirs.length - 1)
26
+ .join('-')
27
+ .replaceAll('_', '-')
28
+ .toLocaleLowerCase()
29
+
30
+ application.register(
31
+ // @tag stimulus-id
32
+ name,
33
+ (module as {default: ControllerConstructor}).default,
34
+ )
35
+ }
36
+
37
+ const controllerModules = import.meta.glob(['~/controllers/*.ts'], {eager: true})
38
+
39
+ for (const [path, module] of Object.entries(controllerModules)) {
40
+ const dirs = path.split('/')
41
+
42
+ // Dropping ../controllers to end up
43
+ // with something like "ariadne-component-name"
44
+ const name = dirs.slice(2, dirs.length).join('-').replace('.ts', '').replaceAll('_', '-').toLocaleLowerCase()
45
+
46
+ application.register(
47
+ // @tag stimulus-id
48
+ `ariadne-${name}`,
49
+ (module as {default: ControllerConstructor}).default,
50
+ )
51
+ }
52
+
53
+ export {application}
@@ -0,0 +1,8 @@
1
+ const userTheme = localStorage.getItem('theme') || ''
2
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
3
+
4
+ const themeCheck = () => {
5
+ if (userTheme === 'dark' || (!userTheme && systemTheme)) {
6
+ document.documentElement.classList.add('dark')
7
+ }
8
+ }
@@ -0,0 +1,75 @@
1
+ import {controllerFactory} from '@utils/createController'
2
+ import {computePosition, arrow, offset, flip, shift} from '@floating-ui/dom'
3
+
4
+ import '~/stylesheets/tippy.js/themes/tomato.css'
5
+
6
+ export default class TooltipController extends controllerFactory<HTMLElement>()({
7
+ targets: {
8
+ activator: HTMLElement,
9
+ wrapper: HTMLDivElement,
10
+ tooltip: HTMLDivElement,
11
+ arrow: HTMLDivElement,
12
+ },
13
+ }) {
14
+ async update() {
15
+ computePosition(this.activatorTarget, this.tooltipTarget, {
16
+ placement: 'top',
17
+ middleware: [offset(10), flip(), shift({padding: 5}), arrow({element: this.arrowTarget})],
18
+ // eslint-disable-next-line github/no-then
19
+ }).then(({x, y, placement, middlewareData}) => {
20
+ Object.assign(this.tooltipTarget.style, {
21
+ left: `${x}px`,
22
+ top: `${y}px`,
23
+ })
24
+
25
+ // Reset any previously set styles on the arrow
26
+ Object.assign(this.arrowTarget.style, {
27
+ left: '',
28
+ top: '',
29
+ right: '',
30
+ bottom: '',
31
+ })
32
+
33
+ const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
34
+ const primaryPlacement = placement.split('-')[0]
35
+
36
+ switch (primaryPlacement) {
37
+ case 'top':
38
+ Object.assign(this.arrowTarget.style, {
39
+ left: arrowX ? `${arrowX}px` : '',
40
+ bottom: '-4px', // Aligns arrow to the bottom edge of the tooltip
41
+ })
42
+ break
43
+ case 'bottom':
44
+ Object.assign(this.arrowTarget.style, {
45
+ left: arrowX ? `${arrowX}px` : '',
46
+ top: '-4px', // Aligns arrow to the top edge of the tooltip
47
+ })
48
+ break
49
+ case 'left':
50
+ Object.assign(this.arrowTarget.style, {
51
+ top: arrowY ? `${arrowY}px` : '',
52
+ right: '-4px', // Aligns arrow to the right edge of the tooltip
53
+ })
54
+ break
55
+ case 'right':
56
+ Object.assign(this.arrowTarget.style, {
57
+ top: arrowY ? `${arrowY}px` : '',
58
+ left: '-4px', // Aligns arrow to the left edge of the tooltip
59
+ })
60
+ break
61
+ }
62
+ })
63
+ }
64
+
65
+ showTooltip(_event: Event) {
66
+ this.wrapperTarget.classList.add('block')
67
+ this.wrapperTarget.classList.remove('hidden')
68
+ this.update()
69
+ }
70
+
71
+ hideTooltip(_event: Event) {
72
+ this.wrapperTarget.classList.add('hidden')
73
+ this.wrapperTarget.classList.remove('block')
74
+ }
75
+ }
@@ -0,0 +1 @@
1
+ import '~/ariadne'
@@ -0,0 +1,18 @@
1
+ @import 'scrollbar.css';
2
+
3
+ @tailwind base;
4
+ @tailwind components;
5
+ @tailwind utilities;
6
+
7
+ /* Fix summary element usage in Safari only */
8
+ summary::-webkit-details-marker {
9
+ display: none;
10
+ }
11
+
12
+ @media (prefers-reduced-motion) {
13
+ /* Disabling animations everywhere at once */
14
+ * {
15
+ animation-duration: 0.01s;
16
+ transition-duration: 0.01s;
17
+ }
18
+ }
@@ -0,0 +1,28 @@
1
+ .scroll {
2
+ scrollbar-color: theme('colors.gray.500/20') transparent;
3
+
4
+ *::-webkit-scrollbar {
5
+ @apply ariadne-h-4 ariadne-w-2;
6
+ }
7
+
8
+ *::-webkit-scrollbar:horizontal {
9
+ @apply ariadne-h-2 ariadne-w-4;
10
+ }
11
+
12
+ *::-webkit-scrollbar-track {
13
+ @apply ariadne-bg-transparent;
14
+ }
15
+
16
+ *::-webkit-scrollbar-thumb {
17
+ @apply ariadne-bg-gray-500/20 hover:ariadne-bg-gray-500/40;
18
+ @apply ariadne-transition-opacity;
19
+ }
20
+ }
21
+
22
+ .scrollbar-trigger *::-webkit-scrollbar-thumb {
23
+ @apply md:ariadne-invisible;
24
+ }
25
+
26
+ .scrollbar-trigger:hover *::-webkit-scrollbar-thumb {
27
+ @apply md:ariadne-visible;
28
+ }
@@ -0,0 +1,4 @@
1
+ .tippy-box.tomato-theme {
2
+ background-color: tomato;
3
+ color: yellow;
4
+ }
@@ -0,0 +1,117 @@
1
+ .typography p,
2
+ .typography ol,
3
+ .typography ul {
4
+ max-width: 600px;
5
+ }
6
+
7
+ .typography a {
8
+ @apply ariadne-font-medium ariadne-underline;
9
+ }
10
+
11
+ .typography strong {
12
+ @apply ariadne-font-bold;
13
+ }
14
+
15
+ .typography ol {
16
+ @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
17
+
18
+ counter-reset: list-number;
19
+ }
20
+
21
+ .typography ol > li::before {
22
+ @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-right;
23
+
24
+ counter-increment: list-number;
25
+ content: counter(list-number) '.';
26
+ }
27
+
28
+ .typography ul {
29
+ @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
30
+ }
31
+
32
+ .typography ul > li::before {
33
+ @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-center;
34
+
35
+ content: '\25AA';
36
+ }
37
+
38
+ .typography dt {
39
+ @apply ariadne-font-semibold;
40
+ }
41
+
42
+ .typography hr {
43
+ @apply ariadne-border-t;
44
+ }
45
+
46
+ .typography blockquote {
47
+ @apply ariadne-font-medium ariadne-italic ariadne-border-l-4 ariadne-pl-2;
48
+ }
49
+
50
+ .typography blockquote p:first-of-type::before {
51
+ content: open-quote;
52
+ }
53
+
54
+ .typography blockquote p:last-of-type::after {
55
+ content: close-quote;
56
+ }
57
+
58
+ .typography kbd {
59
+ @apply ariadne-font-medium ariadne-text-inherit;
60
+
61
+ font-family: inherit;
62
+ }
63
+
64
+ .typography code {
65
+ @apply ariadne-font-mono ariadne-font-semibold;
66
+ }
67
+
68
+ .typography pre {
69
+ @apply ariadne-px-3 ariadne-py-2 ariadne-rounded-lg ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-font-mono ariadne-overflow-x-auto;
70
+ }
71
+
72
+ .typography pre code {
73
+ @apply ariadne-text-inherit;
74
+
75
+ font: inherit;
76
+ }
77
+
78
+ .typography :not(pre) > code {
79
+ @apply ariadne-p-1 ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-rounded-lg;
80
+ }
81
+
82
+ .typography pre code::before,
83
+ .typography pre code::after {
84
+ @apply ariadne-content-none;
85
+ }
86
+
87
+ .typography table {
88
+ @apply ariadne-w-full ariadne-table-auto ariadne-text-left;
89
+ }
90
+
91
+ .typography thead {
92
+ @apply ariadne-border-b ariadne-border-b-slate-50/10;
93
+ }
94
+
95
+ .typography thead th {
96
+ @apply ariadne-font-semibold ariadne-align-bottom ariadne-py-1;
97
+ }
98
+
99
+ .typography tbody tr {
100
+ @apply ariadne-border-b ariadne-border-b-slate-50/10;
101
+ }
102
+
103
+ .typography tbody tr:last-child {
104
+ @apply ariadne-border-b-0;
105
+ }
106
+
107
+ .typography tbody td {
108
+ @apply ariadne-align-baseline ariadne-py-1;
109
+ }
110
+
111
+ .typography tfoot {
112
+ @apply ariadne-border-t;
113
+ }
114
+
115
+ .typography tfoot td {
116
+ @apply ariadne-align-top;
117
+ }
@@ -0,0 +1,95 @@
1
+ import type * as H from 'hotscript'
2
+
3
+ import {Controller} from '@hotwired/stimulus'
4
+ import {type Fn} from 'hotscript'
5
+
6
+ type ObjIterator<T, Y extends Fn> = H.Pipe<
7
+ T,
8
+ [H.Objects.Entries, H.Unions.ToTuple, H.Tuples.FlatMap<Y>, H.Tuples.ToUnion, H.Objects.FromEntries]
9
+ >
10
+
11
+ /*
12
+ * Covering `has<Name>` and `<name>Value` for Stimulus values.
13
+ */
14
+ interface ValuesFn extends Fn {
15
+ return: [
16
+ [`${this['arg0'][0]}Value`, ReturnType<this['arg0'][1]>],
17
+ [`has${Capitalize<this['arg0'][0]>}Value`, boolean],
18
+ ]
19
+ }
20
+ /*
21
+ * Covering `has<Name>`, `<name>Target` and `<name>Targets` for Stimulus targets.
22
+ */
23
+ interface TargetsFn extends Fn {
24
+ return: [
25
+ [`has${Capitalize<this['arg0'][0]>}Target`, boolean],
26
+ [`${this['arg0'][0]}Target`, this['arg0'][1] extends null ? HTMLElement : InstanceType<this['arg0'][1]>],
27
+ [`${this['arg0'][0]}Targets`, this['arg0'][1] extends null ? HTMLElement[] : InstanceType<this['arg0'][1]>[]],
28
+ ]
29
+ }
30
+
31
+ type TargetsConfig = Record<string, (new () => HTMLElement) | null>
32
+ type ValuesConfig = Record<string, unknown>
33
+
34
+ type ControllerWithTargets<E extends HTMLElement, T extends TargetsConfig, Y extends ValuesConfig> = Controller<E> &
35
+ ObjIterator<T, TargetsFn> &
36
+ ObjIterator<Y, ValuesFn>
37
+
38
+ /**
39
+ * Creates a new Stimulus controller class with automatically defined target properties.
40
+ * The function takes an array of target identifiers, which can be either strings or tuples.
41
+ * For each target, it creates three properties on the controller class:
42
+ * - `<name>Target` for single target elements,
43
+ * - `<name>Targets` for all target elements,
44
+ * - `has<Name>Target` as a boolean indicating the presence of the target.
45
+ *
46
+ * The single target elements are typed according to the provided class in the tuple,
47
+ * or as HTMLElement by default if a string is provided.
48
+ *
49
+ * @returns {Function} A new controller class extending the base Stimulus controller with the defined target properties.
50
+ *
51
+ * @example
52
+ * export default class extends controllerFactory<HTMLDivElement>()({
53
+ * targets: {
54
+ * one: null,
55
+ * two: HTMLInputElement,
56
+ * three: HTMLButtonElement
57
+ * },
58
+ * values: {
59
+ * key: String,
60
+ * }
61
+ *}) {
62
+ * example() {
63
+ * this.oneTarget // <- HTMLElement
64
+ * this.twoTarget // <- HTMLInputElement
65
+ * this.threeTarget // <- HTMLButtonElement
66
+ *
67
+ * this.hasOneTarget // <- boolean
68
+ * this.oneTargets // <- HTMLElement[]
69
+ *
70
+ * this.hasKeyValue // <- boolean
71
+ * this.keyValue // <- string
72
+ *
73
+ * this.element // <- HTMLDivElement
74
+ * }
75
+ *}
76
+ */
77
+ export function controllerFactory<E extends HTMLElement>() {
78
+ return function createControllerClass<
79
+ const T extends TargetsConfig = TargetsConfig,
80
+ const Y extends ValuesConfig = ValuesConfig,
81
+ >({
82
+ targets,
83
+ values,
84
+ }: {
85
+ targets?: T
86
+ values?: Y
87
+ } = {}): new () => ControllerWithTargets<E, T, Y> {
88
+ class ExtendedController extends Controller<E> {
89
+ static targets = Object.keys(targets ?? {})
90
+ static values = values ?? {}
91
+ }
92
+
93
+ return ExtendedController as unknown as new () => ControllerWithTargets<E, T, Y>
94
+ }
95
+ }
@@ -0,0 +1,31 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Ariadne
4
+ # :nocov:
5
+ # :nodoc:
6
+ module FormHelper
7
+ def ariadne_form_with(**kwargs, &block)
8
+ form_with(**kwargs, skip_default_ids: false, builder: Ariadne::Forms::Builder, &block)
9
+ end
10
+
11
+ def ariadne_fields_for(record_name, record_object = nil, options = {}, &block)
12
+ fields_for(
13
+ record_name,
14
+ record_object,
15
+ options.merge(
16
+ skip_default_ids: false,
17
+ builder: Ariadne::Forms::Builder,
18
+ ),
19
+ &block
20
+ )
21
+ end
22
+
23
+ def inline_form(*args, &block)
24
+ Ariadne::Form.inline_form(*args, &block)
25
+ end
26
+
27
+ def render_inline_form(*args, &block)
28
+ render(inline_form(*args, &block))
29
+ end
30
+ end
31
+ end
@@ -3,6 +3,6 @@
3
3
  # :nocov:
4
4
  module Ariadne
5
5
  module ViewComponents
6
- VERSION = "0.0.64"
6
+ VERSION = "0.0.65"
7
7
  end
8
8
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.64
4
+ version: 0.0.65
5
5
  platform: ruby
6
6
  authors:
7
7
  - Garen J. Torikian
@@ -122,8 +122,12 @@ files:
122
122
  - LICENSE.txt
123
123
  - README.md
124
124
  - app/assets/javascripts/ariadne_view_components.js
125
+ - app/assets/javascripts/ariadne_view_components.js.br
126
+ - app/assets/javascripts/ariadne_view_components.js.gz
125
127
  - app/assets/javascripts/ariadne_view_components.js.map
126
128
  - app/assets/stylesheets/ariadne_view_components.css
129
+ - app/assets/stylesheets/ariadne_view_components.css.br
130
+ - app/assets/stylesheets/ariadne_view_components.css.gz
127
131
  - app/components/ariadne/ariadne-form.ts
128
132
  - app/components/ariadne/base_component.rb
129
133
  - app/components/ariadne/behaviors/tooltipable.rb
@@ -172,6 +176,17 @@ files:
172
176
  - app/components/ariadne/ui/link/component.rb
173
177
  - app/components/ariadne/ui/typography/component.html.erb
174
178
  - app/components/ariadne/ui/typography/component.rb
179
+ - app/frontend/ariadne/index.ts
180
+ - app/frontend/ariadne/stimulus_app.ts
181
+ - app/frontend/ariadne/theme.ts
182
+ - app/frontend/controllers/tooltip.ts
183
+ - app/frontend/entrypoints/application.ts
184
+ - app/frontend/stylesheets/ariadne_view_components.css
185
+ - app/frontend/stylesheets/scrollbar.css
186
+ - app/frontend/stylesheets/tippy.js/themes/tomato.css
187
+ - app/frontend/stylesheets/typography.css
188
+ - app/frontend/utils/createController.ts
189
+ - app/helpers/ariadne/form_helper.rb
175
190
  - app/lib/ariadne/attributes_helper.rb
176
191
  - app/lib/ariadne/class_name_helper.rb
177
192
  - app/lib/ariadne/fetch_or_fallback_helper.rb