@dxos/storybook-utils 0.8.3 → 0.8.4-main.1c7ec43d41
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/lib/browser/index.mjs +19 -131
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +19 -131
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/DocsContainer.d.ts +4 -0
- package/dist/types/src/components/DocsContainer.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -0
- package/dist/types/src/decorators/index.d.ts +1 -2
- package/dist/types/src/decorators/index.d.ts.map +1 -1
- package/dist/types/src/decorators/withLayout.d.ts +1 -18
- package/dist/types/src/decorators/withLayout.d.ts.map +1 -1
- package/dist/types/src/decorators/withRegistry.d.ts +6 -0
- package/dist/types/src/decorators/withRegistry.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +0 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/stories/test/Test.d.ts +6 -0
- package/dist/types/src/stories/test/Test.d.ts.map +1 -0
- package/dist/types/src/stories/test/Test.stories.d.ts +11 -0
- package/dist/types/src/stories/test/Test.stories.d.ts.map +1 -0
- package/dist/types/src/stories/test/Test.test.d.ts +2 -0
- package/dist/types/src/stories/test/Test.test.d.ts.map +1 -0
- package/dist/types/src/vitest-setup.d.ts +2 -0
- package/dist/types/src/vitest-setup.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +24 -23
- package/src/components/DocsContainer.tsx +18 -0
- package/src/components/index.ts +3 -0
- package/src/decorators/index.ts +1 -2
- package/src/decorators/withLayout.tsx +15 -74
- package/src/decorators/withRegistry.tsx +23 -0
- package/src/index.ts +0 -7
- package/src/stories/test/Test.stories.tsx +61 -0
- package/src/stories/test/Test.test.tsx +30 -0
- package/src/stories/test/Test.tsx +15 -0
- package/src/stories/test/__snapshots__/Test.test.tsx.snap +3 -0
- package/src/stories/test/index.mdx__ +17 -0
- package/src/vitest-setup.ts +11 -0
- package/README.yml +0 -1
- package/dist/lib/node/index.cjs +0 -170
- package/dist/lib/node/index.cjs.map +0 -7
- package/dist/lib/node/meta.json +0 -1
- package/dist/types/src/decorators/withSignals.d.ts +0 -6
- package/dist/types/src/decorators/withSignals.d.ts.map +0 -1
- package/dist/types/src/decorators/withTheme.d.ts +0 -7
- package/dist/types/src/decorators/withTheme.d.ts.map +0 -1
- package/dist/types/src/util.d.ts +0 -6
- package/dist/types/src/util.d.ts.map +0 -1
- package/src/decorators/withSignals.tsx +0 -16
- package/src/decorators/withTheme.tsx +0 -84
- package/src/util.tsx +0 -12
|
@@ -1,141 +1,29 @@
|
|
|
1
|
-
//
|
|
2
|
-
import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-signals/react";
|
|
3
|
-
|
|
4
|
-
// packages/common/storybook-utils/src/decorators/withLayout.tsx
|
|
5
|
-
import defaultsDeep from "lodash.defaultsdeep";
|
|
1
|
+
// src/decorators/withLayout.tsx
|
|
6
2
|
import React from "react";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, children) : children;
|
|
3
|
+
var withLayout = (Story, context) => {
|
|
4
|
+
switch (context.parameters.layout) {
|
|
5
|
+
case "fullscreen":
|
|
6
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
7
|
+
role: "none",
|
|
8
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-base-surface"
|
|
9
|
+
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
10
|
+
default:
|
|
11
|
+
return /* @__PURE__ */ React.createElement(Story, null);
|
|
17
12
|
}
|
|
18
|
-
];
|
|
19
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
20
|
-
return (Story, _context) => {
|
|
21
|
-
const children = /* @__PURE__ */ React.createElement(Container, {
|
|
22
|
-
classNames,
|
|
23
|
-
fullscreen
|
|
24
|
-
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
25
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
26
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
30
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
31
|
-
role: "none",
|
|
32
|
-
className: mx(classNames)
|
|
33
|
-
}, children);
|
|
34
|
-
};
|
|
35
|
-
var FixedContainer = ({ children, classNames }) => {
|
|
36
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
37
|
-
role: "none",
|
|
38
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
39
|
-
}, children);
|
|
40
|
-
};
|
|
41
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
42
|
-
return /* @__PURE__ */ React.createElement(FixedContainer, {
|
|
43
|
-
classNames: "justify-center bg-modalSurface",
|
|
44
|
-
...props
|
|
45
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
46
|
-
role: "none",
|
|
47
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
48
|
-
}, children));
|
|
49
13
|
};
|
|
50
14
|
|
|
51
|
-
//
|
|
52
|
-
import
|
|
53
|
-
import {
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
return /* @__PURE__ */ React2.createElement(Story, null);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
// packages/common/storybook-utils/src/decorators/withTheme.tsx
|
|
60
|
-
import { addons } from "@storybook/preview-api";
|
|
61
|
-
import React3, { memo, useCallback, useEffect, useState } from "react";
|
|
62
|
-
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
|
|
63
|
-
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
64
|
-
import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
|
|
65
|
-
import { createComponent } from "@dxos/lit-ui/react";
|
|
66
|
-
import { ThemeProvider, Tooltip, Dialog, IconButton } from "@dxos/react-ui";
|
|
67
|
-
import { defaultTx } from "@dxos/react-ui-theme";
|
|
68
|
-
import { PARAM_KEY } from "@dxos/theme-editor-addon";
|
|
69
|
-
var DxThemeEditor = createComponent({
|
|
70
|
-
tagName: "dx-theme-editor",
|
|
71
|
-
elementClass: NaturalDxThemeEditor,
|
|
72
|
-
react: React3
|
|
73
|
-
});
|
|
74
|
-
var withTheme = (Story, context) => {
|
|
15
|
+
// src/decorators/withRegistry.tsx
|
|
16
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
17
|
+
import React2, { memo, useMemo } from "react";
|
|
18
|
+
var withRegistry = (Story) => {
|
|
19
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
75
20
|
const MemoizedStory = /* @__PURE__ */ memo(Story);
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
setEditorOpen(nextOpen);
|
|
80
|
-
}, []);
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
|
|
83
|
-
addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
|
|
84
|
-
return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
|
|
85
|
-
}, []);
|
|
86
|
-
useEffect(() => {
|
|
87
|
-
const openEditor = () => {
|
|
88
|
-
handleOpenChange(true);
|
|
89
|
-
};
|
|
90
|
-
addons.getChannel().on(PARAM_KEY, openEditor);
|
|
91
|
-
return () => addons.getChannel().off(PARAM_KEY, openEditor);
|
|
92
|
-
}, []);
|
|
93
|
-
return /* @__PURE__ */ React3.createElement(ThemeProvider, {
|
|
94
|
-
tx: defaultTx,
|
|
95
|
-
themeMode,
|
|
96
|
-
resourceExtensions: context?.parameters?.translations,
|
|
97
|
-
noCache: true
|
|
98
|
-
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null), /* @__PURE__ */ React3.createElement(Dialog.Root, {
|
|
99
|
-
open: editorOpen,
|
|
100
|
-
onOpenChange: handleOpenChange,
|
|
101
|
-
modal: false
|
|
102
|
-
}, /* @__PURE__ */ React3.createElement("div", {
|
|
103
|
-
role: "none",
|
|
104
|
-
className: "dx-dialog__overlay bg-transparent pointer-events-none",
|
|
105
|
-
style: {
|
|
106
|
-
placeContent: "end"
|
|
107
|
-
}
|
|
108
|
-
}, /* @__PURE__ */ React3.createElement(Dialog.Content, {
|
|
109
|
-
classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
|
|
110
|
-
style: {
|
|
111
|
-
maxBlockSize: "50dvh"
|
|
112
|
-
},
|
|
113
|
-
onInteractOutside: (event) => event.preventDefault()
|
|
114
|
-
}, /* @__PURE__ */ React3.createElement(Dialog.Title, {
|
|
115
|
-
srOnly: true
|
|
116
|
-
}, "Theme Editor"), editorOpen && /* @__PURE__ */ React3.createElement(DxThemeEditor, null), /* @__PURE__ */ React3.createElement(Dialog.Close, {
|
|
117
|
-
asChild: true
|
|
118
|
-
}, /* @__PURE__ */ React3.createElement(IconButton, {
|
|
119
|
-
iconOnly: true,
|
|
120
|
-
icon: "ph--x--regular",
|
|
121
|
-
label: "Close",
|
|
122
|
-
classNames: "absolute block-start-2 inline-end-2"
|
|
123
|
-
})))))));
|
|
21
|
+
return /* @__PURE__ */ React2.createElement(RegistryContext.Provider, {
|
|
22
|
+
value: registry
|
|
23
|
+
}, /* @__PURE__ */ React2.createElement(MemoizedStory, null));
|
|
124
24
|
};
|
|
125
|
-
|
|
126
|
-
// packages/common/storybook-utils/src/util.tsx
|
|
127
|
-
import React4 from "react";
|
|
128
|
-
var render = (r) => (args) => /* @__PURE__ */ React4.createElement(React4.Fragment, null, r(args) ?? /* @__PURE__ */ React4.createElement("div", null));
|
|
129
|
-
|
|
130
|
-
// packages/common/storybook-utils/src/index.ts
|
|
131
|
-
registerSignalsRuntime2();
|
|
132
25
|
export {
|
|
133
|
-
ColumnContainer,
|
|
134
|
-
DefaultContainer,
|
|
135
|
-
FixedContainer,
|
|
136
|
-
render,
|
|
137
26
|
withLayout,
|
|
138
|
-
|
|
139
|
-
withTheme
|
|
27
|
+
withRegistry
|
|
140
28
|
};
|
|
141
29
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/decorators/withLayout.tsx", "../../../src/decorators/withRegistry.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n switch (context.parameters.layout) {\n case 'fullscreen':\n return (\n <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-base-surface'>\n <Story />\n </div>\n );\n\n default:\n return <Story />;\n }\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { Registry, RegistryContext } from '@effect-atom/atom-react';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useMemo } from 'react';\n\n/**\n * Adds Effect Atom registry context for storybook.\n */\nexport const withRegistry: Decorator = (Story) => {\n const registry = useMemo(() => Registry.make(), []);\n\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <RegistryContext.Provider value={registry}>\n <MemoizedStory />\n </RegistryContext.Provider>\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAKA,OAAOA,WAAW;AAEX,IAAMC,aAAwB,CAACC,OAAOC,YAAAA;AAC3C,UAAQA,QAAQC,WAAWC,QAAM;IAC/B,KAAK;AACH,aACE,sBAAA,cAACC,OAAAA;QAAIC,MAAK;QAAOC,WAAU;SACzB,sBAAA,cAACN,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,sBAAA,cAACA,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASO,UAAUC,uBAAuB;AAE1C,OAAOC,UAASC,MAAMC,eAAe;AAK9B,IAAMC,eAA0B,CAACC,UAAAA;AACtC,QAAMC,WAAWH,QAAQ,MAAMJ,SAASQ,KAAI,GAAI,CAAA,CAAE;AAGlD,QAAMC,gBAAgBN,qBAAKG,KAAAA;AAE3B,SACE,gBAAAJ,OAAA,cAACD,gBAAgBS,UAAQ;IAACC,OAAOJ;KAC/B,gBAAAL,OAAA,cAACO,eAAAA,IAAAA,CAAAA;AAGP;",
|
|
6
|
+
"names": ["React", "withLayout", "Story", "context", "parameters", "layout", "div", "role", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "make", "MemoizedStory", "Provider", "value"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"
|
|
1
|
+
{"inputs":{"src/decorators/withLayout.tsx":{"bytes":1705,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withRegistry.tsx":{"bytes":2112,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/index.ts":{"bytes":482,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withRegistry.tsx","kind":"import-statement","original":"./withRegistry"}],"format":"esm"},"src/index.ts":{"bytes":382,"imports":[{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1968},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["withLayout","withRegistry"],"entryPoint":"src/index.ts","inputs":{"src/decorators/withLayout.tsx":{"bytesInOutput":432},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":418},"src/index.ts":{"bytesInOutput":0}},"bytes":995}}}
|
|
@@ -1,143 +1,31 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
//
|
|
4
|
-
import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-signals/react";
|
|
5
|
-
|
|
6
|
-
// packages/common/storybook-utils/src/decorators/withLayout.tsx
|
|
7
|
-
import defaultsDeep from "lodash.defaultsdeep";
|
|
3
|
+
// src/decorators/withLayout.tsx
|
|
8
4
|
import React from "react";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}, children) : children;
|
|
5
|
+
var withLayout = (Story, context) => {
|
|
6
|
+
switch (context.parameters.layout) {
|
|
7
|
+
case "fullscreen":
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
9
|
+
role: "none",
|
|
10
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-base-surface"
|
|
11
|
+
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
12
|
+
default:
|
|
13
|
+
return /* @__PURE__ */ React.createElement(Story, null);
|
|
19
14
|
}
|
|
20
|
-
];
|
|
21
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
22
|
-
return (Story, _context) => {
|
|
23
|
-
const children = /* @__PURE__ */ React.createElement(Container, {
|
|
24
|
-
classNames,
|
|
25
|
-
fullscreen
|
|
26
|
-
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
27
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
28
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
32
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
33
|
-
role: "none",
|
|
34
|
-
className: mx(classNames)
|
|
35
|
-
}, children);
|
|
36
|
-
};
|
|
37
|
-
var FixedContainer = ({ children, classNames }) => {
|
|
38
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
39
|
-
role: "none",
|
|
40
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
41
|
-
}, children);
|
|
42
|
-
};
|
|
43
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
44
|
-
return /* @__PURE__ */ React.createElement(FixedContainer, {
|
|
45
|
-
classNames: "justify-center bg-modalSurface",
|
|
46
|
-
...props
|
|
47
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
48
|
-
role: "none",
|
|
49
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
50
|
-
}, children));
|
|
51
15
|
};
|
|
52
16
|
|
|
53
|
-
//
|
|
54
|
-
import
|
|
55
|
-
import {
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
return /* @__PURE__ */ React2.createElement(Story, null);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
// packages/common/storybook-utils/src/decorators/withTheme.tsx
|
|
62
|
-
import { addons } from "@storybook/preview-api";
|
|
63
|
-
import React3, { memo, useCallback, useEffect, useState } from "react";
|
|
64
|
-
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
|
|
65
|
-
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
66
|
-
import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
|
|
67
|
-
import { createComponent } from "@dxos/lit-ui/react";
|
|
68
|
-
import { ThemeProvider, Tooltip, Dialog, IconButton } from "@dxos/react-ui";
|
|
69
|
-
import { defaultTx } from "@dxos/react-ui-theme";
|
|
70
|
-
import { PARAM_KEY } from "@dxos/theme-editor-addon";
|
|
71
|
-
var DxThemeEditor = createComponent({
|
|
72
|
-
tagName: "dx-theme-editor",
|
|
73
|
-
elementClass: NaturalDxThemeEditor,
|
|
74
|
-
react: React3
|
|
75
|
-
});
|
|
76
|
-
var withTheme = (Story, context) => {
|
|
17
|
+
// src/decorators/withRegistry.tsx
|
|
18
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
19
|
+
import React2, { memo, useMemo } from "react";
|
|
20
|
+
var withRegistry = (Story) => {
|
|
21
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
77
22
|
const MemoizedStory = /* @__PURE__ */ memo(Story);
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
setEditorOpen(nextOpen);
|
|
82
|
-
}, []);
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
|
|
85
|
-
addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
|
|
86
|
-
return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
|
|
87
|
-
}, []);
|
|
88
|
-
useEffect(() => {
|
|
89
|
-
const openEditor = () => {
|
|
90
|
-
handleOpenChange(true);
|
|
91
|
-
};
|
|
92
|
-
addons.getChannel().on(PARAM_KEY, openEditor);
|
|
93
|
-
return () => addons.getChannel().off(PARAM_KEY, openEditor);
|
|
94
|
-
}, []);
|
|
95
|
-
return /* @__PURE__ */ React3.createElement(ThemeProvider, {
|
|
96
|
-
tx: defaultTx,
|
|
97
|
-
themeMode,
|
|
98
|
-
resourceExtensions: context?.parameters?.translations,
|
|
99
|
-
noCache: true
|
|
100
|
-
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null), /* @__PURE__ */ React3.createElement(Dialog.Root, {
|
|
101
|
-
open: editorOpen,
|
|
102
|
-
onOpenChange: handleOpenChange,
|
|
103
|
-
modal: false
|
|
104
|
-
}, /* @__PURE__ */ React3.createElement("div", {
|
|
105
|
-
role: "none",
|
|
106
|
-
className: "dx-dialog__overlay bg-transparent pointer-events-none",
|
|
107
|
-
style: {
|
|
108
|
-
placeContent: "end"
|
|
109
|
-
}
|
|
110
|
-
}, /* @__PURE__ */ React3.createElement(Dialog.Content, {
|
|
111
|
-
classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
|
|
112
|
-
style: {
|
|
113
|
-
maxBlockSize: "50dvh"
|
|
114
|
-
},
|
|
115
|
-
onInteractOutside: (event) => event.preventDefault()
|
|
116
|
-
}, /* @__PURE__ */ React3.createElement(Dialog.Title, {
|
|
117
|
-
srOnly: true
|
|
118
|
-
}, "Theme Editor"), editorOpen && /* @__PURE__ */ React3.createElement(DxThemeEditor, null), /* @__PURE__ */ React3.createElement(Dialog.Close, {
|
|
119
|
-
asChild: true
|
|
120
|
-
}, /* @__PURE__ */ React3.createElement(IconButton, {
|
|
121
|
-
iconOnly: true,
|
|
122
|
-
icon: "ph--x--regular",
|
|
123
|
-
label: "Close",
|
|
124
|
-
classNames: "absolute block-start-2 inline-end-2"
|
|
125
|
-
})))))));
|
|
23
|
+
return /* @__PURE__ */ React2.createElement(RegistryContext.Provider, {
|
|
24
|
+
value: registry
|
|
25
|
+
}, /* @__PURE__ */ React2.createElement(MemoizedStory, null));
|
|
126
26
|
};
|
|
127
|
-
|
|
128
|
-
// packages/common/storybook-utils/src/util.tsx
|
|
129
|
-
import React4 from "react";
|
|
130
|
-
var render = (r) => (args) => /* @__PURE__ */ React4.createElement(React4.Fragment, null, r(args) ?? /* @__PURE__ */ React4.createElement("div", null));
|
|
131
|
-
|
|
132
|
-
// packages/common/storybook-utils/src/index.ts
|
|
133
|
-
registerSignalsRuntime2();
|
|
134
27
|
export {
|
|
135
|
-
ColumnContainer,
|
|
136
|
-
DefaultContainer,
|
|
137
|
-
FixedContainer,
|
|
138
|
-
render,
|
|
139
28
|
withLayout,
|
|
140
|
-
|
|
141
|
-
withTheme
|
|
29
|
+
withRegistry
|
|
142
30
|
};
|
|
143
31
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";;;
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/decorators/withLayout.tsx", "../../../src/decorators/withRegistry.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n switch (context.parameters.layout) {\n case 'fullscreen':\n return (\n <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-base-surface'>\n <Story />\n </div>\n );\n\n default:\n return <Story />;\n }\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { Registry, RegistryContext } from '@effect-atom/atom-react';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useMemo } from 'react';\n\n/**\n * Adds Effect Atom registry context for storybook.\n */\nexport const withRegistry: Decorator = (Story) => {\n const registry = useMemo(() => Registry.make(), []);\n\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <RegistryContext.Provider value={registry}>\n <MemoizedStory />\n </RegistryContext.Provider>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;AAKA,OAAOA,WAAW;AAEX,IAAMC,aAAwB,CAACC,OAAOC,YAAAA;AAC3C,UAAQA,QAAQC,WAAWC,QAAM;IAC/B,KAAK;AACH,aACE,sBAAA,cAACC,OAAAA;QAAIC,MAAK;QAAOC,WAAU;SACzB,sBAAA,cAACN,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,sBAAA,cAACA,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASO,UAAUC,uBAAuB;AAE1C,OAAOC,UAASC,MAAMC,eAAe;AAK9B,IAAMC,eAA0B,CAACC,UAAAA;AACtC,QAAMC,WAAWH,QAAQ,MAAMJ,SAASQ,KAAI,GAAI,CAAA,CAAE;AAGlD,QAAMC,gBAAgBN,qBAAKG,KAAAA;AAE3B,SACE,gBAAAJ,OAAA,cAACD,gBAAgBS,UAAQ;IAACC,OAAOJ;KAC/B,gBAAAL,OAAA,cAACO,eAAAA,IAAAA,CAAAA;AAGP;",
|
|
6
|
+
"names": ["React", "withLayout", "Story", "context", "parameters", "layout", "div", "role", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "make", "MemoizedStory", "Provider", "value"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"
|
|
1
|
+
{"inputs":{"src/decorators/withLayout.tsx":{"bytes":1705,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withRegistry.tsx":{"bytes":2112,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/index.ts":{"bytes":482,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withRegistry.tsx","kind":"import-statement","original":"./withRegistry"}],"format":"esm"},"src/index.ts":{"bytes":382,"imports":[{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1970},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["withLayout","withRegistry"],"entryPoint":"src/index.ts","inputs":{"src/decorators/withLayout.tsx":{"bytesInOutput":432},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":418},"src/index.ts":{"bytesInOutput":0}},"bytes":1088}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DocsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/DocsContainer.tsx"],"names":[],"mappings":"AAQA;;GAEG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
|
|
@@ -1,20 +1,3 @@
|
|
|
1
1
|
import { type Decorator } from '@storybook/react';
|
|
2
|
-
|
|
3
|
-
import { type Density, type ThemedClassName } from '@dxos/react-ui';
|
|
4
|
-
type ProviderOptions = {
|
|
5
|
-
fullscreen?: boolean;
|
|
6
|
-
density?: Density;
|
|
7
|
-
};
|
|
8
|
-
export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
|
|
9
|
-
export type WithLayoutProps = ThemedClassName<ProviderOptions & {
|
|
10
|
-
Container?: FC<ContainerProps>;
|
|
11
|
-
}>;
|
|
12
|
-
/**
|
|
13
|
-
* Decorator to layout the story container, adding optional providers.
|
|
14
|
-
*/
|
|
15
|
-
export declare const withLayout: ({ classNames, fullscreen, Container, ...providedOptions }?: WithLayoutProps) => Decorator;
|
|
16
|
-
export declare const DefaultContainer: FC<ContainerProps>;
|
|
17
|
-
export declare const FixedContainer: FC<ContainerProps>;
|
|
18
|
-
export declare const ColumnContainer: FC<ContainerProps>;
|
|
19
|
-
export {};
|
|
2
|
+
export declare const withLayout: Decorator;
|
|
20
3
|
//# sourceMappingURL=withLayout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLayout.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"withLayout.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,eAAO,MAAM,UAAU,EAAE,SAYxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withRegistry.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withRegistry.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,SAW1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@dxos/react-ui';
|
|
3
|
+
export declare const TEST_ID = "test";
|
|
4
|
+
export type TestProps = IconButtonProps;
|
|
5
|
+
export declare const Test: (props: TestProps) => React.JSX.Element;
|
|
6
|
+
//# sourceMappingURL=Test.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Test.d.ts","sourceRoot":"","sources":["../../../../../src/stories/test/Test.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAElE,eAAO,MAAM,OAAO,SAAS,CAAC;AAE9B,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;AAExC,eAAO,MAAM,IAAI,UAAW,SAAS,sBAEpC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Test } from './Test';
|
|
3
|
+
/**
|
|
4
|
+
* Storybook sanity test.
|
|
5
|
+
*/
|
|
6
|
+
declare const meta: Meta<typeof Test>;
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const Default: Story;
|
|
10
|
+
export declare const WithLog: Story;
|
|
11
|
+
//# sourceMappingURL=Test.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Test.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/test/Test.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOjE,OAAO,EAAW,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEvC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAM3B,CAAC;eAEa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Test.test.d.ts","sourceRoot":"","sources":["../../../../../src/stories/test/Test.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vitest-setup.d.ts","sourceRoot":"","sources":["../../../src/vitest-setup.ts"],"names":[],"mappings":"AAKA,OAAO,kCAAkC,CAAC"}
|