@dxos/plugin-sheet 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/model/useSheetModel.ts

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import { type ComputeGraph } from '@dxos/compute';
 
 import { SheetModel } from '../model';
-import { type SheetType } from '../types';
+import { type Sheet } from '../types';
 
 export type UseSheetModelOptions = {
   readonly?: boolean;
@@ -15,7 +15,7 @@ export type UseSheetModelOptions = {
 
 export const useSheetModel = (
   graph?: ComputeGraph,
-  sheet?: SheetType,
+  sheet?: Sheet.Sheet,
   { readonly }: UseSheetModelOptions = {},
 ): SheetModel | undefined => {
   const [model, setModel] = useState<SheetModel>();

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9005',
+    command: 'pnpm storybook dev --ci --quiet --port=9005 --config-dir=.storybook',
     port: 9005,
     reuseExistingServer: false,
   },

package/src/playwright/sheet.spec.ts

@@ -15,7 +15,8 @@ test.describe('plugin-sheet', () => {
 
   test.beforeEach(async ({ browser }) => {
     const setup = await setupPage(browser, {
-      url: storybookUrl('plugins-plugin-sheet-sheetcontainer--spec', 9005),
+      url: storybookUrl('plugins-plugin-sheet-containers-sheetcontainer--spec', 9005),
+      viewportSize: { width: 1280, height: 720 },
     });
     page = setup.page;
     sheet = new SheetManager(page);

package/src/sanity.test.ts

@@ -5,8 +5,7 @@
 import { describe, expect, test } from 'vitest';
 
 import { Client } from '@dxos/client';
-import { Obj } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { Function } from '@dxos/functions';
 
 // Part 2.
 // TODO(burdon): Cannot test outside of browser.
@@ -23,7 +22,7 @@ import { FunctionType } from '@dxos/functions';
 describe('test', () => {
   test('test', async () => {
     const client = new Client();
-    client.addTypes([FunctionType]);
+    await client.addTypes([Function.Function]);
     await client.initialize();
     await client.halo.createIdentity();
 
@@ -34,7 +33,7 @@ describe('test', () => {
     //  - ERROR "process.nextTick is not a function"
     //  - ERROR "Identifier 'Buffer' has already been declared" if { nodeExternal: true }
     const space = await client.spaces.create();
-    const fn = space.db.add(Obj.make(FunctionType, { name: 'test', version: '0.0.1', binding: 'HELLO' }));
+    const fn = space.db.add(Function.make({ name: 'test', version: '0.0.1', binding: 'HELLO' }));
     expect(fn).to.exist;
   });
 });

package/src/serializer.ts

@@ -3,19 +3,19 @@
 //
 
 import { Obj } from '@dxos/echo';
+import { getObjectCore } from '@dxos/echo-db';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { getObjectCore } from '@dxos/react-client/echo';
 
-import { SheetType } from './types';
+import { Sheet } from './types';
 
-export const serializer: TypedObjectSerializer<SheetType> = {
+export const serializer: TypedObjectSerializer<Sheet.Sheet> = {
   serialize: async ({ object }): Promise<string> => {
     return JSON.stringify(object, null, 2);
   },
 
   deserialize: async ({ content, newId }) => {
     const { id, ...parsed } = JSON.parse(content);
-    const sheet = Obj.make(SheetType, parsed);
+    const sheet = Obj.make(Sheet.Sheet, parsed);
 
     if (!newId) {
       const core = getObjectCore(sheet);

package/src/testing/data.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { CellValue } from '../types';
+import type { Sheet } from '../types';
 
-export const createTestCells = (testSheetName = 'test'): Record<string, CellValue> => ({
+export const createTestCells = (testSheetName = 'test'): Record<string, Sheet.CellValue> => ({
   B1: { value: 'Qty2' },
   B3: { value: 1 },
   B4: { value: 2 },

package/src/testing/testing.tsx

@@ -11,15 +11,15 @@ import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';
 
 import { ComputeGraphContextProvider } from '../components';
-import { type CreateSheetOptions, createSheet } from '../types';
+import { Sheet } from '../types';
 
-export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: CreateSheetOptions) => {
+export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: Sheet.SheetProps) => {
   const [sheet] = useAsyncState(async () => {
     if (!space || !graph) {
       return;
     }
 
-    const sheet = createSheet(options);
+    const sheet = Sheet.make(options);
     space.db.add(sheet);
     return sheet;
   }, [space, graph]);

package/src/translations.ts

@@ -5,12 +5,12 @@
 import { type Resource } from '@dxos/react-ui';
 
 import { meta } from './meta';
-import { SheetType } from './types';
+import { Sheet } from './types';
 
 export const translations = [
   {
     'en-US': {
-      [SheetType.typename]: {
+      [Sheet.Sheet.typename]: {
         'typename label': 'Sheet',
         'typename label_zero': 'Sheets',
         'typename label_one': 'Sheet',
@@ -18,6 +18,7 @@ export const translations = [
         'object name placeholder': 'New sheet',
         'rename object label': 'Rename sheet',
         'delete object label': 'Delete sheet',
+        'object deleted label': 'Sheet deleted',
       },
       [meta.id]: {
         'plugin name': 'Sheets',

package/src/types/Sheet.ts

@@ -0,0 +1,97 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { addressFromA1Notation, isFormula } from '@dxos/compute';
+import { Obj, Type } from '@dxos/echo';
+import { FormInputAnnotation } from '@dxos/echo/internal';
+
+import { addressToIndex, initialize, mapFormulaRefsToIndices } from './util';
+
+export type SheetSize = {
+  rows: number;
+  columns: number;
+};
+
+export const CellValue = Schema.Struct({
+  // TODO(burdon): How to store dates (datetime, date, time), percentages, etc.
+  //  Consider import/export; natural access for other plugins. Special handling for currency (precision).
+  // TODO(burdon): Automerge (long string) or short string or number.
+  value: Schema.Any,
+});
+
+export type CellValue = Schema.Schema.Type<typeof CellValue>;
+
+// TODO(burdon): IMPORTANT: Reconcile with Field definition.
+export const Range = Schema.Struct({
+  range: Schema.String,
+  key: Schema.String,
+  value: Schema.String,
+});
+
+export type Range = Schema.Schema.Type<typeof Range>;
+
+// TODO(burdon): Visibility, locked, frozen, etc.
+export const RowColumnMeta = Schema.Struct({
+  size: Schema.optional(Schema.Number),
+});
+
+// TODO(burdon): Reconcile col/column (across packages).
+// TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
+export const Sheet = Schema.Struct({
+  name: Schema.optional(Schema.String),
+
+  // Sparse map of cells referenced by index.
+  cells: Schema.Record({ key: Schema.String, value: CellValue }).pipe(FormInputAnnotation.set(false)),
+
+  // Ordered row indices.
+  rows: Schema.Array(Schema.String).pipe(FormInputAnnotation.set(false)),
+
+  // Ordered column indices.
+  columns: Schema.Array(Schema.String).pipe(FormInputAnnotation.set(false)),
+
+  // Row metadata referenced by index.
+  rowMeta: Schema.Record({ key: Schema.String, value: RowColumnMeta }).pipe(FormInputAnnotation.set(false)),
+
+  // Column metadata referenced by index.
+  columnMeta: Schema.Record({ key: Schema.String, value: RowColumnMeta }).pipe(FormInputAnnotation.set(false)),
+
+  // Cell formatting referenced by indexed range.
+  ranges: Schema.Array(Range).pipe(FormInputAnnotation.set(false)),
+}).pipe(
+  Type.object({
+    typename: 'dxos.org/type/Sheet',
+    version: '0.1.0',
+  }),
+);
+
+export interface Sheet extends Schema.Schema.Type<typeof Sheet> {}
+
+export type SheetProps = {
+  name?: string;
+  cells?: Record<string, CellValue>;
+} & Partial<SheetSize>;
+
+export const make = ({ name, cells = {}, ...size }: SheetProps = {}) => {
+  const sheet = Obj.make(Sheet, { name, cells: {}, rows: [], columns: [], rowMeta: {}, columnMeta: {}, ranges: [] });
+
+  // Initialize and set cells within Obj.change to satisfy change context requirements.
+  Obj.change(sheet, (s) => {
+    initialize(s, size);
+
+    if (cells) {
+      Object.entries(cells).forEach(([key, { value }]) => {
+        const idx = addressToIndex(s, addressFromA1Notation(key));
+        if (isFormula(value)) {
+          value = mapFormulaRefsToIndices(s, value);
+        }
+
+        s.cells[idx] = { value };
+      });
+    }
+  });
+
+  return sheet;
+};

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

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineCapability } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
 import { type ComputeGraphRegistry } from '@dxos/compute';
 
 import { meta } from '../meta';
 
 export namespace SheetCapabilities {
-  export const ComputeGraphRegistry = defineCapability<ComputeGraphRegistry>(
+  export const ComputeGraphRegistry = Capability.make<ComputeGraphRegistry>(
     `${meta.id}/capability/compute-graph-registry`,
   );
 }

package/src/types/index.ts

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './schema';
+export * from './capabilities';
+export * as Sheet from './Sheet';
 export * from './sheet-range-types';
 export * from './types';
 export * from './util';

package/src/types/sheet-range-types.ts

@@ -4,7 +4,7 @@
 
 import { type ClassNameValue } from '@dxos/react-ui';
 
-import { type SheetType } from '../types';
+import { type Sheet } from '../types';
 
 export const alignKey = 'alignment';
 export type AlignKey = typeof alignKey;
@@ -19,7 +19,7 @@ export type StyleKey = typeof styleKey;
 export type StyleValue = 'highlight' | 'softwrap';
 
 // TODO(burdon): Reconcile with plugin-table.
-export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number]): ClassNameValue => {
+export const cellClassNameForRange = ({ key, value }: Sheet.Sheet['ranges'][number]): ClassNameValue => {
   switch (key) {
     case alignKey:
       switch (value) {
@@ -34,14 +34,14 @@ export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number
       }
 
     case commentKey:
-      return 'bg-gridComment';
+      return 'bg-grid-comment';
 
     case styleKey:
       switch (value) {
         case 'highlight':
-          return '!bg-gridHighlight';
+          return 'bg-grid-highlight!';
         case 'softwrap':
-          return '!whitespace-normal';
+          return 'whitespace-normal!';
         default:
           return undefined;
       }

package/src/types/types.ts

@@ -4,65 +4,99 @@
 
 import * as Schema from 'effect/Schema';
 
-import { meta } from '../meta';
-import { SheetModel } from '../model';
+import { Capability } from '@dxos/app-framework';
+import { Collection } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { SpaceSchema } from '@dxos/react-client/echo';
 
-import { type CellValue, RowColumnMeta, SheetType } from './schema';
+import { meta } from '../meta';
 
-export type SheetSize = {
-  rows: number;
-  columns: number;
-};
+import * as Sheet from './Sheet';
 
-export type CreateSheetOptions = {
-  name?: string;
-  cells?: Record<string, CellValue>;
-} & Partial<SheetSize>;
+// TODO(wittjosiah): Factor out. This is `DxGridAxis` from `@dxos/react-ui-grid`.
+const ActionAxis = Schema.Union(Schema.Literal('row'), Schema.Literal('col'));
 
 export namespace SheetAction {
-  const SHEET_ACTION = `${meta.id}/action`;
-
-  export class Create extends Schema.TaggedClass<Create>()(`${SHEET_ACTION}/create`, {
-    input: Schema.Struct({
-      name: Schema.optional(Schema.String),
-    }),
-    output: Schema.Struct({
-      object: SheetType,
-    }),
-  }) {}
-
-  // TODO(wittjosiah): Factor out. This is `DxGridAxis` from `@dxos/react-ui-grid`.
-  const Axis = Schema.Union(Schema.Literal('row'), Schema.Literal('col'));
-
-  export class InsertAxis extends Schema.TaggedClass<InsertAxis>()(`${SHEET_ACTION}/axis-insert`, {
-    input: Schema.Struct({
-      // TODO(wittjosiah): Schema.instanceOf(SheetModel) throws when running tests.
-      model: Schema.Any.pipe(Schema.filter((model) => model instanceof SheetModel)) as Schema.Schema<SheetModel>,
-      axis: Axis,
-      index: Schema.Number,
-      count: Schema.optional(Schema.Number),
-    }),
-    output: Schema.Void,
-  }) {}
-
   export const RestoreAxis = Schema.Struct({
-    axis: Axis,
+    axis: ActionAxis,
     axisIndex: Schema.String,
     index: Schema.Number,
-    axisMeta: RowColumnMeta,
+    axisMeta: Sheet.RowColumnMeta,
     values: Schema.Array(Schema.Any),
   });
 
   export type RestoreAxis = Schema.Schema.Type<typeof RestoreAxis>;
+}
+
+const SHEET_OPERATION = `${meta.id}/operation`;
 
-  export class DropAxis extends Schema.TaggedClass<DropAxis>()(`${SHEET_ACTION}/axis-drop`, {
-    input: Schema.Struct({
-      // TODO(wittjosiah): Schema.instanceOf(SheetModel) throws when running tests.
-      model: Schema.Any.pipe(Schema.filter((model) => model instanceof SheetModel)) as Schema.Schema<SheetModel>,
-      axis: Axis,
-      axisIndex: Schema.String,
-      deletionData: Schema.optional(RestoreAxis),
-    }),
-    output: Schema.Void,
-  }) {}
+// TODO(wittjosiah): Factor out. This is `DxGridAxis` from `@dxos/react-ui-grid`.
+const Axis = Schema.Union(Schema.Literal('row'), Schema.Literal('col'));
+
+export namespace SheetOperation {
+  export const OnCreateSpace = Operation.make({
+    meta: { key: `${SHEET_OPERATION}/on-create-space`, name: 'On Create Space' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        space: SpaceSchema,
+        rootCollection: Collection.Collection,
+        isDefault: Schema.optional(Schema.Boolean),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const InsertAxis = Operation.make({
+    meta: { key: `${SHEET_OPERATION}/axis-insert`, name: 'Insert Axis' },
+    schema: {
+      input: Schema.Struct({
+        model: Schema.Any,
+        axis: Axis,
+        index: Schema.Number,
+        count: Schema.optional(Schema.Number),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const DropAxisOutput = Schema.Struct({
+    axis: Axis.annotations({ description: 'The axis type (row or col).' }),
+    axisIndex: Schema.String.annotations({ description: 'The dropped axis index.' }),
+    index: Schema.Number.annotations({ description: 'The position the axis was at.' }),
+    axisMeta: Schema.Any.annotations({ description: 'The row/column metadata.' }),
+    values: Schema.Array(Schema.Any).annotations({ description: 'The cell values that were dropped.' }),
+  });
+
+  export type DropAxisOutput = Schema.Schema.Type<typeof DropAxisOutput>;
+
+  export const DropAxis = Operation.make({
+    meta: { key: `${SHEET_OPERATION}/axis-drop`, name: 'Drop Axis' },
+    schema: {
+      input: Schema.Struct({
+        model: Schema.Any,
+        axis: Axis,
+        axisIndex: Schema.String,
+      }),
+      output: DropAxisOutput,
+    },
+  });
+
+  /**
+   * Restore a dropped axis (inverse of DropAxis).
+   */
+  export const RestoreAxis = Operation.make({
+    meta: { key: `${SHEET_OPERATION}/restore-axis`, name: 'Restore Axis' },
+    schema: {
+      input: Schema.Struct({
+        model: Schema.Any.annotations({ description: 'The sheet model.' }),
+        axis: Axis.annotations({ description: 'The axis type (row or col).' }),
+        axisIndex: Schema.String.annotations({ description: 'The axis index to restore.' }),
+        index: Schema.Number.annotations({ description: 'The position to restore at.' }),
+        axisMeta: Schema.Any.annotations({ description: 'The row/column metadata.' }),
+        values: Schema.Array(Schema.Any).annotations({ description: 'The cell values to restore.' }),
+      }),
+      output: Schema.Void,
+    },
+  });
 }

package/src/types/util.ts

@@ -11,10 +11,10 @@ import {
   isFormula,
 } from '@dxos/compute';
 import { randomBytes } from '@dxos/crypto';
-import { Obj } from '@dxos/echo';
+import { type Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 
-import { type CreateSheetOptions, type SheetSize, SheetType } from '../types';
+import { type Sheet } from '../types';
 
 export const MAX_ROWS = 500;
 export const MAX_COLS = 676; // 26^2;
@@ -56,8 +56,8 @@ export const insertIndices = (indices: string[], i: number, n: number, max: numb
 };
 
 export const initialize = (
-  sheet: SheetType,
-  { rows = DEFAULT_ROWS, columns = DEFAULT_COLS }: Partial<SheetSize> = {},
+  sheet: Obj.Mutable<Sheet.Sheet>,
+  { rows = DEFAULT_ROWS, columns = DEFAULT_COLS }: Partial<Sheet.SheetSize> = {},
 ) => {
   if (!sheet.rows.length) {
     insertIndices(sheet.rows, 0, rows, MAX_ROWS);
@@ -67,44 +67,17 @@ export const initialize = (
   }
 };
 
-export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}): SheetType => {
-  const sheet = Obj.make(SheetType, {
-    name,
-    cells: {},
-    rows: [],
-    columns: [],
-    rowMeta: {},
-    columnMeta: {},
-    ranges: [],
-  });
-
-  initialize(sheet, size);
-
-  if (cells) {
-    Object.entries(cells).forEach(([key, { value }]) => {
-      const idx = addressToIndex(sheet, addressFromA1Notation(key));
-      if (isFormula(value)) {
-        value = mapFormulaRefsToIndices(sheet, value);
-      }
-
-      sheet.cells[idx] = { value };
-    });
-  }
-
-  return sheet;
-};
-
 /**
  * E.g., "A1" => "CA2@CB3".
  */
-export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
+export const addressToIndex = (sheet: Sheet.Sheet, cell: CellAddress): string => {
   return `${sheet.columns[cell.col]}@${sheet.rows[cell.row]}`;
 };
 
 /**
  * E.g., "CA2@CB3" => "A1".
  */
-export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
+export const addressFromIndex = (sheet: Sheet.Sheet, idx: string): CellAddress => {
   const [column, row] = idx.split('@');
   return {
     col: sheet.columns.indexOf(column),
@@ -115,14 +88,14 @@ export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress =>
 /**
  * E.g., "A1:B2" => "CA2@CB3:CC4@CD5".
  */
-export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
+export const rangeToIndex = (sheet: Sheet.Sheet, range: CellRange): string => {
   return [range.from, range.to ?? range.from].map((cell) => addressToIndex(sheet, cell)).join(':');
 };
 
 /**
  * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
  */
-export const rangeFromIndex = (sheet: SheetType, idx: string): CompleteCellRange => {
+export const rangeFromIndex = (sheet: Sheet.Sheet, idx: string): CompleteCellRange => {
   const [from, to] = idx.split(':').map((index) => addressFromIndex(sheet, index));
   return { from, to };
 };
@@ -131,7 +104,7 @@ export const rangeFromIndex = (sheet: SheetType, idx: string): CompleteCellRange
  * Compares the positions of two cell indexes in a sheet.
  * Sorts primarily by row, then by column if rows are equal.
  */
-export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB: string): number => {
+export const compareIndexPositions = (sheet: Sheet.Sheet, indexA: string, indexB: string): number => {
   const { row: rowA, col: columnA } = addressFromIndex(sheet, indexA);
   const { row: rowB, col: columnB } = addressFromIndex(sheet, indexB);
 
@@ -148,7 +121,7 @@ export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB:
 /**
  * Map from A1 notation to indices.
  */
-export const mapFormulaRefsToIndices = (sheet: SheetType, formula: string): string => {
+export const mapFormulaRefsToIndices = (sheet: Sheet.Sheet, formula: string): string => {
   invariant(isFormula(formula));
   return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
     return addressToIndex(sheet, addressFromA1Notation(match));
@@ -158,7 +131,7 @@ export const mapFormulaRefsToIndices = (sheet: SheetType, formula: string): stri
 /**
  * Map from indices to A1 notation.
  */
-export const mapFormulaIndicesToRefs = (sheet: SheetType, formula: string): string => {
+export const mapFormulaIndicesToRefs = (sheet: Sheet.Sheet, formula: string): string => {
   invariant(isFormula(formula));
   return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
     return addressToA1Notation(addressFromIndex(sheet, idx));