@dxos/storybook-utils 0.8.3 → 0.8.4-main.84f28bd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/storybook-utils",
-  "version": "0.8.3",
+  "version": "0.8.4-main.84f28bd",
   "description": "Utilities for DXOS UI Storybooks.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,15 +24,12 @@
     "src"
   ],
   "dependencies": {
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/preview-api": "^8.3.6",
     "lodash.defaultsdeep": "^4.6.1",
-    "storybook-dark-mode": "^4.0.2",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/lit-theme-editor": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/theme-editor-addon": "0.8.3"
+    "storybook": "^9.0.15",
+    "@dxos/echo-signals": "0.8.4-main.84f28bd",
+    "@dxos/lit-theme-editor": "0.8.4-main.84f28bd",
+    "@dxos/lit-ui": "0.8.4-main.84f28bd",
+    "@dxos/log": "0.8.4-main.84f28bd"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -40,14 +37,16 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "storybook": "^8.3.6",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/components/DocsContainer.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(wittjosiah): Not compatible with storybook 9.0.
+// import { DocsContainer as BaseContainer, type DocsContainerProps } from '@storybook/blocks';
+// import React, { type PropsWithChildren } from 'react';
+
+/**
+ * https://storybook.js.org/docs/writing-docs/doc-blocks
+ */
+// export const DocsContainer = ({ children, context, theme }: PropsWithChildren<DocsContainerProps>) => {
+//   return (
+//     <BaseContainer context={context} theme={theme}>
+//       {children}
+//     </BaseContainer>
+//   );
+// };

package/src/components/ThemeEditor.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { memo } from 'react';
+
+import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
+import { createComponent } from '@dxos/lit-ui/react';
+
+import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
+
+const DxThemeEditor = createComponent({
+  tagName: 'dx-theme-editor',
+  elementClass: NaturalDxThemeEditor,
+  react: React,
+});
+
+export const ThemeEditor = memo(DxThemeEditor);

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// export * from './DocsContainer';
+export * from './ThemeEditor';

package/src/decorators/index.ts

@@ -3,5 +3,5 @@
 //
 
 export * from './withLayout';
-export * from './withSignals';
 export * from './withTheme';
+export * from './withThemeEditor';

package/src/decorators/withLayout.tsx

@@ -36,7 +36,7 @@ export type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC
 export const withLayout = ({
   classNames,
   fullscreen,
-  Container = fullscreen ? FixedContainer : DefaultContainer,
+  Container = fullscreen ? FullscreenContainer : DefaultContainer,
   ...providedOptions
 }: WithLayoutProps = {}): Decorator => {
   // TODO(burdon): Inspect "fullscreen" parameter in context.
@@ -52,7 +52,10 @@ export const withLayout = ({
   };
 };
 
-export const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {
+// TODO(burdon): Use consistently.
+export const layoutCentered = 'bg-deckSurface justify-center overflow-y-auto';
+
+export const DefaultContainer = ({ children, classNames }: ContainerProps) => {
   return (
     <div role='none' className={mx(classNames)}>
       {children}
@@ -60,7 +63,7 @@ export const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) =
   );
 };
 
-export const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {
+export const FullscreenContainer = ({ children, classNames }: ContainerProps) => {
   return (
     <div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>
       {children}
@@ -68,12 +71,12 @@ export const FixedContainer: FC<ContainerProps> = ({ children, classNames }) =>
   );
 };
 
-export const ColumnContainer: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {
+export const ColumnContainer = ({ children, classNames = 'w-[30rem]', ...props }: ContainerProps) => {
   return (
-    <FixedContainer classNames='justify-center bg-modalSurface' {...props}>
+    <FullscreenContainer classNames='justify-center bg-modalSurface' {...props}>
       <div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>
         {children}
       </div>
-    </FixedContainer>
+    </FullscreenContainer>
   );
 };

package/src/decorators/withTheme.tsx

@@ -2,82 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import { addons } from '@storybook/preview-api';
 import { type Decorator } from '@storybook/react';
-import React, { memo, useCallback, useEffect, useState } from 'react';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import React, { memo } from 'react';
 
-import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
-import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
-import { createComponent } from '@dxos/lit-ui/react';
-import { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';
+import { type ThemeMode, ThemeProvider, Tooltip } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { PARAM_KEY } from '@dxos/theme-editor-addon';
-
-const DxThemeEditor = createComponent({
-  tagName: 'dx-theme-editor',
-  elementClass: NaturalDxThemeEditor,
-  react: React,
-});
 
 /**
- * Changes theme based on storybook toolbar toggle.
+ * Adds theme decorator.
  */
 export const withTheme: Decorator = (Story, context) => {
+  const {
+    globals: { theme },
+    parameters: { translations },
+  } = context;
+
   // Prevent re-rendering of the story.
   const MemoizedStory = memo(Story);
-  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
-  const [editorOpen, setEditorOpen] = useState(false);
-
-  const handleOpenChange = useCallback((nextOpen: boolean) => {
-    setEditorOpen(nextOpen);
-  }, []);
-
-  // https://www.npmjs.com/package/storybook-dark-mode
-  // NOTE: The `useDarkMode` hook causes the story to continually re-render.
-  // NOTE: Changing the theme will cause the story to remount.
-  useEffect(() => {
-    const handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');
-    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
-    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
-  }, []);
-
-  useEffect(() => {
-    const openEditor = () => {
-      handleOpenChange(true);
-    };
-    addons.getChannel().on(PARAM_KEY, openEditor);
-    return () => addons.getChannel().off(PARAM_KEY, openEditor);
-  }, []);
 
   return (
-    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>
+    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
       <Tooltip.Provider>
         <MemoizedStory />
-        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>
-          <div
-            role='none'
-            className='dx-dialog__overlay bg-transparent pointer-events-none'
-            style={{ placeContent: 'end' }}
-          >
-            <Dialog.Content
-              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'
-              style={{ maxBlockSize: '50dvh' }}
-              onInteractOutside={(event) => event.preventDefault()}
-            >
-              <Dialog.Title srOnly>Theme Editor</Dialog.Title>
-              {editorOpen && <DxThemeEditor />}
-              <Dialog.Close asChild>
-                <IconButton
-                  iconOnly
-                  icon='ph--x--regular'
-                  label='Close'
-                  classNames='absolute block-start-2 inline-end-2'
-                />
-              </Dialog.Close>
-            </Dialog.Content>
-          </div>
-        </Dialog.Root>
       </Tooltip.Provider>
     </ThemeProvider>
   );

package/src/decorators/withThemeEditor.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { memo } from 'react';
+
+import { ThemeEditor } from '../components';
+
+/**
+ * Show theme editor.
+ */
+// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.
+export const withThemeEditor: Decorator = (Story, context) => {
+  // Prevent re-rendering of the story.
+  const MemoizedStory = memo(Story);
+
+  return (
+    <>
+      <MemoizedStory />
+      <div className='absolute top-4 bottom-4 right-4 z-10'>
+        <div className='h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>
+          <ThemeEditor />
+        </div>
+      </div>
+    </>
+  );
+};

package/src/index.ts

@@ -6,6 +6,7 @@ import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 
 export { type Meta } from '@storybook/react';
 
+export * from './components';
 export * from './decorators';
 export * from './util';
 

package/src/stories/test/Test.stories.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { log } from '@dxos/log';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TEST_ID, Test, type TestProps } from './Test';
+
+/**
+ * Storybook sanity test.
+ */
+const meta: Meta<TestProps> = {
+  title: 'devtools/storybook-utils/Test',
+  component: Test,
+  render: (args) => <Test {...{ 'data-testid': TEST_ID }} {...args} />,
+  decorators: [withTheme],
+};
+
+export default meta;
+
+type Story = StoryObj<TestProps>;
+
+export const Default: Story = {
+  // Interactions tab.
+  // https://storybook.js.org/docs/writing-stories/play-function?renderer=react#writing-stories-with-the-play-function
+  play: async ({ args, canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(args.onClick).toHaveBeenCalled();
+    await expect(canvas.getByText(args.label)).toBeInTheDocument();
+  },
+  args: {
+    variant: 'primary',
+    icon: 'ph--rocket-launch--regular',
+    label: 'Composer',
+    onClick: fn(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A basic button component.',
+      },
+    },
+  },
+};
+
+export const WithLog: Story = {
+  args: {
+    icon: 'ph--rocket-launch--regular',
+    label: 'Test',
+    onClick: () => {
+      log.info('Hello, world!');
+    },
+  },
+};

package/src/stories/test/Test.test.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { composeStories } from '@storybook/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ThemeProvider } from '@dxos/react-ui';
+
+import { TEST_ID, Test } from './Test';
+import * as stories from './Test.stories';
+
+const { Default } = composeStories(stories);
+
+/**
+ * Vitest sanity test (should be visible in the storybook).
+ * https://storybook.js.org/docs/writing-tests/integrations/vitest-addon
+ */
+// TODO(burdon): Not working.
+describe('Test', () => {
+  it('should render', async () => {
+    await Default.run();
+    expect(screen.getByTestId(TEST_ID)).to.exist;
+  });
+
+  it('calls onClick when clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <ThemeProvider>
+        <Test id='test' icon='ph--x--regular' label='Test' onClick={handleClick} />
+      </ThemeProvider>,
+    );
+
+    fireEvent.click(container.querySelector('#test')!);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(screen.debug()).toMatchSnapshot();
+  });
+});

package/src/stories/test/Test.tsx

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { IconButton, type IconButtonProps } from '@dxos/react-ui';
+
+export const TEST_ID = 'test';
+
+export type TestProps = IconButtonProps;
+
+export const Test = (props: TestProps) => {
+  return <IconButton size={4} {...props} />;
+};

package/src/stories/test/__snapshots__/Test.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test > calls onClick when clicked 1`] = `undefined`;

package/src/stories/test/index.mdx

@@ -0,0 +1,14 @@
+{/* Copyright 2023 DXOS.org */}
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import * as TestStories from './Test.stories';
+
+<Meta title='MDX/Test' of={TestStories} />
+
+# Test
+
+Test `MDX` for the `Test` component.
+
+<Canvas>
+  <Story of={TestStories} />
+</Canvas>

package/src/vitest-setup.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// https://github.com/testing-library/jest-dom#with-vitest
+import '@testing-library/jest-dom/vitest';
+
+// https://github.com/jsdom/jsdom/issues/3368#issuecomment-1396749033
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

package/README.yml

@@ -1 +0,0 @@
-guideUrl: https://docs.dxos.org/guide/react/aurora/

package/dist/lib/node/index.cjs

@@ -1,170 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  ColumnContainer: () => ColumnContainer,
-  DefaultContainer: () => DefaultContainer,
-  FixedContainer: () => FixedContainer,
-  render: () => render,
-  withLayout: () => withLayout,
-  withSignals: () => withSignals,
-  withTheme: () => withTheme
-});
-module.exports = __toCommonJS(node_exports);
-var import_react = require("@dxos/echo-signals/react");
-var import_lodash = __toESM(require("lodash.defaultsdeep"));
-var import_react2 = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react3 = __toESM(require("react"));
-var import_react4 = require("@dxos/echo-signals/react");
-var import_preview_api = require("@storybook/preview-api");
-var import_react5 = __toESM(require("react"));
-var import_storybook_dark_mode = require("storybook-dark-mode");
-var import_lit_theme_editor = require("@dxos/lit-theme-editor");
-var import_dx_theme_editor = require("@dxos/lit-theme-editor/dx-theme-editor.pcss");
-var import_react6 = require("@dxos/lit-ui/react");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_theme_editor_addon = require("@dxos/theme-editor-addon");
-var import_react7 = __toESM(require("react"));
-var defaultOptions = {
-  density: "fine"
-};
-var providers = [
-  (children, options) => {
-    return options?.density ? /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DensityProvider, {
-      density: options.density
-    }, children) : children;
-  }
-];
-var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
-  return (Story, _context) => {
-    const children = /* @__PURE__ */ import_react2.default.createElement(Container, {
-      classNames,
-      fullscreen
-    }, /* @__PURE__ */ import_react2.default.createElement(Story, null));
-    const options = (0, import_lodash.default)({}, providedOptions, defaultOptions);
-    return providers.reduceRight((acc, provider) => provider(acc, options), children);
-  };
-};
-var DefaultContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)(classNames)
-  }, children);
-};
-var FixedContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("fixed inset-0 flex overflow-hidden", classNames)
-  }, children);
-};
-var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
-  return /* @__PURE__ */ import_react2.default.createElement(FixedContainer, {
-    classNames: "justify-center bg-modalSurface",
-    ...props
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
-  }, children));
-};
-var withSignals = (Story) => {
-  (0, import_react4.registerSignalsRuntime)();
-  return /* @__PURE__ */ import_react3.default.createElement(Story, null);
-};
-var DxThemeEditor = (0, import_react6.createComponent)({
-  tagName: "dx-theme-editor",
-  elementClass: import_lit_theme_editor.DxThemeEditor,
-  react: import_react5.default
-});
-var withTheme = (Story, context) => {
-  const MemoizedStory = /* @__PURE__ */ (0, import_react5.memo)(Story);
-  const [themeMode, setThemeMode] = (0, import_react5.useState)("dark");
-  const [editorOpen, setEditorOpen] = (0, import_react5.useState)(false);
-  const handleOpenChange = (0, import_react5.useCallback)((nextOpen) => {
-    setEditorOpen(nextOpen);
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
-    import_preview_api.addons.getChannel().on(import_storybook_dark_mode.DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
-    return () => import_preview_api.addons.getChannel().off(import_storybook_dark_mode.DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    const openEditor = () => {
-      handleOpenChange(true);
-    };
-    import_preview_api.addons.getChannel().on(import_theme_editor_addon.PARAM_KEY, openEditor);
-    return () => import_preview_api.addons.getChannel().off(import_theme_editor_addon.PARAM_KEY, openEditor);
-  }, []);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.ThemeProvider, {
-    tx: import_react_ui_theme2.defaultTx,
-    themeMode,
-    resourceExtensions: context?.parameters?.translations,
-    noCache: true
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react5.default.createElement(MemoizedStory, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Root, {
-    open: editorOpen,
-    onOpenChange: handleOpenChange,
-    modal: false
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
-    role: "none",
-    className: "dx-dialog__overlay bg-transparent pointer-events-none",
-    style: {
-      placeContent: "end"
-    }
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Content, {
-    classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
-    style: {
-      maxBlockSize: "50dvh"
-    },
-    onInteractOutside: (event) => event.preventDefault()
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Title, {
-    srOnly: true
-  }, "Theme Editor"), editorOpen && /* @__PURE__ */ import_react5.default.createElement(DxThemeEditor, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Close, {
-    asChild: true
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.IconButton, {
-    iconOnly: true,
-    icon: "ph--x--regular",
-    label: "Close",
-    classNames: "absolute block-start-2 inline-end-2"
-  })))))));
-};
-var render = (r) => (args) => /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, r(args) ?? /* @__PURE__ */ import_react7.default.createElement("div", null));
-(0, import_react.registerSignalsRuntime)();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ColumnContainer,
-  DefaultContainer,
-  FixedContainer,
-  render,
-  withLayout,
-  withSignals,
-  withTheme
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withSignals.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/util.tsx"],
-  "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, useCallback, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\nimport { createComponent } from '@dxos/lit-ui/react';\nimport { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\nimport { PARAM_KEY } from '@dxos/theme-editor-addon';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\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  const [editorOpen, setEditorOpen] = useState(false);\n\n  const handleOpenChange = useCallback((nextOpen: boolean) => {\n    setEditorOpen(nextOpen);\n  }, []);\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 handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n  }, []);\n\n  useEffect(() => {\n    const openEditor = () => {\n      handleOpenChange(true);\n    };\n    addons.getChannel().on(PARAM_KEY, openEditor);\n    return () => addons.getChannel().off(PARAM_KEY, openEditor);\n  }, []);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>\n          <div\n            role='none'\n            className='dx-dialog__overlay bg-transparent pointer-events-none'\n            style={{ placeContent: 'end' }}\n          >\n            <Dialog.Content\n              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'\n              style={{ maxBlockSize: '50dvh' }}\n              onInteractOutside={(event) => event.preventDefault()}\n            >\n              <Dialog.Title srOnly>Theme Editor</Dialog.Title>\n              {editorOpen && <DxThemeEditor />}\n              <Dialog.Close asChild>\n                <IconButton\n                  iconOnly\n                  icon='ph--x--regular'\n                  label='Close'\n                  classNames='absolute block-start-2 inline-end-2'\n                />\n              </Dialog.Close>\n            </Dialog.Content>\n          </div>\n        </Dialog.Root>\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAAuC;ACCvC,oBAAyB;AACzB,IAAAA,gBAAiE;AAEjE,sBAAoE;AACpE,4BAAmB;ACJnB,IAAAA,gBAAkB;AAElB,IAAAA,gBAAuC;ACHvC,yBAAuB;AAEvB,IAAAA,gBAA8D;AAC9D,iCAAqC;AAErC,8BAAsD;AACtD,6BAAO;AACP,IAAAA,gBAAgC;AAChC,IAAAC,mBAA2E;AAC3E,IAAAC,yBAA0B;AAC1B,gCAA0B;ACV1B,IAAAF,gBAA+B;AHY/B,IAAMG,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,8BAAAI,QAAA,cAACC,iCAAAA;MAAgBL,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAUK,IAAMI,aAAa,CAAC,EACzBC,YACAC,YACAC,YAAYD,aAAaE,iBAAiBC,kBAC1C,GAAGC,gBAAAA,IACgB,CAAC,MAAC;AAErB,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMZ,WACJ,8BAAAE,QAAA,cAACK,WAAAA;MAAUF;MAAwBC;OACjC,8BAAAJ,QAAA,cAACS,OAAAA,IAAAA,CAAAA;AAIL,UAAMV,cAAUY,cAAAA,SAAa,CAAC,GAAGH,iBAAiBb,cAAAA;AAClD,WAAOE,UAAUe,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKd,OAAAA,GAAUD,QAAAA;EAC1E;AACF;AAEO,IAAMS,mBAAuC,CAAC,EAAET,UAAUK,WAAU,MAAE;AAC3E,SACE,8BAAAH,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAGf,UAAAA;KAC5BL,QAAAA;AAGP;AAEO,IAAMQ,iBAAqC,CAAC,EAAER,UAAUK,WAAU,MAAE;AACzE,SACE,8BAAAH,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAG,sCAAsCf,UAAAA;KAClEL,QAAAA;AAGP;AAEO,IAAMqB,kBAAsC,CAAC,EAAErB,UAAUK,aAAa,aAAa,GAAGiB,MAAAA,MAAO;AAClG,SACE,8BAAApB,QAAA,cAACM,gBAAAA;IAAeH,YAAW;IAAkC,GAAGiB;KAC9D,8BAAApB,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAG,uDAAuDf,UAAAA;KACnFL,QAAAA,CAAAA;AAIT;AClEO,IAAMuB,cAAyB,CAACZ,UAAAA;AACrCa,4CAAAA;AACA,SAAOtB,8BAAAA,QAAA,cAACS,OAAAA,IAAAA;AACV;ACCA,IAAMc,oBAAgBC,+BAAgB;EACpCC,SAAS;EACTC,cAAcC,wBAAAA;EACdC,OAAO5B,cAAAA;AACT,CAAA;AAKO,IAAM6B,YAAuB,CAACpB,OAAOqB,YAAAA;AAE1C,QAAMC,gBAAgBC,wCAAKvB,KAAAA;AAC3B,QAAM,CAACwB,WAAWC,YAAAA,QAAgBC,wBAAoB,MAAA;AACtD,QAAM,CAACC,YAAYC,aAAAA,QAAiBF,wBAAS,KAAA;AAE7C,QAAMG,uBAAmBC,2BAAY,CAACC,aAAAA;AACpCH,kBAAcG,QAAAA;EAChB,GAAG,CAAA,CAAE;AAKLC,+BAAU,MAAA;AACR,UAAMC,uBAAuB,CAACC,aAAsBT,aAAaS,WAAW,SAAS,OAAA;AACrFC,8BAAOC,WAAU,EAAGC,GAAGC,iDAAsBL,oBAAAA;AAC7C,WAAO,MAAME,0BAAOC,WAAU,EAAGG,IAAID,iDAAsBL,oBAAAA;EAC7D,GAAG,CAAA,CAAE;AAELD,+BAAU,MAAA;AACR,UAAMQ,aAAa,MAAA;AACjBX,uBAAiB,IAAA;IACnB;AACAM,8BAAOC,WAAU,EAAGC,GAAGI,qCAAWD,UAAAA;AAClC,WAAO,MAAML,0BAAOC,WAAU,EAAGG,IAAIE,qCAAWD,UAAAA;EAClD,GAAG,CAAA,CAAE;AAEL,SACEjD,8BAAAA,QAAA,cAACmD,gCAAAA;IAAcC,IAAIC;IAAWpB;IAAsBqB,oBAAoBxB,SAASyB,YAAYC;IAAcC,SAAAA;KACzGzD,8BAAAA,QAAA,cAAC0D,yBAAQC,UAAQ,MACf3D,8BAAAA,QAAA,cAAC+B,eAAAA,IAAAA,GACD/B,8BAAAA,QAAA,cAAC4D,wBAAOC,MAAI;IAACC,MAAM1B;IAAY2B,cAAczB;IAAkB0B,OAAO;KACpEhE,8BAAAA,QAAA,cAACe,OAAAA;IACCC,MAAK;IACLC,WAAU;IACVgD,OAAO;MAAEC,cAAc;IAAM;KAE7BlE,8BAAAA,QAAA,cAAC4D,wBAAOO,SAAO;IACbhE,YAAW;IACX8D,OAAO;MAAEG,cAAc;IAAQ;IAC/BC,mBAAmB,CAACC,UAAUA,MAAMC,eAAc;KAElDvE,8BAAAA,QAAA,cAAC4D,wBAAOY,OAAK;IAACC,QAAAA;KAAO,cAAA,GACpBrC,cAAcpC,8BAAAA,QAAA,cAACuB,eAAAA,IAAAA,GAChBvB,8BAAAA,QAAA,cAAC4D,wBAAOc,OAAK;IAACC,SAAAA;KACZ3E,8BAAAA,QAAA,cAAC4E,6BAAAA;IACCC,UAAAA;IACAC,MAAK;IACLC,OAAM;IACN5E,YAAW;;AAS7B;AC1EO,IAAM6E,SACX,CAAKC,MACL,CAACC,SAAYlF,8BAAAA,QAAA,cAAAA,cAAAA,QAAA,UAAA,MAAGiF,EAAEC,IAAAA,KAASlF,8BAAAA,QAAA,cAACe,OAAAA,IAAAA,CAAAA;IJA9BO,aAAAA,wBAAAA;",
-  "names": ["import_react", "import_react_ui", "import_react_ui_theme", "defaultOptions", "density", "providers", "children", "options", "React", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FixedContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "div", "role", "className", "mx", "ColumnContainer", "props", "withSignals", "registerSignalsRuntime", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "withTheme", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "editorOpen", "setEditorOpen", "handleOpenChange", "useCallback", "nextOpen", "useEffect", "handleDarkModeUpdate", "darkMode", "addons", "getChannel", "on", "DARK_MODE_EVENT_NAME", "off", "openEditor", "PARAM_KEY", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "Tooltip", "Provider", "Dialog", "Root", "open", "onOpenChange", "modal", "style", "placeContent", "Content", "maxBlockSize", "onInteractOutside", "event", "preventDefault", "Title", "srOnly", "Close", "asChild", "IconButton", "iconOnly", "icon", "label", "render", "r", "args"]
-}