@vueless/storybook 0.0.40 → 0.0.41
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/.storybook/index.css +201 -1
- package/.storybook/main.js +6 -2
- package/.storybook/manager.js +2 -0
- package/.storybook/postcss.config.js +6 -0
- package/.storybook/preview-head.html +0 -204
- package/.storybook/vite.config.js +19 -0
- package/package.json +1 -1
- /package/.storybook/{tailwind.storybook.config.js → tailwind.config.js} +0 -0
package/.storybook/index.css
CHANGED
|
@@ -1,5 +1,205 @@
|
|
|
1
|
-
@config "./tailwind.
|
|
1
|
+
@config "./tailwind.config.js";
|
|
2
2
|
|
|
3
3
|
@tailwind base;
|
|
4
4
|
@tailwind components;
|
|
5
5
|
@tailwind utilities;
|
|
6
|
+
|
|
7
|
+
/* -------------------- Storybook Preview UI -------------------- */
|
|
8
|
+
/* -------------------- General -------------------- */
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
font-family: Roboto, sans-serif;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.dark h1, .dark h2, .dark h3 {
|
|
15
|
+
@apply text-gray-200;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* -------------------- All docs block -------------------- */
|
|
19
|
+
|
|
20
|
+
.dark .sbdocs {
|
|
21
|
+
@apply bg-gray-950;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* -------------------- Main story -------------------- */
|
|
25
|
+
|
|
26
|
+
.sb-bar,
|
|
27
|
+
.docs-story {
|
|
28
|
+
@apply bg-white;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.vl-dark .sb-bar,
|
|
32
|
+
.vl-dark .docs-story {
|
|
33
|
+
@apply !bg-gray-900;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.sb-bar {
|
|
37
|
+
@apply border-0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dark .sb-bar,
|
|
41
|
+
.dark .docs-story {
|
|
42
|
+
@apply bg-gray-100;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark .sb-bar {
|
|
46
|
+
@apply border-b border-gray-300;
|
|
47
|
+
box-shadow: none !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.vl-dark .sb-bar {
|
|
51
|
+
@apply border-b border-gray-800;
|
|
52
|
+
box-shadow: none !important;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.sbdocs.sbdocs-preview .prismjs {
|
|
56
|
+
@apply border-t border-t-gray-700 bg-gray-800;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.vl-dark .docblock-code-toggle {
|
|
60
|
+
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.sbdocs-preview {
|
|
64
|
+
box-shadow: none !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark .sbdocs.sbdocs-preview,
|
|
68
|
+
.vl-dark .sbdocs.sbdocs-preview {
|
|
69
|
+
@apply border-gray-800;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* -------------------- Args table -------------------- */
|
|
73
|
+
|
|
74
|
+
.dark .docblock-argstable,
|
|
75
|
+
.dark .docblock-argstable-head th {
|
|
76
|
+
@apply !text-gray-200;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.docblock-argstable-body {
|
|
80
|
+
@apply rounded-lg !filter-none;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.docblock-argstable-body tr td {
|
|
84
|
+
@apply !rounded-none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.docblock-argstable-body tr:not([title]) > td {
|
|
88
|
+
@apply !bg-white;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.dark .docblock-argstable-body tr > td {
|
|
92
|
+
@apply border-b border-solid !bg-gray-900 border-s-0 border-e-0 !border-t-gray-800;
|
|
93
|
+
border-block-end: none !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.dark .docblock-argstable-body tr > td:first-child,
|
|
97
|
+
.dark .docblock-argstable-body tr > td:last-child {
|
|
98
|
+
@apply !border-s-gray-800 !border-e-gray-800;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.dark .docblock-argstable-body {
|
|
102
|
+
@apply border border-b-gray-800;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.dark .docblock-argstable-body tr[title] > td {
|
|
106
|
+
@apply !bg-gray-800 !text-gray-400;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.dark .docblock-argstable-body tr[title] > td svg {
|
|
110
|
+
@apply !text-gray-400;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.dark .docblock-argstable-body tr > td > div + div > span,
|
|
114
|
+
.dark .docblock-argstable-body tr > td > div + div > div > span,
|
|
115
|
+
.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
116
|
+
.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
117
|
+
@apply bg-gray-800 border-gray-700/50 text-gray-400;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.dark .docblock-argstable-body tr > td textarea,
|
|
121
|
+
.dark .docblock-argstable-body tr > td select,
|
|
122
|
+
.dark .docblock-argstable-body tr > td:nth-child(4) button {
|
|
123
|
+
@apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500;
|
|
124
|
+
box-shadow: none !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.light .docblock-argstable-body tr > td textarea,
|
|
128
|
+
.light .docblock-argstable-body tr > td select,
|
|
129
|
+
.light .docblock-argstable-body tr > td:nth-child(4) button {
|
|
130
|
+
@apply border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500;
|
|
131
|
+
box-shadow: none !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.dark .docblock-argstable-body [type='checkbox'],
|
|
135
|
+
.dark .docblock-argstable-body [type='radio'] {
|
|
136
|
+
@apply !border !border-solid !border-gray-300;
|
|
137
|
+
box-shadow: none !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.dark .docblock-argstable-body [type='checkbox']:checked,
|
|
141
|
+
.dark .docblock-argstable-body [type='radio']:checked {
|
|
142
|
+
@apply bg-gray-700;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.docblock-argstable-body [type='checkbox']:checked,
|
|
146
|
+
.docblock-argstable-body [type='radio']:checked {
|
|
147
|
+
@apply !bg-gray-900;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.docblock-argstable [type='checkbox']:focus,
|
|
151
|
+
.docblock-argstable [type='radio']:focus {
|
|
152
|
+
@apply !ring-gray-300;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* -------------------- Code block and user markdown -------------------- */
|
|
156
|
+
|
|
157
|
+
#storybook-docs h2 {
|
|
158
|
+
@apply mt-8 mb-6 pb-2 font-bold;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.dark h2 {
|
|
162
|
+
@apply border-b-gray-800;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sbdocs-title + p code {
|
|
166
|
+
@apply bg-white;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.docblock-source {
|
|
170
|
+
@apply !bg-gray-800 border-gray-800 !rounded-lg;
|
|
171
|
+
box-shadow: none !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.dark .docblock-source {
|
|
175
|
+
@apply !bg-gray-900 !border-gray-800;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.dark .docblock-source button {
|
|
179
|
+
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.markdown code {
|
|
183
|
+
background-color: #f3f4f6 !important;
|
|
184
|
+
border-color: #d1d5db !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.markdown .sbdocs-a {
|
|
188
|
+
border-bottom: dashed 1px #4b5563;
|
|
189
|
+
color: #4b5563;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.markdown .sbdocs-a:hover {
|
|
193
|
+
border-bottom: none;
|
|
194
|
+
color: #4b5563;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* -------------------- Storybook story preview -------------------- */
|
|
198
|
+
|
|
199
|
+
.vl-dark {
|
|
200
|
+
@apply min-h-full bg-gray-950;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.vl-light {
|
|
204
|
+
@apply min-h-full bg-white;
|
|
205
|
+
}
|
package/.storybook/main.js
CHANGED
|
@@ -11,11 +11,15 @@ export default {
|
|
|
11
11
|
"@storybook/addon-essentials",
|
|
12
12
|
"@storybook/addon-interactions",
|
|
13
13
|
"storybook-dark-mode",
|
|
14
|
-
// "@storybook/addon-themes", TODO: uncomment when dark mode will be implemented to the components.
|
|
14
|
+
// "@storybook/addon-themes", // TODO: uncomment when dark mode will be implemented to the components.
|
|
15
15
|
],
|
|
16
16
|
framework: {
|
|
17
17
|
name: "@storybook/vue3-vite",
|
|
18
|
-
options: {
|
|
18
|
+
options: {
|
|
19
|
+
builder: {
|
|
20
|
+
viteConfigPath: ".storybook/vite.config.js",
|
|
21
|
+
},
|
|
22
|
+
},
|
|
19
23
|
},
|
|
20
24
|
docs: {
|
|
21
25
|
autodocs: true,
|
package/.storybook/manager.js
CHANGED
|
@@ -8,207 +8,3 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
8
8
|
<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
|
|
10
10
|
<link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
|
|
11
|
-
|
|
12
|
-
<!-- Styles overriding -->
|
|
13
|
-
<style>
|
|
14
|
-
/* -------------------- General -------------------- */
|
|
15
|
-
|
|
16
|
-
body {
|
|
17
|
-
font-family: Roboto, sans-serif;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.dark h1, .dark h2, .dark h3 {
|
|
21
|
-
@apply text-gray-200;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* -------------------- All docs block -------------------- */
|
|
25
|
-
|
|
26
|
-
.dark .sbdocs {
|
|
27
|
-
@apply bg-gray-950;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* -------------------- Main story -------------------- */
|
|
31
|
-
|
|
32
|
-
.sb-bar,
|
|
33
|
-
.docs-story {
|
|
34
|
-
@apply bg-white;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.vl-dark .sb-bar,
|
|
38
|
-
.vl-dark .docs-story {
|
|
39
|
-
@apply !bg-gray-900;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.sb-bar {
|
|
43
|
-
@apply border-0;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.dark .sb-bar,
|
|
47
|
-
.dark .docs-story {
|
|
48
|
-
@apply bg-gray-100;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.dark .sb-bar {
|
|
52
|
-
@apply border-b border-gray-300;
|
|
53
|
-
box-shadow: none !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.vl-dark .sb-bar {
|
|
57
|
-
@apply border-b border-gray-800;
|
|
58
|
-
box-shadow: none !important;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.sbdocs.sbdocs-preview .prismjs {
|
|
62
|
-
@apply border-t border-t-gray-700 bg-gray-800;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.vl-dark .docblock-code-toggle {
|
|
66
|
-
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.sbdocs-preview {
|
|
70
|
-
box-shadow: none !important;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.dark .sbdocs.sbdocs-preview,
|
|
74
|
-
.vl-dark .sbdocs.sbdocs-preview {
|
|
75
|
-
@apply border-gray-800;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* -------------------- Args table -------------------- */
|
|
79
|
-
|
|
80
|
-
.dark .docblock-argstable,
|
|
81
|
-
.dark .docblock-argstable-head th {
|
|
82
|
-
@apply !text-gray-200;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.docblock-argstable-body {
|
|
86
|
-
@apply rounded-lg !filter-none;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.docblock-argstable-body tr td {
|
|
90
|
-
@apply !rounded-none;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.docblock-argstable-body tr:not([title]) > td {
|
|
94
|
-
@apply !bg-white;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.dark .docblock-argstable-body tr > td {
|
|
98
|
-
@apply border-b border-solid !bg-gray-900 border-s-0 border-e-0 !border-t-gray-800;
|
|
99
|
-
border-block-end: none !important;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.dark .docblock-argstable-body tr > td:first-child,
|
|
103
|
-
.dark .docblock-argstable-body tr > td:last-child {
|
|
104
|
-
@apply !border-s-gray-800 !border-e-gray-800;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.dark .docblock-argstable-body {
|
|
108
|
-
@apply border border-b-gray-800;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.dark .docblock-argstable-body tr[title] > td {
|
|
112
|
-
@apply !bg-gray-800 !text-gray-400;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.dark .docblock-argstable-body tr[title] > td svg {
|
|
116
|
-
@apply !text-gray-400;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.dark .docblock-argstable-body tr > td > div + div > span,
|
|
120
|
-
.dark .docblock-argstable-body tr > td > div + div > div > span,
|
|
121
|
-
.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
122
|
-
.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
123
|
-
@apply bg-gray-800 border-gray-700/50 text-gray-400;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.dark .docblock-argstable-body tr > td textarea,
|
|
127
|
-
.dark .docblock-argstable-body tr > td select,
|
|
128
|
-
.dark .docblock-argstable-body tr > td:nth-child(4) button {
|
|
129
|
-
@apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500;
|
|
130
|
-
box-shadow: none !important;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.light .docblock-argstable-body tr > td textarea,
|
|
134
|
-
.light .docblock-argstable-body tr > td select,
|
|
135
|
-
.light .docblock-argstable-body tr > td:nth-child(4) button {
|
|
136
|
-
@apply border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500;
|
|
137
|
-
box-shadow: none !important;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.dark .docblock-argstable-body [type='checkbox'],
|
|
141
|
-
.dark .docblock-argstable-body [type='radio'] {
|
|
142
|
-
@apply !border !border-solid !border-gray-300;
|
|
143
|
-
box-shadow: none !important;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.dark .docblock-argstable-body [type='checkbox']:checked,
|
|
147
|
-
.dark .docblock-argstable-body [type='radio']:checked {
|
|
148
|
-
@apply bg-gray-700;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.docblock-argstable-body [type='checkbox']:checked,
|
|
152
|
-
.docblock-argstable-body [type='radio']:checked {
|
|
153
|
-
@apply !bg-gray-900;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.docblock-argstable [type='checkbox']:focus,
|
|
157
|
-
.docblock-argstable [type='radio']:focus {
|
|
158
|
-
@apply !ring-gray-300;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
/* -------------------- Code block and user markdown -------------------- */
|
|
162
|
-
|
|
163
|
-
#storybook-docs h2 {
|
|
164
|
-
@apply mt-8 mb-6 pb-2 font-bold;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.dark h2 {
|
|
168
|
-
@apply border-b-gray-800;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.sbdocs-title + p code {
|
|
172
|
-
@apply bg-white;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.docblock-source {
|
|
176
|
-
@apply !bg-gray-800 border-gray-800 !rounded-lg;
|
|
177
|
-
box-shadow: none !important;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.dark .docblock-source {
|
|
181
|
-
@apply !bg-gray-900 !border-gray-800;
|
|
182
|
-
|
|
183
|
-
button {
|
|
184
|
-
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.markdown {
|
|
189
|
-
code {
|
|
190
|
-
background-color: #f3f4f6 !important;
|
|
191
|
-
border-color: #d1d5db !important;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.sbdocs-a {
|
|
195
|
-
border-bottom: dashed 1px #4b5563;
|
|
196
|
-
color: #4b5563;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.sbdocs-a:hover {
|
|
200
|
-
border-bottom: none;
|
|
201
|
-
color: #4b5563;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
/* -------------------- Storybook story preview -------------------- */
|
|
206
|
-
|
|
207
|
-
.vl-dark {
|
|
208
|
-
@apply min-h-full bg-gray-950;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.vl-light {
|
|
212
|
-
@apply min-h-full bg-white;
|
|
213
|
-
}
|
|
214
|
-
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { defineConfig } from "vite";
|
|
2
|
+
|
|
3
|
+
// Plugins
|
|
4
|
+
import Vue from "@vitejs/plugin-vue";
|
|
5
|
+
import { Vueless } from "@vueless/plugin-vite";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [Vue(), Vueless({ mode: "storybook", env: "vueless", debug: false })],
|
|
9
|
+
optimizeDeps: {
|
|
10
|
+
include: [
|
|
11
|
+
"cva",
|
|
12
|
+
"tailwind-merge",
|
|
13
|
+
"prettier2",
|
|
14
|
+
"prettier2/parser-html",
|
|
15
|
+
"@storybook/blocks",
|
|
16
|
+
"@storybook/theming/create",
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
});
|
package/package.json
CHANGED
|
File without changes
|