@dxos/plugin-sheet 0.6.12-main.ed7cda7 → 0.6.12-staging.0b4bb48

package/src/components/Toolbar/Toolbar.tsx

@@ -23,31 +23,22 @@ import {
   type ThemedClassName,
   useTranslation,
 } from '@dxos/react-ui';
-import { nonNullable } from '@dxos/util';
 
 import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
-import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
 import { type Formatting } from '../../types';
-import { useSheetContext } from '../Sheet/sheet-context';
 
 //
 // Root
 //
 
-export type ToolbarAction =
-  | { type: 'clear' }
-  | { type: 'highlight' }
-  | { type: 'left' }
-  | { type: 'center' }
-  | { type: 'right' }
-  | { type: 'date' }
-  | { type: 'currency' }
-  | { type: 'comment'; anchor: string; cellContent?: string };
+export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
 
-export type ToolbarActionType = ToolbarAction['type'];
+export type ToolbarAction = {
+  type: ToolbarActionType;
+};
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -105,7 +96,7 @@ const Format = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -136,7 +127,7 @@ const Alignment = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -166,7 +157,7 @@ const Styles = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -180,49 +171,17 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  // const { onAction } = useToolbarContext('Actions');
   const { t } = useTranslation(SHEET_PLUGIN);
-
-  const overlapsCommentAnchor = (model.sheet.threads ?? [])
-    .filter(nonNullable)
-    .filter((thread) => thread.status !== 'resolved')
-    .some((thread) => {
-      if (!cursor) {
-        return false;
-      }
-      return addressToIndex(model.sheet, cursor) === thread.anchor;
-    });
-
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-
-  const tooltipLabelKey = !hasCursor
-    ? 'no cursor label'
-    : overlapsCommentAnchor
-      ? 'selection overlaps existing comment label'
-      : range
-        ? 'comment ranges not supported label'
-        : 'comment label';
-
   return (
     <ToolbarButton
       value='comment'
       Icon={ChatText}
       data-testid='editor.toolbar.comment'
-      onClick={() => {
-        if (!cursor) {
-          return;
-        }
-        return onAction?.({
-          type: 'comment',
-          anchor: addressToIndex(model.sheet, cursor),
-          cellContent: model.getCellText(cursor),
-        });
-      }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      // onClick={() => onAction?.({ type: 'comment' })}
+      // disabled={!state || state.comment || !state.selection}
     >
-      {t(tooltipLabelKey)}
+      {t('comment label')}
     </ToolbarButton>
   );
 };

package/src/components/index.ts

@@ -5,7 +5,6 @@
 import React from 'react';
 
 export * from './ComputeGraph';
-export * from './Sheet';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/meta.tsx

@@ -2,6 +2,9 @@
 // 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';
@@ -10,5 +13,6 @@ export default pluginMeta({
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
-  icon: 'ph--grid-nine--regular',
+  iconComponent: (props: IconProps) => <GridNine {...props} />,
+  iconSymbol: 'ph--grid-nine--regular',
 });

package/src/model/index.ts

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

package/src/model/model.browser.test.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+import { describe, test } from 'vitest';
+
+import { SheetModel } from './model';
+import { addressFromA1Notation, rangeFromA1Notation } from './types';
+import { createComputeGraph } from '../components';
+import { createSheet, ValueTypeEnum } from '../types';
+
+// TODO(burdon): Test undo (e.g., clear cells).
+
+/**
+ * VITEST_ENV=chrome p vitest --watch
+ * NOTE: Browser test required for hyperformula due to raw translation files.
+ */
+describe('model', () => {
+  const createModel = async () => {
+    const graph = createComputeGraph();
+    const sheet = createSheet();
+    const model = new SheetModel(graph, sheet, undefined, { rows: 5, columns: 5 });
+    await model.initialize();
+    return model;
+  };
+
+  test('create', async () => {
+    const model = await createModel();
+    expect(model.bounds).to.deep.eq({ rows: 5, columns: 5 });
+    model.setValue(addressFromA1Notation('A1'), 100);
+    const value = model.getValue(addressFromA1Notation('A1'));
+    expect(value).to.eq(100);
+  });
+
+  test('map formula', async () => {
+    const model = await createModel();
+    const x1 = model.mapFormulaRefsToIndices('=SUM(A1:A3)');
+    const x2 = model.mapFormulaIndicesToRefs(x1);
+    expect(x2).to.eq('=SUM(A1:A3)');
+  });
+
+  test('dates', async () => {
+    const model = await createModel();
+    const cell = addressFromA1Notation('A1');
+    model.setValue(cell, '=NOW()');
+    const type = model.getValueType(cell);
+    expect(type).to.eq(ValueTypeEnum.DateTime);
+    const value = model.getValue(cell);
+    const date = model.toLocalDate(value as number);
+    const now = new Date();
+    expect(date.getUTCFullYear()).to.eq(now.getUTCFullYear());
+    expect(date.getUTCMonth()).to.eq(now.getUTCMonth());
+    expect(date.getUTCDate()).to.eq(now.getUTCDate());
+  });
+
+  test('formula', async () => {
+    const model = await createModel();
+
+    // Nested formula.
+    {
+      model.setValue(addressFromA1Notation('A1'), 100);
+      model.setValue(addressFromA1Notation('A2'), 200);
+      model.setValue(addressFromA1Notation('A3'), '=SUM(A1:A2)');
+      model.setValue(addressFromA1Notation('A4'), '=SUM(A1:A3)');
+      const value = model.getValue(addressFromA1Notation('A4'));
+      expect(value).to.eq(600);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A4'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A3)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+
+    // Insert row.
+    {
+      model.insertRows(2, 1);
+      model.setValue(addressFromA1Notation('A3'), 400);
+      const value = model.getValue(addressFromA1Notation('A5'));
+      expect(value).to.eq(1000);
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A5'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [400],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A4)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+  });
+});