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