@dxos/plugin-sheet 0.6.13-main.ed424a1 → 0.6.13

package/src/SheetPlugin.tsx

@@ -2,71 +2,84 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type IconProps, GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
+import {
+  NavigationAction,
+  parseIntentPlugin,
+  resolvePlugin,
+  type PluginDefinition,
+  type LayoutCoordinate,
+} from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
+import { type ActionGroup, createExtension, isActionGroup } 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 { Icon } from '@dxos/react-ui';
 
-import { ComputeGraphContextProvider, SheetContainer } from './components';
-import { compareIndexPositions, createSheet } from './defs';
-import { computeGraphFacet } from './extensions';
-import { type ComputeGraphRegistry } from './graph';
-import { useComputeGraph } from './hooks';
+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 meta, { SHEET_PLUGIN } from './meta';
+import { SheetModel } from './model';
 import translations from './translations';
-import { SheetAction, SheetType, type SheetPluginProvides } from './types';
+import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let computeGraphRegistry: ComputeGraphRegistry | undefined;
+  let remoteFunctionUrl: string | undefined;
+
+  const graphs = create<Record<string, ComputeGraph>>({});
+  const setGraph = (key: string, graph: ComputeGraph) => {
+    graphs[key] = graph;
+  };
 
   return {
     meta,
     ready: async (plugins) => {
       const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      invariant(client);
-      let remoteFunctionUrl: string | undefined;
+      if (!client) {
+        return;
+      }
+
       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 }) => {
-        invariant(computeGraphRegistry);
-        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
+        return (
+          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
+            {children}
+          </ComputeGraphContextProvider>
+        );
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
-            icon: 'ph--grid-nine--regular',
+            icon: (props: IconProps) => <GridNine {...props} />,
+            iconSymbol: '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;
@@ -100,7 +113,8 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
                   },
                   properties: {
                     label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: 'ph--grid-nine--regular',
+                    icon: (props: IconProps) => <GridNine {...props} />,
+                    iconSymbol: 'ph--grid-nine--regular',
                     testId: 'sheetPlugin.createObject',
                   },
                 },
@@ -109,16 +123,6 @@ 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: [
           {
@@ -126,8 +130,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             testId: 'sheetPlugin.createSection',
             type: ['plugin name', { ns: SHEET_PLUGIN }],
             label: ['create sheet section label', { ns: SHEET_PLUGIN }],
-            // TODO(thure): Refactor to use strings
-            icon: (props: any) => <Icon icon='ph--grid-nine--regular' {...props} />,
+            icon: (props: any) => <GridNine {...props} />,
             intent: {
               plugin: SHEET_PLUGIN,
               action: SheetAction.CREATE,
@@ -135,20 +138,23 @@ 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 }) => {
-          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
-          const graph = useComputeGraph(space);
-          if (graph && data.object instanceof SheetType) {
+        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) {
             switch (role) {
               case 'article':
               case 'section': {
-                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
+                return (
+                  <SheetContainer
+                    sheet={data.object}
+                    space={space}
+                    role={role}
+                    coordinate={data.coordinate as LayoutCoordinate}
+                    remoteFunctionUrl={remoteFunctionUrl}
+                  />
+                );
               }
             }
           }
@@ -160,7 +166,23 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case SheetAction.CREATE: {
-              return { data: createSheet() };
+              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 };
             }
           }
         },

package/src/components/{GridSheet/SheetCellEditor.stories.tsx → CellEditor/CellEditor.stories.tsx}

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

package/src/components/CellEditor/CellEditor.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import React, { type DOMAttributes, type KeyboardEvent } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  type UseTextEditorProps,
+  createBasicExtensions,
+  createThemeExtensions,
+  preventNewline,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+
+export type EditorKeysProps = {
+  onClose: (value: string | undefined) => void;
+  onNav?: (value: string | undefined, ev: Pick<KeyboardEvent<HTMLInputElement>, 'key'>) => void;
+};
+
+export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
+  return keymap.of([
+    {
+      key: 'ArrowUp',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowUp' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowDown',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowDown' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowLeft',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowLeft' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowRight',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowRight' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'Enter',
+      run: (editor) => {
+        onClose(editor.state.doc.toString());
+        return true;
+      },
+    },
+    {
+      key: 'Escape',
+      run: () => {
+        onClose(undefined);
+        return true;
+      },
+    },
+  ]);
+};
+
+export type CellEditorProps = {
+  value?: string;
+  extension?: Extension;
+} & Pick<UseTextEditorProps, 'autoFocus'> &
+  Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
+
+export const CellEditor = ({ value, extension, autoFocus, onBlur }: CellEditorProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      autoFocus,
+      initialValue: value,
+      selection: { anchor: value?.length ?? 0 },
+      extensions: [
+        extension ?? [],
+        preventNewline,
+        EditorView.focusChangeEffect.of((_, focusing) => {
+          if (!focusing) {
+            onBlur?.({ type: 'blur' } as any);
+          }
+          return null;
+        }),
+        createBasicExtensions({ lineWrapping: false }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: {
+              className: 'flex w-full [&>.cm-scroller]:scrollbar-none',
+            },
+            content: {
+              className: '!px-2 !py-1',
+            },
+          },
+        }),
+      ],
+    };
+  }, [extension]);
+
+  return <div ref={parentRef} className='flex w-full' />;
+};

package/src/{extensions/editor → components/CellEditor}/extension.test.ts

@@ -4,12 +4,14 @@
 
 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, expect, test } from 'vitest';
+import { describe, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../graph';
+import { defaultFunctions } from '../../model/functions';
 
 describe('formula parser', () => {
   const {
@@ -35,8 +37,8 @@ describe('formula parser', () => {
       extensions: sheetExtension({ functions }),
     });
 
-    const [fn] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
-    const result = await fn(new CompletionContext(state, text.length, true));
+    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await f(new CompletionContext(state, text.length, true));
     expect(result?.options).to.have.length(1);
   });
 });

package/src/{extensions/editor → components/CellEditor}/extension.ts

@@ -12,16 +12,15 @@ import {
   startCompletion,
 } from '@codemirror/autocomplete';
 import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
-import { type Extension } from '@codemirror/state';
+import { type Extension, Facet } 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 '../../graph';
+import { type FunctionDefinition } from '../../model';
 
 /**
  * https://codemirror.net/examples/styling
@@ -60,7 +59,7 @@ const highlightStyles = HighlightStyle.define([
   },
 ]);
 
-const languageFacet = singleValueFacet<Language>();
+const languageFacet = Facet.define<Language>();
 
 export type SheetExtensionOptions = {
   functions?: FunctionDefinition[];
@@ -166,6 +165,8 @@ 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',
@@ -230,7 +231,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/{extensions/editor → components/CellEditor}/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './CellEditor';
 export * from './extension';

package/src/{graph/functions → components/ComputeGraph}/async-function.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type SimpleCellAddress } from 'hyperformula/typings/Cell';
+import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
@@ -12,35 +12,28 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { type Space } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 
-import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from '#hyperformula';
-
-// TODO(burdon): Create API gateways:
+// TODO(burdon): API gateways!
 //  https://publicapis.io
 //  https://api-ninjas.com/api/cryptoprice
 //  https://developers.google.com/apis-explorer
 //  https://publicapis.io/coin-desk-api
 
+// TODO(burdon): Create wrapper.
 export type AsyncFunction = (...args: any) => Promise<InterpreterValue>;
 
-export type FunctionUpdateEvent = {
-  name: string;
-  cell: SimpleCellAddress;
-};
-
 export type FunctionOptions = {
   ttl?: number;
 };
 
 export type FunctionContextOptions = {
   defaultTtl: number;
-  debounceDelay: number;
+  recalculationDelay: number;
   remoteFunctionUrl: string;
-  onUpdate?: (update: FunctionUpdateEvent) => void;
 };
 
 export const defaultFunctionContextOptions: FunctionContextOptions = {
   defaultTtl: 5_000,
-  debounceDelay: 200,
+  recalculationDelay: 200,
   remoteFunctionUrl: 'https://edge.dxos.workers.dev/functions', // TODO(burdon): Config.
 };
 
@@ -72,21 +65,21 @@ export class FunctionContext {
   private _invocations: Record<string, number> = {};
 
   private readonly _options: FunctionContextOptions;
-
-  // Debounced update handler.
-  private readonly _onUpdate: (update: FunctionUpdateEvent) => void;
+  private readonly _onUpdate: () => void;
 
   constructor(
     private readonly _hf: HyperFormula,
     private readonly _space: Space | undefined,
+    onUpdate: (context: FunctionContext) => void,
     _options?: Partial<FunctionContextOptions>,
   ) {
     this._options = defaultsDeep(_options ?? {}, defaultFunctionContextOptions);
-    this._onUpdate = debounce((update) => {
-      // TODO(burdon): Better way to trigger recalculation? (NOTE: rebuildAndRecalculate resets the undo history.)
+    this._onUpdate = debounce(() => {
+      // TODO(burdon): Better way to trigger recalculation?
+      //  NOTE: rebuildAndRecalculate resets the undo history.
       this._hf.resumeEvaluation();
-      this._options.onUpdate?.(update);
-    }, this._options.debounceDelay);
+      onUpdate(this);
+    }, this._options.recalculationDelay);
   }
 
   get space() {
@@ -141,7 +134,7 @@ export class FunctionContext {
           const value = await cb(...args);
           this._cache.set(invocationKey, { value, ts: Date.now() });
           log('set', { cell, value });
-          this._onUpdate({ name, cell });
+          this._onUpdate();
         } catch (err) {
           // TODO(burdon): Show error to user.
           log.warn('failed', { cell, err });
@@ -160,15 +153,12 @@ export class FunctionContext {
 /**
  * Base class for async functions.
  */
-export class AsyncFunctionPlugin extends FunctionPlugin {
+export class FunctionPluginAsync extends FunctionPlugin {
   get context() {
     return this.config.context as FunctionContext;
   }
 
-  /**
-   * Immediately returns cached value then runs the async function.
-   */
-  protected runAsyncFunction(ast: ProcedureAst, state: InterpreterState, cb: AsyncFunction, options?: FunctionOptions) {
+  runAsyncFunction(ast: ProcedureAst, state: InterpreterState, cb: AsyncFunction, options?: FunctionOptions) {
     const { procedureName } = ast;
     const metadata = this.metadata(procedureName);
     return this.runFunction(ast.args, state, metadata, (...args: any) => {

package/src/{graph/testing/test-plugin.ts → components/ComputeGraph/custom.ts}

@@ -2,36 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
+import { FunctionArgumentType } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
 
 import { getDeep } from '@dxos/util';
 
-import { FunctionArgumentType } from '#hyperformula';
-import { type ComputeGraphPlugin } from '../compute-graph-registry';
-import { type AsyncFunction, AsyncFunctionPlugin } from '../functions';
-import { parseNumberString } from '../util';
+import { type AsyncFunction, FunctionPluginAsync } from './async-function';
+
+// TODO(burdon): Factor out.
+const parseNumberString = (str: string): number => {
+  return parseFloat(str.replace(/[^\d.]/g, ''));
+};
 
 /**
- * Testing functions run locally (not run via EDGE).
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
  */
-export class TestPlugin extends AsyncFunctionPlugin {
-  /**
-   * Simple local function returns input value.
-   */
+export class CustomPlugin extends FunctionPluginAsync {
   test(ast: ProcedureAst, state: InterpreterState) {
-    const handler: AsyncFunction = async (_value) => {
-      return _value;
-    };
-
-    return this.runAsyncFunction(ast, state, handler);
-  }
-
-  /**
-   * Simple local function returns random number.
-   */
-  random(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async () => {
       return Math.random();
     };
@@ -39,9 +27,6 @@ export class TestPlugin extends AsyncFunctionPlugin {
     return this.runAsyncFunction(ast, state, handler);
   }
 
-  /**
-   * Async HTTP function.
-   */
   crypto(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async (_currency) => {
       const currency = (_currency || 'USD').toUpperCase();
@@ -59,15 +44,9 @@ export class TestPlugin extends AsyncFunctionPlugin {
   }
 }
 
-TestPlugin.implementedFunctions = {
+CustomPlugin.implementedFunctions = {
   TEST: {
     method: 'test',
-    parameters: [{ argumentType: FunctionArgumentType.NUMBER, optionalArg: false }],
-    isVolatile: true,
-  },
-
-  RANDOM: {
-    method: 'random',
     parameters: [],
     isVolatile: true,
   },
@@ -79,22 +58,13 @@ TestPlugin.implementedFunctions = {
   },
 };
 
-export const TestPluginTranslations = {
+export const CustomPluginTranslations = {
   enGB: {
-    TEST: 'Returns input value',
-    RANDOM: 'Random number',
-    CRYPTO: 'Crypto token value',
+    TEST: 'TEST',
+    CRYPTO: 'CRYPTO',
   },
   enUS: {
-    TEST: 'Returns input value',
-    RANDOM: 'Random number',
-    CRYPTO: 'Crypto token value',
+    TEST: 'TEST',
+    CRYPTO: 'CRYPTO',
   },
 };
-
-export const testFunctionPlugins: ComputeGraphPlugin[] = [
-  {
-    plugin: TestPlugin,
-    translations: TestPluginTranslations,
-  },
-];