@dxos/plugin-testing 0.0.0 → 0.8.4-main.03d5cd7b56

package/src/operations/index.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const TestingOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./add-toast'),
+  () => import('./close'),
+  () => import('./open'),
+  () => import('./scroll-into-view'),
+  () => import('./set-layout-mode'),
+  () => import('./switch-workspace'),
+  () => import('./update-complementary'),
+  () => import('./update-dialog'),
+  () => import('./update-popover'),
+  () => import('./update-sidebar'),
+);

package/src/operations/open.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperation.Open.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      return input.subject;
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/scroll-into-view.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.ScrollIntoView> = LayoutOperation.ScrollIntoView.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/operations/set-layout-mode.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SetLayoutMode> = LayoutOperation.SetLayoutMode.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/operations/switch-workspace.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = LayoutOperation.SwitchWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject }) {
+      yield* updateState(() => ({ workspace: subject }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-complementary.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateComplementary> =
+  LayoutOperation.UpdateComplementary.pipe(
+    Operation.withHandler(
+      Effect.fnUntraced(function* ({ state }) {
+        yield* updateState((layout) => {
+          const next = state ?? layout.complementarySidebarState;
+          if (next !== layout.complementarySidebarState) {
+            return { complementarySidebarState: next };
+          }
+          return {};
+        });
+      }),
+    ),
+  );
+
+export default handler;

package/src/operations/update-dialog.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateDialog> = LayoutOperation.UpdateDialog.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject, state, type, blockAlign, overlayClasses, overlayStyle, props }) {
+      yield* updateState(() => ({
+        dialogOpen: state ?? Boolean(subject),
+        dialogType: type ?? 'default',
+        dialogBlockAlign: blockAlign ?? 'center',
+        dialogOverlayClasses: overlayClasses,
+        dialogOverlayStyle: overlayStyle,
+        dialogContent: subject ? { component: subject, props } : null,
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-popover.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { StorybookCapabilities } from '../types';
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdatePopover> = LayoutOperation.UpdatePopover.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { subject, state, side, kind, props } = input;
+      yield* updateState(() => {
+        const base: Partial<StorybookCapabilities.LayoutStateProps> = {
+          popoverKind: kind ?? 'base',
+          popoverTitle: kind === 'card' ? input.title : undefined,
+          popoverContent:
+            typeof subject === 'string' ? { component: subject, props } : subject ? { subject } : undefined,
+          popoverOpen: state ?? Boolean(subject),
+          popoverSide: side,
+        };
+        if ('variant' in input && input.variant === 'virtual') {
+          return { ...base, popoverVariant: 'virtual', popoverAnchor: input.anchor };
+        } else if ('anchorId' in input) {
+          return { ...base, popoverVariant: 'react', popoverAnchorId: input.anchorId };
+        }
+        return base;
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-sidebar.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateSidebar> = LayoutOperation.UpdateSidebar.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ state }) {
+      yield* updateState((layout) => {
+        const next = state ?? layout.sidebarState;
+        if (next !== layout.sidebarState) {
+          return { sidebarState: next };
+        }
+        return {};
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-state.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+
+import { StorybookCapabilities } from '../types';
+
+export const updateState = (
+  fn: (state: StorybookCapabilities.LayoutStateProps) => Partial<StorybookCapabilities.LayoutStateProps>,
+) =>
+  Effect.gen(function* () {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const stateAtom = yield* Capability.get(StorybookCapabilities.LayoutState);
+    const current = registry.get(stateAtom);
+    registry.set(stateAtom, { ...current, ...fn(current) });
+  });

package/src/plugin.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const StorybookPlugin = Plugin.lazy(meta, () => import('#plugin'));
+export type { StorybookPluginOptions } from '#plugin';
+
+export { TestingOperationHandlerSet } from './operations';

package/src/types/{capabilities.ts → StorybookCapabilities.ts}

@@ -2,11 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
+// @import-as-namespace
+
+import { type Atom } from '@effect-atom/atom-react';
+
 import { Capability } from '@dxos/app-framework';
+import { type LayoutOperation } from '@dxos/app-toolkit';
+import { type Label } from '@dxos/react-ui';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
-export type LayoutState = {
+export type LayoutStateProps = {
   sidebarState?: 'expanded' | 'collapsed' | 'closed';
   complementarySidebarState?: 'expanded' | 'collapsed' | 'closed';
 
@@ -23,9 +29,13 @@ export type LayoutState = {
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
+  popoverKind?: 'base' | 'card';
+  popoverTitle?: Label;
   popoverContent?: any;
 
+  toasts: LayoutOperation.Toast[];
+
   workspace: string;
 };
 
-export const LayoutState = Capability.make<LayoutState>(`${meta.id}/state`);
+export const LayoutState = Capability.make<Atom.Writable<LayoutStateProps>>(`${meta.id}.state`);

package/src/types/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './capabilities';
+export * as StorybookCapabilities from './StorybookCapabilities';

package/src/capabilities/operation-resolver/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const OperationResolver = Capability.lazy('OperationResolver', () => import('./operation-resolver'));

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -1,82 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { OperationResolver } from '@dxos/operation';
-
-import { LayoutState } from '../../types';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateSidebar,
-        handler: Effect.fnUntraced(function* ({ state }) {
-          const layout = yield* Capability.get(LayoutState);
-          const next = state ?? layout.sidebarState;
-          if (next !== layout.sidebarState) {
-            layout.sidebarState = next;
-          }
-        }),
-      }),
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateComplementary,
-        handler: Effect.fnUntraced(function* ({ state }) {
-          const layout = yield* Capability.get(LayoutState);
-          const next = state ?? layout.complementarySidebarState;
-          if (next !== layout.complementarySidebarState) {
-            layout.complementarySidebarState = next;
-          }
-        }),
-      }),
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateDialog,
-        handler: Effect.fnUntraced(function* ({
-          subject,
-          state,
-          type,
-          blockAlign,
-          overlayClasses,
-          overlayStyle,
-          props,
-        }) {
-          const layout = yield* Capability.get(LayoutState);
-          layout.dialogOpen = state ?? Boolean(subject);
-          layout.dialogType = type ?? 'default';
-          layout.dialogBlockAlign = blockAlign ?? 'center';
-          layout.dialogOverlayClasses = overlayClasses;
-          layout.dialogOverlayStyle = overlayStyle;
-          layout.dialogContent = subject ? { component: subject, props } : null;
-        }),
-      }),
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdatePopover,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(LayoutState);
-          const { subject, state, side, props } = input;
-          layout.popoverContent =
-            typeof subject === 'string' ? { component: subject, props } : subject ? { subject } : undefined;
-          layout.popoverOpen = state ?? Boolean(subject);
-          layout.popoverSide = side;
-          if ('variant' in input && input.variant === 'virtual') {
-            layout.popoverVariant = 'virtual';
-            layout.popoverAnchor = input.anchor;
-          } else if ('anchorId' in input) {
-            layout.popoverVariant = 'react';
-            layout.popoverAnchorId = input.anchorId;
-          }
-        }),
-      }),
-      OperationResolver.make({
-        operation: Common.LayoutOperation.SwitchWorkspace,
-        handler: Effect.fnUntraced(function* ({ subject }) {
-          const layout = yield* Capability.get(LayoutState);
-          layout.workspace = subject;
-        }),
-      }),
-    ]);
-  }),
-);

package/src/capabilities/state/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const State = Capability.lazy('State', () => import('./state'));

package/src/capabilities/state/state.tsx

@@ -1,53 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
-
-import { LayoutState } from '../../types';
-
-const defaultState: LayoutState = {
-  sidebarState: 'closed',
-  complementarySidebarState: 'closed',
-  dialogOpen: false,
-  workspace: 'default',
-};
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* (props?: { initialState?: Partial<LayoutState> }) {
-    const { initialState } = props ?? {};
-    const state = live<LayoutState>({ ...defaultState, ...initialState });
-
-    const layout = live<Common.Capability.Layout>({
-      get mode() {
-        return 'storybook';
-      },
-      get dialogOpen() {
-        return state.dialogOpen;
-      },
-      get sidebarOpen() {
-        return state.sidebarState === 'expanded';
-      },
-      get complementarySidebarOpen() {
-        return state.complementarySidebarState === 'expanded';
-      },
-      get workspace() {
-        return state.workspace;
-      },
-      get active() {
-        return [];
-      },
-      get inactive() {
-        return [];
-      },
-      get scrollIntoView() {
-        return undefined;
-      },
-    });
-
-    return [Capability.contributes(LayoutState, state), Capability.contributes(Common.Capability.Layout, layout)];
-  }),
-);

package/src/components/Layout.tsx

@@ -1,132 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-
-import { Surface, useCapability } from '@dxos/app-framework/react';
-import {
-  AlertDialog,
-  Dialog,
-  Main,
-  Popover,
-  type PopoverContentInteractOutsideEvent,
-  useTranslation,
-} from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-import { LayoutState } from '../types';
-
-const debounce_delay = 100;
-
-// TODO(wittjosiah): Support dialogs, tooltips, maybe toast.
-export const Layout = ({ children }: PropsWithChildren<{}>) => {
-  const trigger = useRef<HTMLButtonElement | null>(null);
-  const layout = useCapability(LayoutState);
-  const [iter, setIter] = useState(0);
-  const [open, setOpen] = useState(false);
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    setOpen(false);
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-      debounceRef.current = null;
-    }
-    trigger.current = layout.popoverAnchor ?? null;
-    setIter((iter) => iter + 1);
-    if (layout.popoverOpen) {
-      debounceRef.current = setTimeout(() => setOpen(true), debounce_delay);
-    }
-  }, [layout.popoverAnchor, layout.popoverContent, layout.popoverOpen]);
-
-  const handleInteractOutside = useCallback((event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
-    if (
-      // TODO(thure): CodeMirror should not focus itself when it updates.
-      event.type === 'dismissableLayer.focusOutside' &&
-      (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
-    ) {
-      event.preventDefault();
-    } else {
-      setOpen(false);
-      layout.popoverOpen = false;
-      layout.popoverAnchor = undefined;
-      layout.popoverAnchorId = undefined;
-      layout.popoverSide = undefined;
-    }
-  }, []);
-
-  const DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : Dialog.Root;
-  const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : Dialog.Overlay;
-
-  return (
-    <div role='none' className='fixed inset-0 flex overflow-hidden'>
-      <Popover.Root open={open}>
-        <Main.Root
-          navigationSidebarState={layout.sidebarState}
-          complementarySidebarState={layout.complementarySidebarState}
-          onNavigationSidebarStateChange={(next) => (layout.sidebarState = next)}
-          onComplementarySidebarStateChange={(next) => (layout.complementarySidebarState = next)}
-        >
-          {children}
-        </Main.Root>
-
-        <DialogRoot
-          modal={layout.dialogBlockAlign !== 'end'}
-          open={layout.dialogOpen}
-          onOpenChange={(nextOpen) => (layout.dialogOpen = nextOpen)}
-        >
-          {layout.dialogBlockAlign === 'end' ? (
-            <Surface
-              role='dialog'
-              data={layout.dialogContent}
-              limit={1}
-              fallback={ContentError}
-              placeholder={<div />}
-            />
-          ) : (
-            <DialogOverlay
-              blockAlign={layout.dialogBlockAlign}
-              classNames={layout.dialogOverlayClasses}
-              style={layout.dialogOverlayStyle}
-            >
-              <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} />
-            </DialogOverlay>
-          )}
-        </DialogRoot>
-
-        <Popover.VirtualTrigger key={iter} virtualRef={trigger} />
-        <Popover.Portal>
-          <Popover.Content
-            side={layout.popoverSide}
-            onInteractOutside={handleInteractOutside}
-            onEscapeKeyDown={handleInteractOutside}
-            sticky='always'
-            hideWhenDetached
-          >
-            <Popover.Viewport>
-              <Surface role='card--popover' data={layout.popoverContent} limit={1} />
-            </Popover.Viewport>
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    </div>
-  );
-};
-
-export const ContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(meta.id);
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'break-words rounded-md p-8', errorString.length < 256 && 'text-lg')}
-      >
-        {error ? errorString : t('error fallback message')}
-      </p>
-    </div>
-  );
-};