@dxos/storybook-utils 0.8.4-main.ae835ea → 0.8.4-main.bc674ce
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 +31 -93
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +31 -93
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/index.d.ts +0 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/decorators/index.d.ts +2 -0
- package/dist/types/src/decorators/index.d.ts.map +1 -1
- package/dist/types/src/decorators/withLayout.d.ts +3 -0
- package/dist/types/src/decorators/withLayout.d.ts.map +1 -0
- 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.map +1 -1
- package/dist/types/src/stories/test/Test.stories.d.ts +3 -17
- package/dist/types/src/stories/test/Test.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +21 -18
- package/src/components/index.ts +0 -2
- package/src/decorators/index.ts +2 -0
- package/src/decorators/withLayout.tsx +20 -0
- package/src/decorators/withRegistry.tsx +23 -0
- package/src/decorators/withThemeEditor.tsx +1 -1
- package/src/index.ts +0 -4
- package/src/stories/test/Test.stories.tsx +2 -2
- package/src/stories/test/Test.tsx +1 -1
- package/dist/types/src/components/CardContainers/ExtrinsicCardContainer.d.ts +0 -12
- package/dist/types/src/components/CardContainers/ExtrinsicCardContainer.d.ts.map +0 -1
- package/dist/types/src/components/CardContainers/IntrinsicCardContainer.d.ts +0 -9
- package/dist/types/src/components/CardContainers/IntrinsicCardContainer.d.ts.map +0 -1
- package/dist/types/src/components/CardContainers/PopoverCardContainer.d.ts +0 -5
- package/dist/types/src/components/CardContainers/PopoverCardContainer.d.ts.map +0 -1
- package/dist/types/src/components/CardContainers/index.d.ts +0 -4
- package/dist/types/src/components/CardContainers/index.d.ts.map +0 -1
- package/src/components/CardContainers/ExtrinsicCardContainer.tsx +0 -72
- package/src/components/CardContainers/IntrinsicCardContainer.tsx +0 -48
- package/src/components/CardContainers/PopoverCardContainer.tsx +0 -24
- package/src/components/CardContainers/index.ts +0 -7
|
@@ -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";
|
|
@@ -13,112 +10,53 @@ var DxThemeEditor = createComponent({
|
|
|
13
10
|
});
|
|
14
11
|
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
15
12
|
|
|
16
|
-
// src/
|
|
17
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
13
|
+
// src/decorators/withLayout.tsx
|
|
18
14
|
import React2 from "react";
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
});
|
|
30
|
-
const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState({
|
|
31
|
-
prop: propBlockSize,
|
|
32
|
-
defaultProp: defaultBlockSize,
|
|
33
|
-
onChange: onBlockSizeChange
|
|
34
|
-
});
|
|
35
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
36
|
-
className: "grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout",
|
|
37
|
-
style: {
|
|
38
|
-
...sizeStyle(inlineSize, "horizontal"),
|
|
39
|
-
...sizeStyle(blockSize, "vertical")
|
|
40
|
-
},
|
|
41
|
-
...resizeAttributes
|
|
42
|
-
}, children, /* @__PURE__ */ React2.createElement(ResizeHandle, {
|
|
43
|
-
side: "inline-end",
|
|
44
|
-
fallbackSize: DEFAULT_INLINE_SIZE,
|
|
45
|
-
minSize: MIN_INLINE_SIZE,
|
|
46
|
-
size: inlineSize,
|
|
47
|
-
onSizeChange: setInlineSize
|
|
48
|
-
}), /* @__PURE__ */ React2.createElement(ResizeHandle, {
|
|
49
|
-
side: "block-end",
|
|
50
|
-
fallbackSize: DEFAULT_BLOCK_SIZE,
|
|
51
|
-
minSize: MIN_BLOCK_SIZE,
|
|
52
|
-
size: blockSize,
|
|
53
|
-
onSizeChange: setBlockSize
|
|
54
|
-
}));
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
// src/components/CardContainers/IntrinsicCardContainer.tsx
|
|
58
|
-
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
59
|
-
import React3 from "react";
|
|
60
|
-
import { ResizeHandle as ResizeHandle2, resizeAttributes as resizeAttributes2, sizeStyle as sizeStyle2 } from "@dxos/react-ui-dnd";
|
|
61
|
-
var DEFAULT_SIZE = 24;
|
|
62
|
-
var MIN_SIZE = 8;
|
|
63
|
-
var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeChange }) => {
|
|
64
|
-
const [size = DEFAULT_SIZE, setSize] = useControllableState2({
|
|
65
|
-
prop: propSize,
|
|
66
|
-
defaultProp: defaultSize,
|
|
67
|
-
onChange: onSizeChange
|
|
68
|
-
});
|
|
69
|
-
return /* @__PURE__ */ React3.createElement("div", {
|
|
70
|
-
className: "relative border border-dashed border-subduedSeparator p-4 rounded-lg",
|
|
71
|
-
style: sizeStyle2(size, "horizontal"),
|
|
72
|
-
...resizeAttributes2
|
|
73
|
-
}, children, /* @__PURE__ */ React3.createElement(ResizeHandle2, {
|
|
74
|
-
side: "inline-end",
|
|
75
|
-
fallbackSize: DEFAULT_SIZE,
|
|
76
|
-
minSize: MIN_SIZE,
|
|
77
|
-
size,
|
|
78
|
-
onSizeChange: setSize
|
|
79
|
-
}));
|
|
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);
|
|
24
|
+
}
|
|
80
25
|
};
|
|
81
26
|
|
|
82
|
-
// src/
|
|
83
|
-
import
|
|
84
|
-
import {
|
|
85
|
-
var
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}, /* @__PURE__ */
|
|
91
|
-
icon,
|
|
92
|
-
size: 5
|
|
93
|
-
})));
|
|
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(), []);
|
|
32
|
+
const MemoizedStory = /* @__PURE__ */ memo2(Story);
|
|
33
|
+
return /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
|
|
34
|
+
value: registry
|
|
35
|
+
}, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
|
|
94
36
|
};
|
|
95
37
|
|
|
96
38
|
// src/decorators/withThemeEditor.tsx
|
|
97
|
-
import
|
|
39
|
+
import React4, { memo as memo3 } from "react";
|
|
98
40
|
var withThemeEditor = (Story, context) => {
|
|
99
|
-
const MemoizedStory = /* @__PURE__ */
|
|
100
|
-
return /* @__PURE__ */
|
|
41
|
+
const MemoizedStory = /* @__PURE__ */ memo3(Story);
|
|
42
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
|
|
101
43
|
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
102
|
-
}, /* @__PURE__ */
|
|
103
|
-
className: "
|
|
104
|
-
}, /* @__PURE__ */
|
|
44
|
+
}, /* @__PURE__ */ React4.createElement("div", {
|
|
45
|
+
className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
46
|
+
}, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
|
|
105
47
|
};
|
|
106
48
|
|
|
107
49
|
// src/util.tsx
|
|
108
|
-
import
|
|
50
|
+
import React5 from "react";
|
|
109
51
|
var render = (Story) => (args) => {
|
|
110
|
-
const result = /* @__PURE__ */
|
|
111
|
-
return result ?? /* @__PURE__ */
|
|
52
|
+
const result = /* @__PURE__ */ React5.createElement(Story, args);
|
|
53
|
+
return result ?? /* @__PURE__ */ React5.createElement("div", null);
|
|
112
54
|
};
|
|
113
|
-
|
|
114
|
-
// src/index.ts
|
|
115
|
-
registerSignalsRuntime();
|
|
116
55
|
export {
|
|
117
|
-
ExtrinsicCardContainer,
|
|
118
|
-
IntrinsicCardContainer,
|
|
119
|
-
PopoverCardContainer,
|
|
120
56
|
ThemeEditor,
|
|
121
57
|
render,
|
|
58
|
+
withLayout,
|
|
59
|
+
withRegistry,
|
|
122
60
|
withThemeEditor
|
|
123
61
|
};
|
|
124
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/
|
|
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";
|
|
@@ -15,112 +12,53 @@ var DxThemeEditor = createComponent({
|
|
|
15
12
|
});
|
|
16
13
|
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
17
14
|
|
|
18
|
-
// src/
|
|
19
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
15
|
+
// src/decorators/withLayout.tsx
|
|
20
16
|
import React2 from "react";
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
});
|
|
32
|
-
const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState({
|
|
33
|
-
prop: propBlockSize,
|
|
34
|
-
defaultProp: defaultBlockSize,
|
|
35
|
-
onChange: onBlockSizeChange
|
|
36
|
-
});
|
|
37
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
38
|
-
className: "grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout",
|
|
39
|
-
style: {
|
|
40
|
-
...sizeStyle(inlineSize, "horizontal"),
|
|
41
|
-
...sizeStyle(blockSize, "vertical")
|
|
42
|
-
},
|
|
43
|
-
...resizeAttributes
|
|
44
|
-
}, children, /* @__PURE__ */ React2.createElement(ResizeHandle, {
|
|
45
|
-
side: "inline-end",
|
|
46
|
-
fallbackSize: DEFAULT_INLINE_SIZE,
|
|
47
|
-
minSize: MIN_INLINE_SIZE,
|
|
48
|
-
size: inlineSize,
|
|
49
|
-
onSizeChange: setInlineSize
|
|
50
|
-
}), /* @__PURE__ */ React2.createElement(ResizeHandle, {
|
|
51
|
-
side: "block-end",
|
|
52
|
-
fallbackSize: DEFAULT_BLOCK_SIZE,
|
|
53
|
-
minSize: MIN_BLOCK_SIZE,
|
|
54
|
-
size: blockSize,
|
|
55
|
-
onSizeChange: setBlockSize
|
|
56
|
-
}));
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
// src/components/CardContainers/IntrinsicCardContainer.tsx
|
|
60
|
-
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
61
|
-
import React3 from "react";
|
|
62
|
-
import { ResizeHandle as ResizeHandle2, resizeAttributes as resizeAttributes2, sizeStyle as sizeStyle2 } from "@dxos/react-ui-dnd";
|
|
63
|
-
var DEFAULT_SIZE = 24;
|
|
64
|
-
var MIN_SIZE = 8;
|
|
65
|
-
var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeChange }) => {
|
|
66
|
-
const [size = DEFAULT_SIZE, setSize] = useControllableState2({
|
|
67
|
-
prop: propSize,
|
|
68
|
-
defaultProp: defaultSize,
|
|
69
|
-
onChange: onSizeChange
|
|
70
|
-
});
|
|
71
|
-
return /* @__PURE__ */ React3.createElement("div", {
|
|
72
|
-
className: "relative border border-dashed border-subduedSeparator p-4 rounded-lg",
|
|
73
|
-
style: sizeStyle2(size, "horizontal"),
|
|
74
|
-
...resizeAttributes2
|
|
75
|
-
}, children, /* @__PURE__ */ React3.createElement(ResizeHandle2, {
|
|
76
|
-
side: "inline-end",
|
|
77
|
-
fallbackSize: DEFAULT_SIZE,
|
|
78
|
-
minSize: MIN_SIZE,
|
|
79
|
-
size,
|
|
80
|
-
onSizeChange: setSize
|
|
81
|
-
}));
|
|
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);
|
|
26
|
+
}
|
|
82
27
|
};
|
|
83
28
|
|
|
84
|
-
// src/
|
|
85
|
-
import
|
|
86
|
-
import {
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}, /* @__PURE__ */
|
|
93
|
-
icon,
|
|
94
|
-
size: 5
|
|
95
|
-
})));
|
|
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(), []);
|
|
34
|
+
const MemoizedStory = /* @__PURE__ */ memo2(Story);
|
|
35
|
+
return /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
|
|
36
|
+
value: registry
|
|
37
|
+
}, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
|
|
96
38
|
};
|
|
97
39
|
|
|
98
40
|
// src/decorators/withThemeEditor.tsx
|
|
99
|
-
import
|
|
41
|
+
import React4, { memo as memo3 } from "react";
|
|
100
42
|
var withThemeEditor = (Story, context) => {
|
|
101
|
-
const MemoizedStory = /* @__PURE__ */
|
|
102
|
-
return /* @__PURE__ */
|
|
43
|
+
const MemoizedStory = /* @__PURE__ */ memo3(Story);
|
|
44
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
|
|
103
45
|
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
104
|
-
}, /* @__PURE__ */
|
|
105
|
-
className: "
|
|
106
|
-
}, /* @__PURE__ */
|
|
46
|
+
}, /* @__PURE__ */ React4.createElement("div", {
|
|
47
|
+
className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
48
|
+
}, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
|
|
107
49
|
};
|
|
108
50
|
|
|
109
51
|
// src/util.tsx
|
|
110
|
-
import
|
|
52
|
+
import React5 from "react";
|
|
111
53
|
var render = (Story) => (args) => {
|
|
112
|
-
const result = /* @__PURE__ */
|
|
113
|
-
return result ?? /* @__PURE__ */
|
|
54
|
+
const result = /* @__PURE__ */ React5.createElement(Story, args);
|
|
55
|
+
return result ?? /* @__PURE__ */ React5.createElement("div", null);
|
|
114
56
|
};
|
|
115
|
-
|
|
116
|
-
// src/index.ts
|
|
117
|
-
registerSignalsRuntime();
|
|
118
57
|
export {
|
|
119
|
-
ExtrinsicCardContainer,
|
|
120
|
-
IntrinsicCardContainer,
|
|
121
|
-
PopoverCardContainer,
|
|
122
58
|
ThemeEditor,
|
|
123
59
|
render,
|
|
60
|
+
withLayout,
|
|
61
|
+
withRegistry,
|
|
124
62
|
withThemeEditor
|
|
125
63
|
};
|
|
126
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/
|
|
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 +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,mBAAmB,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"}
|
|
@@ -0,0 +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;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,23 +1,9 @@
|
|
|
1
|
-
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import
|
|
1
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Test } from './Test';
|
|
3
3
|
/**
|
|
4
4
|
* Storybook sanity test.
|
|
5
5
|
*/
|
|
6
|
-
declare const meta:
|
|
7
|
-
title: string;
|
|
8
|
-
component: (props: import("./Test").TestProps) => React.JSX.Element;
|
|
9
|
-
render: (args: Omit<import("@dxos/react-ui").ButtonProps, "children"> & Partial<Pick<import("@dxos/react-ui").IconProps, "size" | "icon">> & {
|
|
10
|
-
label: string;
|
|
11
|
-
iconOnly?: boolean;
|
|
12
|
-
noTooltip?: boolean;
|
|
13
|
-
caretDown?: boolean;
|
|
14
|
-
iconClassNames?: import("@dxos/react-ui").ThemedClassName<any>["classNames"];
|
|
15
|
-
tooltipPortal?: boolean;
|
|
16
|
-
tooltipSide?: import("@dxos/react-ui").TooltipSide;
|
|
17
|
-
}) => React.JSX.Element;
|
|
18
|
-
decorators: import("@storybook/react").Decorator[];
|
|
19
|
-
tags: string[];
|
|
20
|
-
};
|
|
6
|
+
declare const meta: Meta<typeof Test>;
|
|
21
7
|
export default meta;
|
|
22
8
|
type Story = StoryObj<typeof meta>;
|
|
23
9
|
export declare const Default: Story;
|
|
@@ -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"}
|