@dxos/storybook-utils 0.8.4-main.fffef41 → 0.9.0

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@dxos/storybook-utils",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.9.0",
   "description": "Utilities for DXOS UI Storybooks.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
@@ -17,37 +21,29 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@radix-ui/react-use-controllable-state": "1.1.0",
-    "lodash.defaultsdeep": "^4.6.1",
-    "storybook": "^10.0.7",
-    "@dxos/lit-theme-editor": "0.8.4-main.fffef41",
-    "@dxos/echo-signals": "0.8.4-main.fffef41",
-    "@dxos/lit-ui": "0.8.4-main.fffef41",
-    "@dxos/log": "0.8.4-main.fffef41",
-    "@dxos/react-ui-dnd": "0.8.4-main.fffef41"
+    "@effect-atom/atom-react": "^0.5.0",
+    "storybook": "10.2.0",
+    "@dxos/log": "0.9.0"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "@dxos/react-ui": "0.8.4-main.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/ui-theme": "0.9.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/ui-theme": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/index.ts

@@ -1,7 +1,3 @@
 //
 // Copyright 2022 DXOS.org
 //
-
-// export * from './DocsContainer';
-export * from './ThemeEditor';
-export * from './CardContainers';

package/src/decorators/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './withLayout';
-export * from './withThemeEditor';
+export * from './withRegistry';

package/src/decorators/withLayout.tsx

@@ -9,7 +9,7 @@ export const withLayout: Decorator = (Story, context) => {
   switch (context.parameters.layout) {
     case 'fullscreen':
       return (
-        <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-baseSurface'>
+        <div className='fixed inset-0 flex flex-col overflow-hidden bg-base-surface'>
           <Story />
         </div>
       );

package/src/decorators/withRegistry.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Registry, RegistryContext } from '@effect-atom/atom-react';
+import { type Decorator } from '@storybook/react';
+import React, { memo, useMemo } from 'react';
+
+/**
+ * Adds Effect Atom registry context for storybook.
+ */
+export const withRegistry: Decorator = (Story) => {
+  const registry = useMemo(() => Registry.make(), []);
+
+  // Prevent re-rendering of the story.
+  const MemoizedStory = memo(Story);
+
+  return (
+    <RegistryContext.Provider value={registry}>
+      <MemoizedStory />
+    </RegistryContext.Provider>
+  );
+};

package/src/index.ts

@@ -2,10 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-
-export * from './components';
 export * from './decorators';
-export * from './util';
-
-registerSignalsRuntime();

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

@@ -14,13 +14,13 @@ import { TEST_ID, Test } from './Test';
 /**
  * Storybook sanity test.
  */
-const meta = {
+const meta: Meta<typeof Test> = {
   title: 'common/storybook-utils/Test',
   component: Test,
   render: (args) => <Test {...{ 'data-testid': TEST_ID }} {...args} />,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   tags: ['test'],
-} satisfies Meta<typeof Test>;
+};
 
 export default meta;
 

package/dist/types/src/components/CardContainers/ExtrinsicCardContainer.d.ts

@@ -1,12 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type Size } from '@dxos/react-ui-dnd';
-export type ExtrinsicCardContainerProps = PropsWithChildren<{
-    defaultInlineSize?: Size;
-    inlineSize?: Size;
-    defaultBlockSize?: Size;
-    blockSize?: Size;
-    onInlineSizeChange?: (size: Size, commit?: boolean) => void;
-    onBlockSizeChange?: (size: Size, commit?: boolean) => void;
-}>;
-export declare const ExtrinsicCardContainer: ({ children, defaultInlineSize, inlineSize: propInlineSize, defaultBlockSize, blockSize: propBlockSize, onInlineSizeChange, onBlockSizeChange, }: ExtrinsicCardContainerProps) => React.JSX.Element;
-//# sourceMappingURL=ExtrinsicCardContainer.d.ts.map

package/dist/types/src/components/CardContainers/ExtrinsicCardContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExtrinsicCardContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardContainers/ExtrinsicCardContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAgB,KAAK,IAAI,EAA+B,MAAM,oBAAoB,CAAC;AAQ1F,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,CAAC;IAC1D,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D,CAAC,CAAC;AAEH,eAAO,MAAM,sBAAsB,GAAI,iJAQpC,2BAA2B,sBAuC7B,CAAC"}

package/dist/types/src/components/CardContainers/IntrinsicCardContainer.d.ts

@@ -1,9 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type Size } from '@dxos/react-ui-dnd';
-export type IntrinsicCardContainerProps = PropsWithChildren<{
-    defaultSize?: Size;
-    size?: Size;
-    onSizeChange?: (size: Size, commit?: boolean) => void;
-}>;
-export declare const IntrinsicCardContainer: ({ children, defaultSize, size: propSize, onSizeChange, }: IntrinsicCardContainerProps) => React.JSX.Element;
-//# sourceMappingURL=IntrinsicCardContainer.d.ts.map

package/dist/types/src/components/CardContainers/IntrinsicCardContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntrinsicCardContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardContainers/IntrinsicCardContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAgB,KAAK,IAAI,EAA+B,MAAM,oBAAoB,CAAC;AAM1F,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,CAAC;IAC1D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC,CAAC;AAEH,eAAO,MAAM,sBAAsB,GAAI,0DAKpC,2BAA2B,sBAuB7B,CAAC"}

package/dist/types/src/components/CardContainers/PopoverCardContainer.d.ts

@@ -1,5 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export declare const PopoverCardContainer: ({ children, icon, }: PropsWithChildren<{
-    icon: string;
-}>) => React.JSX.Element;
-//# sourceMappingURL=PopoverCardContainer.d.ts.map

package/dist/types/src/components/CardContainers/PopoverCardContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopoverCardContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardContainers/PopoverCardContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,eAAO,MAAM,oBAAoB,GAAI,qBAGlC,iBAAiB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,sBAYrC,CAAC"}

package/dist/types/src/components/CardContainers/index.d.ts

@@ -1,4 +0,0 @@
-export * from './ExtrinsicCardContainer';
-export * from './IntrinsicCardContainer';
-export * from './PopoverCardContainer';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/CardContainers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardContainers/index.ts"],"names":[],"mappings":"AAIA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC"}

package/dist/types/src/components/ThemeEditor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
-import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
-export declare const ThemeEditor: React.NamedExoticComponent<Omit<React.HTMLAttributes<NaturalDxThemeEditor>, "connectedCallback" | "disconnectedCallback" | "render" | "createRenderRoot" | "renderOptions" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete"> & {} & Partial<Omit<NaturalDxThemeEditor, keyof HTMLElement>> & React.RefAttributes<NaturalDxThemeEditor>>;
-//# sourceMappingURL=ThemeEditor.d.ts.map

package/dist/types/src/components/ThemeEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,6CAA6C,CAAC;AAQrD,eAAO,MAAM,WAAW,mbAAsB,CAAC"}

package/dist/types/src/decorators/withThemeEditor.d.ts

@@ -1,6 +0,0 @@
-import { type Decorator } from '@storybook/react';
-/**
- * Show theme editor.
- */
-export declare const withThemeEditor: Decorator;
-//# sourceMappingURL=withThemeEditor.d.ts.map

package/dist/types/src/decorators/withThemeEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,SAc7B,CAAC"}

package/dist/types/src/util.d.ts

@@ -1,6 +0,0 @@
-import React, { type FC } from 'react';
-/**
- * Story renderer wrapper.
- */
-export declare const render: <T extends Record<string, any>>(Story: FC<T>) => (args: unknown) => React.JSX.Element;
-//# sourceMappingURL=util.d.ts.map

package/dist/types/src/util.d.ts.map

@@ -1 +0,0 @@
-{"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,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,MAC3C,MAAM,OAAO,sBAGb,CAAC"}

package/src/components/CardContainers/ExtrinsicCardContainer.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type PropsWithChildren } from 'react';
-
-import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
-
-// Default size in rem.
-const DEFAULT_INLINE_SIZE = 24;
-const MIN_INLINE_SIZE = 8;
-const DEFAULT_BLOCK_SIZE = 24;
-const MIN_BLOCK_SIZE = 8;
-
-export type ExtrinsicCardContainerProps = PropsWithChildren<{
-  defaultInlineSize?: Size;
-  inlineSize?: Size;
-  defaultBlockSize?: Size;
-  blockSize?: Size;
-  onInlineSizeChange?: (size: Size, commit?: boolean) => void;
-  onBlockSizeChange?: (size: Size, commit?: boolean) => void;
-}>;
-
-export const ExtrinsicCardContainer = ({
-  children,
-  defaultInlineSize,
-  inlineSize: propInlineSize,
-  defaultBlockSize,
-  blockSize: propBlockSize,
-  onInlineSizeChange,
-  onBlockSizeChange,
-}: ExtrinsicCardContainerProps) => {
-  const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({
-    prop: propInlineSize,
-    defaultProp: defaultInlineSize,
-    onChange: onInlineSizeChange,
-  });
-
-  const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({
-    prop: propBlockSize,
-    defaultProp: defaultBlockSize,
-    onChange: onBlockSizeChange,
-  });
-
-  return (
-    <div
-      className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'
-      style={{
-        ...sizeStyle(inlineSize, 'horizontal'),
-        ...sizeStyle(blockSize, 'vertical'),
-      }}
-      {...resizeAttributes}
-    >
-      {children}
-      <ResizeHandle
-        side='inline-end'
-        fallbackSize={DEFAULT_INLINE_SIZE}
-        minSize={MIN_INLINE_SIZE}
-        size={inlineSize}
-        onSizeChange={setInlineSize}
-      />
-      <ResizeHandle
-        side='block-end'
-        fallbackSize={DEFAULT_BLOCK_SIZE}
-        minSize={MIN_BLOCK_SIZE}
-        size={blockSize}
-        onSizeChange={setBlockSize}
-      />
-    </div>
-  );
-};

package/src/components/CardContainers/IntrinsicCardContainer.tsx

@@ -1,48 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type PropsWithChildren } from 'react';
-
-import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
-
-// Default size in rem
-const DEFAULT_SIZE = 24;
-const MIN_SIZE = 8;
-
-export type IntrinsicCardContainerProps = PropsWithChildren<{
-  defaultSize?: Size;
-  size?: Size;
-  onSizeChange?: (size: Size, commit?: boolean) => void;
-}>;
-
-export const IntrinsicCardContainer = ({
-  children,
-  defaultSize,
-  size: propSize,
-  onSizeChange,
-}: IntrinsicCardContainerProps) => {
-  const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({
-    prop: propSize,
-    defaultProp: defaultSize,
-    onChange: onSizeChange,
-  });
-
-  return (
-    <div
-      className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'
-      style={sizeStyle(size, 'horizontal')}
-      {...resizeAttributes}
-    >
-      {children}
-      <ResizeHandle
-        side='inline-end'
-        fallbackSize={DEFAULT_SIZE}
-        minSize={MIN_SIZE}
-        size={size}
-        onSizeChange={setSize}
-      />
-    </div>
-  );
-};

package/src/components/CardContainers/PopoverCardContainer.tsx

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { Icon, Popover } from '@dxos/react-ui';
-
-export const PopoverCardContainer = ({
-  children,
-  icon = 'ph--placeholder--regular',
-}: PropsWithChildren<{ icon: string }>) => {
-  return (
-    <Popover.Root open>
-      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
-        <Popover.Viewport>{children}</Popover.Viewport>
-        <Popover.Arrow />
-      </Popover.Content>
-      <Popover.Trigger>
-        <Icon icon={icon} size={5} />
-      </Popover.Trigger>
-    </Popover.Root>
-  );
-};

package/src/components/CardContainers/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './ExtrinsicCardContainer';
-export * from './IntrinsicCardContainer';
-export * from './PopoverCardContainer';

package/src/components/ThemeEditor.tsx

@@ -1,18 +0,0 @@
-//
-// 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/decorators/withThemeEditor.tsx

@@ -1,28 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Decorator } from '@storybook/react';
-import React, { memo } from 'react';
-
-import { ThemeEditor } from '../components/ThemeEditor';
-
-/**
- * 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='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>
-          <ThemeEditor />
-        </div>
-      </div>
-    </>
-  );
-};

package/src/util.tsx

@@ -1,15 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-/**
- * Story renderer wrapper.
- */
-export const render =
-  <T extends Record<string, any>>(Story: FC<T>) =>
-  (args: unknown) => {
-    const result = <Story {...(args as T)} />;
-    return result ?? <div />;
-  };