@dxos/storybook-utils 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29
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 -181
- 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 -181
- 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 -2
- package/dist/types/src/components/index.d.ts.map +1 -1
- 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 -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 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/stories/test/Test.d.ts.map +1 -1
- package/dist/types/src/stories/test/Test.stories.d.ts +3 -18
- package/dist/types/src/stories/test/Test.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -21
- package/src/components/index.ts +0 -4
- package/src/decorators/index.ts +1 -2
- package/src/decorators/withLayout.tsx +15 -77
- package/src/decorators/withRegistry.tsx +23 -0
- package/src/index.ts +0 -6
- package/src/stories/test/Test.stories.tsx +4 -6
- package/src/stories/test/Test.test.tsx +1 -10
- 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/dist/types/src/components/ThemeEditor.d.ts +0 -5
- package/dist/types/src/components/ThemeEditor.d.ts.map +0 -1
- package/dist/types/src/decorators/withTheme.d.ts +0 -6
- package/dist/types/src/decorators/withTheme.d.ts.map +0 -1
- package/dist/types/src/decorators/withThemeEditor.d.ts +0 -6
- package/dist/types/src/decorators/withThemeEditor.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/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
- package/src/components/ThemeEditor.tsx +0 -18
- package/src/decorators/withTheme.tsx +0 -30
- package/src/decorators/withThemeEditor.tsx +0 -28
- package/src/util.tsx +0 -12
|
@@ -1,190 +1,28 @@
|
|
|
1
|
-
// src/index.ts
|
|
2
|
-
import { registerSignalsRuntime } from "@dxos/echo-signals/react";
|
|
3
|
-
|
|
4
|
-
// src/components/ThemeEditor.tsx
|
|
5
|
-
import React, { memo } from "react";
|
|
6
|
-
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
7
|
-
import { createComponent } from "@dxos/lit-ui/react";
|
|
8
|
-
import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
|
|
9
|
-
var DxThemeEditor = createComponent({
|
|
10
|
-
tagName: "dx-theme-editor",
|
|
11
|
-
elementClass: NaturalDxThemeEditor,
|
|
12
|
-
react: React
|
|
13
|
-
});
|
|
14
|
-
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
15
|
-
|
|
16
|
-
// src/components/CardContainers/ExtrinsicCardContainer.tsx
|
|
17
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
18
|
-
import React2 from "react";
|
|
19
|
-
import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
|
|
20
|
-
var DEFAULT_INLINE_SIZE = 24;
|
|
21
|
-
var MIN_INLINE_SIZE = 8;
|
|
22
|
-
var DEFAULT_BLOCK_SIZE = 24;
|
|
23
|
-
var MIN_BLOCK_SIZE = 8;
|
|
24
|
-
var ExtrinsicCardContainer = ({ children, defaultInlineSize, inlineSize: propInlineSize, defaultBlockSize, blockSize: propBlockSize, onInlineSizeChange, onBlockSizeChange }) => {
|
|
25
|
-
const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState({
|
|
26
|
-
prop: propInlineSize,
|
|
27
|
-
defaultProp: defaultInlineSize,
|
|
28
|
-
onChange: onInlineSizeChange
|
|
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
|
-
}));
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// src/components/CardContainers/PopoverCardContainer.tsx
|
|
83
|
-
import React4 from "react";
|
|
84
|
-
import { Icon, Popover } from "@dxos/react-ui";
|
|
85
|
-
var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
|
|
86
|
-
return /* @__PURE__ */ React4.createElement(Popover.Root, {
|
|
87
|
-
open: true
|
|
88
|
-
}, /* @__PURE__ */ React4.createElement(Popover.Content, {
|
|
89
|
-
onOpenAutoFocus: (event) => event.preventDefault()
|
|
90
|
-
}, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, children), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)), /* @__PURE__ */ React4.createElement(Popover.Trigger, null, /* @__PURE__ */ React4.createElement(Icon, {
|
|
91
|
-
icon,
|
|
92
|
-
size: 5
|
|
93
|
-
})));
|
|
94
|
-
};
|
|
95
|
-
|
|
96
1
|
// src/decorators/withLayout.tsx
|
|
97
|
-
import
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
return options?.density ? /* @__PURE__ */ React5.createElement(DensityProvider, {
|
|
107
|
-
density: options.density
|
|
108
|
-
}, children) : children;
|
|
2
|
+
import React from "react";
|
|
3
|
+
var withLayout = (Story, context) => {
|
|
4
|
+
switch (context.parameters.layout) {
|
|
5
|
+
case "fullscreen":
|
|
6
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
7
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-base-surface"
|
|
8
|
+
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
9
|
+
default:
|
|
10
|
+
return /* @__PURE__ */ React.createElement(Story, null);
|
|
109
11
|
}
|
|
110
|
-
];
|
|
111
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
112
|
-
return (Story, _context) => {
|
|
113
|
-
const children = /* @__PURE__ */ React5.createElement(Container, {
|
|
114
|
-
classNames,
|
|
115
|
-
fullscreen
|
|
116
|
-
}, /* @__PURE__ */ React5.createElement(Story, null));
|
|
117
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
118
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
119
|
-
};
|
|
120
|
-
};
|
|
121
|
-
var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
|
|
122
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
123
|
-
return /* @__PURE__ */ React5.createElement("div", {
|
|
124
|
-
role: "none",
|
|
125
|
-
className: mx(classNames)
|
|
126
|
-
}, children);
|
|
127
|
-
};
|
|
128
|
-
var FullscreenContainer = ({ children, classNames }) => {
|
|
129
|
-
return /* @__PURE__ */ React5.createElement("div", {
|
|
130
|
-
role: "none",
|
|
131
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
132
|
-
}, children);
|
|
133
|
-
};
|
|
134
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
135
|
-
return /* @__PURE__ */ React5.createElement(FullscreenContainer, {
|
|
136
|
-
classNames: "justify-center bg-modalSurface",
|
|
137
|
-
...props
|
|
138
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
139
|
-
role: "none",
|
|
140
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
141
|
-
}, children));
|
|
142
12
|
};
|
|
143
13
|
|
|
144
|
-
// src/decorators/
|
|
145
|
-
import
|
|
146
|
-
import {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
const
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
themeMode: theme,
|
|
154
|
-
resourceExtensions: translations,
|
|
155
|
-
noCache: true
|
|
156
|
-
}, /* @__PURE__ */ React6.createElement(Tooltip.Provider, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null)));
|
|
14
|
+
// src/decorators/withRegistry.tsx
|
|
15
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
16
|
+
import React2, { memo, useMemo } from "react";
|
|
17
|
+
var withRegistry = (Story) => {
|
|
18
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
19
|
+
const MemoizedStory = /* @__PURE__ */ memo(Story);
|
|
20
|
+
return /* @__PURE__ */ React2.createElement(RegistryContext.Provider, {
|
|
21
|
+
value: registry
|
|
22
|
+
}, /* @__PURE__ */ React2.createElement(MemoizedStory, null));
|
|
157
23
|
};
|
|
158
|
-
|
|
159
|
-
// src/decorators/withThemeEditor.tsx
|
|
160
|
-
import React7, { memo as memo3 } from "react";
|
|
161
|
-
var withThemeEditor = (Story, context) => {
|
|
162
|
-
const MemoizedStory = /* @__PURE__ */ memo3(Story);
|
|
163
|
-
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(MemoizedStory, null), /* @__PURE__ */ React7.createElement("div", {
|
|
164
|
-
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
165
|
-
}, /* @__PURE__ */ React7.createElement("div", {
|
|
166
|
-
className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
167
|
-
}, /* @__PURE__ */ React7.createElement(ThemeEditor, null))));
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
// src/util.tsx
|
|
171
|
-
import React8 from "react";
|
|
172
|
-
var render = (r) => (args) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, r(args) ?? /* @__PURE__ */ React8.createElement("div", null));
|
|
173
|
-
|
|
174
|
-
// src/index.ts
|
|
175
|
-
registerSignalsRuntime();
|
|
176
24
|
export {
|
|
177
|
-
ColumnContainer,
|
|
178
|
-
DefaultContainer,
|
|
179
|
-
ExtrinsicCardContainer,
|
|
180
|
-
FullscreenContainer,
|
|
181
|
-
IntrinsicCardContainer,
|
|
182
|
-
PopoverCardContainer,
|
|
183
|
-
ThemeEditor,
|
|
184
|
-
layoutCentered,
|
|
185
|
-
render,
|
|
186
25
|
withLayout,
|
|
187
|
-
|
|
188
|
-
withThemeEditor
|
|
26
|
+
withRegistry
|
|
189
27
|
};
|
|
190
28
|
//# 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 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,WAAU;SACb,sBAAA,cAACL,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,sBAAA,cAACA,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASM,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", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "make", "MemoizedStory", "Provider", "value"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/
|
|
1
|
+
{"inputs":{"src/decorators/withLayout.tsx":{"bytes":1631,"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":1936},"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":410},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":418},"src/index.ts":{"bytesInOutput":0}},"bytes":973}}}
|
|
@@ -1,192 +1,30 @@
|
|
|
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
|
-
// src/components/ThemeEditor.tsx
|
|
7
|
-
import React, { memo } from "react";
|
|
8
|
-
import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
|
|
9
|
-
import { createComponent } from "@dxos/lit-ui/react";
|
|
10
|
-
import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
|
|
11
|
-
var DxThemeEditor = createComponent({
|
|
12
|
-
tagName: "dx-theme-editor",
|
|
13
|
-
elementClass: NaturalDxThemeEditor,
|
|
14
|
-
react: React
|
|
15
|
-
});
|
|
16
|
-
var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
|
|
17
|
-
|
|
18
|
-
// src/components/CardContainers/ExtrinsicCardContainer.tsx
|
|
19
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
20
|
-
import React2 from "react";
|
|
21
|
-
import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
|
|
22
|
-
var DEFAULT_INLINE_SIZE = 24;
|
|
23
|
-
var MIN_INLINE_SIZE = 8;
|
|
24
|
-
var DEFAULT_BLOCK_SIZE = 24;
|
|
25
|
-
var MIN_BLOCK_SIZE = 8;
|
|
26
|
-
var ExtrinsicCardContainer = ({ children, defaultInlineSize, inlineSize: propInlineSize, defaultBlockSize, blockSize: propBlockSize, onInlineSizeChange, onBlockSizeChange }) => {
|
|
27
|
-
const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState({
|
|
28
|
-
prop: propInlineSize,
|
|
29
|
-
defaultProp: defaultInlineSize,
|
|
30
|
-
onChange: onInlineSizeChange
|
|
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
|
-
}));
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
// src/components/CardContainers/PopoverCardContainer.tsx
|
|
85
|
-
import React4 from "react";
|
|
86
|
-
import { Icon, Popover } from "@dxos/react-ui";
|
|
87
|
-
var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
|
|
88
|
-
return /* @__PURE__ */ React4.createElement(Popover.Root, {
|
|
89
|
-
open: true
|
|
90
|
-
}, /* @__PURE__ */ React4.createElement(Popover.Content, {
|
|
91
|
-
onOpenAutoFocus: (event) => event.preventDefault()
|
|
92
|
-
}, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, children), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)), /* @__PURE__ */ React4.createElement(Popover.Trigger, null, /* @__PURE__ */ React4.createElement(Icon, {
|
|
93
|
-
icon,
|
|
94
|
-
size: 5
|
|
95
|
-
})));
|
|
96
|
-
};
|
|
97
|
-
|
|
98
3
|
// src/decorators/withLayout.tsx
|
|
99
|
-
import
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
return options?.density ? /* @__PURE__ */ React5.createElement(DensityProvider, {
|
|
109
|
-
density: options.density
|
|
110
|
-
}, children) : children;
|
|
4
|
+
import React from "react";
|
|
5
|
+
var withLayout = (Story, context) => {
|
|
6
|
+
switch (context.parameters.layout) {
|
|
7
|
+
case "fullscreen":
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
9
|
+
className: "fixed inset-0 flex flex-col overflow-hidden bg-base-surface"
|
|
10
|
+
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
11
|
+
default:
|
|
12
|
+
return /* @__PURE__ */ React.createElement(Story, null);
|
|
111
13
|
}
|
|
112
|
-
];
|
|
113
|
-
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
114
|
-
return (Story, _context) => {
|
|
115
|
-
const children = /* @__PURE__ */ React5.createElement(Container, {
|
|
116
|
-
classNames,
|
|
117
|
-
fullscreen
|
|
118
|
-
}, /* @__PURE__ */ React5.createElement(Story, null));
|
|
119
|
-
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
120
|
-
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
121
|
-
};
|
|
122
|
-
};
|
|
123
|
-
var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
|
|
124
|
-
var DefaultContainer = ({ children, classNames }) => {
|
|
125
|
-
return /* @__PURE__ */ React5.createElement("div", {
|
|
126
|
-
role: "none",
|
|
127
|
-
className: mx(classNames)
|
|
128
|
-
}, children);
|
|
129
|
-
};
|
|
130
|
-
var FullscreenContainer = ({ children, classNames }) => {
|
|
131
|
-
return /* @__PURE__ */ React5.createElement("div", {
|
|
132
|
-
role: "none",
|
|
133
|
-
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
134
|
-
}, children);
|
|
135
|
-
};
|
|
136
|
-
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
137
|
-
return /* @__PURE__ */ React5.createElement(FullscreenContainer, {
|
|
138
|
-
classNames: "justify-center bg-modalSurface",
|
|
139
|
-
...props
|
|
140
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
141
|
-
role: "none",
|
|
142
|
-
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
143
|
-
}, children));
|
|
144
14
|
};
|
|
145
15
|
|
|
146
|
-
// src/decorators/
|
|
147
|
-
import
|
|
148
|
-
import {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
const
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
themeMode: theme,
|
|
156
|
-
resourceExtensions: translations,
|
|
157
|
-
noCache: true
|
|
158
|
-
}, /* @__PURE__ */ React6.createElement(Tooltip.Provider, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null)));
|
|
16
|
+
// src/decorators/withRegistry.tsx
|
|
17
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
18
|
+
import React2, { memo, useMemo } from "react";
|
|
19
|
+
var withRegistry = (Story) => {
|
|
20
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
21
|
+
const MemoizedStory = /* @__PURE__ */ memo(Story);
|
|
22
|
+
return /* @__PURE__ */ React2.createElement(RegistryContext.Provider, {
|
|
23
|
+
value: registry
|
|
24
|
+
}, /* @__PURE__ */ React2.createElement(MemoizedStory, null));
|
|
159
25
|
};
|
|
160
|
-
|
|
161
|
-
// src/decorators/withThemeEditor.tsx
|
|
162
|
-
import React7, { memo as memo3 } from "react";
|
|
163
|
-
var withThemeEditor = (Story, context) => {
|
|
164
|
-
const MemoizedStory = /* @__PURE__ */ memo3(Story);
|
|
165
|
-
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(MemoizedStory, null), /* @__PURE__ */ React7.createElement("div", {
|
|
166
|
-
className: "absolute top-4 bottom-4 right-4 z-10"
|
|
167
|
-
}, /* @__PURE__ */ React7.createElement("div", {
|
|
168
|
-
className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
|
|
169
|
-
}, /* @__PURE__ */ React7.createElement(ThemeEditor, null))));
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
// src/util.tsx
|
|
173
|
-
import React8 from "react";
|
|
174
|
-
var render = (r) => (args) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, r(args) ?? /* @__PURE__ */ React8.createElement("div", null));
|
|
175
|
-
|
|
176
|
-
// src/index.ts
|
|
177
|
-
registerSignalsRuntime();
|
|
178
26
|
export {
|
|
179
|
-
ColumnContainer,
|
|
180
|
-
DefaultContainer,
|
|
181
|
-
ExtrinsicCardContainer,
|
|
182
|
-
FullscreenContainer,
|
|
183
|
-
IntrinsicCardContainer,
|
|
184
|
-
PopoverCardContainer,
|
|
185
|
-
ThemeEditor,
|
|
186
|
-
layoutCentered,
|
|
187
|
-
render,
|
|
188
27
|
withLayout,
|
|
189
|
-
|
|
190
|
-
withThemeEditor
|
|
28
|
+
withRegistry
|
|
191
29
|
};
|
|
192
30
|
//# 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 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,WAAU;SACb,sBAAA,cAACL,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,sBAAA,cAACA,OAAAA,IAAAA;EACZ;AACF;;;ACfA,SAASM,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", "className", "Registry", "RegistryContext", "React", "memo", "useMemo", "withRegistry", "Story", "registry", "make", "MemoizedStory", "Provider", "value"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/
|
|
1
|
+
{"inputs":{"src/decorators/withLayout.tsx":{"bytes":1631,"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":1938},"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":410},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withRegistry.tsx":{"bytesInOutput":418},"src/index.ts":{"bytesInOutput":0}},"bytes":1066}}}
|
|
@@ -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":""}
|