storybook 9.0.8 → 9.0.9

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.
Files changed (60) hide show
  1. package/dist/bin/index.cjs +54 -61
  2. package/dist/bin/index.js +45 -52
  3. package/dist/cli/bin/index.cjs +572 -572
  4. package/dist/cli/bin/index.js +582 -582
  5. package/dist/common/index.cjs +677 -684
  6. package/dist/common/index.d.ts +0 -7
  7. package/dist/common/index.js +680 -687
  8. package/dist/core-server/presets/common-manager.js +2545 -2507
  9. package/dist/csf/index.d.ts +3 -1
  10. package/dist/instrumenter/index.cjs +958 -934
  11. package/dist/instrumenter/index.d.ts +1 -0
  12. package/dist/instrumenter/index.js +933 -908
  13. package/dist/manager/globals-runtime.js +8514 -8489
  14. package/dist/manager-api/index.cjs +1 -1
  15. package/dist/manager-api/index.js +1 -1
  16. package/dist/preview/runtime.js +7488 -7459
  17. package/dist/preview-api/index.cjs +4438 -2648
  18. package/dist/preview-api/index.js +4231 -2435
  19. package/dist/telemetry/index.cjs +521 -521
  20. package/dist/telemetry/index.js +526 -526
  21. package/package.json +1 -185
  22. package/dist/actions/preview.cjs +0 -159
  23. package/dist/actions/preview.d.ts +0 -555
  24. package/dist/actions/preview.js +0 -149
  25. package/dist/backgrounds/index.cjs +0 -148
  26. package/dist/backgrounds/index.d.ts +0 -592
  27. package/dist/backgrounds/index.js +0 -130
  28. package/dist/backgrounds/preview.cjs +0 -143
  29. package/dist/backgrounds/preview.d.ts +0 -555
  30. package/dist/backgrounds/preview.js +0 -127
  31. package/dist/component-testing/index.cjs +0 -23
  32. package/dist/component-testing/index.d.ts +0 -3
  33. package/dist/component-testing/index.js +0 -5
  34. package/dist/component-testing/preview.cjs +0 -40
  35. package/dist/component-testing/preview.d.ts +0 -5
  36. package/dist/component-testing/preview.js +0 -25
  37. package/dist/controls/preview.cjs +0 -26
  38. package/dist/controls/preview.d.ts +0 -555
  39. package/dist/controls/preview.js +0 -9
  40. package/dist/highlight/preview.cjs +0 -590
  41. package/dist/highlight/preview.d.ts +0 -555
  42. package/dist/highlight/preview.js +0 -574
  43. package/dist/measure/index.cjs +0 -476
  44. package/dist/measure/index.d.ts +0 -567
  45. package/dist/measure/index.js +0 -464
  46. package/dist/measure/preview.cjs +0 -466
  47. package/dist/measure/preview.d.ts +0 -560
  48. package/dist/measure/preview.js +0 -450
  49. package/dist/outline/index.cjs +0 -528
  50. package/dist/outline/index.d.ts +0 -567
  51. package/dist/outline/index.js +0 -500
  52. package/dist/outline/preview.cjs +0 -518
  53. package/dist/outline/preview.d.ts +0 -560
  54. package/dist/outline/preview.js +0 -486
  55. package/dist/test/preview.cjs +0 -73
  56. package/dist/test/preview.d.ts +0 -555
  57. package/dist/test/preview.js +0 -66
  58. package/dist/viewport/preview.cjs +0 -35
  59. package/dist/viewport/preview.d.ts +0 -569
  60. package/dist/viewport/preview.js +0 -19
@@ -1,476 +0,0 @@
1
- "use strict";
2
- var v = Object.defineProperty;
3
- var ut = Object.getOwnPropertyDescriptor;
4
- var dt = Object.getOwnPropertyNames;
5
- var ht = Object.prototype.hasOwnProperty;
6
- var l = (e, t) => v(e, "name", { value: t, configurable: !0 });
7
- var W = (e, t) => {
8
- for (var o in t)
9
- v(e, o, { get: t[o], enumerable: !0 });
10
- }, pt = (e, t, o, i) => {
11
- if (t && typeof t == "object" || typeof t == "function")
12
- for (let n of dt(t))
13
- !ht.call(e, n) && n !== o && v(e, n, { get: () => t[n], enumerable: !(i = ut(t, n)) || i.enumerable });
14
- return e;
15
- };
16
- var bt = (e) => pt(v({}, "__esModule", { value: !0 }), e);
17
-
18
- // src/measure/index.ts
19
- var Wt = {};
20
- W(Wt, {
21
- default: () => Ft
22
- });
23
- module.exports = bt(Wt);
24
- var nt = require("storybook/preview-api");
25
-
26
- // src/measure/preview.ts
27
- var H = {};
28
- W(H, {
29
- decorators: () => et,
30
- default: () => Ht,
31
- initialGlobals: () => ot
32
- });
33
- var tt = require("storybook/preview-api");
34
-
35
- // src/measure/constants.ts
36
- var R = "storybook/measure-addon", Bt = `${R}/tool`, Y = "measureEnabled", zt = {
37
- RESULT: `${R}/result`,
38
- REQUEST: `${R}/request`,
39
- CLEAR: `${R}/clear`
40
- };
41
-
42
- // src/measure/withMeasure.ts
43
- var A = require("storybook/preview-api");
44
-
45
- // src/measure/box-model/canvas.ts
46
- var y = require("@storybook/global");
47
-
48
- // ../node_modules/tiny-invariant/dist/esm/tiny-invariant.js
49
- var gt = process.env.NODE_ENV === "production", D = "Invariant failed";
50
- function M(e, t) {
51
- if (!e) {
52
- if (gt)
53
- throw new Error(D);
54
- var o = typeof t == "function" ? t() : t, i = o ? "".concat(D, ": ").concat(o) : D;
55
- throw new Error(i);
56
- }
57
- }
58
- l(M, "invariant");
59
-
60
- // src/measure/box-model/canvas.ts
61
- function B() {
62
- let e = y.global.document.documentElement, t = Math.max(e.scrollHeight, e.offsetHeight);
63
- return { width: Math.max(e.scrollWidth, e.offsetWidth), height: t };
64
- }
65
- l(B, "getDocumentWidthAndHeight");
66
- function wt() {
67
- let e = y.global.document.createElement("canvas");
68
- e.id = "storybook-addon-measure";
69
- let t = e.getContext("2d");
70
- M(t != null);
71
- let { width: o, height: i } = B();
72
- return k(e, t, { width: o, height: i }), e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.zIndex = "214748364\
73
- 7", e.style.pointerEvents = "none", y.global.document.body.appendChild(e), { canvas: e, context: t, width: o, height: i };
74
- }
75
- l(wt, "createCanvas");
76
- function k(e, t, { width: o, height: i }) {
77
- e.style.width = `${o}px`, e.style.height = `${i}px`;
78
- let n = y.global.window.devicePixelRatio;
79
- e.width = Math.floor(o * n), e.height = Math.floor(i * n), t.scale(n, n);
80
- }
81
- l(k, "setCanvasWidthAndHeight");
82
- var m = {};
83
- function z() {
84
- m.canvas || (m = wt());
85
- }
86
- l(z, "init");
87
- function X() {
88
- m.context && m.context.clearRect(0, 0, m.width ?? 0, m.height ?? 0);
89
- }
90
- l(X, "clear");
91
- function $(e) {
92
- X(), e(m.context);
93
- }
94
- l($, "draw");
95
- function N() {
96
- M(m.canvas, "Canvas should exist in the state."), M(m.context, "Context should exist in the state."), k(m.canvas, m.context, { width: 0, height: 0 });
97
- let { width: e, height: t } = B();
98
- k(m.canvas, m.context, { width: e, height: t }), m.width = e, m.height = t;
99
- }
100
- l(N, "rescale");
101
- function O() {
102
- m.canvas && (X(), m.canvas.parentNode?.removeChild(m.canvas), m = {});
103
- }
104
- l(O, "destroy");
105
-
106
- // src/measure/box-model/visualizer.ts
107
- var b = require("@storybook/global");
108
-
109
- // src/measure/box-model/labels.ts
110
- var w = {
111
- margin: "#f6b26b",
112
- border: "#ffe599",
113
- padding: "#93c47d",
114
- content: "#6fa8dc",
115
- text: "#232020"
116
- }, g = 6;
117
- function I(e, { x: t, y: o, w: i, h: n, r }) {
118
- t = t - i / 2, o = o - n / 2, i < 2 * r && (r = i / 2), n < 2 * r && (r = n / 2), e.beginPath(), e.moveTo(t + r, o), e.arcTo(t + i, o, t +
119
- i, o + n, r), e.arcTo(t + i, o + n, t, o + n, r), e.arcTo(t, o + n, t, o, r), e.arcTo(t, o, t + i, o, r), e.closePath();
120
- }
121
- l(I, "roundedRect");
122
- function Lt(e, { padding: t, border: o, width: i, height: n, top: r, left: a }) {
123
- let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom, c = a + o.left + t.left, u = r + o.top + t.top;
124
- return e === "top" ? c += s / 2 : e === "right" ? (c += s, u += f / 2) : e === "bottom" ? (c += s / 2, u += f) : e === "left" ? u += f / 2 :
125
- e === "center" && (c += s / 2, u += f / 2), { x: c, y: u };
126
- }
127
- l(Lt, "positionCoordinate");
128
- function Et(e, t, { margin: o, border: i, padding: n }, r, a) {
129
- let s = /* @__PURE__ */ l((d) => 0, "shift"), f = 0, c = 0, u = a ? 1 : 0.5, h = a ? r * 2 : 0;
130
- return e === "padding" ? s = /* @__PURE__ */ l((d) => n[d] * u + h, "shift") : e === "border" ? s = /* @__PURE__ */ l((d) => n[d] + i[d] *
131
- u + h, "shift") : e === "margin" && (s = /* @__PURE__ */ l((d) => n[d] + i[d] + o[d] * u + h, "shift")), t === "top" ? c = -s("top") : t ===
132
- "right" ? f = s("right") : t === "bottom" ? c = s("bottom") : t === "left" && (f = -s("left")), { offsetX: f, offsetY: c };
133
- }
134
- l(Et, "offset");
135
- function yt(e, t) {
136
- return Math.abs(e.x - t.x) < Math.abs(e.w + t.w) / 2 && Math.abs(e.y - t.y) < Math.abs(e.h + t.h) / 2;
137
- }
138
- l(yt, "collide");
139
- function St(e, t, o) {
140
- return e === "top" ? t.y = o.y - o.h - g : e === "right" ? t.x = o.x + o.w / 2 + g + t.w / 2 : e === "bottom" ? t.y = o.y + o.h + g : e ===
141
- "left" && (t.x = o.x - o.w / 2 - g - t.w / 2), { x: t.x, y: t.y };
142
- }
143
- l(St, "overlapAdjustment");
144
- function _(e, t, { x: o, y: i, w: n, h: r }, a) {
145
- return I(e, { x: o, y: i, w: n, h: r, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle = w.text,
146
- e.fillText(a, o, i), I(e, { x: o, y: i, w: n, h: r, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle =
147
- w.text, e.fillText(a, o, i), { x: o, y: i, w: n, h: r };
148
- }
149
- l(_, "textWithRect");
150
- function q(e, t) {
151
- e.font = "600 12px monospace", e.textBaseline = "middle", e.textAlign = "center";
152
- let o = e.measureText(t), i = o.actualBoundingBoxAscent + o.actualBoundingBoxDescent, n = o.width + g * 2, r = i + g * 2;
153
- return { w: n, h: r };
154
- }
155
- l(q, "configureText");
156
- function Ct(e, t, { type: o, position: i = "center", text: n }, r, a = !1) {
157
- let { x: s, y: f } = Lt(i, t), { offsetX: c, offsetY: u } = Et(o, i, t, g + 1, a);
158
- s += c, f += u;
159
- let { w: h, h: d } = q(e, n);
160
- if (r && yt({ x: s, y: f, w: h, h: d }, r)) {
161
- let C = St(i, { x: s, y: f, w: h, h: d }, r);
162
- s = C.x, f = C.y;
163
- }
164
- return _(e, o, { x: s, y: f, w: h, h: d }, n);
165
- }
166
- l(Ct, "drawLabel");
167
- function vt(e, { w: t, h: o }) {
168
- let i = t * 0.5 + g, n = o * 0.5 + g;
169
- return {
170
- offsetX: (e.x === "left" ? -1 : 1) * i,
171
- offsetY: (e.y === "top" ? -1 : 1) * n
172
- };
173
- }
174
- l(vt, "floatingOffset");
175
- function Rt(e, t, { type: o, text: i }) {
176
- let { floatingAlignment: n, extremities: r } = t, a = r[n.x], s = r[n.y], { w: f, h: c } = q(e, i), { offsetX: u, offsetY: h } = vt(n, {
177
- w: f,
178
- h: c
179
- });
180
- return a += u, s += h, _(e, o, { x: a, y: s, w: f, h: c }, i);
181
- }
182
- l(Rt, "drawFloatingLabel");
183
- function S(e, t, o, i) {
184
- let n = [];
185
- o.forEach((r, a) => {
186
- let s = i && r.position === "center" ? Rt(e, t, r) : Ct(e, t, r, n[a - 1], i);
187
- n[a] = s;
188
- });
189
- }
190
- l(S, "drawStack");
191
- function j(e, t, o, i) {
192
- let n = o.reduce((r, a) => (Object.prototype.hasOwnProperty.call(r, a.position) || (r[a.position] = []), r[a.position]?.push(a), r), {});
193
- n.top && S(e, t, n.top, i), n.right && S(e, t, n.right, i), n.bottom && S(e, t, n.bottom, i), n.left && S(e, t, n.left, i), n.center && S(
194
- e, t, n.center, i);
195
- }
196
- l(j, "labelStacks");
197
-
198
- // src/measure/box-model/visualizer.ts
199
- var x = {
200
- margin: "#f6b26ba8",
201
- border: "#ffe599a8",
202
- padding: "#93c47d8c",
203
- content: "#6fa8dca8"
204
- }, G = 30;
205
- function p(e) {
206
- return parseInt(e.replace("px", ""), 10);
207
- }
208
- l(p, "pxToNumber");
209
- function L(e) {
210
- return Number.isInteger(e) ? e : e.toFixed(2);
211
- }
212
- l(L, "round");
213
- function P(e) {
214
- return e.filter((t) => t.text !== 0 && t.text !== "0");
215
- }
216
- l(P, "filterZeroValues");
217
- function Mt(e) {
218
- let t = {
219
- top: b.global.window.scrollY,
220
- bottom: b.global.window.scrollY + b.global.window.innerHeight,
221
- left: b.global.window.scrollX,
222
- right: b.global.window.scrollX + b.global.window.innerWidth
223
- }, o = {
224
- top: Math.abs(t.top - e.top),
225
- bottom: Math.abs(t.bottom - e.bottom),
226
- left: Math.abs(t.left - e.left),
227
- right: Math.abs(t.right - e.right)
228
- };
229
- return {
230
- x: o.left > o.right ? "left" : "right",
231
- y: o.top > o.bottom ? "top" : "bottom"
232
- };
233
- }
234
- l(Mt, "floatingAlignment");
235
- function xt(e) {
236
- let t = b.global.getComputedStyle(e), { top: o, left: i, right: n, bottom: r, width: a, height: s } = e.getBoundingClientRect(), {
237
- marginTop: f,
238
- marginBottom: c,
239
- marginLeft: u,
240
- marginRight: h,
241
- paddingTop: d,
242
- paddingBottom: C,
243
- paddingLeft: it,
244
- paddingRight: rt,
245
- borderBottomWidth: lt,
246
- borderTopWidth: at,
247
- borderLeftWidth: st,
248
- borderRightWidth: ft
249
- } = t;
250
- o = o + b.global.window.scrollY, i = i + b.global.window.scrollX, r = r + b.global.window.scrollY, n = n + b.global.window.scrollX;
251
- let E = {
252
- top: p(f),
253
- bottom: p(c),
254
- left: p(u),
255
- right: p(h)
256
- }, ct = {
257
- top: p(d),
258
- bottom: p(C),
259
- left: p(it),
260
- right: p(rt)
261
- }, mt = {
262
- top: p(at),
263
- bottom: p(lt),
264
- left: p(st),
265
- right: p(ft)
266
- }, F = {
267
- top: o - E.top,
268
- bottom: r + E.bottom,
269
- left: i - E.left,
270
- right: n + E.right
271
- };
272
- return {
273
- margin: E,
274
- padding: ct,
275
- border: mt,
276
- top: o,
277
- left: i,
278
- bottom: r,
279
- right: n,
280
- width: a,
281
- height: s,
282
- extremities: F,
283
- floatingAlignment: Mt(F)
284
- };
285
- }
286
- l(xt, "measureElement");
287
- function Tt(e, { margin: t, width: o, height: i, top: n, left: r, bottom: a, right: s }) {
288
- let f = i + t.bottom + t.top;
289
- e.fillStyle = x.margin, e.fillRect(r, n - t.top, o, t.top), e.fillRect(s, n - t.top, t.right, f), e.fillRect(r, a, o, t.bottom), e.fillRect(
290
- r - t.left, n - t.top, t.left, f);
291
- let c = [
292
- {
293
- type: "margin",
294
- text: L(t.top),
295
- position: "top"
296
- },
297
- {
298
- type: "margin",
299
- text: L(t.right),
300
- position: "right"
301
- },
302
- {
303
- type: "margin",
304
- text: L(t.bottom),
305
- position: "bottom"
306
- },
307
- {
308
- type: "margin",
309
- text: L(t.left),
310
- position: "left"
311
- }
312
- ];
313
- return P(c);
314
- }
315
- l(Tt, "drawMargin");
316
- function Dt(e, { padding: t, border: o, width: i, height: n, top: r, left: a, bottom: s, right: f }) {
317
- let c = i - o.left - o.right, u = n - t.top - t.bottom - o.top - o.bottom;
318
- e.fillStyle = x.padding, e.fillRect(a + o.left, r + o.top, c, t.top), e.fillRect(
319
- f - t.right - o.right,
320
- r + t.top + o.top,
321
- t.right,
322
- u
323
- ), e.fillRect(
324
- a + o.left,
325
- s - t.bottom - o.bottom,
326
- c,
327
- t.bottom
328
- ), e.fillRect(a + o.left, r + t.top + o.top, t.left, u);
329
- let h = [
330
- {
331
- type: "padding",
332
- text: t.top,
333
- position: "top"
334
- },
335
- {
336
- type: "padding",
337
- text: t.right,
338
- position: "right"
339
- },
340
- {
341
- type: "padding",
342
- text: t.bottom,
343
- position: "bottom"
344
- },
345
- {
346
- type: "padding",
347
- text: t.left,
348
- position: "left"
349
- }
350
- ];
351
- return P(h);
352
- }
353
- l(Dt, "drawPadding");
354
- function kt(e, { border: t, width: o, height: i, top: n, left: r, bottom: a, right: s }) {
355
- let f = i - t.top - t.bottom;
356
- e.fillStyle = x.border, e.fillRect(r, n, o, t.top), e.fillRect(r, a - t.bottom, o, t.bottom), e.fillRect(r, n + t.top, t.left, f), e.fillRect(
357
- s - t.right, n + t.top, t.right, f);
358
- let c = [
359
- {
360
- type: "border",
361
- text: t.top,
362
- position: "top"
363
- },
364
- {
365
- type: "border",
366
- text: t.right,
367
- position: "right"
368
- },
369
- {
370
- type: "border",
371
- text: t.bottom,
372
- position: "bottom"
373
- },
374
- {
375
- type: "border",
376
- text: t.left,
377
- position: "left"
378
- }
379
- ];
380
- return P(c);
381
- }
382
- l(kt, "drawBorder");
383
- function Pt(e, { padding: t, border: o, width: i, height: n, top: r, left: a }) {
384
- let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom;
385
- return e.fillStyle = x.content, e.fillRect(
386
- a + o.left + t.left,
387
- r + o.top + t.top,
388
- s,
389
- f
390
- ), [
391
- {
392
- type: "content",
393
- position: "center",
394
- text: `${L(s)} x ${L(f)}`
395
- }
396
- ];
397
- }
398
- l(Pt, "drawContent");
399
- function At(e) {
400
- return (t) => {
401
- if (e && t) {
402
- let o = xt(e), i = Tt(t, o), n = Dt(t, o), r = kt(t, o), a = Pt(t, o), s = o.width <= G * 3 || o.height <= G;
403
- j(
404
- t,
405
- o,
406
- [...a, ...n, ...r, ...i],
407
- s
408
- );
409
- }
410
- };
411
- }
412
- l(At, "drawBoxModel");
413
- function U(e) {
414
- $(At(e));
415
- }
416
- l(U, "drawSelectedElement");
417
-
418
- // src/measure/util.ts
419
- var V = require("@storybook/global");
420
- var K = /* @__PURE__ */ l((e, t) => {
421
- let o = V.global.document.elementFromPoint(e, t), i = /* @__PURE__ */ l((r) => {
422
- if (r && r.shadowRoot) {
423
- let a = r.shadowRoot.elementFromPoint(e, t);
424
- return r.isEqualNode(a) ? r : a.shadowRoot ? i(a) : a;
425
- }
426
- return r;
427
- }, "crawlShadows");
428
- return i(o) || o;
429
- }, "deepElementFromPoint");
430
-
431
- // src/measure/withMeasure.ts
432
- var Z, T = { x: 0, y: 0 };
433
- function Q(e, t) {
434
- Z = K(e, t), U(Z);
435
- }
436
- l(Q, "findAndDrawElement");
437
- var J = /* @__PURE__ */ l((e, t) => {
438
- let { measureEnabled: o } = t.globals || {};
439
- return (0, A.useEffect)(() => {
440
- if (typeof globalThis.document > "u")
441
- return;
442
- let i = /* @__PURE__ */ l((n) => {
443
- window.requestAnimationFrame(() => {
444
- n.stopPropagation(), T.x = n.clientX, T.y = n.clientY;
445
- });
446
- }, "onPointerMove");
447
- return globalThis.document.addEventListener("pointermove", i), () => {
448
- globalThis.document.removeEventListener("pointermove", i);
449
- };
450
- }, []), (0, A.useEffect)(() => {
451
- let i = /* @__PURE__ */ l((r) => {
452
- window.requestAnimationFrame(() => {
453
- r.stopPropagation(), Q(r.clientX, r.clientY);
454
- });
455
- }, "onPointerOver"), n = /* @__PURE__ */ l(() => {
456
- window.requestAnimationFrame(() => {
457
- N();
458
- });
459
- }, "onResize");
460
- return t.viewMode === "story" && o && (globalThis.document.addEventListener("pointerover", i), z(), globalThis.window.addEventListener("\
461
- resize", n), Q(T.x, T.y)), () => {
462
- globalThis.window.removeEventListener("resize", n), O();
463
- };
464
- }, [o, t.viewMode]), e();
465
- }, "withMeasure");
466
-
467
- // src/measure/preview.ts
468
- var et = globalThis.FEATURES?.measure ? [J] : [], ot = {
469
- [Y]: !1
470
- }, Ht = /* @__PURE__ */ l(() => (0, tt.definePreview)({
471
- decorators: et,
472
- initialGlobals: ot
473
- }), "default");
474
-
475
- // src/measure/index.ts
476
- var Ft = /* @__PURE__ */ l(() => (0, nt.definePreview)(H), "default");