@dxos/storybook-utils 0.8.4-main.84f28bd → 0.8.4-main.937b3ca
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 +23 -68
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +23 -68
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ThemeEditor.d.ts +1 -1
- package/dist/types/src/components/ThemeEditor.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/decorators/index.d.ts +1 -1
- package/dist/types/src/decorators/index.d.ts.map +1 -1
- package/dist/types/src/decorators/withLayout.d.ts +1 -19
- 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 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/stories/test/Test.stories.d.ts +3 -4
- package/dist/types/src/stories/test/Test.stories.d.ts.map +1 -1
- package/dist/types/src/util.d.ts +1 -1
- package/dist/types/src/util.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +22 -16
- package/src/components/index.ts +0 -1
- package/src/decorators/index.ts +1 -1
- package/src/decorators/withLayout.tsx +15 -77
- package/src/decorators/withRegistry.tsx +23 -0
- package/src/decorators/withThemeEditor.tsx +2 -2
- package/src/index.ts +0 -6
- package/src/stories/test/Test.stories.tsx +6 -7
- package/src/stories/test/Test.test.tsx +2 -12
- package/src/stories/test/Test.tsx +1 -1
- package/src/stories/test/{index.mdx → index.mdx__} +3 -0
- package/src/util.tsx +5 -2
- package/dist/types/src/decorators/withTheme.d.ts +0 -6
- package/dist/types/src/decorators/withTheme.d.ts.map +0 -1
- package/src/decorators/withTheme.tsx +0 -30
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// src/index.ts
|
|
2
|
-
import { registerSignalsRuntime } from "@dxos/echo-signals/react";
|
|
3
|
-
|
|
4
1
|
// src/components/ThemeEditor.tsx
|
|
5
2
|
import React, { memo } from "react";
|
|
6
3
|
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
@@ -14,66 +11,28 @@ var DxThemeEditor = createComponent({
|
|
|
14
11
|
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
15
12
|
|
|
16
13
|
// src/decorators/withLayout.tsx
|
|
17
|
-
import defaultsDeep from "lodash.defaultsdeep";
|
|
18
14
|
import React2 from "react";
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, children) : children;
|
|
15
|
+
var withLayout = (Story, context) => {
|
|
16
|
+
switch (context.parameters.layout) {
|
|
17
|
+
case "fullscreen":
|
|
18
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
19
|
+
role: "none",
|
|
20
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
|
|
21
|
+
}, /* @__PURE__ */ React2.createElement(Story, null));
|
|
22
|
+
default:
|
|
23
|
+
return /* @__PURE__ */ React2.createElement(Story, null);
|
|
29
24
|
}
|
|
30
|
-
];
|
|
31
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
32
|
-
return (Story, _context) => {
|
|
33
|
-
const children = /* @__PURE__ */ React2.createElement(Container, {
|
|
34
|
-
classNames,
|
|
35
|
-
fullscreen
|
|
36
|
-
}, /* @__PURE__ */ React2.createElement(Story, null));
|
|
37
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
38
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
|
|
42
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
43
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
44
|
-
role: "none",
|
|
45
|
-
className: mx(classNames)
|
|
46
|
-
}, children);
|
|
47
|
-
};
|
|
48
|
-
var FullscreenContainer = ({ children, classNames }) => {
|
|
49
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
50
|
-
role: "none",
|
|
51
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
52
|
-
}, children);
|
|
53
|
-
};
|
|
54
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
55
|
-
return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
|
|
56
|
-
classNames: "justify-center bg-modalSurface",
|
|
57
|
-
...props
|
|
58
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
59
|
-
role: "none",
|
|
60
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
61
|
-
}, children));
|
|
62
25
|
};
|
|
63
26
|
|
|
64
|
-
// src/decorators/
|
|
65
|
-
import
|
|
66
|
-
import {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
const { globals: { theme }, parameters: { translations } } = context;
|
|
27
|
+
// src/decorators/withRegistry.tsx
|
|
28
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
29
|
+
import React3, { memo as memo2, useMemo } from "react";
|
|
30
|
+
var withRegistry = (Story) => {
|
|
31
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
70
32
|
const MemoizedStory = /* @__PURE__ */ memo2(Story);
|
|
71
|
-
return /* @__PURE__ */ React3.createElement(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
resourceExtensions: translations,
|
|
75
|
-
noCache: true
|
|
76
|
-
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
|
|
33
|
+
return /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
|
|
34
|
+
value: registry
|
|
35
|
+
}, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
|
|
77
36
|
};
|
|
78
37
|
|
|
79
38
|
// src/decorators/withThemeEditor.tsx
|
|
@@ -83,25 +42,21 @@ var withThemeEditor = (Story, context) => {
|
|
|
83
42
|
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
|
|
84
43
|
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
85
44
|
}, /* @__PURE__ */ React4.createElement("div", {
|
|
86
|
-
className: "
|
|
45
|
+
className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
87
46
|
}, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
|
|
88
47
|
};
|
|
89
48
|
|
|
90
49
|
// src/util.tsx
|
|
91
50
|
import React5 from "react";
|
|
92
|
-
var render = (
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
51
|
+
var render = (Story) => (args) => {
|
|
52
|
+
const result = /* @__PURE__ */ React5.createElement(Story, args);
|
|
53
|
+
return result ?? /* @__PURE__ */ React5.createElement("div", null);
|
|
54
|
+
};
|
|
96
55
|
export {
|
|
97
|
-
ColumnContainer,
|
|
98
|
-
DefaultContainer,
|
|
99
|
-
FullscreenContainer,
|
|
100
56
|
ThemeEditor,
|
|
101
|
-
layoutCentered,
|
|
102
57
|
render,
|
|
103
58
|
withLayout,
|
|
104
|
-
|
|
59
|
+
withRegistry,
|
|
105
60
|
withThemeEditor
|
|
106
61
|
};
|
|
107
62
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";AAIA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/ThemeEditor.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withRegistry.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n tagName: 'dx-theme-editor',\n elementClass: NaturalDxThemeEditor,\n react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\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-baseSurface'>\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", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <>\n <MemoizedStory />\n <div className='absolute top-4 bottom-4 right-4 z-10'>\n <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n <ThemeEditor />\n </div>\n </div>\n </>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n <T extends Record<string, any>>(Story: FC<T>) =>\n (args: unknown) => {\n const result = <Story {...(args as T)} />;\n return result ?? <div />;\n };\n"],
|
|
5
|
+
"mappings": ";AAIA,OAAOA,SAASC,YAAY;AAE5B,SAASC,iBAAiBC,4BAA4B;AACtD,SAASC,uBAAuB;AAEhC,OAAO;AAEP,IAAMC,gBAAgBC,gBAAgB;EACpCC,SAAS;EACTC,cAAcC;EACdC,OAAOC;AACT,CAAA;AAEO,IAAMC,cAAcC,qBAAKR,aAAAA;;;ACZhC,OAAOS,YAAW;AAEX,IAAMC,aAAwB,CAACC,OAAOC,YAAAA;AAC3C,UAAQA,QAAQC,WAAWC,QAAM;IAC/B,KAAK;AACH,aACE,gBAAAC,OAAA,cAACC,OAAAA;QAAIC,MAAK;QAAOC,WAAU;SACzB,gBAAAH,OAAA,cAACJ,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,gBAAAI,OAAA,cAACJ,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASQ,UAAUC,uBAAuB;AAE1C,OAAOC,UAASC,QAAAA,OAAMC,eAAe;AAK9B,IAAMC,eAA0B,CAACC,UAAAA;AACtC,QAAMC,WAAWC,QAAQ,MAAMC,SAASC,KAAI,GAAI,CAAA,CAAE;AAGlD,QAAMC,gBAAgBC,gBAAAA,MAAKN,KAAAA;AAE3B,SACE,gBAAAO,OAAA,cAACC,gBAAgBC,UAAQ;IAACC,OAAOT;KAC/B,gBAAAM,OAAA,cAACF,eAAAA,IAAAA,CAAAA;AAGP;;;ACjBA,OAAOM,UAASC,QAAAA,aAAY;AAQrB,IAAMC,kBAA6B,CAACC,OAAOC,YAAAA;AAEhD,QAAMC,gBAAgBC,gBAAAA,MAAKH,KAAAA;AAE3B,SACE,gBAAAI,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACF,eAAAA,IAAAA,GACD,gBAAAE,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACG,aAAAA,IAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;ACvBA,OAAOC,YAAwB;AAKxB,IAAMC,SACX,CAAgCC,UAChC,CAACC,SAAAA;AACC,QAAMC,SAAS,gBAAAC,OAAA,cAACH,OAAWC,IAAAA;AAC3B,SAAOC,UAAU,gBAAAC,OAAA,cAACC,OAAAA,IAAAA;AACpB;",
|
|
6
|
+
"names": ["React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "useMemo", "Registry", "make", "MemoizedStory", "memo", "React", "RegistryContext", "Provider", "value", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":480,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":1803,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withRegistry.tsx":{"bytes":2217,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2746,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"../components/ThemeEditor"}],"format":"esm"},"src/decorators/index.ts":{"bytes":682,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withRegistry.tsx","kind":"import-statement","original":"./withRegistry"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":1228,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":634,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":4806},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ThemeEditor","render","withLayout","withRegistry","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/decorators/withLayout.tsx":{"bytesInOutput":435},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":428},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":589},"src/util.tsx":{"bytesInOutput":205}},"bytes":2342}}}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
// src/index.ts
|
|
4
|
-
import { registerSignalsRuntime } from "@dxos/echo-signals/react";
|
|
5
|
-
|
|
6
3
|
// src/components/ThemeEditor.tsx
|
|
7
4
|
import React, { memo } from "react";
|
|
8
5
|
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
@@ -16,66 +13,28 @@ var DxThemeEditor = createComponent({
|
|
|
16
13
|
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
17
14
|
|
|
18
15
|
// src/decorators/withLayout.tsx
|
|
19
|
-
import defaultsDeep from "lodash.defaultsdeep";
|
|
20
16
|
import React2 from "react";
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}, children) : children;
|
|
17
|
+
var withLayout = (Story, context) => {
|
|
18
|
+
switch (context.parameters.layout) {
|
|
19
|
+
case "fullscreen":
|
|
20
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
21
|
+
role: "none",
|
|
22
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
|
|
23
|
+
}, /* @__PURE__ */ React2.createElement(Story, null));
|
|
24
|
+
default:
|
|
25
|
+
return /* @__PURE__ */ React2.createElement(Story, null);
|
|
31
26
|
}
|
|
32
|
-
];
|
|
33
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
34
|
-
return (Story, _context) => {
|
|
35
|
-
const children = /* @__PURE__ */ React2.createElement(Container, {
|
|
36
|
-
classNames,
|
|
37
|
-
fullscreen
|
|
38
|
-
}, /* @__PURE__ */ React2.createElement(Story, null));
|
|
39
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
40
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
|
|
44
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
45
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
46
|
-
role: "none",
|
|
47
|
-
className: mx(classNames)
|
|
48
|
-
}, children);
|
|
49
|
-
};
|
|
50
|
-
var FullscreenContainer = ({ children, classNames }) => {
|
|
51
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
52
|
-
role: "none",
|
|
53
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
54
|
-
}, children);
|
|
55
|
-
};
|
|
56
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
57
|
-
return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
|
|
58
|
-
classNames: "justify-center bg-modalSurface",
|
|
59
|
-
...props
|
|
60
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
61
|
-
role: "none",
|
|
62
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
63
|
-
}, children));
|
|
64
27
|
};
|
|
65
28
|
|
|
66
|
-
// src/decorators/
|
|
67
|
-
import
|
|
68
|
-
import {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
const { globals: { theme }, parameters: { translations } } = context;
|
|
29
|
+
// src/decorators/withRegistry.tsx
|
|
30
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
31
|
+
import React3, { memo as memo2, useMemo } from "react";
|
|
32
|
+
var withRegistry = (Story) => {
|
|
33
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
72
34
|
const MemoizedStory = /* @__PURE__ */ memo2(Story);
|
|
73
|
-
return /* @__PURE__ */ React3.createElement(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
resourceExtensions: translations,
|
|
77
|
-
noCache: true
|
|
78
|
-
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
|
|
35
|
+
return /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
|
|
36
|
+
value: registry
|
|
37
|
+
}, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
|
|
79
38
|
};
|
|
80
39
|
|
|
81
40
|
// src/decorators/withThemeEditor.tsx
|
|
@@ -85,25 +44,21 @@ var withThemeEditor = (Story, context) => {
|
|
|
85
44
|
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
|
|
86
45
|
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
87
46
|
}, /* @__PURE__ */ React4.createElement("div", {
|
|
88
|
-
className: "
|
|
47
|
+
className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
89
48
|
}, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
|
|
90
49
|
};
|
|
91
50
|
|
|
92
51
|
// src/util.tsx
|
|
93
52
|
import React5 from "react";
|
|
94
|
-
var render = (
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
53
|
+
var render = (Story) => (args) => {
|
|
54
|
+
const result = /* @__PURE__ */ React5.createElement(Story, args);
|
|
55
|
+
return result ?? /* @__PURE__ */ React5.createElement("div", null);
|
|
56
|
+
};
|
|
98
57
|
export {
|
|
99
|
-
ColumnContainer,
|
|
100
|
-
DefaultContainer,
|
|
101
|
-
FullscreenContainer,
|
|
102
58
|
ThemeEditor,
|
|
103
|
-
layoutCentered,
|
|
104
59
|
render,
|
|
105
60
|
withLayout,
|
|
106
|
-
|
|
61
|
+
withRegistry,
|
|
107
62
|
withThemeEditor
|
|
108
63
|
};
|
|
109
64
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";;;AAIA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/ThemeEditor.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withRegistry.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n tagName: 'dx-theme-editor',\n elementClass: NaturalDxThemeEditor,\n react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\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-baseSurface'>\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", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <>\n <MemoizedStory />\n <div className='absolute top-4 bottom-4 right-4 z-10'>\n <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n <ThemeEditor />\n </div>\n </div>\n </>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n <T extends Record<string, any>>(Story: FC<T>) =>\n (args: unknown) => {\n const result = <Story {...(args as T)} />;\n return result ?? <div />;\n };\n"],
|
|
5
|
+
"mappings": ";;;AAIA,OAAOA,SAASC,YAAY;AAE5B,SAASC,iBAAiBC,4BAA4B;AACtD,SAASC,uBAAuB;AAEhC,OAAO;AAEP,IAAMC,gBAAgBC,gBAAgB;EACpCC,SAAS;EACTC,cAAcC;EACdC,OAAOC;AACT,CAAA;AAEO,IAAMC,cAAcC,qBAAKR,aAAAA;;;ACZhC,OAAOS,YAAW;AAEX,IAAMC,aAAwB,CAACC,OAAOC,YAAAA;AAC3C,UAAQA,QAAQC,WAAWC,QAAM;IAC/B,KAAK;AACH,aACE,gBAAAC,OAAA,cAACC,OAAAA;QAAIC,MAAK;QAAOC,WAAU;SACzB,gBAAAH,OAAA,cAACJ,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,gBAAAI,OAAA,cAACJ,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASQ,UAAUC,uBAAuB;AAE1C,OAAOC,UAASC,QAAAA,OAAMC,eAAe;AAK9B,IAAMC,eAA0B,CAACC,UAAAA;AACtC,QAAMC,WAAWC,QAAQ,MAAMC,SAASC,KAAI,GAAI,CAAA,CAAE;AAGlD,QAAMC,gBAAgBC,gBAAAA,MAAKN,KAAAA;AAE3B,SACE,gBAAAO,OAAA,cAACC,gBAAgBC,UAAQ;IAACC,OAAOT;KAC/B,gBAAAM,OAAA,cAACF,eAAAA,IAAAA,CAAAA;AAGP;;;ACjBA,OAAOM,UAASC,QAAAA,aAAY;AAQrB,IAAMC,kBAA6B,CAACC,OAAOC,YAAAA;AAEhD,QAAMC,gBAAgBC,gBAAAA,MAAKH,KAAAA;AAE3B,SACE,gBAAAI,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACF,eAAAA,IAAAA,GACD,gBAAAE,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACG,aAAAA,IAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;ACvBA,OAAOC,YAAwB;AAKxB,IAAMC,SACX,CAAgCC,UAChC,CAACC,SAAAA;AACC,QAAMC,SAAS,gBAAAC,OAAA,cAACH,OAAWC,IAAAA;AAC3B,SAAOC,UAAU,gBAAAC,OAAA,cAACC,OAAAA,IAAAA;AACpB;",
|
|
6
|
+
"names": ["React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "useMemo", "Registry", "make", "MemoizedStory", "memo", "React", "RegistryContext", "Provider", "value", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":480,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":1803,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withRegistry.tsx":{"bytes":2217,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2746,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"../components/ThemeEditor"}],"format":"esm"},"src/decorators/index.ts":{"bytes":682,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withRegistry.tsx","kind":"import-statement","original":"./withRegistry"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":1228,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":634,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":4808},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ThemeEditor","render","withLayout","withRegistry","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/decorators/withLayout.tsx":{"bytesInOutput":435},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":428},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":589},"src/util.tsx":{"bytesInOutput":205}},"bytes":2435}}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
|
|
3
3
|
import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
|
|
4
|
-
export declare const ThemeEditor: React.
|
|
4
|
+
export declare const ThemeEditor: React.NamedExoticComponent<Omit<React.HTMLAttributes<NaturalDxThemeEditor>, "connectedCallback" | "disconnectedCallback" | "render" | "createRenderRoot" | "renderOptions" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete"> & {} & Partial<Omit<NaturalDxThemeEditor, keyof HTMLElement>> & React.RefAttributes<NaturalDxThemeEditor>>;
|
|
5
5
|
//# sourceMappingURL=ThemeEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,6CAA6C,CAAC;AAQrD,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,6CAA6C,CAAC;AAQrD,eAAO,MAAM,WAAW,mbAAsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC"}
|
|
@@ -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;AAC/B,cAAc,mBAAmB,CAAC"}
|
|
@@ -1,21 +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 layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
|
|
17
|
-
export declare const DefaultContainer: ({ children, classNames }: ContainerProps) => JSX.Element;
|
|
18
|
-
export declare const FullscreenContainer: ({ children, classNames }: ContainerProps) => JSX.Element;
|
|
19
|
-
export declare const ColumnContainer: ({ children, classNames, ...props }: ContainerProps) => JSX.Element;
|
|
20
|
-
export {};
|
|
2
|
+
export declare const withLayout: Decorator;
|
|
21
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;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import '@dxos-theme';
|
|
2
1
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
3
|
-
import {
|
|
2
|
+
import { Test } from './Test';
|
|
4
3
|
/**
|
|
5
4
|
* Storybook sanity test.
|
|
6
5
|
*/
|
|
7
|
-
declare const meta: Meta<
|
|
6
|
+
declare const meta: Meta<typeof Test>;
|
|
8
7
|
export default meta;
|
|
9
|
-
type Story = StoryObj<
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
10
9
|
export declare const Default: Story;
|
|
11
10
|
export declare const WithLog: Story;
|
|
12
11
|
//# sourceMappingURL=Test.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Test.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/test/Test.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
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;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
|
package/dist/types/src/util.d.ts
CHANGED
|
@@ -2,5 +2,5 @@ import React, { type FC } from 'react';
|
|
|
2
2
|
/**
|
|
3
3
|
* Story renderer wrapper.
|
|
4
4
|
*/
|
|
5
|
-
export declare const render: <T
|
|
5
|
+
export declare const render: <T extends Record<string, any>>(Story: FC<T>) => (args: unknown) => React.JSX.Element;
|
|
6
6
|
//# sourceMappingURL=util.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,MAAM,GAChB,CAAC,
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,MAAM,GAChB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,MAC3C,MAAM,OAAO,sBAGb,CAAC"}
|