@dxos/storybook-utils 0.8.1 → 0.8.2-main.f081794
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 +30 -9
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/decorators/withLayout.d.ts +9 -2
- package/dist/types/src/decorators/withLayout.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/decorators/withLayout.tsx +39 -7
|
@@ -20,19 +20,37 @@ var providers = [
|
|
|
20
20
|
}, children) : children;
|
|
21
21
|
}
|
|
22
22
|
];
|
|
23
|
-
var withLayout = ({ classNames, fullscreen, ...
|
|
23
|
+
var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
|
|
24
24
|
return (Story, _context) => {
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
className: mx(fullscreen && "fixed inset-0 flex overflow-hidden", classNames)
|
|
31
|
-
}, /* @__PURE__ */ React.createElement(Story, null))
|
|
32
|
-
);
|
|
25
|
+
const children = /* @__PURE__ */ React.createElement(Container, {
|
|
26
|
+
classNames,
|
|
27
|
+
fullscreen
|
|
28
|
+
}, /* @__PURE__ */ React.createElement(Story, null));
|
|
29
|
+
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
33
30
|
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
34
31
|
};
|
|
35
32
|
};
|
|
33
|
+
var DefaultContainer = ({ children, classNames }) => {
|
|
34
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
35
|
+
role: "none",
|
|
36
|
+
className: mx(classNames)
|
|
37
|
+
}, children);
|
|
38
|
+
};
|
|
39
|
+
var FixedContainer = ({ children, classNames }) => {
|
|
40
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
41
|
+
role: "none",
|
|
42
|
+
className: mx("fixed inset-0 flex overflow-hidden", classNames)
|
|
43
|
+
}, children);
|
|
44
|
+
};
|
|
45
|
+
var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
|
|
46
|
+
return /* @__PURE__ */ React.createElement(FixedContainer, {
|
|
47
|
+
classNames: "justify-center bg-modalSurface",
|
|
48
|
+
...props
|
|
49
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
50
|
+
role: "none",
|
|
51
|
+
className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
|
|
52
|
+
}, children));
|
|
53
|
+
};
|
|
36
54
|
|
|
37
55
|
// packages/common/storybook-utils/src/decorators/withSignals.tsx
|
|
38
56
|
import React2 from "react";
|
|
@@ -74,6 +92,9 @@ var render = (r) => (args) => /* @__PURE__ */ React4.createElement(React4.Fragme
|
|
|
74
92
|
// packages/common/storybook-utils/src/index.ts
|
|
75
93
|
registerSignalsRuntime2();
|
|
76
94
|
export {
|
|
95
|
+
ColumnContainer,
|
|
96
|
+
DefaultContainer,
|
|
97
|
+
FixedContainer,
|
|
77
98
|
render,
|
|
78
99
|
withLayout,
|
|
79
100
|
withSignals,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/index.ts", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withSignals.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/util.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport { type Meta } from '@storybook/react';\n\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type JSX } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport { Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n fullscreen?: boolean;\n density?: Density;\n tooltips?: boolean;\n};\n\nconst defaultOptions: ProviderOptions = {\n density: 'fine',\n};\n\ntype Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;\n\nconst providers: Provider[] = [\n (children, options) => {\n return options.tooltips ? <Tooltip.Provider>{children}</Tooltip.Provider> : children;\n },\n (children, options) => {\n return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;\n },\n];\n\nexport type
|
|
5
|
-
"mappings": ";AAIA,SAASA,0BAAAA,+BAA8B;;;ACCvC,OAAOC,kBAAkB;AACzB,OAAOC,
|
|
6
|
-
"names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "Tooltip", "mx", "defaultOptions", "density", "providers", "children", "options", "tooltips", "Tooltip", "Provider", "DensityProvider", "withLayout", "classNames", "fullscreen", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport { type Meta } from '@storybook/react';\n\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type PropsWithChildren, type JSX, type FC } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport { Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n fullscreen?: boolean;\n density?: Density;\n tooltips?: boolean;\n};\n\nconst defaultOptions: ProviderOptions = {\n density: 'fine',\n};\n\ntype Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;\n\nconst providers: Provider[] = [\n (children, options) => {\n return options.tooltips ? <Tooltip.Provider>{children}</Tooltip.Provider> : children;\n },\n (children, options) => {\n return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;\n },\n];\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;\n\nexport type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC<ContainerProps> }>;\n\n/**\n * Decorator to layout the story container, adding optional providers.\n */\nexport const withLayout = ({\n classNames,\n fullscreen,\n Container = fullscreen ? FixedContainer : DefaultContainer,\n ...providedOptions\n}: WithLayoutProps = {}): Decorator => {\n // TODO(burdon): Inspect \"fullscreen\" parameter in context.\n return (Story, _context) => {\n const children = (\n <Container classNames={classNames} fullscreen={fullscreen}>\n <Story />\n </Container>\n );\n\n const options = defaultsDeep({}, providedOptions, defaultOptions);\n return providers.reduceRight((acc, provider) => provider(acc, options), children);\n };\n};\n\nexport const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {\n return (\n <div role='none' className={mx(classNames)}>\n {children}\n </div>\n );\n};\n\nexport const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {\n return (\n <div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>\n {children}\n </div>\n );\n};\n\nexport const ColumnContainer: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {\n return (\n <FixedContainer classNames='justify-center bg-modalSurface' {...props}>\n <div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>\n {children}\n </div>\n </FixedContainer>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\n/**\n * Make objects created using @dxos/echo-schema `create` reactive.\n */\nexport const withSignals: Decorator = (Story) => {\n registerSignalsRuntime();\n return <Story />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { addons } from '@storybook/preview-api';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { type ThemeMode, ThemeProvider } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\n\nconst channel = addons.getChannel();\n\n/**\n * Changes theme based on storybook toolbar toggle.\n */\nexport const withTheme: Decorator = (Story, context) => {\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n const [themeMode, setThemeMode] = useState<ThemeMode>('dark');\n\n // https://www.npmjs.com/package/storybook-dark-mode\n // NOTE: The `useDarkMode` hook causes the story to continually re-render.\n // NOTE: Changing the theme will cause the story to remount.\n useEffect(() => {\n const handleUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n channel.on(DARK_MODE_EVENT_NAME, handleUpdate);\n return () => channel.off(DARK_MODE_EVENT_NAME, handleUpdate);\n }, [channel]);\n\n return (\n <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n <MemoizedStory />\n </ThemeProvider>\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,>(r: FC<T>) =>\n (args: T) => <>{r(args) ?? <div />}</>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "Tooltip", "mx", "defaultOptions", "density", "providers", "children", "options", "tooltips", "Tooltip", "Provider", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FixedContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "div", "role", "className", "mx", "ColumnContainer", "props", "React", "registerSignalsRuntime", "withSignals", "Story", "registerSignalsRuntime", "React", "addons", "React", "memo", "useEffect", "useState", "DARK_MODE_EVENT_NAME", "ThemeProvider", "defaultTx", "channel", "addons", "getChannel", "withTheme", "Story", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "useEffect", "handleUpdate", "darkMode", "on", "DARK_MODE_EVENT_NAME", "off", "React", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":8102,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytes":1440,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytes":4710,"imports":[{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/index.ts":{"bytes":708,"imports":[{"path":"packages/common/storybook-utils/src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"packages/common/storybook-utils/src/decorators/withSignals.tsx","kind":"import-statement","original":"./withSignals"},{"path":"packages/common/storybook-utils/src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"}],"format":"esm"},"packages/common/storybook-utils/src/util.tsx":{"bytes":1048,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/index.ts":{"bytes":962,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"packages/common/storybook-utils/src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"packages/common/storybook-utils/src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/storybook-utils/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8154},"packages/common/storybook-utils/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ColumnContainer","DefaultContainer","FixedContainer","render","withLayout","withSignals","withTheme"],"entryPoint":"packages/common/storybook-utils/src/index.ts","inputs":{"packages/common/storybook-utils/src/index.ts":{"bytesInOutput":121},"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytesInOutput":1857},"packages/common/storybook-utils/src/decorators/index.ts":{"bytesInOutput":0},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytesInOutput":217},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytesInOutput":933},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":3808}}}
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
import { type Decorator } from '@storybook/react';
|
|
2
|
+
import { type PropsWithChildren, type FC } from 'react';
|
|
2
3
|
import { type Density, type ThemedClassName } from '@dxos/react-ui';
|
|
3
4
|
type ProviderOptions = {
|
|
4
5
|
fullscreen?: boolean;
|
|
5
6
|
density?: Density;
|
|
6
7
|
tooltips?: boolean;
|
|
7
8
|
};
|
|
8
|
-
export type
|
|
9
|
+
export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
|
|
10
|
+
export type WithLayoutProps = ThemedClassName<ProviderOptions & {
|
|
11
|
+
Container?: FC<ContainerProps>;
|
|
12
|
+
}>;
|
|
9
13
|
/**
|
|
10
14
|
* Decorator to layout the story container, adding optional providers.
|
|
11
15
|
*/
|
|
12
|
-
export declare const withLayout: ({ classNames, fullscreen, ...
|
|
16
|
+
export declare const withLayout: ({ classNames, fullscreen, Container, ...providedOptions }?: WithLayoutProps) => Decorator;
|
|
17
|
+
export declare const DefaultContainer: FC<ContainerProps>;
|
|
18
|
+
export declare const FixedContainer: FC<ContainerProps>;
|
|
19
|
+
export declare const ColumnContainer: FC<ContainerProps>;
|
|
13
20
|
export {};
|
|
14
21
|
//# 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;AAElD,OAAc,EAAE,KAAK,iBAAiB,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIrF,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiBF,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;AAErG,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,eAAe,GAAG;IAAE,SAAS,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,UAAU,+DAKpB,eAAe,KAAQ,SAYzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAM/C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,cAAc,CAM7C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,cAAc,CAQ9C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/storybook-utils",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2-main.f081794",
|
|
4
4
|
"description": "Utilities for DXOS UI Storybooks.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"@storybook/preview-api": "^8.3.6",
|
|
27
27
|
"lodash.defaultsdeep": "^4.6.1",
|
|
28
28
|
"storybook-dark-mode": "^4.0.2",
|
|
29
|
-
"@dxos/
|
|
30
|
-
"@dxos/
|
|
29
|
+
"@dxos/log": "0.8.2-main.f081794",
|
|
30
|
+
"@dxos/echo-signals": "0.8.2-main.f081794"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/lodash.defaultsdeep": "^4.6.6",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"react": "~18.2.0",
|
|
37
37
|
"react-dom": "~18.2.0",
|
|
38
38
|
"storybook": "^8.3.6",
|
|
39
|
-
"@dxos/react-ui": "0.8.
|
|
40
|
-
"@dxos/react-ui
|
|
39
|
+
"@dxos/react-ui-theme": "0.8.2-main.f081794",
|
|
40
|
+
"@dxos/react-ui": "0.8.2-main.f081794"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": "~18.2.0",
|
|
44
44
|
"react-dom": "~18.2.0",
|
|
45
|
-
"@dxos/react-ui": "0.8.
|
|
46
|
-
"@dxos/react-ui-theme": "0.8.
|
|
45
|
+
"@dxos/react-ui": "0.8.2-main.f081794",
|
|
46
|
+
"@dxos/react-ui-theme": "0.8.2-main.f081794"
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import { type Decorator } from '@storybook/react';
|
|
6
6
|
import defaultsDeep from 'lodash.defaultsdeep';
|
|
7
|
-
import React, { type JSX } from 'react';
|
|
7
|
+
import React, { type PropsWithChildren, type JSX, type FC } from 'react';
|
|
8
8
|
|
|
9
9
|
import { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';
|
|
10
10
|
import { Tooltip } from '@dxos/react-ui';
|
|
@@ -31,22 +31,54 @@ const providers: Provider[] = [
|
|
|
31
31
|
},
|
|
32
32
|
];
|
|
33
33
|
|
|
34
|
-
export type
|
|
34
|
+
export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
|
|
35
|
+
|
|
36
|
+
export type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC<ContainerProps> }>;
|
|
35
37
|
|
|
36
38
|
/**
|
|
37
39
|
* Decorator to layout the story container, adding optional providers.
|
|
38
40
|
*/
|
|
39
|
-
export const withLayout = ({
|
|
41
|
+
export const withLayout = ({
|
|
42
|
+
classNames,
|
|
43
|
+
fullscreen,
|
|
44
|
+
Container = fullscreen ? FixedContainer : DefaultContainer,
|
|
45
|
+
...providedOptions
|
|
46
|
+
}: WithLayoutProps = {}): Decorator => {
|
|
40
47
|
// TODO(burdon): Inspect "fullscreen" parameter in context.
|
|
41
48
|
return (Story, _context) => {
|
|
42
|
-
const options = defaultsDeep({}, _options, defaultOptions);
|
|
43
49
|
const children = (
|
|
44
|
-
|
|
45
|
-
<div role='none' className={mx(fullscreen && 'fixed inset-0 flex overflow-hidden', classNames)}>
|
|
50
|
+
<Container classNames={classNames} fullscreen={fullscreen}>
|
|
46
51
|
<Story />
|
|
47
|
-
</
|
|
52
|
+
</Container>
|
|
48
53
|
);
|
|
49
54
|
|
|
55
|
+
const options = defaultsDeep({}, providedOptions, defaultOptions);
|
|
50
56
|
return providers.reduceRight((acc, provider) => provider(acc, options), children);
|
|
51
57
|
};
|
|
52
58
|
};
|
|
59
|
+
|
|
60
|
+
export const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {
|
|
61
|
+
return (
|
|
62
|
+
<div role='none' className={mx(classNames)}>
|
|
63
|
+
{children}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {
|
|
69
|
+
return (
|
|
70
|
+
<div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>
|
|
71
|
+
{children}
|
|
72
|
+
</div>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const ColumnContainer: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {
|
|
77
|
+
return (
|
|
78
|
+
<FixedContainer classNames='justify-center bg-modalSurface' {...props}>
|
|
79
|
+
<div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>
|
|
80
|
+
{children}
|
|
81
|
+
</div>
|
|
82
|
+
</FixedContainer>
|
|
83
|
+
);
|
|
84
|
+
};
|