@dxos/storybook-utils 0.8.2-main.12df754 → 0.8.2-main.30e4dbb
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 +2 -6
- 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 +0 -1
- package/dist/types/src/decorators/withLayout.d.ts.map +1 -1
- package/dist/types/src/decorators/withTheme.d.ts.map +1 -1
- package/dist/types/src/util.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/decorators/withLayout.tsx +0 -5
- package/src/decorators/withTheme.tsx +4 -2
|
@@ -5,15 +5,11 @@ import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-si
|
|
|
5
5
|
import defaultsDeep from "lodash.defaultsdeep";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import { DensityProvider } from "@dxos/react-ui";
|
|
8
|
-
import { Tooltip } from "@dxos/react-ui";
|
|
9
8
|
import { mx } from "@dxos/react-ui-theme";
|
|
10
9
|
var defaultOptions = {
|
|
11
10
|
density: "fine"
|
|
12
11
|
};
|
|
13
12
|
var providers = [
|
|
14
|
-
(children, options) => {
|
|
15
|
-
return options.tooltips ? /* @__PURE__ */ React.createElement(Tooltip.Provider, null, children) : children;
|
|
16
|
-
},
|
|
17
13
|
(children, options) => {
|
|
18
14
|
return options?.density ? /* @__PURE__ */ React.createElement(DensityProvider, {
|
|
19
15
|
density: options.density
|
|
@@ -64,7 +60,7 @@ var withSignals = (Story) => {
|
|
|
64
60
|
import { addons } from "@storybook/preview-api";
|
|
65
61
|
import React3, { memo, useEffect, useState } from "react";
|
|
66
62
|
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
|
|
67
|
-
import { ThemeProvider } from "@dxos/react-ui";
|
|
63
|
+
import { ThemeProvider, Tooltip } from "@dxos/react-ui";
|
|
68
64
|
import { defaultTx } from "@dxos/react-ui-theme";
|
|
69
65
|
var channel = addons.getChannel();
|
|
70
66
|
var withTheme = (Story, context) => {
|
|
@@ -82,7 +78,7 @@ var withTheme = (Story, context) => {
|
|
|
82
78
|
themeMode,
|
|
83
79
|
resourceExtensions: context?.parameters?.translations,
|
|
84
80
|
noCache: true
|
|
85
|
-
}, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
|
|
81
|
+
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
|
|
86
82
|
};
|
|
87
83
|
|
|
88
84
|
// packages/common/storybook-utils/src/util.tsx
|
|
@@ -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 PropsWithChildren, type JSX, type FC } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport {
|
|
5
|
-
"mappings": ";AAIA,SAASA,0BAAAA,+BAA8B;;;ACCvC,OAAOC,kBAAkB;AACzB,OAAOC,WAA0D;AAEjE,SAAuBC,uBAA6C;AACpE,SAASC,
|
|
6
|
-
"names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "
|
|
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 { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n fullscreen?: boolean;\n density?: Density;\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?.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, Tooltip } 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 <Tooltip.Provider>\n <MemoizedStory />\n </Tooltip.Provider>\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": ";AAIA,SAASA,0BAAAA,+BAA8B;;;ACCvC,OAAOC,kBAAkB;AACzB,OAAOC,WAA0D;AAEjE,SAAuBC,uBAA6C;AACpE,SAASC,UAAU;AAOnB,IAAMC,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,sBAAA,cAACI,iBAAAA;MAAgBJ,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAUK,IAAMG,aAAa,CAAC,EACzBC,YACAC,YACAC,YAAYD,aAAaE,iBAAiBC,kBAC1C,GAAGC,gBAAAA,IACgB,CAAC,MAAC;AAErB,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMX,WACJ,sBAAA,cAACM,WAAAA;MAAUF;MAAwBC;OACjC,sBAAA,cAACK,OAAAA,IAAAA,CAAAA;AAIL,UAAMT,UAAUW,aAAa,CAAC,GAAGH,iBAAiBZ,cAAAA;AAClD,WAAOE,UAAUc,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKb,OAAAA,GAAUD,QAAAA;EAC1E;AACF;AAEO,IAAMQ,mBAAuC,CAAC,EAAER,UAAUI,WAAU,MAAE;AAC3E,SACE,sBAAA,cAACY,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAGf,UAAAA;KAC5BJ,QAAAA;AAGP;AAEO,IAAMO,iBAAqC,CAAC,EAAEP,UAAUI,WAAU,MAAE;AACzE,SACE,sBAAA,cAACY,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,sCAAsCf,UAAAA;KAClEJ,QAAAA;AAGP;AAEO,IAAMoB,kBAAsC,CAAC,EAAEpB,UAAUI,aAAa,aAAa,GAAGiB,MAAAA,MAAO;AAClG,SACE,sBAAA,cAACd,gBAAAA;IAAeH,YAAW;IAAkC,GAAGiB;KAC9D,sBAAA,cAACL,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,uDAAuDf,UAAAA;KACnFJ,QAAAA,CAAAA;AAIT;;;ACzEA,OAAOsB,YAAW;AAElB,SAASC,8BAA8B;AAKhC,IAAMC,cAAyB,CAACC,UAAAA;AACrCC,yBAAAA;AACA,SAAO,gBAAAC,OAAA,cAACF,OAAAA,IAAAA;AACV;;;ACXA,SAASG,cAAc;AAEvB,OAAOC,UAASC,MAAMC,WAAWC,gBAAgB;AACjD,SAASC,4BAA4B;AAErC,SAAyBC,eAAeC,eAAe;AACvD,SAASC,iBAAiB;AAE1B,IAAMC,UAAUC,OAAOC,WAAU;AAK1B,IAAMC,YAAuB,CAACC,OAAOC,YAAAA;AAE1C,QAAMC,gBAAgBC,qBAAKH,KAAAA;AAC3B,QAAM,CAACI,WAAWC,YAAAA,IAAgBC,SAAoB,MAAA;AAKtDC,YAAU,MAAA;AACR,UAAMC,eAAe,CAACC,aAAsBJ,aAAaI,WAAW,SAAS,OAAA;AAC7Eb,YAAQc,GAAGC,sBAAsBH,YAAAA;AACjC,WAAO,MAAMZ,QAAQgB,IAAID,sBAAsBH,YAAAA;EACjD,GAAG;IAACZ;GAAQ;AAEZ,SACE,gBAAAiB,OAAA,cAACC,eAAAA;IAAcC,IAAIC;IAAWZ;IAAsBa,oBAAoBhB,SAASiB,YAAYC;IAAcC,SAAAA;KACzG,gBAAAP,OAAA,cAACQ,QAAQC,UAAQ,MACf,gBAAAT,OAAA,cAACX,eAAAA,IAAAA,CAAAA,CAAAA;AAIT;;;AClCA,OAAOqB,YAAwB;AAKxB,IAAMC,SACX,CAAKC,MACL,CAACC,SAAY,gBAAAC,OAAA,cAAAA,OAAA,UAAA,MAAGF,EAAEC,IAAAA,KAAS,gBAAAC,OAAA,cAACC,OAAAA,IAAAA,CAAAA;;;AJA9BC,wBAAAA;",
|
|
6
|
+
"names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "mx", "defaultOptions", "density", "providers", "children", "options", "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", "Tooltip", "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", "Tooltip", "Provider", "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":7460,"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-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":4938,"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":7947},"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-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":1671},"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":1004},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":3693}}}
|
|
@@ -4,7 +4,6 @@ import { type Density, type ThemedClassName } from '@dxos/react-ui';
|
|
|
4
4
|
type ProviderOptions = {
|
|
5
5
|
fullscreen?: boolean;
|
|
6
6
|
density?: Density;
|
|
7
|
-
tooltips?: boolean;
|
|
8
7
|
};
|
|
9
8
|
export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
|
|
10
9
|
export type WithLayoutProps = ThemedClassName<ProviderOptions & {
|
|
@@ -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;AAElD,OAAc,EAAE,KAAK,iBAAiB,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,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;AAGrF,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAcF,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,GAAI,4DAKxB,eAAoB,KAAG,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,SAqBvB,CAAC"}
|
|
@@ -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,EAAG,GAAG,EAAE,CAAC,CAAC,CAAC,MACZ,MAAM,CAAC,sBAA8B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/storybook-utils",
|
|
3
|
-
"version": "0.8.2-main.
|
|
3
|
+
"version": "0.8.2-main.30e4dbb",
|
|
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/echo-signals": "0.8.2-main.
|
|
30
|
-
"@dxos/log": "0.8.2-main.
|
|
29
|
+
"@dxos/echo-signals": "0.8.2-main.30e4dbb",
|
|
30
|
+
"@dxos/log": "0.8.2-main.30e4dbb"
|
|
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.2-main.
|
|
40
|
-
"@dxos/react-ui-theme": "0.8.2-main.
|
|
39
|
+
"@dxos/react-ui": "0.8.2-main.30e4dbb",
|
|
40
|
+
"@dxos/react-ui-theme": "0.8.2-main.30e4dbb"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": "~18.2.0",
|
|
44
44
|
"react-dom": "~18.2.0",
|
|
45
|
-
"@dxos/react-ui
|
|
46
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
45
|
+
"@dxos/react-ui": "0.8.2-main.30e4dbb",
|
|
46
|
+
"@dxos/react-ui-theme": "0.8.2-main.30e4dbb"
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -7,13 +7,11 @@ import defaultsDeep from 'lodash.defaultsdeep';
|
|
|
7
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
|
-
import { Tooltip } from '@dxos/react-ui';
|
|
11
10
|
import { mx } from '@dxos/react-ui-theme';
|
|
12
11
|
|
|
13
12
|
type ProviderOptions = {
|
|
14
13
|
fullscreen?: boolean;
|
|
15
14
|
density?: Density;
|
|
16
|
-
tooltips?: boolean;
|
|
17
15
|
};
|
|
18
16
|
|
|
19
17
|
const defaultOptions: ProviderOptions = {
|
|
@@ -23,9 +21,6 @@ const defaultOptions: ProviderOptions = {
|
|
|
23
21
|
type Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;
|
|
24
22
|
|
|
25
23
|
const providers: Provider[] = [
|
|
26
|
-
(children, options) => {
|
|
27
|
-
return options.tooltips ? <Tooltip.Provider>{children}</Tooltip.Provider> : children;
|
|
28
|
-
},
|
|
29
24
|
(children, options) => {
|
|
30
25
|
return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;
|
|
31
26
|
},
|
|
@@ -7,7 +7,7 @@ import { type Decorator } from '@storybook/react';
|
|
|
7
7
|
import React, { memo, useEffect, useState } from 'react';
|
|
8
8
|
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
|
|
9
9
|
|
|
10
|
-
import { type ThemeMode, ThemeProvider } from '@dxos/react-ui';
|
|
10
|
+
import { type ThemeMode, ThemeProvider, Tooltip } from '@dxos/react-ui';
|
|
11
11
|
import { defaultTx } from '@dxos/react-ui-theme';
|
|
12
12
|
|
|
13
13
|
const channel = addons.getChannel();
|
|
@@ -31,7 +31,9 @@ export const withTheme: Decorator = (Story, context) => {
|
|
|
31
31
|
|
|
32
32
|
return (
|
|
33
33
|
<ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>
|
|
34
|
-
<
|
|
34
|
+
<Tooltip.Provider>
|
|
35
|
+
<MemoizedStory />
|
|
36
|
+
</Tooltip.Provider>
|
|
35
37
|
</ThemeProvider>
|
|
36
38
|
);
|
|
37
39
|
};
|