@vueless/storybook 1.2.1-beta.0 → 1.2.1-beta.2
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.
|
@@ -21,6 +21,61 @@ Custom dark mode related vueless loader.
|
|
|
21
21
|
width="250" />
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
|
+
<style>
|
|
25
|
+
/*
|
|
26
|
+
* Prevent showing users default storybook theme styles.
|
|
27
|
+
* Need to keep it here to prevent theme flickering issue on Windows with Node 24.xx
|
|
28
|
+
*/
|
|
29
|
+
html.dark {
|
|
30
|
+
background: #111827;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
#root {
|
|
34
|
+
visibility: hidden;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
#sb-vueless-loader {
|
|
38
|
+
top: 0;
|
|
39
|
+
left: 0;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
position: fixed;
|
|
44
|
+
background: inherit;
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
z-index: 999;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.light #sb-vueless-loader {
|
|
51
|
+
background: #f1f5f9;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.dark #sb-vueless-loader {
|
|
55
|
+
background: #111827;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.sb-vueless-loader-img-dark,
|
|
59
|
+
.sb-vueless-loader-img-light {
|
|
60
|
+
display: none;
|
|
61
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.light .sb-vueless-loader-img-light,
|
|
65
|
+
.dark .sb-vueless-loader-img-dark {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes pulse {
|
|
70
|
+
0%, 100% {
|
|
71
|
+
opacity: 1;
|
|
72
|
+
}
|
|
73
|
+
50% {
|
|
74
|
+
opacity: .5;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
|
|
24
79
|
<script>
|
|
25
80
|
/* This trick prevents showing users the default storybook theme. */
|
|
26
81
|
(() => {
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
/* -------------------- Prevent showing users default storybook theme styles -------------------- */
|
|
2
|
-
|
|
3
|
-
html.dark {
|
|
4
|
-
background: #111827;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
#root {
|
|
8
|
-
visibility: hidden;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
#sb-vueless-loader {
|
|
12
|
-
top: 0;
|
|
13
|
-
left: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
position: fixed;
|
|
18
|
-
background: inherit;
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
z-index: 999;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.light #sb-vueless-loader {
|
|
25
|
-
background: #f1f5f9;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.dark #sb-vueless-loader {
|
|
29
|
-
background: #111827;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.sb-vueless-loader-img-dark,
|
|
33
|
-
.sb-vueless-loader-img-light {
|
|
34
|
-
display: none;
|
|
35
|
-
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.light .sb-vueless-loader-img-light {
|
|
39
|
-
display: block;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.dark .sb-vueless-loader-img-dark {
|
|
43
|
-
display: block;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@keyframes pulse {
|
|
47
|
-
0%, 100% {
|
|
48
|
-
opacity: 1;
|
|
49
|
-
}
|
|
50
|
-
50% {
|
|
51
|
-
opacity: .5;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
1
|
/* -------------------- Storybook config tooltip -------------------- */
|
|
56
2
|
|
|
57
3
|
div[data-testid="tooltip"] {
|
package/.storybook-ts/env.d.ts
CHANGED
|
@@ -2,3 +2,9 @@
|
|
|
2
2
|
/// <reference lib="dom.iterable" />
|
|
3
3
|
/// <reference types="vite/client" />
|
|
4
4
|
/// <reference types="vueless/modules" />
|
|
5
|
+
|
|
6
|
+
declare module "@vueless/storybook" {
|
|
7
|
+
import type { UnknownObject } from "vueless";
|
|
8
|
+
export function storyDarkModeDecorator(): Promise<UnknownObject>;
|
|
9
|
+
export function vue3SourceDecorator(): Promise<UnknownObject>;
|
|
10
|
+
}
|
|
@@ -21,6 +21,61 @@ Custom dark mode related vueless loader.
|
|
|
21
21
|
width="250" />
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
|
+
<style>
|
|
25
|
+
/*
|
|
26
|
+
* Prevent showing users default storybook theme styles.
|
|
27
|
+
* Need to keep it here to prevent theme flickering issue on Windows with Node 24.xx
|
|
28
|
+
*/
|
|
29
|
+
html.dark {
|
|
30
|
+
background: #111827;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
#root {
|
|
34
|
+
visibility: hidden;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
#sb-vueless-loader {
|
|
38
|
+
top: 0;
|
|
39
|
+
left: 0;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
position: fixed;
|
|
44
|
+
background: inherit;
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
z-index: 999;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.light #sb-vueless-loader {
|
|
51
|
+
background: #f1f5f9;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.dark #sb-vueless-loader {
|
|
55
|
+
background: #111827;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.sb-vueless-loader-img-dark,
|
|
59
|
+
.sb-vueless-loader-img-light {
|
|
60
|
+
display: none;
|
|
61
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.light .sb-vueless-loader-img-light,
|
|
65
|
+
.dark .sb-vueless-loader-img-dark {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes pulse {
|
|
70
|
+
0%, 100% {
|
|
71
|
+
opacity: 1;
|
|
72
|
+
}
|
|
73
|
+
50% {
|
|
74
|
+
opacity: .5;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
|
|
24
79
|
<script>
|
|
25
80
|
/* This trick prevents showing users the default storybook theme. */
|
|
26
81
|
(() => {
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
/* -------------------- Prevent showing users default storybook theme styles -------------------- */
|
|
2
|
-
|
|
3
|
-
html.dark {
|
|
4
|
-
background: #111827;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
#root {
|
|
8
|
-
visibility: hidden;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
#sb-vueless-loader {
|
|
12
|
-
top: 0;
|
|
13
|
-
left: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
position: fixed;
|
|
18
|
-
background: inherit;
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
z-index: 999;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.light #sb-vueless-loader {
|
|
25
|
-
background: #f1f5f9;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.dark #sb-vueless-loader {
|
|
29
|
-
background: #111827;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.sb-vueless-loader-img-dark,
|
|
33
|
-
.sb-vueless-loader-img-light {
|
|
34
|
-
display: none;
|
|
35
|
-
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.light .sb-vueless-loader-img-light {
|
|
39
|
-
display: block;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.dark .sb-vueless-loader-img-dark {
|
|
43
|
-
display: block;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@keyframes pulse {
|
|
47
|
-
0%, 100% {
|
|
48
|
-
opacity: 1;
|
|
49
|
-
}
|
|
50
|
-
50% {
|
|
51
|
-
opacity: .5;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
1
|
/* -------------------- Storybook config tooltip -------------------- */
|
|
56
2
|
|
|
57
3
|
div[data-testid="tooltip"] {
|
package/bin/commands/init.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import path from "node:path";
|
|
4
4
|
import { cwd } from "node:process";
|
|
5
5
|
import { styleText } from "node:util";
|
|
6
|
+
import { fileURLToPath } from "node:url";
|
|
6
7
|
import { readFile, writeFile } from "node:fs/promises";
|
|
7
8
|
import { cpSync, renameSync, existsSync } from "node:fs";
|
|
8
9
|
|
|
@@ -16,9 +17,9 @@ import { detectTypeScript } from "vueless/utils/node/helper.js";
|
|
|
16
17
|
* @return {Promise<void>} A promise that resolves once the initialization process is complete.
|
|
17
18
|
*/
|
|
18
19
|
export async function storybookInit() {
|
|
19
|
-
const __dirname = path.dirname(
|
|
20
|
-
const sourceTs = path.join(__dirname, "..", ".storybook-ts");
|
|
21
|
-
const sourceJs = path.join(__dirname, "..", ".storybook-js");
|
|
20
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
21
|
+
const sourceTs = path.join(__dirname, "..", "..", ".storybook-ts");
|
|
22
|
+
const sourceJs = path.join(__dirname, "..", "..", ".storybook-js");
|
|
22
23
|
const target = path.join(cwd(), ".storybook");
|
|
23
24
|
|
|
24
25
|
(await detectTypeScript())
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueless/storybook",
|
|
3
|
-
"version": "1.2.1-beta.
|
|
3
|
+
"version": "1.2.1-beta.2",
|
|
4
4
|
"description": "Simplifies Storybook configuration for Vueless UI library.",
|
|
5
5
|
"author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
|
|
6
6
|
"homepage": "https://vueless.com",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"access": "public"
|
|
12
12
|
},
|
|
13
13
|
"bin": {
|
|
14
|
-
"
|
|
14
|
+
"@vueless/storybook": "./bin/index.js"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"ts:check": "vue-tsc --build --force",
|