@dxos/plugin-sheet 0.7.1 → 0.7.2-main.f1adc9f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.7.1",
+  "version": "0.7.2-main.f1adc9f",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -69,33 +69,33 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/client": "0.7.1",
-    "@dxos/app-framework": "0.7.1",
-    "@dxos/async": "0.7.1",
-    "@dxos/crypto": "0.7.1",
-    "@dxos/debug": "0.7.1",
-    "@dxos/context": "0.7.1",
-    "@dxos/echo-schema": "0.7.1",
-    "@dxos/invariant": "0.7.1",
-    "@dxos/log": "0.7.1",
-    "@dxos/plugin-attention": "0.7.1",
-    "@dxos/plugin-client": "0.7.1",
-    "@dxos/keys": "0.7.1",
-    "@dxos/plugin-markdown": "0.7.1",
-    "@dxos/plugin-stack": "0.7.1",
-    "@dxos/plugin-graph": "0.7.1",
-    "@dxos/plugin-script": "0.7.1",
-    "@dxos/plugin-space": "0.7.1",
-    "@dxos/react-client": "0.7.1",
-    "@dxos/react-ui-attention": "0.7.1",
-    "@dxos/react-hooks": "0.7.1",
-    "@dxos/react-ui-grid": "0.7.1",
-    "@dxos/react-ui-form": "0.7.1",
-    "@dxos/react-ui-editor": "0.7.1",
-    "@dxos/react-ui-list": "0.7.1",
-    "@dxos/schema": "0.7.1",
-    "@dxos/react-ui-stack": "0.7.1",
-    "@dxos/util": "0.7.1"
+    "@dxos/app-framework": "0.7.2-main.f1adc9f",
+    "@dxos/client": "0.7.2-main.f1adc9f",
+    "@dxos/context": "0.7.2-main.f1adc9f",
+    "@dxos/async": "0.7.2-main.f1adc9f",
+    "@dxos/crypto": "0.7.2-main.f1adc9f",
+    "@dxos/debug": "0.7.2-main.f1adc9f",
+    "@dxos/invariant": "0.7.2-main.f1adc9f",
+    "@dxos/echo-schema": "0.7.2-main.f1adc9f",
+    "@dxos/keys": "0.7.2-main.f1adc9f",
+    "@dxos/log": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-client": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-attention": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-graph": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-script": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-markdown": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-space": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-stack": "0.7.2-main.f1adc9f",
+    "@dxos/react-client": "0.7.2-main.f1adc9f",
+    "@dxos/react-hooks": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-attention": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-editor": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-list": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-grid": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-stack": "0.7.2-main.f1adc9f",
+    "@dxos/util": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-form": "0.7.2-main.f1adc9f",
+    "@dxos/schema": "0.7.2-main.f1adc9f"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -107,19 +107,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.7.1",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-syntax-highlighter": "0.7.1",
-    "@dxos/random": "0.7.1",
-    "@dxos/react-ui-types": "0.7.1",
-    "@dxos/storybook-utils": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1"
+    "@dxos/lit-grid": "0.7.2-main.f1adc9f",
+    "@dxos/random": "0.7.2-main.f1adc9f",
+    "@dxos/echo-generator": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-syntax-highlighter": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-types": "0.7.2-main.f1adc9f",
+    "@dxos/storybook-utils": "0.7.2-main.f1adc9f",
+    "@dxos/test-utils": "0.7.2-main.f1adc9f"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1"
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui": "0.7.2-main.f1adc9f"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -13,7 +13,7 @@ import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 import { Icon } from '@dxos/react-ui';
 
-import { ComputeGraphContextProvider, RangeList, SheetContainer } from './components';
+import { ComputeGraphContextProvider, SheetContainer, SheetObjectSettings } from './components';
 import { type ComputeGraphRegistry } from './compute-graph';
 import { compareIndexPositions, createSheet } from './defs';
 import { computeGraphFacet } from './extensions';
@@ -144,26 +144,18 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       surface: {
         component: ({ data, role }) => {
           const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
-          if (!space) {
-            return null;
-          }
-
           switch (role) {
             case 'article':
             case 'section':
-              if (data.object instanceof SheetType) {
+              if (space && data.object instanceof SheetType) {
                 return <SheetContainer space={space} sheet={data.object} role={role} />;
               }
-
-              return null;
+              break;
             case 'complementary--settings':
               if (data.subject instanceof SheetType) {
-                return {
-                  node: <RangeList sheet={data.subject} />,
-                };
+                return <SheetObjectSettings sheet={data.subject} />;
               }
-
-              return null;
+              break;
           }
 
           return null;

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

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
+
 import { type Meta } from '@storybook/react';
 import React from 'react';
 

package/src/components/GridSheet/GridSheet.tsx

@@ -335,21 +335,30 @@ export const GridSheet = () => {
         <DropdownMenu.VirtualTrigger virtualRef={contextMenuAnchorRef} />
         <DropdownMenu.Content side={contextMenuAxis === 'col' ? 'bottom' : 'right'} sideOffset={4} collisionPadding={8}>
           <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-before')}>
+            <DropdownMenu.Item
+              onClick={() => handleAxisMenuAction('insert-before')}
+              data-testid={`grid.${contextMenuAxis}.insert-before`}
+            >
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
               />
               <span>{t(`add ${contextMenuAxis} before label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-after')}>
+            <DropdownMenu.Item
+              onClick={() => handleAxisMenuAction('insert-after')}
+              data-testid={`grid.${contextMenuAxis}.insert-after`}
+            >
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
               />
               <span>{t(`add ${contextMenuAxis} after label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('drop')}>
+            <DropdownMenu.Item
+              onClick={() => handleAxisMenuAction('drop')}
+              data-testid={`grid.${contextMenuAxis}.drop`}
+            >
               <Icon size={5} icon='ph--backspace--regular' />
               <span>{t(`delete ${contextMenuAxis} label`)}</span>
             </DropdownMenu.Item>

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

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
+import { createDocAccessor, type ReactiveEchoObject } 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';
@@ -33,7 +33,7 @@ const Story = ({ value, ...props }: StoryProps) => {
 
 const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
+  const [object, setObject] = useState<ReactiveEchoObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
       const client = new Client({ types: [SheetType] });

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -2,18 +2,40 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
+
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { useSpace } from '@dxos/react-client/echo';
+import { type Intent, IntentProvider } from '@dxos/app-framework';
+import { useSpace, create } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import translations from '../../translations';
-import { SheetType } from '../../types';
+import { SheetAction, SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
+import { RangeList } from '../RangeList';
+
+// TODO(thure via wittjosiah):  stories/components should be written such that the dependency on intents is external and provided via callback and then the story can implement it differently.
+const storybookIntentValue = create({
+  dispatch: async (intents: Intent | Intent[]) => {
+    const intent = Array.isArray(intents) ? intents[0] : intents;
+    switch (intent.action) {
+      case SheetAction.DROP_AXIS: {
+        if (!intent.undo) {
+          const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
+          model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+        }
+      }
+    }
+  },
+  undo: async () => ({}),
+  history: [],
+  registerResolver: () => () => {},
+});
 
 export const Basic = () => {
   const space = useSpace();
@@ -26,6 +48,26 @@ export const Basic = () => {
   return <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />;
 };
 
+export const Spec = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
+  if (!sheet || !space) {
+    return null;
+  }
+
+  return (
+    <IntentProvider value={storybookIntentValue}>
+      <div role='none' className='grid grid-rows-[66%_33%] grid-cols-1'>
+        <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
+        <div role='none' data-testid='grid.range-list'>
+          <RangeList sheet={sheet} />
+        </div>
+      </div>
+    </IntentProvider>
+  );
+};
+
 const meta: Meta = {
   title: 'plugins/plugin-sheet/SheetContainer',
   component: SheetContainer,

package/src/components/SheetObjectSettings.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { SPACE_PLUGIN } from '@dxos/plugin-space/meta';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { RangeList } from './RangeList';
+import { type SheetType } from '../types';
+
+export type SheetObjectSettingsProps = {
+  sheet: SheetType;
+};
+
+export const SheetObjectSettings = ({ sheet }: SheetObjectSettingsProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  // TODO(burdon): Standardize forms.
+  return (
+    <>
+      <div role='form' className='flex flex-col w-full p-2 gap-1'>
+        <Input.Root>
+          <Input.Label>{t('name label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('name placeholder')}
+            value={sheet.name ?? ''}
+            onChange={(event) => {
+              sheet.name = event.target.value;
+            }}
+          />
+        </Input.Root>
+      </div>
+      <RangeList sheet={sheet} />
+    </>
+  );
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -225,7 +225,13 @@ const Alignment = () => {
       onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
     >
       {alignmentOptions.map(({ value, icon }) => (
-        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
+        <ToolbarItem
+          itemType='toggleGroupItem'
+          key={value}
+          value={value}
+          icon={icon}
+          data-testid={`grid.toolbar.${alignKey}.${value}`}
+        >
           {t('toolbar action label', {
             key: t(`range key ${alignKey} label`),
             value: t(`range value ${value} label`),

package/src/components/index.ts

@@ -8,5 +8,6 @@ export * from './ComputeGraph';
 export * from './GridSheet';
 export * from './RangeList';
 export * from './SheetContext';
+export * from './SheetObjectSettings';
 
 export const SheetContainer = lazy(() => import('./SheetContainer'));

package/src/compute-graph/compute-graph.stories.tsx

@@ -45,7 +45,7 @@ const Story = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(create(FunctionType, { version: 1, binding: FUNCTION_NAME }));
+      space.db.add(create(FunctionType, { name: 'test', version: 1, binding: FUNCTION_NAME }));
     }
   }, [space, graph]);
 

package/src/compute-graph/compute-graph.test.ts

@@ -30,7 +30,7 @@ describe('ComputeGraph', () => {
     // Create script.
     const trigger = new Trigger();
     graph.update.once(() => trigger.wake());
-    const functionObject = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
+    const functionObject = space.db.add(create(FunctionType, { name: 'test', version: 1, binding: 'TEST' }));
     await trigger.wait();
     const functions = graph.getFunctions({ echo: true });
     expect(functions).to.toHaveLength(1);

package/src/integrations/thread-ranges.ts

@@ -43,6 +43,8 @@ export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null
           // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
           const range = parseThreadAnchorAsCellRange(data.cursor);
           range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+
+          return { data: true };
         }
       }
     },

package/src/sanity.test.ts

@@ -34,7 +34,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(create(FunctionType, { version: 1, binding: 'HELLO' }));
+    const fn = space.db.add(create(FunctionType, { name: 'test', version: 1, binding: 'HELLO' }));
     expect(fn).to.exist;
   });
 });

package/src/testing/playwright/playwright.config.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/testing/playwright/sheet-manager.ts

@@ -0,0 +1,91 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Locator, type Page } from '@playwright/test';
+
+import { DxGridManager } from '@dxos/lit-grid/testing';
+import { type DxGridPosition, type DxGridAxis } from '@dxos/react-ui-grid';
+
+/**
+ * Test helper for managing dx-grid interactions and assertions in Playwright tests.
+ * Provides utilities for cell selection, grid navigation, virtualization checks and event handling.
+ */
+export class SheetManager {
+  constructor(page: Page, grid?: Locator) {
+    this.grid = new DxGridManager(page, grid);
+    this.page = page;
+  }
+
+  grid: DxGridManager;
+  page: Page;
+
+  async ready() {
+    await this.grid.ready();
+    return this.cellByText('Ready').waitFor({ state: 'visible' });
+  }
+
+  async fill(text: string) {
+    // TODO(thure): Do these timeouts help with test flakiness?
+    await this.page.waitForTimeout(200);
+    await this.cellEditor().fill(text);
+    await this.page.waitForTimeout(200);
+  }
+
+  async press(key: string) {
+    // TODO(thure): Does these timeouts help with test flakiness?
+    await this.page.waitForTimeout(200);
+    await this.page.keyboard.press(key);
+    await this.page.waitForTimeout(200);
+  }
+
+  async commit(key: string) {
+    // TODO(thure): Why do we need to wait? Enter is ignored otherwise…
+    await this.page.waitForTimeout(500);
+    await this.press(key);
+  }
+
+  cellByText(text: string) {
+    return this.grid.grid.getByText(text);
+  }
+
+  async setFocusedCellValue(text: string, commitKey: string) {
+    const mode = await this.grid.mode();
+    if (mode === 'browse') {
+      await this.commit('Enter');
+    }
+    await this.fill(text);
+    await this.commit(commitKey);
+  }
+
+  async selectRange(start: DxGridPosition, end: DxGridPosition) {
+    const startCell = this.grid.cell(start.col, start.row, start.plane);
+    const endCell = this.grid.cell(end.col, end.row, end.plane);
+    const startBox = await startCell.boundingBox();
+    const endBox = await endCell.boundingBox();
+    await startCell.dragTo(endCell, {
+      sourcePosition: { x: startBox!.width / 2, y: startBox!.height / 2 },
+      targetPosition: { x: endBox!.width / 2, y: endBox!.height / 2 },
+    });
+  }
+
+  async deleteAxis(axis: DxGridAxis, position: number) {
+    const col = axis === 'row' ? 0 : position;
+    const row = axis === 'row' ? position : 0;
+    const plane = axis === 'row' ? 'frozenColsStart' : 'frozenRowsStart';
+    await this.grid.cell(col, row, plane).click({ button: 'right' });
+    await this.page.getByTestId(`grid.${axis}.drop`).click();
+  }
+
+  toolbarAction(key: string, value: string) {
+    return this.page.getByTestId(`grid.toolbar.${key}.${value}`);
+  }
+
+  cellEditor() {
+    return this.page.getByTestId('grid.cell-editor').getByRole('textbox');
+  }
+
+  rangeInList(a1Coords: string) {
+    return this.page.getByTestId('grid.range-list').getByText(a1Coords);
+  }
+}

package/src/testing/playwright/sheet.spec.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { expect, test, type Page } from '@playwright/test';
+
+import { faker } from '@dxos/random';
+import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
+
+import { SheetManager } from './sheet-manager';
+
+test.describe('plugin-sheet', () => {
+  let page: Page;
+  let sheet: SheetManager;
+
+  test.beforeEach(async ({ browser }) => {
+    const setup = await setupPage(browser, {
+      url: storybookUrl('plugins-plugin-sheet-sheetcontainer--spec'),
+    });
+    page = setup.page;
+    sheet = new SheetManager(page);
+    await sheet.ready();
+  });
+
+  test.afterEach(async () => {
+    await page.close();
+  });
+
+  test('basic interactions', async () => {
+    // Cell editor should initially be hidden
+    await expect(sheet.cellEditor()).not.toBeVisible();
+    // Click on cell to focus it
+    await sheet.grid.cell(0, 0, 'grid').click();
+    // Cell editor should still be hidden
+    await expect(sheet.cellEditor()).not.toBeVisible();
+    // Click again to edit it
+    await sheet.grid.cell(0, 0, 'grid').click();
+    // Confirm editor displays
+    await expect(sheet.cellEditor()).toBeVisible();
+    // Type in a value and press enter
+    const testString = faker.string.uuid();
+    await sheet.setFocusedCellValue(testString, 'Enter');
+    // Expect that value to now show in the grid
+    await expect(sheet.cellByText(testString)).toBeVisible();
+  });
+
+  test('functions, row deletion, indexed positions', async () => {
+    const firstNumber = 123;
+    const secondNumber = 789;
+    const thirdNumber = 567;
+    // Input numbers
+    await sheet.grid.cell(0, 2, 'grid').click();
+    await sheet.setFocusedCellValue(`${firstNumber}`, 'Enter');
+    await sheet.setFocusedCellValue(`${secondNumber}`, 'Enter');
+    await sheet.setFocusedCellValue(`${thirdNumber}`, 'Enter');
+
+    // Test range input
+    await sheet.press('Enter');
+    await sheet.fill('=SUM(');
+    await sheet.selectRange({ col: 0, row: 2, plane: 'grid' }, { col: 0, row: 4, plane: 'grid' });
+    await sheet.press(')');
+    await sheet.commit('Enter');
+    // Check sum
+    await expect(sheet.grid.cell(0, 5, 'grid')).toHaveText(`${firstNumber + secondNumber + thirdNumber}`);
+    // Delete row of second number
+    await sheet.deleteAxis('row', 3);
+    // Check sum again, it should be one cell up and reflect the updated range.
+    await expect(sheet.grid.cell(0, 4, 'grid')).toHaveText(`${firstNumber + thirdNumber}`);
+  });
+
+  test('ranges', async () => {
+    await sheet.selectRange({ col: 1, row: 0, plane: 'grid' }, { col: 1, row: 1, plane: 'grid' });
+    await sheet.toolbarAction('alignment', 'center').click();
+    expect(await sheet.grid.cell(1, 0, 'grid')).toHaveAttribute('class', /text-center/);
+    expect(await sheet.grid.cell(1, 1, 'grid')).toHaveAttribute('class', /text-center/);
+    await expect(sheet.rangeInList('B1:B2')).toBeVisible();
+  });
+});