storybook 9.0.0-alpha.11 → 9.0.0-alpha.13

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 (93) hide show
  1. package/assets/docs/addon-backgrounds.gif +0 -0
  2. package/assets/docs/highlight.png +0 -0
  3. package/bin/index.cjs +2 -2
  4. package/dist/actions/preview.d.ts +0 -1
  5. package/dist/backgrounds/index.cjs +148 -0
  6. package/dist/backgrounds/index.d.ts +91 -0
  7. package/dist/backgrounds/index.js +130 -0
  8. package/dist/backgrounds/preview.cjs +143 -0
  9. package/dist/backgrounds/preview.d.ts +54 -0
  10. package/dist/backgrounds/preview.js +127 -0
  11. package/dist/bin/index.cjs +49 -61
  12. package/dist/bin/index.js +49 -61
  13. package/dist/builder-manager/index.cjs +390 -380
  14. package/dist/builder-manager/index.js +489 -479
  15. package/dist/channels/index.cjs +17 -17
  16. package/dist/channels/index.js +3 -3
  17. package/dist/cli/bin/index.cjs +225 -225
  18. package/dist/cli/bin/index.js +234 -234
  19. package/dist/cli/index.cjs +1904 -1909
  20. package/dist/cli/index.d.ts +3 -7
  21. package/dist/cli/index.js +734 -739
  22. package/dist/common/index.cjs +2401 -2388
  23. package/dist/common/index.d.ts +1 -13
  24. package/dist/common/index.js +2609 -2596
  25. package/dist/components/index.cjs +5701 -5946
  26. package/dist/components/index.d.ts +3 -254
  27. package/dist/components/index.js +7271 -13724
  28. package/dist/controls/preview.d.ts +0 -1
  29. package/dist/core-events/index.cjs +91 -106
  30. package/dist/core-events/index.d.ts +2 -80
  31. package/dist/core-events/index.js +79 -94
  32. package/dist/core-server/index.cjs +5221 -5122
  33. package/dist/core-server/index.d.ts +32 -23
  34. package/dist/core-server/index.js +6511 -6412
  35. package/dist/core-server/presets/common-manager.js +9815 -12
  36. package/dist/core-server/presets/common-preset.cjs +2817 -2989
  37. package/dist/core-server/presets/common-preset.js +2896 -3068
  38. package/dist/csf/index.d.ts +0 -2
  39. package/dist/csf-tools/index.cjs +0 -8
  40. package/dist/csf-tools/index.d.ts +0 -4
  41. package/dist/csf-tools/index.js +0 -8
  42. package/dist/docs-tools/index.cjs +626 -600
  43. package/dist/docs-tools/index.js +613 -587
  44. package/dist/highlight/index.cjs +27 -0
  45. package/dist/highlight/index.d.ts +17 -0
  46. package/dist/highlight/index.js +7 -0
  47. package/dist/highlight/preview.cjs +81 -0
  48. package/dist/highlight/preview.d.ts +54 -0
  49. package/dist/highlight/preview.js +67 -0
  50. package/dist/instrumenter/index.cjs +70 -60
  51. package/dist/instrumenter/index.d.ts +8 -7
  52. package/dist/instrumenter/index.js +98 -88
  53. package/dist/manager/globals-module-info.cjs +21 -33
  54. package/dist/manager/globals-module-info.js +6 -18
  55. package/dist/manager/globals-runtime.js +22671 -22006
  56. package/dist/manager/runtime.js +4996 -4581
  57. package/dist/manager-api/index.cjs +1289 -1384
  58. package/dist/manager-api/index.d.ts +109 -114
  59. package/dist/manager-api/index.js +920 -1021
  60. package/dist/measure/index.cjs +474 -0
  61. package/dist/measure/index.d.ts +66 -0
  62. package/dist/measure/index.js +462 -0
  63. package/dist/measure/preview.cjs +464 -0
  64. package/dist/measure/preview.d.ts +59 -0
  65. package/dist/measure/preview.js +448 -0
  66. package/dist/outline/index.cjs +528 -0
  67. package/dist/outline/index.d.ts +66 -0
  68. package/dist/outline/index.js +500 -0
  69. package/dist/outline/preview.cjs +518 -0
  70. package/dist/outline/preview.d.ts +59 -0
  71. package/dist/outline/preview.js +486 -0
  72. package/dist/preview/runtime.js +14340 -13357
  73. package/dist/preview-api/index.cjs +1201 -1321
  74. package/dist/preview-api/index.d.ts +66 -120
  75. package/dist/preview-api/index.js +1546 -1665
  76. package/dist/telemetry/index.d.ts +1 -1
  77. package/dist/test/index.cjs +1547 -1546
  78. package/dist/test/index.js +2308 -2307
  79. package/dist/test/preview.cjs +1906 -1905
  80. package/dist/test/preview.d.ts +0 -6
  81. package/dist/test/preview.js +1439 -1438
  82. package/dist/test/spy.cjs +65 -64
  83. package/dist/test/spy.js +59 -58
  84. package/dist/types/index.cjs +11 -12
  85. package/dist/types/index.d.ts +502 -298
  86. package/dist/types/index.js +1 -2
  87. package/dist/viewport/preview.d.ts +0 -1
  88. package/package.json +124 -19
  89. package/dist/actions/manager.js +0 -1196
  90. package/dist/component-testing/manager.js +0 -3099
  91. package/dist/controls/manager.js +0 -5545
  92. package/dist/viewport/manager.js +0 -400
  93. /package/dist/{component-testing/manager.css → core-server/presets/common-manager.css} +0 -0
Binary file
package/bin/index.cjs CHANGED
@@ -1,8 +1,8 @@
1
1
  #!/usr/bin/env node
2
2
 
3
3
  const majorNodeVersion = parseInt(process.versions.node, 10);
4
- if (majorNodeVersion < 18) {
5
- console.error('To run Storybook you need to have Node.js 18 or higher');
4
+ if (majorNodeVersion < 20) {
5
+ console.error('To run Storybook you need to have Node.js 20 or higher');
6
6
  process.exit(1);
7
7
  }
8
8
 
@@ -19,7 +19,6 @@ interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotati
19
19
  unmount: () => void;
20
20
  };
21
21
  renderToCanvas?: RenderToCanvas<TRenderer>;
22
- renderToDOM?: RenderToCanvas<TRenderer>;
23
22
  }
24
23
  declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
25
24
  showMain: () => void;
@@ -0,0 +1,148 @@
1
+ "use strict";
2
+ var b = Object.defineProperty;
3
+ var U = Object.getOwnPropertyDescriptor;
4
+ var Y = Object.getOwnPropertyNames;
5
+ var j = Object.prototype.hasOwnProperty;
6
+ var s = (e, t) => b(e, "name", { value: t, configurable: !0 });
7
+ var V = (e, t) => {
8
+ for (var n in t)
9
+ b(e, n, { get: t[n], enumerable: !0 });
10
+ }, X = (e, t, n, o) => {
11
+ if (t && typeof t == "object" || typeof t == "function")
12
+ for (let r of Y(t))
13
+ !j.call(e, r) && r !== n && b(e, r, { get: () => t[r], enumerable: !(o = U(t, r)) || o.enumerable });
14
+ return e;
15
+ };
16
+ var q = (e) => X(b({}, "__esModule", { value: !0 }), e);
17
+
18
+ // src/backgrounds/index.ts
19
+ var nt = {};
20
+ V(nt, {
21
+ default: () => ot
22
+ });
23
+ module.exports = q(nt);
24
+
25
+ // src/backgrounds/preview.ts
26
+ var F = require("storybook/preview-api");
27
+
28
+ // src/backgrounds/constants.ts
29
+ var J = "storybook/background", c = "backgrounds";
30
+ var st = {
31
+ UPDATE: `${J}/update`
32
+ };
33
+
34
+ // src/backgrounds/decorator.ts
35
+ var E = require("storybook/preview-api");
36
+
37
+ // src/backgrounds/defaults.ts
38
+ var D = {
39
+ light: { name: "light", value: "#F8F8F8" },
40
+ dark: { name: "dark", value: "#333" }
41
+ };
42
+
43
+ // src/backgrounds/utils.ts
44
+ var { document: a } = globalThis, _ = /* @__PURE__ */ s(() => globalThis?.matchMedia ? !!globalThis.matchMedia("(prefers-reduced-motion: red\
45
+ uce)")?.matches : !1, "isReduceMotionEnabled"), S = /* @__PURE__ */ s((e) => {
46
+ (Array.isArray(e) ? e : [e]).forEach(Q);
47
+ }, "clearStyles"), Q = /* @__PURE__ */ s((e) => {
48
+ if (!a)
49
+ return;
50
+ let t = a.getElementById(e);
51
+ t && t.parentElement && t.parentElement.removeChild(t);
52
+ }, "clearStyle"), L = /* @__PURE__ */ s((e, t) => {
53
+ if (!a)
54
+ return;
55
+ let n = a.getElementById(e);
56
+ if (n)
57
+ n.innerHTML !== t && (n.innerHTML = t);
58
+ else {
59
+ let o = a.createElement("style");
60
+ o.setAttribute("id", e), o.innerHTML = t, a.head.appendChild(o);
61
+ }
62
+ }, "addGridStyle"), v = /* @__PURE__ */ s((e, t, n) => {
63
+ if (!a)
64
+ return;
65
+ let o = a.getElementById(e);
66
+ if (o)
67
+ o.innerHTML !== t && (o.innerHTML = t);
68
+ else {
69
+ let r = a.createElement("style");
70
+ r.setAttribute("id", e), r.innerHTML = t;
71
+ let d = `addon-backgrounds-grid${n ? `-docs-${n}` : ""}`, l = a.getElementById(d);
72
+ l ? l.parentElement?.insertBefore(r, l) : a.head.appendChild(r);
73
+ }
74
+ }, "addBackgroundStyle");
75
+
76
+ // src/backgrounds/decorator.ts
77
+ var W = {
78
+ cellSize: 100,
79
+ cellAmount: 10,
80
+ opacity: 0.8
81
+ }, C = "addon-backgrounds", w = "addon-backgrounds-grid", Z = _() ? "" : "transition: background-color 0.3s;", I = /* @__PURE__ */ s((e, t) => {
82
+ let { globals: n = {}, parameters: o = {}, viewMode: r, id: d } = t, {
83
+ options: l = D,
84
+ disable: K,
85
+ grid: O = W
86
+ } = o[c] || {}, p = n[c] || {}, A = typeof p == "string" ? p : p?.value, y = A ? l[A] : void 0, B = typeof y == "string" ? y : y?.value ||
87
+ "transparent", h = typeof p == "string" ? !1 : p.grid || !1, M = !!y && !K, G = r === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-mai\
88
+ n", T = r === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-main", z = o.layout === void 0 || o.layout === "padded", R = r === "docs" ? 20 :
89
+ z ? 16 : 0, { cellAmount: g, cellSize: i, opacity: u, offsetX: m = R, offsetY: f = R } = O, x = r === "docs" ? `${C}-docs-${d}` : `${C}-co\
90
+ lor`, P = r === "docs" ? d : null;
91
+ (0, E.useEffect)(() => {
92
+ let k = `
93
+ ${G} {
94
+ background: ${B} !important;
95
+ ${Z}
96
+ }`;
97
+ if (!M) {
98
+ S(x);
99
+ return;
100
+ }
101
+ v(x, k, P);
102
+ }, [G, x, P, M, B]);
103
+ let $ = r === "docs" ? `${w}-docs-${d}` : `${w}`;
104
+ return (0, E.useEffect)(() => {
105
+ if (!h) {
106
+ S($);
107
+ return;
108
+ }
109
+ let k = [
110
+ `${i * g}px ${i * g}px`,
111
+ `${i * g}px ${i * g}px`,
112
+ `${i}px ${i}px`,
113
+ `${i}px ${i}px`
114
+ ].join(", "), N = `
115
+ ${T} {
116
+ background-size: ${k} !important;
117
+ background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
118
+ background-blend-mode: difference !important;
119
+ background-image: linear-gradient(rgba(130, 130, 130, ${u}) 1px, transparent 1px),
120
+ linear-gradient(90deg, rgba(130, 130, 130, ${u}) 1px, transparent 1px),
121
+ linear-gradient(rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px),
122
+ linear-gradient(90deg, rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px) !important;
123
+ }
124
+ `;
125
+ L($, N);
126
+ }, [g, i, T, $, h, m, f, u]), e();
127
+ }, "withBackgroundAndGrid");
128
+
129
+ // src/backgrounds/preview.ts
130
+ var tt = [I], et = {
131
+ [c]: {
132
+ grid: {
133
+ cellSize: 20,
134
+ opacity: 0.5,
135
+ cellAmount: 5
136
+ },
137
+ disable: !1
138
+ }
139
+ }, rt = {
140
+ [c]: { value: void 0, grid: !1 }
141
+ }, H = /* @__PURE__ */ s(() => (0, F.definePreview)({
142
+ decorators: tt,
143
+ parameters: et,
144
+ initialGlobals: rt
145
+ }), "default");
146
+
147
+ // src/backgrounds/index.ts
148
+ var ot = H;
@@ -0,0 +1,91 @@
1
+ import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, StoryIdentifier, StoryContext, PartialStoryFn, LegacyStoryFn } from 'storybook/internal/csf';
2
+ import { NormalizedProjectAnnotations, ProjectAnnotations as ProjectAnnotations$2, ComposedStoryFn } from 'storybook/internal/types';
3
+
4
+ declare global {
5
+ interface SymbolConstructor {
6
+ readonly observable: symbol;
7
+ }
8
+ }
9
+
10
+ interface Renderer extends Renderer$1 {
11
+ }
12
+
13
+ type MaybePromise<T> = Promise<T> | T;
14
+ type TeardownRenderToCanvas = () => MaybePromise<void>;
15
+ type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
16
+ interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotations$1<TRenderer> {
17
+ addons?: ProjectAnnotations<TRenderer>[];
18
+ testingLibraryRender?: (...args: never[]) => {
19
+ unmount: () => void;
20
+ };
21
+ renderToCanvas?: RenderToCanvas<TRenderer>;
22
+ }
23
+ declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
24
+ showMain: () => void;
25
+ showError: (error: {
26
+ title: string;
27
+ description: string;
28
+ }) => void;
29
+ showException: (err: Error) => void;
30
+ forceRemount: boolean;
31
+ storyContext: StoryContext<TRenderer>;
32
+ storyFn: PartialStoryFn<TRenderer>;
33
+ unboundStoryFn: LegacyStoryFn<TRenderer>;
34
+ };
35
+
36
+ declare global {
37
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
38
+ var defaultProjectAnnotations: ProjectAnnotations$2<any>;
39
+ }
40
+ type WrappedStoryRef = {
41
+ __pw_type: 'jsx' | 'importRef';
42
+ };
43
+ type UnwrappedJSXStoryRef = {
44
+ __pw_type: 'jsx';
45
+ type: UnwrappedImportStoryRef;
46
+ };
47
+ type UnwrappedImportStoryRef = ComposedStoryFn;
48
+ declare global {
49
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
50
+ }
51
+
52
+ declare const _default: () => ProjectAnnotations<Renderer>;
53
+
54
+ declare const PARAM_KEY = "backgrounds";
55
+
56
+ interface Background {
57
+ name: string;
58
+ value: string;
59
+ }
60
+ type BackgroundMap = Record<string, Background>;
61
+ interface GridConfig {
62
+ cellAmount: number;
63
+ cellSize: number;
64
+ opacity: number;
65
+ offsetX?: number;
66
+ offsetY?: number;
67
+ }
68
+ type GlobalState = {
69
+ value: string | undefined;
70
+ grid: boolean;
71
+ };
72
+ interface BackgroundsParameters {
73
+ [PARAM_KEY]: {
74
+ /** Remove the addon panel and disable the addon's behavior */
75
+ disable?: boolean;
76
+ /** Configuration for the background grid */
77
+ grid?: GridConfig;
78
+ /** Available background colors */
79
+ options?: BackgroundMap;
80
+ };
81
+ }
82
+ interface BackgroundsGlobals {
83
+ /**
84
+ * Backgrounds configuration
85
+ *
86
+ * @see https://storybook.js.org/docs/essentials/backgrounds#globals
87
+ */
88
+ [PARAM_KEY]: GlobalState | GlobalState['value'];
89
+ }
90
+
91
+ export { type BackgroundsGlobals, type BackgroundsParameters, _default as default };
@@ -0,0 +1,130 @@
1
+ var z = Object.defineProperty;
2
+ var a = (e, t) => z(e, "name", { value: t, configurable: !0 });
3
+
4
+ // src/backgrounds/preview.ts
5
+ import { definePreview as V } from "storybook/preview-api";
6
+
7
+ // src/backgrounds/constants.ts
8
+ var N = "storybook/background", c = "backgrounds";
9
+ var W = {
10
+ UPDATE: `${N}/update`
11
+ };
12
+
13
+ // src/backgrounds/decorator.ts
14
+ import { useEffect as L } from "storybook/preview-api";
15
+
16
+ // src/backgrounds/defaults.ts
17
+ var R = {
18
+ light: { name: "light", value: "#F8F8F8" },
19
+ dark: { name: "dark", value: "#333" }
20
+ };
21
+
22
+ // src/backgrounds/utils.ts
23
+ var { document: n } = globalThis, P = /* @__PURE__ */ a(() => globalThis?.matchMedia ? !!globalThis.matchMedia("(prefers-reduced-motion: red\
24
+ uce)")?.matches : !1, "isReduceMotionEnabled"), k = /* @__PURE__ */ a((e) => {
25
+ (Array.isArray(e) ? e : [e]).forEach(U);
26
+ }, "clearStyles"), U = /* @__PURE__ */ a((e) => {
27
+ if (!n)
28
+ return;
29
+ let t = n.getElementById(e);
30
+ t && t.parentElement && t.parentElement.removeChild(t);
31
+ }, "clearStyle"), D = /* @__PURE__ */ a((e, t) => {
32
+ if (!n)
33
+ return;
34
+ let i = n.getElementById(e);
35
+ if (i)
36
+ i.innerHTML !== t && (i.innerHTML = t);
37
+ else {
38
+ let r = n.createElement("style");
39
+ r.setAttribute("id", e), r.innerHTML = t, n.head.appendChild(r);
40
+ }
41
+ }, "addGridStyle"), _ = /* @__PURE__ */ a((e, t, i) => {
42
+ if (!n)
43
+ return;
44
+ let r = n.getElementById(e);
45
+ if (r)
46
+ r.innerHTML !== t && (r.innerHTML = t);
47
+ else {
48
+ let o = n.createElement("style");
49
+ o.setAttribute("id", e), o.innerHTML = t;
50
+ let d = `addon-backgrounds-grid${i ? `-docs-${i}` : ""}`, l = n.getElementById(d);
51
+ l ? l.parentElement?.insertBefore(o, l) : n.head.appendChild(o);
52
+ }
53
+ }, "addBackgroundStyle");
54
+
55
+ // src/backgrounds/decorator.ts
56
+ var Y = {
57
+ cellSize: 100,
58
+ cellAmount: 10,
59
+ opacity: 0.8
60
+ }, v = "addon-backgrounds", C = "addon-backgrounds-grid", j = P() ? "" : "transition: background-color 0.3s;", w = /* @__PURE__ */ a((e, t) => {
61
+ let { globals: i = {}, parameters: r = {}, viewMode: o, id: d } = t, {
62
+ options: l = R,
63
+ disable: F,
64
+ grid: H = Y
65
+ } = r[c] || {}, p = i[c] || {}, S = typeof p == "string" ? p : p?.value, y = S ? l[S] : void 0, E = typeof y == "string" ? y : y?.value ||
66
+ "transparent", A = typeof p == "string" ? !1 : p.grid || !1, B = !!y && !F, h = o === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-mai\
67
+ n", M = o === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-main", K = r.layout === void 0 || r.layout === "padded", G = o === "docs" ? 20 :
68
+ K ? 16 : 0, { cellAmount: g, cellSize: s, opacity: u, offsetX: m = G, offsetY: f = G } = H, b = o === "docs" ? `${v}-docs-${d}` : `${v}-co\
69
+ lor`, T = o === "docs" ? d : null;
70
+ L(() => {
71
+ let $ = `
72
+ ${h} {
73
+ background: ${E} !important;
74
+ ${j}
75
+ }`;
76
+ if (!B) {
77
+ k(b);
78
+ return;
79
+ }
80
+ _(b, $, T);
81
+ }, [h, b, T, B, E]);
82
+ let x = o === "docs" ? `${C}-docs-${d}` : `${C}`;
83
+ return L(() => {
84
+ if (!A) {
85
+ k(x);
86
+ return;
87
+ }
88
+ let $ = [
89
+ `${s * g}px ${s * g}px`,
90
+ `${s * g}px ${s * g}px`,
91
+ `${s}px ${s}px`,
92
+ `${s}px ${s}px`
93
+ ].join(", "), O = `
94
+ ${M} {
95
+ background-size: ${$} !important;
96
+ background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
97
+ background-blend-mode: difference !important;
98
+ background-image: linear-gradient(rgba(130, 130, 130, ${u}) 1px, transparent 1px),
99
+ linear-gradient(90deg, rgba(130, 130, 130, ${u}) 1px, transparent 1px),
100
+ linear-gradient(rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px),
101
+ linear-gradient(90deg, rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px) !important;
102
+ }
103
+ `;
104
+ D(x, O);
105
+ }, [g, s, M, x, A, m, f, u]), e();
106
+ }, "withBackgroundAndGrid");
107
+
108
+ // src/backgrounds/preview.ts
109
+ var X = [w], q = {
110
+ [c]: {
111
+ grid: {
112
+ cellSize: 20,
113
+ opacity: 0.5,
114
+ cellAmount: 5
115
+ },
116
+ disable: !1
117
+ }
118
+ }, J = {
119
+ [c]: { value: void 0, grid: !1 }
120
+ }, I = /* @__PURE__ */ a(() => V({
121
+ decorators: X,
122
+ parameters: q,
123
+ initialGlobals: J
124
+ }), "default");
125
+
126
+ // src/backgrounds/index.ts
127
+ var ft = I;
128
+ export {
129
+ ft as default
130
+ };
@@ -0,0 +1,143 @@
1
+ "use strict";
2
+ var b = Object.defineProperty;
3
+ var N = Object.getOwnPropertyDescriptor;
4
+ var U = Object.getOwnPropertyNames;
5
+ var Y = Object.prototype.hasOwnProperty;
6
+ var i = (e, t) => b(e, "name", { value: t, configurable: !0 });
7
+ var j = (e, t) => {
8
+ for (var o in t)
9
+ b(e, o, { get: t[o], enumerable: !0 });
10
+ }, V = (e, t, o, n) => {
11
+ if (t && typeof t == "object" || typeof t == "function")
12
+ for (let r of U(t))
13
+ !Y.call(e, r) && r !== o && b(e, r, { get: () => t[r], enumerable: !(n = N(t, r)) || n.enumerable });
14
+ return e;
15
+ };
16
+ var X = (e) => V(b({}, "__esModule", { value: !0 }), e);
17
+
18
+ // src/backgrounds/preview.ts
19
+ var nt = {};
20
+ j(nt, {
21
+ default: () => rt
22
+ });
23
+ module.exports = X(nt);
24
+ var F = require("storybook/preview-api");
25
+
26
+ // src/backgrounds/constants.ts
27
+ var q = "storybook/background", c = "backgrounds";
28
+ var at = {
29
+ UPDATE: `${q}/update`
30
+ };
31
+
32
+ // src/backgrounds/decorator.ts
33
+ var E = require("storybook/preview-api");
34
+
35
+ // src/backgrounds/defaults.ts
36
+ var P = {
37
+ light: { name: "light", value: "#F8F8F8" },
38
+ dark: { name: "dark", value: "#333" }
39
+ };
40
+
41
+ // src/backgrounds/utils.ts
42
+ var { document: a } = globalThis, _ = /* @__PURE__ */ i(() => globalThis?.matchMedia ? !!globalThis.matchMedia("(prefers-reduced-motion: red\
43
+ uce)")?.matches : !1, "isReduceMotionEnabled"), S = /* @__PURE__ */ i((e) => {
44
+ (Array.isArray(e) ? e : [e]).forEach(J);
45
+ }, "clearStyles"), J = /* @__PURE__ */ i((e) => {
46
+ if (!a)
47
+ return;
48
+ let t = a.getElementById(e);
49
+ t && t.parentElement && t.parentElement.removeChild(t);
50
+ }, "clearStyle"), L = /* @__PURE__ */ i((e, t) => {
51
+ if (!a)
52
+ return;
53
+ let o = a.getElementById(e);
54
+ if (o)
55
+ o.innerHTML !== t && (o.innerHTML = t);
56
+ else {
57
+ let n = a.createElement("style");
58
+ n.setAttribute("id", e), n.innerHTML = t, a.head.appendChild(n);
59
+ }
60
+ }, "addGridStyle"), v = /* @__PURE__ */ i((e, t, o) => {
61
+ if (!a)
62
+ return;
63
+ let n = a.getElementById(e);
64
+ if (n)
65
+ n.innerHTML !== t && (n.innerHTML = t);
66
+ else {
67
+ let r = a.createElement("style");
68
+ r.setAttribute("id", e), r.innerHTML = t;
69
+ let d = `addon-backgrounds-grid${o ? `-docs-${o}` : ""}`, l = a.getElementById(d);
70
+ l ? l.parentElement?.insertBefore(r, l) : a.head.appendChild(r);
71
+ }
72
+ }, "addBackgroundStyle");
73
+
74
+ // src/backgrounds/decorator.ts
75
+ var Q = {
76
+ cellSize: 100,
77
+ cellAmount: 10,
78
+ opacity: 0.8
79
+ }, C = "addon-backgrounds", w = "addon-backgrounds-grid", W = _() ? "" : "transition: background-color 0.3s;", I = /* @__PURE__ */ i((e, t) => {
80
+ let { globals: o = {}, parameters: n = {}, viewMode: r, id: d } = t, {
81
+ options: l = P,
82
+ disable: H,
83
+ grid: K = Q
84
+ } = n[c] || {}, p = o[c] || {}, A = typeof p == "string" ? p : p?.value, y = A ? l[A] : void 0, h = typeof y == "string" ? y : y?.value ||
85
+ "transparent", B = typeof p == "string" ? !1 : p.grid || !1, M = !!y && !H, G = r === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-mai\
86
+ n", T = r === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-main", O = n.layout === void 0 || n.layout === "padded", R = r === "docs" ? 20 :
87
+ O ? 16 : 0, { cellAmount: g, cellSize: s, opacity: u, offsetX: m = R, offsetY: f = R } = K, x = r === "docs" ? `${C}-docs-${d}` : `${C}-co\
88
+ lor`, D = r === "docs" ? d : null;
89
+ (0, E.useEffect)(() => {
90
+ let k = `
91
+ ${G} {
92
+ background: ${h} !important;
93
+ ${W}
94
+ }`;
95
+ if (!M) {
96
+ S(x);
97
+ return;
98
+ }
99
+ v(x, k, D);
100
+ }, [G, x, D, M, h]);
101
+ let $ = r === "docs" ? `${w}-docs-${d}` : `${w}`;
102
+ return (0, E.useEffect)(() => {
103
+ if (!B) {
104
+ S($);
105
+ return;
106
+ }
107
+ let k = [
108
+ `${s * g}px ${s * g}px`,
109
+ `${s * g}px ${s * g}px`,
110
+ `${s}px ${s}px`,
111
+ `${s}px ${s}px`
112
+ ].join(", "), z = `
113
+ ${T} {
114
+ background-size: ${k} !important;
115
+ background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
116
+ background-blend-mode: difference !important;
117
+ background-image: linear-gradient(rgba(130, 130, 130, ${u}) 1px, transparent 1px),
118
+ linear-gradient(90deg, rgba(130, 130, 130, ${u}) 1px, transparent 1px),
119
+ linear-gradient(rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px),
120
+ linear-gradient(90deg, rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px) !important;
121
+ }
122
+ `;
123
+ L($, z);
124
+ }, [g, s, T, $, B, m, f, u]), e();
125
+ }, "withBackgroundAndGrid");
126
+
127
+ // src/backgrounds/preview.ts
128
+ var Z = [I], tt = {
129
+ [c]: {
130
+ grid: {
131
+ cellSize: 20,
132
+ opacity: 0.5,
133
+ cellAmount: 5
134
+ },
135
+ disable: !1
136
+ }
137
+ }, et = {
138
+ [c]: { value: void 0, grid: !1 }
139
+ }, rt = /* @__PURE__ */ i(() => (0, F.definePreview)({
140
+ decorators: Z,
141
+ parameters: tt,
142
+ initialGlobals: et
143
+ }), "default");
@@ -0,0 +1,54 @@
1
+ import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, StoryIdentifier, StoryContext, PartialStoryFn, LegacyStoryFn } from 'storybook/internal/csf';
2
+ import { NormalizedProjectAnnotations, ProjectAnnotations as ProjectAnnotations$2, ComposedStoryFn } from 'storybook/internal/types';
3
+
4
+ declare global {
5
+ interface SymbolConstructor {
6
+ readonly observable: symbol;
7
+ }
8
+ }
9
+
10
+ interface Renderer extends Renderer$1 {
11
+ }
12
+
13
+ type MaybePromise<T> = Promise<T> | T;
14
+ type TeardownRenderToCanvas = () => MaybePromise<void>;
15
+ type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
16
+ interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotations$1<TRenderer> {
17
+ addons?: ProjectAnnotations<TRenderer>[];
18
+ testingLibraryRender?: (...args: never[]) => {
19
+ unmount: () => void;
20
+ };
21
+ renderToCanvas?: RenderToCanvas<TRenderer>;
22
+ }
23
+ declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
24
+ showMain: () => void;
25
+ showError: (error: {
26
+ title: string;
27
+ description: string;
28
+ }) => void;
29
+ showException: (err: Error) => void;
30
+ forceRemount: boolean;
31
+ storyContext: StoryContext<TRenderer>;
32
+ storyFn: PartialStoryFn<TRenderer>;
33
+ unboundStoryFn: LegacyStoryFn<TRenderer>;
34
+ };
35
+
36
+ declare global {
37
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
38
+ var defaultProjectAnnotations: ProjectAnnotations$2<any>;
39
+ }
40
+ type WrappedStoryRef = {
41
+ __pw_type: 'jsx' | 'importRef';
42
+ };
43
+ type UnwrappedJSXStoryRef = {
44
+ __pw_type: 'jsx';
45
+ type: UnwrappedImportStoryRef;
46
+ };
47
+ type UnwrappedImportStoryRef = ComposedStoryFn;
48
+ declare global {
49
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
50
+ }
51
+
52
+ declare const _default: () => ProjectAnnotations<Renderer>;
53
+
54
+ export { _default as default };