@abcnews/components-builder 0.0.3 → 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.
- package/README.md +25 -0
- package/dist/BuilderFrame/BuilderFrame.stories.svelte +32 -0
- package/dist/BuilderFrame/BuilderFrame.stories.svelte.d.ts +27 -0
- package/dist/BuilderFrame/BuilderFrame.svelte +42 -0
- package/dist/BuilderFrame/BuilderFrame.svelte.d.ts +6 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.stories.svelte +181 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.stories.svelte.d.ts +27 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.svelte +9 -5
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,31 @@ This project uses global styles in the same way as bootstrap or tailwind. These
|
|
|
10
10
|
|
|
11
11
|
Wrap your application inside of the BuilderStyleRoot component to make use of these styles. Note that all the components in this repository also depend on these styles.
|
|
12
12
|
|
|
13
|
+
## BuilderFrame
|
|
14
|
+
|
|
15
|
+
A two column frame you can use to scaffold your builder.
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { BuilderFrame } from '@abcnews/components-builder';
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#snippet Viz()}
|
|
23
|
+
<svg …>
|
|
24
|
+
{/snippet}
|
|
25
|
+
|
|
26
|
+
{#snippet Sidebar()}
|
|
27
|
+
<fieldset>
|
|
28
|
+
<legend>My builder</legend>
|
|
29
|
+
</fieldset>
|
|
30
|
+
{/snippet}
|
|
31
|
+
|
|
32
|
+
<BuilderStyleRoot>
|
|
33
|
+
<BuilderFrame {Viz} {Sidebar} />
|
|
34
|
+
</BuilderStyleRoot>
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
|
|
13
38
|
## UpdateChecker
|
|
14
39
|
|
|
15
40
|
The update checker extracts the current version number from the URL, and recursively checks for new versions, major, minor, and patch. If a new version is found it will show a modal prompting the user to update.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import BuilderFrame from "./BuilderFrame.svelte";
|
|
4
|
+
import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
5
|
+
|
|
6
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: "Example/BuilderFrame",
|
|
9
|
+
component: BuilderFrame,
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
argTypes: {},
|
|
12
|
+
args: {},
|
|
13
|
+
decorators: [() => BuilderStyleRoot],
|
|
14
|
+
});
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{#snippet Sidebar()}
|
|
18
|
+
Sidebar
|
|
19
|
+
{/snippet}
|
|
20
|
+
|
|
21
|
+
{#snippet Viz()}
|
|
22
|
+
Viz
|
|
23
|
+
{/snippet}
|
|
24
|
+
|
|
25
|
+
<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
|
|
26
|
+
<Story
|
|
27
|
+
name="Primary"
|
|
28
|
+
args={{
|
|
29
|
+
Sidebar,
|
|
30
|
+
Viz,
|
|
31
|
+
}}
|
|
32
|
+
/>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default BuilderFrame;
|
|
2
|
+
type BuilderFrame = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const BuilderFrame: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
import BuilderFrame from "./BuilderFrame.svelte";
|
|
15
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
16
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
17
|
+
$$bindings?: Bindings;
|
|
18
|
+
} & Exports;
|
|
19
|
+
(internal: unknown, props: {
|
|
20
|
+
$$events?: Events;
|
|
21
|
+
$$slots?: Slots;
|
|
22
|
+
}): Exports & {
|
|
23
|
+
$set?: any;
|
|
24
|
+
$on?: any;
|
|
25
|
+
};
|
|
26
|
+
z_$$bindings?: Bindings;
|
|
27
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { Viz, Sidebar } = $props();
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="builder-frame">
|
|
6
|
+
<div class="builder-frame__viz">{@render Viz?.()}</div>
|
|
7
|
+
|
|
8
|
+
<div class="builder-frame__sidebar">{@render Sidebar?.()}</div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.builder-frame {
|
|
13
|
+
display: flex;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
width: 100%;
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: 0;
|
|
18
|
+
top: 0;
|
|
19
|
+
}
|
|
20
|
+
.builder-frame__viz {
|
|
21
|
+
flex: 1;
|
|
22
|
+
min-width: 50%;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
position: relative;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
padding: 1.69rem;
|
|
28
|
+
background: white;
|
|
29
|
+
color: black;
|
|
30
|
+
}
|
|
31
|
+
.builder-frame__sidebar {
|
|
32
|
+
width: 22rem;
|
|
33
|
+
padding: 2rem 1rem;
|
|
34
|
+
background: rgba(0, 0, 0, 0.04);
|
|
35
|
+
border-left: 1px solid var(--border);
|
|
36
|
+
height: 100vh;
|
|
37
|
+
overflow: auto;
|
|
38
|
+
@media (min-width: 1920px) {
|
|
39
|
+
width: 25rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import BuilderStyleRoot from "./BuilderStyleRoot.svelte";
|
|
4
|
+
|
|
5
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
6
|
+
const { Story } = defineMeta({
|
|
7
|
+
title: "Example/BuilderStyleRoot",
|
|
8
|
+
component: BuilderStyleRoot,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
argTypes: {},
|
|
11
|
+
args: {},
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#snippet children()}
|
|
16
|
+
<fieldset>
|
|
17
|
+
<legend>A fieldset</legend>
|
|
18
|
+
<label>
|
|
19
|
+
<input type="checkbox" />
|
|
20
|
+
Show totals
|
|
21
|
+
</label>
|
|
22
|
+
|
|
23
|
+
<label>
|
|
24
|
+
<input type="checkbox" />
|
|
25
|
+
Combine Coalition
|
|
26
|
+
</label>
|
|
27
|
+
</fieldset>
|
|
28
|
+
|
|
29
|
+
<fieldset>
|
|
30
|
+
<legend>More controls</legend>
|
|
31
|
+
|
|
32
|
+
<label>
|
|
33
|
+
Dinner hero
|
|
34
|
+
<select>
|
|
35
|
+
<option>Banana</option>
|
|
36
|
+
<option>Apple</option>
|
|
37
|
+
<optgroup label="Greens">
|
|
38
|
+
<option>Leek</option>
|
|
39
|
+
<option>Bean</option>
|
|
40
|
+
</optgroup>
|
|
41
|
+
<optgroup label="Other">
|
|
42
|
+
<option>Tomato</option>
|
|
43
|
+
<option>Cucumber</option>
|
|
44
|
+
</optgroup>
|
|
45
|
+
</select>
|
|
46
|
+
</label>
|
|
47
|
+
|
|
48
|
+
<button>A full-width button</button>
|
|
49
|
+
</fieldset>
|
|
50
|
+
|
|
51
|
+
<fieldset>
|
|
52
|
+
<legend>Button groups</legend>
|
|
53
|
+
<div class="btn-group">
|
|
54
|
+
<button>Never</button>
|
|
55
|
+
<button>Gonna</button>
|
|
56
|
+
<button>Give</button>
|
|
57
|
+
<button>You</button>
|
|
58
|
+
<button>Up</button>
|
|
59
|
+
</div>
|
|
60
|
+
</fieldset>
|
|
61
|
+
|
|
62
|
+
<fieldset>
|
|
63
|
+
<legend>Inline fields</legend>
|
|
64
|
+
<div class="builder__inline">
|
|
65
|
+
<div>
|
|
66
|
+
<select>
|
|
67
|
+
<option>Export</option>
|
|
68
|
+
<option>Import</option>
|
|
69
|
+
</select>
|
|
70
|
+
</div>
|
|
71
|
+
<label>
|
|
72
|
+
<input type="checkbox" />
|
|
73
|
+
Show totals
|
|
74
|
+
</label>
|
|
75
|
+
<div>
|
|
76
|
+
<button>Go for it</button>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</fieldset>
|
|
80
|
+
|
|
81
|
+
<fieldset>
|
|
82
|
+
<legend>
|
|
83
|
+
<button class="btn-icon" title="Clear focuses" aria-label="Clear focuses">
|
|
84
|
+
<svg
|
|
85
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
+
width="16"
|
|
87
|
+
height="16"
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
class="bi bi-trash"
|
|
90
|
+
viewBox="0 0 16 16"
|
|
91
|
+
role="img"
|
|
92
|
+
>
|
|
93
|
+
<path
|
|
94
|
+
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
|
|
95
|
+
/>
|
|
96
|
+
<path
|
|
97
|
+
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
|
|
98
|
+
/>
|
|
99
|
+
</svg>
|
|
100
|
+
</button>
|
|
101
|
+
With button
|
|
102
|
+
</legend>
|
|
103
|
+
|
|
104
|
+
<div>
|
|
105
|
+
Although you can put btn-icon buttons anywhere. Consider using <a
|
|
106
|
+
href="https://icons.getbootstrap.com/"
|
|
107
|
+
>https://icons.getbootstrap.com/</a
|
|
108
|
+
>
|
|
109
|
+
or the corresponding <code>svelte-bootstrap-icons</code> package.
|
|
110
|
+
</div>
|
|
111
|
+
<hr />
|
|
112
|
+
<div class="btn-group">
|
|
113
|
+
{#each [1, 2, 3, 4]}
|
|
114
|
+
<button
|
|
115
|
+
class="btn-icon"
|
|
116
|
+
title="Clear focuses"
|
|
117
|
+
aria-label="Clear focuses"
|
|
118
|
+
>
|
|
119
|
+
<svg
|
|
120
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
121
|
+
width="16"
|
|
122
|
+
height="16"
|
|
123
|
+
fill="currentColor"
|
|
124
|
+
class="bi bi-trash"
|
|
125
|
+
viewBox="0 0 16 16"
|
|
126
|
+
role="img"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
|
|
130
|
+
/>
|
|
131
|
+
<path
|
|
132
|
+
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
|
|
133
|
+
/>
|
|
134
|
+
</svg>
|
|
135
|
+
</button>
|
|
136
|
+
{/each}
|
|
137
|
+
</div>
|
|
138
|
+
</fieldset>
|
|
139
|
+
<fieldset>
|
|
140
|
+
<legend>Tables</legend>
|
|
141
|
+
<table class="builder__table">
|
|
142
|
+
<thead>
|
|
143
|
+
<tr><th>Item</th><th>Amount</th><th>Price</th></tr>
|
|
144
|
+
</thead>
|
|
145
|
+
<tbody>
|
|
146
|
+
<tr
|
|
147
|
+
><td>Cake</td><td class="builder__digit">1</td><td
|
|
148
|
+
class="builder__digit">$2.50</td
|
|
149
|
+
></tr
|
|
150
|
+
>
|
|
151
|
+
<tr
|
|
152
|
+
><td>Prawns</td><td class="builder__digit">13</td><td
|
|
153
|
+
class="builder__digit">$800</td
|
|
154
|
+
></tr
|
|
155
|
+
>
|
|
156
|
+
<tr
|
|
157
|
+
><td>Scissors</td><td class="builder__digit">2</td><td
|
|
158
|
+
class="builder__digit">$11.48</td
|
|
159
|
+
></tr
|
|
160
|
+
>
|
|
161
|
+
</tbody>
|
|
162
|
+
</table>
|
|
163
|
+
</fieldset>
|
|
164
|
+
|
|
165
|
+
<fieldset>
|
|
166
|
+
<legend>Submit row</legend>
|
|
167
|
+
<p>This is more useful in modals:</p>
|
|
168
|
+
<div class="builder__submit-row">
|
|
169
|
+
<button>Back</button>
|
|
170
|
+
<button>Next</button>
|
|
171
|
+
</div>
|
|
172
|
+
</fieldset>
|
|
173
|
+
{/snippet}
|
|
174
|
+
|
|
175
|
+
<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
|
|
176
|
+
<Story
|
|
177
|
+
name="Primary"
|
|
178
|
+
args={{
|
|
179
|
+
children: children,
|
|
180
|
+
}}
|
|
181
|
+
/>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default BuilderStyleRoot;
|
|
2
|
+
type BuilderStyleRoot = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const BuilderStyleRoot: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
import BuilderStyleRoot from "./BuilderStyleRoot.svelte";
|
|
15
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
16
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
17
|
+
$$bindings?: Bindings;
|
|
18
|
+
} & Exports;
|
|
19
|
+
(internal: unknown, props: {
|
|
20
|
+
$$events?: Events;
|
|
21
|
+
$$slots?: Slots;
|
|
22
|
+
}): Exports & {
|
|
23
|
+
$set?: any;
|
|
24
|
+
$on?: any;
|
|
25
|
+
};
|
|
26
|
+
z_$$bindings?: Bindings;
|
|
27
|
+
}
|
|
@@ -73,17 +73,16 @@
|
|
|
73
73
|
font-weight: bold;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
.builder__inline {
|
|
76
|
+
.btn-group {
|
|
78
77
|
display: flex;
|
|
78
|
+
gap: 0.25rem;
|
|
79
79
|
flex-wrap: wrap;
|
|
80
|
-
gap: 0.5rem;
|
|
81
80
|
}
|
|
82
81
|
|
|
83
|
-
.
|
|
82
|
+
.builder__inline {
|
|
84
83
|
display: flex;
|
|
85
84
|
flex-wrap: wrap;
|
|
86
|
-
gap:
|
|
85
|
+
gap: 0.5rem;
|
|
87
86
|
}
|
|
88
87
|
|
|
89
88
|
label {
|
|
@@ -172,6 +171,11 @@
|
|
|
172
171
|
border-left: none;
|
|
173
172
|
}
|
|
174
173
|
}
|
|
174
|
+
|
|
175
|
+
.builder__digit {
|
|
176
|
+
text-align: right;
|
|
177
|
+
font-family: monospace;
|
|
178
|
+
}
|
|
175
179
|
}
|
|
176
180
|
</style>
|
|
177
181
|
</svelte:head>
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as BuilderStyleRoot } from "./BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
2
|
+
export { default as BuilderFrame } from "./BuilderFrame/BuilderFrame.svelte";
|
|
2
3
|
export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
|
|
3
4
|
export { default as GoogleDocScrollyteller } from "./GoogleDocScrollyteller/GoogleDocScrollyteller.svelte";
|
|
4
5
|
export { default as Modal } from "./Modal/Modal.svelte";
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Reexport your entry components here
|
|
2
2
|
export { default as BuilderStyleRoot } from "./BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
3
|
+
export { default as BuilderFrame } from "./BuilderFrame/BuilderFrame.svelte";
|
|
3
4
|
export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
|
|
4
5
|
export { default as GoogleDocScrollyteller } from "./GoogleDocScrollyteller/GoogleDocScrollyteller.svelte";
|
|
5
6
|
export { default as Modal } from "./Modal/Modal.svelte";
|