@dxos/plugin-sheet 0.6.11 → 0.6.12-main.568932b

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.11",
+  "version": "0.6.12-main.568932b",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "imports": {
+    "#hyperformula": {
+      "types": "hyperformula",
+      "default": "./dist/vendor/hyperformula.mjs"
+    }
+  },
   "exports": {
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "default": "./dist/lib/node/index.cjs"
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "default": "./dist/lib/node/meta.cjs"
+        "require": "./dist/lib/node/meta.cjs",
+        "default": "./dist/lib/node-esm/meta.mjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
-    "./testing": {
-      "browser": "./dist/lib/browser/testing.mjs",
-      "node": {
-        "default": "./dist/lib/node/testing.cjs"
-      },
-      "types": "./dist/types/src/testing.d.ts"
-    },
     "./types": {
       "browser": "./dist/lib/browser/types.mjs",
       "node": {
-        "default": "./dist/lib/node/types.cjs"
+        "require": "./dist/lib/node/types.cjs",
+        "default": "./dist/lib/node-esm/types.mjs"
       },
       "types": "./dist/types/src/types.d.ts"
     }
@@ -55,16 +57,17 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.29.1",
+    "@codemirror/view": "^6.34.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0",
+    "@effect/schema": "^0.75.1",
+    "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact/signals-core": "^1.6.0",
@@ -76,25 +79,29 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.11",
-    "@dxos/async": "0.6.11",
-    "@dxos/context": "0.6.11",
-    "@dxos/client": "0.6.11",
-    "@dxos/crypto": "0.6.11",
-    "@dxos/debug": "0.6.11",
-    "@dxos/echo-schema": "0.6.11",
-    "@dxos/invariant": "0.6.11",
-    "@dxos/keys": "0.6.11",
-    "@dxos/plugin-client": "0.6.11",
-    "@dxos/log": "0.6.11",
-    "@dxos/plugin-graph": "0.6.11",
-    "@dxos/plugin-script": "0.6.11",
-    "@dxos/plugin-space": "0.6.11",
-    "@dxos/plugin-stack": "0.6.11",
-    "@dxos/react-ui-attention": "0.6.11",
-    "@dxos/react-client": "0.6.11",
-    "@dxos/react-ui-editor": "0.6.11",
-    "@dxos/util": "0.6.11"
+    "@dxos/app-framework": "0.6.12-main.568932b",
+    "@dxos/async": "0.6.12-main.568932b",
+    "@dxos/client": "0.6.12-main.568932b",
+    "@dxos/crypto": "0.6.12-main.568932b",
+    "@dxos/context": "0.6.12-main.568932b",
+    "@dxos/debug": "0.6.12-main.568932b",
+    "@dxos/echo-schema": "0.6.12-main.568932b",
+    "@dxos/invariant": "0.6.12-main.568932b",
+    "@dxos/plugin-attention": "0.6.12-main.568932b",
+    "@dxos/keys": "0.6.12-main.568932b",
+    "@dxos/log": "0.6.12-main.568932b",
+    "@dxos/plugin-client": "0.6.12-main.568932b",
+    "@dxos/plugin-graph": "0.6.12-main.568932b",
+    "@dxos/plugin-markdown": "0.6.12-main.568932b",
+    "@dxos/plugin-space": "0.6.12-main.568932b",
+    "@dxos/react-client": "0.6.12-main.568932b",
+    "@dxos/plugin-stack": "0.6.12-main.568932b",
+    "@dxos/react-hooks": "0.6.12-main.568932b",
+    "@dxos/react-ui-editor": "0.6.12-main.568932b",
+    "@dxos/react-ui-attention": "0.6.12-main.568932b",
+    "@dxos/plugin-script": "0.6.12-main.568932b",
+    "@dxos/react-ui-grid": "0.6.12-main.568932b",
+    "@dxos/util": "0.6.12-main.568932b"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -106,20 +113,21 @@
     "@types/react-window": "^1.8.8",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.11",
-    "@dxos/random": "0.6.11",
-    "@dxos/react-ui": "0.6.11",
-    "@dxos/react-ui-types": "0.6.11",
-    "@dxos/storybook-utils": "0.6.11",
-    "@dxos/react-ui-theme": "0.6.11"
+    "vite": "5.4.7",
+    "@dxos/echo-generator": "0.6.12-main.568932b",
+    "@dxos/random": "0.6.12-main.568932b",
+    "@dxos/react-ui": "0.6.12-main.568932b",
+    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.568932b",
+    "@dxos/react-ui-theme": "0.6.12-main.568932b",
+    "@dxos/react-ui-types": "0.6.12-main.568932b",
+    "@dxos/storybook-utils": "0.6.12-main.568932b"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui-theme": "0.6.11",
-    "@dxos/react-ui": "0.6.11"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.12-main.568932b",
+    "@dxos/react-ui-theme": "0.6.12-main.568932b"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -2,84 +2,71 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps, GridNine } from '@phosphor-icons/react';
+import { GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import {
-  NavigationAction,
-  parseIntentPlugin,
-  resolvePlugin,
-  type PluginDefinition,
-  type LayoutCoordinate,
-} from '@dxos/app-framework';
-import { create } from '@dxos/echo-schema';
+import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 
-import {
-  createComputeGraph,
-  CustomPlugin,
-  CustomPluginTranslations,
-  SheetContainer,
-  type ComputeGraph,
-} from './components';
-// TODO(wittjosiah): Refactor. These are not exported from ./components due to depending on ECHO.
-import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './components/ComputeGraph/edge-function';
-import { ComputeGraphContextProvider } from './components/ComputeGraph/graph-context';
+import { ComputeGraphContextProvider, SheetContainer } from './components';
+import { compareIndexPositions, createSheet } from './defs';
+import { computeGraphFacet } from './extensions';
+import { type ComputeGraphRegistry } from './graph';
+import { useComputeGraph } from './hooks';
 import meta, { SHEET_PLUGIN } from './meta';
-import { SheetModel } from './model';
 import translations from './translations';
-import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
+import { SheetAction, SheetType, type SheetPluginProvides } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let remoteFunctionUrl: string | undefined;
-
-  const graphs = create<Record<string, ComputeGraph>>({});
-  const setGraph = (key: string, graph: ComputeGraph) => {
-    graphs[key] = graph;
-  };
+  let computeGraphRegistry: ComputeGraphRegistry | undefined;
 
   return {
     meta,
     ready: async (plugins) => {
       const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      if (!client) {
-        return;
-      }
-
+      invariant(client);
+      let remoteFunctionUrl: string | undefined;
       if (client.config.values.runtime?.services?.edge?.url) {
         const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
         url.protocol = 'https';
         remoteFunctionUrl = url.toString();
       }
+
+      // Async import removes direct dependency on hyperformula.
+      const { ComputeGraphRegistry } = await import('./graph');
+      computeGraphRegistry = new ComputeGraphRegistry({ remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
-        return (
-          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
-            {children}
-          </ComputeGraphContextProvider>
-        );
+        invariant(computeGraphRegistry);
+        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
-            icon: (props: IconProps) => <GridNine {...props} />,
-            iconSymbol: 'ph--grid-nine--regular',
+            icon: 'ph--grid-nine--regular',
           },
         },
       },
       translations,
       echo: {
         // TODO(wittjosiah): Factor out to common package/plugin.
-        //   FunctionType is currently registered here in case script plugin isn't enabled.
+        //  FunctionType is currently registered here in case script plugin isn't enabled.
         schema: [SheetType, FunctionType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create sheet label', { ns: SHEET_PLUGIN }],
+          action: SheetAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -113,8 +100,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
                   },
                   properties: {
                     label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: (props: IconProps) => <GridNine {...props} />,
-                    iconSymbol: 'ph--grid-nine--regular',
+                    icon: 'ph--grid-nine--regular',
                     testId: 'sheetPlugin.createObject',
                   },
                 },
@@ -123,6 +109,16 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           });
         },
       },
+      markdown: {
+        extensions: ({ document: doc }) => {
+          invariant(computeGraphRegistry);
+          const space = getSpace(doc);
+          if (space) {
+            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+            return computeGraphFacet.of(computeGraph);
+          }
+        },
+      },
       stack: {
         creators: [
           {
@@ -138,23 +134,20 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           },
         ],
       },
+      thread: {
+        predicate: (data) => data instanceof SheetType,
+        createSort: (sheet) => (indexA, indexB) =>
+          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
+      },
       surface: {
-        component: ({ data, role = 'never' }) => {
-          // TODO(burdon): Standardize wrapper (with room for toolbar).
-          const space = isEchoObject(data.object) && getSpace(data.object);
-          if (space && data.object instanceof SheetType) {
+        component: ({ data, role }) => {
+          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
+          const graph = useComputeGraph(space);
+          if (graph && data.object instanceof SheetType) {
             switch (role) {
               case 'article':
               case 'section': {
-                return (
-                  <SheetContainer
-                    sheet={data.object}
-                    space={space}
-                    role={role}
-                    coordinate={data.coordinate as LayoutCoordinate}
-                    remoteFunctionUrl={remoteFunctionUrl}
-                  />
-                );
+                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
               }
             }
           }
@@ -166,23 +159,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case SheetAction.CREATE: {
-              const space = intent.data?.space;
-              const sheet = createSheet();
-              const graph =
-                graphs[space.id] ??
-                createComputeGraph(
-                  [
-                    { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
-                    // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
-                    { plugin: CustomPlugin, translations: CustomPluginTranslations },
-                  ],
-                  space,
-                  { remoteFunctionUrl },
-                );
-              const model = new SheetModel(graph, sheet);
-              await model.initialize();
-              await model.destroy();
-              return { data: sheet };
+              return { data: createSheet() };
             }
           }
         },

package/src/components/CellEditor/CellEditor.stories.tsx

@@ -4,7 +4,6 @@
 
 import '@dxos-theme';
 
-import { HyperFormula } from 'hyperformula';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
@@ -12,10 +11,12 @@ import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
 import { automerge } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
+import { HyperFormula } from '#hyperformula';
 import { CellEditor, type CellEditorProps } from './CellEditor';
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model';
-import { createSheet, SheetType } from '../../types';
+import { createSheet } from '../../defs';
+import { defaultFunctions } from '../../graph';
+import { SheetType } from '../../types';
 
 export default {
   title: 'plugin-sheet/CellEditor',
@@ -41,14 +42,13 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
-      const client = new Client();
+      const client = new Client({ types: [SheetType] });
       await client.initialize();
       await client.halo.createIdentity();
       const space = await client.spaces.create();
-      client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.title = 'Test';
+      sheet.name = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);

package/src/components/CellEditor/CellEditor.tsx

@@ -14,10 +14,13 @@ import {
   preventNewline,
   useTextEditor,
 } from '@dxos/react-ui-editor';
+import { type GridEditBox } from '@dxos/react-ui-grid';
+
+type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };
 
 export type EditorKeysProps = {
-  onClose: (value: string | undefined) => void;
-  onNav?: (value: string | undefined, ev: Pick<KeyboardEvent<HTMLInputElement>, 'key'>) => void;
+  onClose: (value: string | undefined, event: EditorKeyEvent) => void;
+  onNav?: (value: string | undefined, event: EditorKeyEvent) => void;
 };
 
 export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
@@ -57,14 +60,29 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
     {
       key: 'Enter',
       run: (editor) => {
-        onClose(editor.state.doc.toString());
+        onClose(editor.state.doc.toString(), { key: 'Enter' });
+        return true;
+      },
+      shift: (editor) => {
+        onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });
+        return true;
+      },
+    },
+    {
+      key: 'Tab',
+      run: (editor) => {
+        onClose(editor.state.doc.toString(), { key: 'Tab' });
+        return true;
+      },
+      shift: (editor) => {
+        onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });
         return true;
       },
     },
     {
       key: 'Escape',
       run: () => {
-        onClose(undefined);
+        onClose(undefined, { key: 'Escape' });
         return true;
       },
     },
@@ -74,10 +92,35 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
 export type CellEditorProps = {
   value?: string;
   extension?: Extension;
+  variant?: keyof typeof editorVariants;
+  box?: GridEditBox;
+  gridId?: string;
 } & Pick<UseTextEditorProps, 'autoFocus'> &
   Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
 
-export const CellEditor = ({ value, extension, autoFocus, onBlur }: CellEditorProps) => {
+const editorVariants = {
+  // TODO(thure): remove when legacy is no longer used.
+  legacy: {
+    root: 'flex w-full',
+    editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',
+    content: '!px-2 !py-1',
+  },
+  grid: {
+    root: 'absolute z-[1]',
+    editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',
+    content: '!border !border-transparent !p-0.5',
+  },
+};
+
+export const CellEditor = ({
+  value,
+  extension,
+  autoFocus,
+  onBlur,
+  variant = 'legacy',
+  box,
+  gridId,
+}: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -98,16 +141,23 @@ export const CellEditor = ({ value, extension, autoFocus, onBlur }: CellEditorPr
           themeMode,
           slots: {
             editor: {
-              className: 'flex w-full [&>.cm-scroller]:scrollbar-none',
+              className: editorVariants[variant].editor,
             },
             content: {
-              className: '!px-2 !py-1',
+              className: editorVariants[variant].content,
             },
           },
         }),
       ],
     };
-  }, [extension]);
+  }, [extension, autoFocus, value, variant, onBlur]);
 
-  return <div ref={parentRef} className='flex w-full' />;
+  return (
+    <div
+      ref={parentRef}
+      className={editorVariants[variant].root}
+      style={box}
+      {...(gridId && { 'data-grid': gridId })}
+    />
+  );
 };

package/src/components/CellEditor/extension.test.ts

@@ -4,14 +4,12 @@
 
 import { CompletionContext, type CompletionSource } from '@codemirror/autocomplete';
 import { EditorState } from '@codemirror/state';
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
-import { expect } from 'chai';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model/functions';
+import { defaultFunctions } from '../../graph';
 
 describe('formula parser', () => {
   const {
@@ -37,8 +35,8 @@ describe('formula parser', () => {
       extensions: sheetExtension({ functions }),
     });
 
-    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
-    const result = await f(new CompletionContext(state, text.length, true));
+    const [fn] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await fn(new CompletionContext(state, text.length, true));
     expect(result?.options).to.have.length(1);
   });
 });

package/src/components/CellEditor/extension.ts

@@ -12,15 +12,16 @@ import {
   startCompletion,
 } from '@codemirror/autocomplete';
 import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
-import { type Extension, Facet } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
+import { singleValueFacet } from '@dxos/react-ui-editor/state';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../model';
+import { type FunctionDefinition } from '../../graph';
 
 /**
  * https://codemirror.net/examples/styling
@@ -59,7 +60,7 @@ const highlightStyles = HighlightStyle.define([
   },
 ]);
 
-const languageFacet = Facet.define<Language>();
+const languageFacet = singleValueFacet<Language>();
 
 export type SheetExtensionOptions = {
   functions?: FunctionDefinition[];
@@ -165,8 +166,6 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
       icons: false,
       tooltipClass: () =>
         mx(
-          // TODO(burdon): Factor out fragments.
-          // TODO(burdon): Size to make width same as column.
           '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
           '[&>ul>li[aria-selected]]:!bg-accentSurface',
           'border-separator',
@@ -231,7 +230,7 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Find first Range or cell at cursor.
         activeRange = undefined;
-        const [language] = view.state.facet(languageFacet);
+        const language = view.state.facet(languageFacet);
         const { topNode } = language.parser.parse(view.state.doc.toString());
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren } from 'react';
+
+import { type ComputeGraphRegistry } from '../../graph';
+
+export type ComputeGraphContextType = {
+  registry: ComputeGraphRegistry;
+};
+
+/**
+ * The compute graph context manages a ComputeGraph for each space.
+ */
+export const ComputeGraphContext = createContext<ComputeGraphContextType | undefined>(undefined);
+
+export const ComputeGraphContextProvider = ({ registry, children }: PropsWithChildren<ComputeGraphContextType>) => {
+  return <ComputeGraphContext.Provider value={{ registry }}>{children}</ComputeGraphContext.Provider>;
+};

package/src/components/ComputeGraph/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './async-function';
-export * from './custom';
-export * from './graph';
+export * from './ComputeGraphContextProvider';

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { GridSheet } from './GridSheet';
+import { useComputeGraph } from '../../hooks';
+import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
+
+export default {
+  title: 'plugin-sheet/GridSheet',
+  component: GridSheet,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
+  if (!sheet || !space) {
+    return null;
+  }
+
+  return <GridSheet graph={graph} sheet={sheet} />;
+};