@dxos/plugin-sheet 0.6.11 → 0.6.12-main.5a87ad5

package/src/graph/hyperformula.test.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { describe, test, expect } from 'vitest';
+
+import { HyperFormula } from '#hyperformula';
+
+describe('hyperformula', () => {
+  test('sanity', async () => {
+    // TODO(burdon): Throws "Cannot convert undefined or null to object" in vitest (without browser).
+    const hf = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' });
+    expect(hf).to.exist;
+  });
+});

package/src/graph/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './compute-graph';
+export * from './compute-node';
+export * from './function-defs';

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

@@ -2,18 +2,15 @@
 // 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 { type AsyncFunction, FunctionPluginAsync } from './async-function';
-
-// TODO(burdon): Factor out.
-const parseNumberString = (str: string): number => {
-  return parseFloat(str.replace(/[^\d.]/g, ''));
-};
+import { FunctionArgumentType } from '#hyperformula';
+import { type AsyncFunction, FunctionPluginAsync } from '../async-function';
+import { type ComputeGraphPlugin } from '../compute-graph';
+import { parseNumberString } from '../util';
 
 /**
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
@@ -68,3 +65,10 @@ export const CustomPluginTranslations = {
     CRYPTO: 'CRYPTO',
   },
 };
+
+export const testPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: CustomPlugin,
+    translations: CustomPluginTranslations,
+  },
+];

package/src/graph/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './custom-function';

package/src/graph/util.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): Factor out.
+export const parseNumberString = (str: string): number => {
+  return parseFloat(str.replace(/[^\d.]/g, ''));
+};

package/src/hooks/hooks.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useEffect, useState } from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ComputeGraphContextProvider } from '../components';
+import { createSheet } from '../defs';
+import { useComputeGraph, useSheetModel } from '../hooks';
+import { withComputeGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const Story = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const [sheet, setSheet] = useState<SheetType>();
+  const model = useSheetModel(graph, sheet);
+  useEffect(() => {
+    if (space) {
+      const sheet = space.db.add(createSheet());
+      setSheet(sheet);
+    }
+  }, [space]);
+
+  return (
+    <SyntaxHighlighter language='json'>
+      {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id }, null, 2)}
+    </SyntaxHighlighter>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/hooks',
+  component: ComputeGraphContextProvider,
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+  ],
+  render: (args: any) => <Story {...args} />,
+};
+
+export const Default = {};

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useComputeGraph';
+export * from './useFormattingModel';
+export * from './useSheetModel';

package/src/hooks/useComputeGraph.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncState } from '@dxos/react-hooks';
+
+import { ComputeGraphContext } from '../components';
+import { type ComputeGraph } from '../graph';
+
+/**
+ * Get existing or create new compute graph for the given space.
+ */
+export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
+  const [graph] = useAsyncState(async () => space && registry.getOrCreateGraph(space), [space, registry]);
+  return graph;
+};

package/src/hooks/useFormattingModel.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type SheetModel, FormattingModel } from '../model';
+
+export const useFormattingModel = (model: SheetModel | undefined): FormattingModel | undefined => {
+  return useMemo(() => model && new FormattingModel(model), [model]);
+};

package/src/hooks/useSheetModel.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type ComputeGraph } from '../graph';
+import { SheetModel } from '../model';
+import { type SheetType } from '../types';
+
+export type UseSheetModelOptions = {
+  readonly?: boolean;
+};
+
+export const useSheetModel = (
+  graph?: ComputeGraph,
+  sheet?: SheetType,
+  { readonly }: UseSheetModelOptions = {},
+): SheetModel | undefined => {
+  const [model, setModel] = useState<SheetModel>();
+  useEffect(() => {
+    if (!graph || !sheet) {
+      return;
+    }
+
+    let model: SheetModel | undefined;
+    const t = setTimeout(async () => {
+      model = new SheetModel(graph, sheet, { readonly });
+      await model.open();
+      setModel(model);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.close();
+    };
+  }, [graph, sheet, readonly]);
+
+  return model;
+};

package/src/meta.tsx

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { GridNine, type IconProps } from '@phosphor-icons/react';
-import React from 'react';
-
 import { pluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
@@ -13,6 +10,5 @@ export default pluginMeta({
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
-  iconComponent: (props: IconProps) => <GridNine {...props} />,
-  iconSymbol: 'ph--grid-nine--regular',
+  icon: 'ph--grid-nine--regular',
 });

package/src/{components/Sheet/formatting.ts → model/formatting-model.ts}

@@ -4,17 +4,24 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-import { type SheetModel, type CellAddress, inRange } from '../../model';
-import { ValueTypeEnum } from '../../types';
+import { type SheetModel } from './sheet-model';
+import { type CellAddress, inRange } from '../defs';
+import { addressToIndex, rangeFromIndex } from '../defs';
+import { ValueTypeEnum } from '../types';
+
+export type CellFormat = {
+  value?: string;
+  classNames?: ClassNameValue;
+};
 
 export class FormattingModel {
-  constructor(private readonly model: SheetModel) {}
+  constructor(private readonly _model: SheetModel) {}
 
   /**
    * Get formatted string value and className for cell.
    */
-  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
-    const value = this.model.getValue(cell);
+  getFormatting(cell: CellAddress): CellFormat {
+    const value = this._model.getValue(cell);
     if (value === undefined || value === null) {
       return {};
     }
@@ -23,15 +30,15 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = this.model.addressToIndex(cell);
-    let formatting = this.model.sheet.formatting?.[idx] ?? {};
+    const idx = addressToIndex(this._model.sheet, cell);
+    let formatting = this._model.sheet.formatting?.[idx] ?? {};
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
     // TODO(burdon): NOTE: D0 means the D column.
     // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
-    for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
-      const range = this.model.rangeFromIndex(idx);
+    for (const [idx, _formatting] of Object.entries(this._model.sheet.formatting)) {
+      const range = rangeFromIndex(this._model.sheet, idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -46,7 +53,7 @@ export class FormattingModel {
 
     const defaultNumber = 'justify-end font-mono';
 
-    const type = formatting?.type ?? this.model.getValueType(cell);
+    const type = formatting?.type ?? this._model.getValueType(cell);
     switch (type) {
       case ValueTypeEnum.Boolean: {
         return {
@@ -84,17 +91,17 @@ export class FormattingModel {
       //
 
       case ValueTypeEnum.DateTime: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
       case ValueTypeEnum.Date: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
       case ValueTypeEnum.Time: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }
 

package/src/model/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './functions';
-export * from './model';
-export * from './types';
+export * from './formatting-model';
+export * from './sheet-model';