@storybook/core-common 6.4.0-beta.32 → 6.4.0-beta.33
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/dist/cjs/templates/base-preview-body.html +231 -1
- package/dist/cjs/templates/base-preview-head.html +10 -5
- package/dist/esm/templates/base-preview-body.html +231 -1
- package/dist/esm/templates/base-preview-head.html +10 -5
- package/dist/modern/templates/base-preview-body.html +231 -1
- package/dist/modern/templates/base-preview-head.html +10 -5
- package/package.json +3 -3
|
@@ -1,3 +1,231 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
@-webkit-keyframes rotate360 {
|
|
3
|
+
from {
|
|
4
|
+
transform: rotate(0deg);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: rotate(360deg);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@keyframes rotate360 {
|
|
11
|
+
from {
|
|
12
|
+
transform: rotate(0deg);
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
transform: rotate(360deg);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@-webkit-keyframes glow {
|
|
19
|
+
0%,
|
|
20
|
+
100% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
opacity: 0.4;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
@keyframes glow {
|
|
28
|
+
0%,
|
|
29
|
+
100% {
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
50% {
|
|
33
|
+
opacity: 0.4;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
.isLoading {
|
|
37
|
+
cursor: progress;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.loader {
|
|
41
|
+
-webkit-animation: rotate360 0.7s linear infinite;
|
|
42
|
+
animation: rotate360 0.7s linear infinite;
|
|
43
|
+
border-color: rgba(97, 97, 97, 0.29);
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
border-style: solid;
|
|
46
|
+
border-top-color: #646464;
|
|
47
|
+
border-width: 2px;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
height: 32px;
|
|
50
|
+
left: 50%;
|
|
51
|
+
margin-left: -16px;
|
|
52
|
+
margin-top: -16px;
|
|
53
|
+
mix-blend-mode: difference;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 50%;
|
|
57
|
+
transition: all 200ms ease-out;
|
|
58
|
+
vertical-align: top;
|
|
59
|
+
width: 32px;
|
|
60
|
+
z-index: 4;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.previewBlock {
|
|
64
|
+
background: #fff;
|
|
65
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
|
68
|
+
margin: 25px auto 40px;
|
|
69
|
+
max-width: 600px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.previewBlock_header {
|
|
73
|
+
align-items: center;
|
|
74
|
+
background: #fff;
|
|
75
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 14px;
|
|
78
|
+
height: 40px;
|
|
79
|
+
padding: 0 12px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.previewBlock_icon {
|
|
83
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
84
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
85
|
+
background: #e6e6e6;
|
|
86
|
+
height: 14px;
|
|
87
|
+
width: 14px;
|
|
88
|
+
}
|
|
89
|
+
.previewBlock_icon:last-child {
|
|
90
|
+
margin-left: auto;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.previewBlock_body {
|
|
94
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
95
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
96
|
+
height: 110px;
|
|
97
|
+
position: relative;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.argsTable {
|
|
101
|
+
margin: 0 auto;
|
|
102
|
+
max-width: 600px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.argsTable_header {
|
|
106
|
+
align-content: stretch;
|
|
107
|
+
display: flex;
|
|
108
|
+
gap: 16px;
|
|
109
|
+
margin-top: 25px;
|
|
110
|
+
padding: 10px 20px;
|
|
111
|
+
}
|
|
112
|
+
.argsTable_header div {
|
|
113
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
114
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
115
|
+
background: #e6e6e6;
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
height: 20px;
|
|
118
|
+
}
|
|
119
|
+
.argsTable_header div:first-child,
|
|
120
|
+
.argsTable_header div:nth-child(4) {
|
|
121
|
+
width: 20%;
|
|
122
|
+
}
|
|
123
|
+
.argsTable_header div:nth-child(2) {
|
|
124
|
+
width: 30%;
|
|
125
|
+
}
|
|
126
|
+
.argsTable_header div:nth-child(3) {
|
|
127
|
+
flex-grow: 1;
|
|
128
|
+
}
|
|
129
|
+
.argsTable_header div:last-child {
|
|
130
|
+
width: 30px;
|
|
131
|
+
}
|
|
132
|
+
@media (max-width: 500px) {
|
|
133
|
+
.argsTable_header div:nth-child(n + 4) {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.argsTable_body {
|
|
139
|
+
background: #ffffff;
|
|
140
|
+
border-radius: 4px;
|
|
141
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.argsTable_row {
|
|
145
|
+
align-content: stretch;
|
|
146
|
+
border-top-color: #e6e6e6;
|
|
147
|
+
border-top-style: solid;
|
|
148
|
+
border-top-width: 1px;
|
|
149
|
+
display: flex;
|
|
150
|
+
gap: 16px;
|
|
151
|
+
padding: 20px;
|
|
152
|
+
}
|
|
153
|
+
.argsTable_row:first-child {
|
|
154
|
+
border-top: 0;
|
|
155
|
+
}
|
|
156
|
+
.argsTable_row div {
|
|
157
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
158
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
159
|
+
background: rgba(0, 0, 0, 0.1);
|
|
160
|
+
flex-shrink: 0;
|
|
161
|
+
height: 20px;
|
|
162
|
+
}
|
|
163
|
+
.argsTable_row div:first-child {
|
|
164
|
+
width: 20%;
|
|
165
|
+
}
|
|
166
|
+
.argsTable_row div:nth-child(2) {
|
|
167
|
+
width: 30%;
|
|
168
|
+
}
|
|
169
|
+
.argsTable_row div:nth-child(3) {
|
|
170
|
+
flex-grow: 1;
|
|
171
|
+
}
|
|
172
|
+
.argsTable_row div:last-child {
|
|
173
|
+
width: calc(20% + 47px);
|
|
174
|
+
}
|
|
175
|
+
@media (max-width: 500px) {
|
|
176
|
+
.argsTable_row div:last-child {
|
|
177
|
+
display: none;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
</style>
|
|
181
|
+
|
|
182
|
+
<div class="sb-preparing-story sb-wrapper">
|
|
183
|
+
<div class="loader"></div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="sb-preparing-docs sb-wrapper">
|
|
187
|
+
<div class="previewBlock">
|
|
188
|
+
<div class="previewBlock_header">
|
|
189
|
+
<div class="previewBlock_icon"></div>
|
|
190
|
+
<div class="previewBlock_icon"></div>
|
|
191
|
+
<div class="previewBlock_icon"></div>
|
|
192
|
+
<div class="previewBlock_icon"></div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="previewBlock_body">
|
|
195
|
+
<div class="loader"></div>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="argsTable">
|
|
199
|
+
<div class="argsTable_header">
|
|
200
|
+
<div></div>
|
|
201
|
+
<div></div>
|
|
202
|
+
<div></div>
|
|
203
|
+
<div></div>
|
|
204
|
+
<div></div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="argsTable_body">
|
|
207
|
+
<div class="argsTable_row">
|
|
208
|
+
<div></div>
|
|
209
|
+
<div></div>
|
|
210
|
+
<div></div>
|
|
211
|
+
<div></div>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="argsTable_row">
|
|
214
|
+
<div></div>
|
|
215
|
+
<div></div>
|
|
216
|
+
<div></div>
|
|
217
|
+
<div></div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="argsTable_row">
|
|
220
|
+
<div></div>
|
|
221
|
+
<div></div>
|
|
222
|
+
<div></div>
|
|
223
|
+
<div></div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
1
229
|
<div class="sb-nopreview sb-wrapper">
|
|
2
230
|
<div class="sb-nopreview_main">
|
|
3
231
|
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
|
@@ -6,7 +234,9 @@
|
|
|
6
234
|
<li>Please check the Storybook config.</li>
|
|
7
235
|
<li>Try reloading the page.</li>
|
|
8
236
|
</ul>
|
|
9
|
-
<p>
|
|
237
|
+
<p>
|
|
238
|
+
If the problem persists, check the browser console, or the terminal you've run Storybook from.
|
|
239
|
+
</p>
|
|
10
240
|
</div>
|
|
11
241
|
</div>
|
|
12
242
|
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
<base target="_parent"
|
|
1
|
+
<base target="_parent" />
|
|
2
2
|
|
|
3
3
|
<style>
|
|
4
|
-
:not(.sb-show-main) >
|
|
4
|
+
:not(.sb-show-main) > #root,
|
|
5
|
+
:not(.sb-show-main) > #docs-root,
|
|
6
|
+
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
|
7
|
+
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
|
5
8
|
:not(.sb-show-nopreview) > .sb-nopreview,
|
|
6
9
|
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
|
7
10
|
display: none;
|
|
@@ -50,7 +53,8 @@
|
|
|
50
53
|
left: 0;
|
|
51
54
|
right: 0;
|
|
52
55
|
padding: 20px;
|
|
53
|
-
font-family:
|
|
56
|
+
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
|
57
|
+
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
54
58
|
-webkit-font-smoothing: antialiased;
|
|
55
59
|
overflow: auto;
|
|
56
60
|
}
|
|
@@ -73,7 +77,7 @@
|
|
|
73
77
|
margin: auto;
|
|
74
78
|
padding: 30px;
|
|
75
79
|
border-radius: 10px;
|
|
76
|
-
background: rgba(0,0,0,0.03);
|
|
80
|
+
background: rgba(0, 0, 0, 0.03);
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.sb-nopreview_heading {
|
|
@@ -91,7 +95,8 @@
|
|
|
91
95
|
padding: 10px;
|
|
92
96
|
background: #000;
|
|
93
97
|
color: #eee;
|
|
94
|
-
font-family:
|
|
98
|
+
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
|
99
|
+
'Lucida Console', Consolas, Monaco, monospace;
|
|
95
100
|
}
|
|
96
101
|
|
|
97
102
|
.sb-errordisplay pre {
|
|
@@ -1,3 +1,231 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
@-webkit-keyframes rotate360 {
|
|
3
|
+
from {
|
|
4
|
+
transform: rotate(0deg);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: rotate(360deg);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@keyframes rotate360 {
|
|
11
|
+
from {
|
|
12
|
+
transform: rotate(0deg);
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
transform: rotate(360deg);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@-webkit-keyframes glow {
|
|
19
|
+
0%,
|
|
20
|
+
100% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
opacity: 0.4;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
@keyframes glow {
|
|
28
|
+
0%,
|
|
29
|
+
100% {
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
50% {
|
|
33
|
+
opacity: 0.4;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
.isLoading {
|
|
37
|
+
cursor: progress;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.loader {
|
|
41
|
+
-webkit-animation: rotate360 0.7s linear infinite;
|
|
42
|
+
animation: rotate360 0.7s linear infinite;
|
|
43
|
+
border-color: rgba(97, 97, 97, 0.29);
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
border-style: solid;
|
|
46
|
+
border-top-color: #646464;
|
|
47
|
+
border-width: 2px;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
height: 32px;
|
|
50
|
+
left: 50%;
|
|
51
|
+
margin-left: -16px;
|
|
52
|
+
margin-top: -16px;
|
|
53
|
+
mix-blend-mode: difference;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 50%;
|
|
57
|
+
transition: all 200ms ease-out;
|
|
58
|
+
vertical-align: top;
|
|
59
|
+
width: 32px;
|
|
60
|
+
z-index: 4;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.previewBlock {
|
|
64
|
+
background: #fff;
|
|
65
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
|
68
|
+
margin: 25px auto 40px;
|
|
69
|
+
max-width: 600px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.previewBlock_header {
|
|
73
|
+
align-items: center;
|
|
74
|
+
background: #fff;
|
|
75
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 14px;
|
|
78
|
+
height: 40px;
|
|
79
|
+
padding: 0 12px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.previewBlock_icon {
|
|
83
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
84
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
85
|
+
background: #e6e6e6;
|
|
86
|
+
height: 14px;
|
|
87
|
+
width: 14px;
|
|
88
|
+
}
|
|
89
|
+
.previewBlock_icon:last-child {
|
|
90
|
+
margin-left: auto;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.previewBlock_body {
|
|
94
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
95
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
96
|
+
height: 110px;
|
|
97
|
+
position: relative;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.argsTable {
|
|
101
|
+
margin: 0 auto;
|
|
102
|
+
max-width: 600px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.argsTable_header {
|
|
106
|
+
align-content: stretch;
|
|
107
|
+
display: flex;
|
|
108
|
+
gap: 16px;
|
|
109
|
+
margin-top: 25px;
|
|
110
|
+
padding: 10px 20px;
|
|
111
|
+
}
|
|
112
|
+
.argsTable_header div {
|
|
113
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
114
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
115
|
+
background: #e6e6e6;
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
height: 20px;
|
|
118
|
+
}
|
|
119
|
+
.argsTable_header div:first-child,
|
|
120
|
+
.argsTable_header div:nth-child(4) {
|
|
121
|
+
width: 20%;
|
|
122
|
+
}
|
|
123
|
+
.argsTable_header div:nth-child(2) {
|
|
124
|
+
width: 30%;
|
|
125
|
+
}
|
|
126
|
+
.argsTable_header div:nth-child(3) {
|
|
127
|
+
flex-grow: 1;
|
|
128
|
+
}
|
|
129
|
+
.argsTable_header div:last-child {
|
|
130
|
+
width: 30px;
|
|
131
|
+
}
|
|
132
|
+
@media (max-width: 500px) {
|
|
133
|
+
.argsTable_header div:nth-child(n + 4) {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.argsTable_body {
|
|
139
|
+
background: #ffffff;
|
|
140
|
+
border-radius: 4px;
|
|
141
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.argsTable_row {
|
|
145
|
+
align-content: stretch;
|
|
146
|
+
border-top-color: #e6e6e6;
|
|
147
|
+
border-top-style: solid;
|
|
148
|
+
border-top-width: 1px;
|
|
149
|
+
display: flex;
|
|
150
|
+
gap: 16px;
|
|
151
|
+
padding: 20px;
|
|
152
|
+
}
|
|
153
|
+
.argsTable_row:first-child {
|
|
154
|
+
border-top: 0;
|
|
155
|
+
}
|
|
156
|
+
.argsTable_row div {
|
|
157
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
158
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
159
|
+
background: rgba(0, 0, 0, 0.1);
|
|
160
|
+
flex-shrink: 0;
|
|
161
|
+
height: 20px;
|
|
162
|
+
}
|
|
163
|
+
.argsTable_row div:first-child {
|
|
164
|
+
width: 20%;
|
|
165
|
+
}
|
|
166
|
+
.argsTable_row div:nth-child(2) {
|
|
167
|
+
width: 30%;
|
|
168
|
+
}
|
|
169
|
+
.argsTable_row div:nth-child(3) {
|
|
170
|
+
flex-grow: 1;
|
|
171
|
+
}
|
|
172
|
+
.argsTable_row div:last-child {
|
|
173
|
+
width: calc(20% + 47px);
|
|
174
|
+
}
|
|
175
|
+
@media (max-width: 500px) {
|
|
176
|
+
.argsTable_row div:last-child {
|
|
177
|
+
display: none;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
</style>
|
|
181
|
+
|
|
182
|
+
<div class="sb-preparing-story sb-wrapper">
|
|
183
|
+
<div class="loader"></div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="sb-preparing-docs sb-wrapper">
|
|
187
|
+
<div class="previewBlock">
|
|
188
|
+
<div class="previewBlock_header">
|
|
189
|
+
<div class="previewBlock_icon"></div>
|
|
190
|
+
<div class="previewBlock_icon"></div>
|
|
191
|
+
<div class="previewBlock_icon"></div>
|
|
192
|
+
<div class="previewBlock_icon"></div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="previewBlock_body">
|
|
195
|
+
<div class="loader"></div>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="argsTable">
|
|
199
|
+
<div class="argsTable_header">
|
|
200
|
+
<div></div>
|
|
201
|
+
<div></div>
|
|
202
|
+
<div></div>
|
|
203
|
+
<div></div>
|
|
204
|
+
<div></div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="argsTable_body">
|
|
207
|
+
<div class="argsTable_row">
|
|
208
|
+
<div></div>
|
|
209
|
+
<div></div>
|
|
210
|
+
<div></div>
|
|
211
|
+
<div></div>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="argsTable_row">
|
|
214
|
+
<div></div>
|
|
215
|
+
<div></div>
|
|
216
|
+
<div></div>
|
|
217
|
+
<div></div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="argsTable_row">
|
|
220
|
+
<div></div>
|
|
221
|
+
<div></div>
|
|
222
|
+
<div></div>
|
|
223
|
+
<div></div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
1
229
|
<div class="sb-nopreview sb-wrapper">
|
|
2
230
|
<div class="sb-nopreview_main">
|
|
3
231
|
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
|
@@ -6,7 +234,9 @@
|
|
|
6
234
|
<li>Please check the Storybook config.</li>
|
|
7
235
|
<li>Try reloading the page.</li>
|
|
8
236
|
</ul>
|
|
9
|
-
<p>
|
|
237
|
+
<p>
|
|
238
|
+
If the problem persists, check the browser console, or the terminal you've run Storybook from.
|
|
239
|
+
</p>
|
|
10
240
|
</div>
|
|
11
241
|
</div>
|
|
12
242
|
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
<base target="_parent"
|
|
1
|
+
<base target="_parent" />
|
|
2
2
|
|
|
3
3
|
<style>
|
|
4
|
-
:not(.sb-show-main) >
|
|
4
|
+
:not(.sb-show-main) > #root,
|
|
5
|
+
:not(.sb-show-main) > #docs-root,
|
|
6
|
+
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
|
7
|
+
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
|
5
8
|
:not(.sb-show-nopreview) > .sb-nopreview,
|
|
6
9
|
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
|
7
10
|
display: none;
|
|
@@ -50,7 +53,8 @@
|
|
|
50
53
|
left: 0;
|
|
51
54
|
right: 0;
|
|
52
55
|
padding: 20px;
|
|
53
|
-
font-family:
|
|
56
|
+
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
|
57
|
+
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
54
58
|
-webkit-font-smoothing: antialiased;
|
|
55
59
|
overflow: auto;
|
|
56
60
|
}
|
|
@@ -73,7 +77,7 @@
|
|
|
73
77
|
margin: auto;
|
|
74
78
|
padding: 30px;
|
|
75
79
|
border-radius: 10px;
|
|
76
|
-
background: rgba(0,0,0,0.03);
|
|
80
|
+
background: rgba(0, 0, 0, 0.03);
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.sb-nopreview_heading {
|
|
@@ -91,7 +95,8 @@
|
|
|
91
95
|
padding: 10px;
|
|
92
96
|
background: #000;
|
|
93
97
|
color: #eee;
|
|
94
|
-
font-family:
|
|
98
|
+
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
|
99
|
+
'Lucida Console', Consolas, Monaco, monospace;
|
|
95
100
|
}
|
|
96
101
|
|
|
97
102
|
.sb-errordisplay pre {
|
|
@@ -1,3 +1,231 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
@-webkit-keyframes rotate360 {
|
|
3
|
+
from {
|
|
4
|
+
transform: rotate(0deg);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: rotate(360deg);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@keyframes rotate360 {
|
|
11
|
+
from {
|
|
12
|
+
transform: rotate(0deg);
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
transform: rotate(360deg);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@-webkit-keyframes glow {
|
|
19
|
+
0%,
|
|
20
|
+
100% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
opacity: 0.4;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
@keyframes glow {
|
|
28
|
+
0%,
|
|
29
|
+
100% {
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
50% {
|
|
33
|
+
opacity: 0.4;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
.isLoading {
|
|
37
|
+
cursor: progress;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.loader {
|
|
41
|
+
-webkit-animation: rotate360 0.7s linear infinite;
|
|
42
|
+
animation: rotate360 0.7s linear infinite;
|
|
43
|
+
border-color: rgba(97, 97, 97, 0.29);
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
border-style: solid;
|
|
46
|
+
border-top-color: #646464;
|
|
47
|
+
border-width: 2px;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
height: 32px;
|
|
50
|
+
left: 50%;
|
|
51
|
+
margin-left: -16px;
|
|
52
|
+
margin-top: -16px;
|
|
53
|
+
mix-blend-mode: difference;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 50%;
|
|
57
|
+
transition: all 200ms ease-out;
|
|
58
|
+
vertical-align: top;
|
|
59
|
+
width: 32px;
|
|
60
|
+
z-index: 4;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.previewBlock {
|
|
64
|
+
background: #fff;
|
|
65
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
|
68
|
+
margin: 25px auto 40px;
|
|
69
|
+
max-width: 600px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.previewBlock_header {
|
|
73
|
+
align-items: center;
|
|
74
|
+
background: #fff;
|
|
75
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 14px;
|
|
78
|
+
height: 40px;
|
|
79
|
+
padding: 0 12px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.previewBlock_icon {
|
|
83
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
84
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
85
|
+
background: #e6e6e6;
|
|
86
|
+
height: 14px;
|
|
87
|
+
width: 14px;
|
|
88
|
+
}
|
|
89
|
+
.previewBlock_icon:last-child {
|
|
90
|
+
margin-left: auto;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.previewBlock_body {
|
|
94
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
95
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
96
|
+
height: 110px;
|
|
97
|
+
position: relative;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.argsTable {
|
|
101
|
+
margin: 0 auto;
|
|
102
|
+
max-width: 600px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.argsTable_header {
|
|
106
|
+
align-content: stretch;
|
|
107
|
+
display: flex;
|
|
108
|
+
gap: 16px;
|
|
109
|
+
margin-top: 25px;
|
|
110
|
+
padding: 10px 20px;
|
|
111
|
+
}
|
|
112
|
+
.argsTable_header div {
|
|
113
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
114
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
115
|
+
background: #e6e6e6;
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
height: 20px;
|
|
118
|
+
}
|
|
119
|
+
.argsTable_header div:first-child,
|
|
120
|
+
.argsTable_header div:nth-child(4) {
|
|
121
|
+
width: 20%;
|
|
122
|
+
}
|
|
123
|
+
.argsTable_header div:nth-child(2) {
|
|
124
|
+
width: 30%;
|
|
125
|
+
}
|
|
126
|
+
.argsTable_header div:nth-child(3) {
|
|
127
|
+
flex-grow: 1;
|
|
128
|
+
}
|
|
129
|
+
.argsTable_header div:last-child {
|
|
130
|
+
width: 30px;
|
|
131
|
+
}
|
|
132
|
+
@media (max-width: 500px) {
|
|
133
|
+
.argsTable_header div:nth-child(n + 4) {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.argsTable_body {
|
|
139
|
+
background: #ffffff;
|
|
140
|
+
border-radius: 4px;
|
|
141
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.argsTable_row {
|
|
145
|
+
align-content: stretch;
|
|
146
|
+
border-top-color: #e6e6e6;
|
|
147
|
+
border-top-style: solid;
|
|
148
|
+
border-top-width: 1px;
|
|
149
|
+
display: flex;
|
|
150
|
+
gap: 16px;
|
|
151
|
+
padding: 20px;
|
|
152
|
+
}
|
|
153
|
+
.argsTable_row:first-child {
|
|
154
|
+
border-top: 0;
|
|
155
|
+
}
|
|
156
|
+
.argsTable_row div {
|
|
157
|
+
-webkit-animation: glow 1.5s ease-in-out infinite;
|
|
158
|
+
animation: glow 1.5s ease-in-out infinite;
|
|
159
|
+
background: rgba(0, 0, 0, 0.1);
|
|
160
|
+
flex-shrink: 0;
|
|
161
|
+
height: 20px;
|
|
162
|
+
}
|
|
163
|
+
.argsTable_row div:first-child {
|
|
164
|
+
width: 20%;
|
|
165
|
+
}
|
|
166
|
+
.argsTable_row div:nth-child(2) {
|
|
167
|
+
width: 30%;
|
|
168
|
+
}
|
|
169
|
+
.argsTable_row div:nth-child(3) {
|
|
170
|
+
flex-grow: 1;
|
|
171
|
+
}
|
|
172
|
+
.argsTable_row div:last-child {
|
|
173
|
+
width: calc(20% + 47px);
|
|
174
|
+
}
|
|
175
|
+
@media (max-width: 500px) {
|
|
176
|
+
.argsTable_row div:last-child {
|
|
177
|
+
display: none;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
</style>
|
|
181
|
+
|
|
182
|
+
<div class="sb-preparing-story sb-wrapper">
|
|
183
|
+
<div class="loader"></div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="sb-preparing-docs sb-wrapper">
|
|
187
|
+
<div class="previewBlock">
|
|
188
|
+
<div class="previewBlock_header">
|
|
189
|
+
<div class="previewBlock_icon"></div>
|
|
190
|
+
<div class="previewBlock_icon"></div>
|
|
191
|
+
<div class="previewBlock_icon"></div>
|
|
192
|
+
<div class="previewBlock_icon"></div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="previewBlock_body">
|
|
195
|
+
<div class="loader"></div>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="argsTable">
|
|
199
|
+
<div class="argsTable_header">
|
|
200
|
+
<div></div>
|
|
201
|
+
<div></div>
|
|
202
|
+
<div></div>
|
|
203
|
+
<div></div>
|
|
204
|
+
<div></div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="argsTable_body">
|
|
207
|
+
<div class="argsTable_row">
|
|
208
|
+
<div></div>
|
|
209
|
+
<div></div>
|
|
210
|
+
<div></div>
|
|
211
|
+
<div></div>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="argsTable_row">
|
|
214
|
+
<div></div>
|
|
215
|
+
<div></div>
|
|
216
|
+
<div></div>
|
|
217
|
+
<div></div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="argsTable_row">
|
|
220
|
+
<div></div>
|
|
221
|
+
<div></div>
|
|
222
|
+
<div></div>
|
|
223
|
+
<div></div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
1
229
|
<div class="sb-nopreview sb-wrapper">
|
|
2
230
|
<div class="sb-nopreview_main">
|
|
3
231
|
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
|
@@ -6,7 +234,9 @@
|
|
|
6
234
|
<li>Please check the Storybook config.</li>
|
|
7
235
|
<li>Try reloading the page.</li>
|
|
8
236
|
</ul>
|
|
9
|
-
<p>
|
|
237
|
+
<p>
|
|
238
|
+
If the problem persists, check the browser console, or the terminal you've run Storybook from.
|
|
239
|
+
</p>
|
|
10
240
|
</div>
|
|
11
241
|
</div>
|
|
12
242
|
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
<base target="_parent"
|
|
1
|
+
<base target="_parent" />
|
|
2
2
|
|
|
3
3
|
<style>
|
|
4
|
-
:not(.sb-show-main) >
|
|
4
|
+
:not(.sb-show-main) > #root,
|
|
5
|
+
:not(.sb-show-main) > #docs-root,
|
|
6
|
+
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
|
7
|
+
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
|
5
8
|
:not(.sb-show-nopreview) > .sb-nopreview,
|
|
6
9
|
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
|
7
10
|
display: none;
|
|
@@ -50,7 +53,8 @@
|
|
|
50
53
|
left: 0;
|
|
51
54
|
right: 0;
|
|
52
55
|
padding: 20px;
|
|
53
|
-
font-family:
|
|
56
|
+
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
|
57
|
+
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
54
58
|
-webkit-font-smoothing: antialiased;
|
|
55
59
|
overflow: auto;
|
|
56
60
|
}
|
|
@@ -73,7 +77,7 @@
|
|
|
73
77
|
margin: auto;
|
|
74
78
|
padding: 30px;
|
|
75
79
|
border-radius: 10px;
|
|
76
|
-
background: rgba(0,0,0,0.03);
|
|
80
|
+
background: rgba(0, 0, 0, 0.03);
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.sb-nopreview_heading {
|
|
@@ -91,7 +95,8 @@
|
|
|
91
95
|
padding: 10px;
|
|
92
96
|
background: #000;
|
|
93
97
|
color: #eee;
|
|
94
|
-
font-family:
|
|
98
|
+
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
|
99
|
+
'Lucida Console', Consolas, Monaco, monospace;
|
|
95
100
|
}
|
|
96
101
|
|
|
97
102
|
.sb-errordisplay pre {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/core-common",
|
|
3
|
-
"version": "6.4.0-beta.
|
|
3
|
+
"version": "6.4.0-beta.33",
|
|
4
4
|
"description": "Storybook framework-agnostic API",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@babel/preset-react": "^7.12.10",
|
|
62
62
|
"@babel/preset-typescript": "^7.12.7",
|
|
63
63
|
"@babel/register": "^7.12.1",
|
|
64
|
-
"@storybook/node-logger": "6.4.0-beta.
|
|
64
|
+
"@storybook/node-logger": "6.4.0-beta.33",
|
|
65
65
|
"@storybook/semver": "^7.3.2",
|
|
66
66
|
"@types/node": "^14.0.10",
|
|
67
67
|
"@types/pretty-hrtime": "^1.0.0",
|
|
@@ -110,6 +110,6 @@
|
|
|
110
110
|
"publishConfig": {
|
|
111
111
|
"access": "public"
|
|
112
112
|
},
|
|
113
|
-
"gitHead": "
|
|
113
|
+
"gitHead": "c85171dc319d1d3a31eee1b762f01ba84ae45194",
|
|
114
114
|
"sbmodern": "dist/modern/index.js"
|
|
115
115
|
}
|