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

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, SheetContainer, SheetObjectSettings } from './components';
+import { ComputeGraphContextProvider, RangeList, SheetContainer } from './components';
 import { type ComputeGraphRegistry } from './compute-graph';
 import { compareIndexPositions, createSheet } from './defs';
 import { computeGraphFacet } from './extensions';
@@ -144,18 +144,26 @@ 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 (space && data.object instanceof SheetType) {
+              if (data.object instanceof SheetType) {
                 return <SheetContainer space={space} sheet={data.object} role={role} />;
               }
-              break;
+
+              return null;
             case 'complementary--settings':
               if (data.subject instanceof SheetType) {
-                return <SheetObjectSettings sheet={data.subject} />;
+                return {
+                  node: <RangeList sheet={data.subject} />,
+                };
               }
-              break;
+
+              return null;
           }
 
           return null;

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

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

package/src/components/GridSheet/GridSheet.tsx

@@ -335,30 +335,21 @@ 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')}
-              data-testid={`grid.${contextMenuAxis}.insert-before`}
-            >
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('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')}
-              data-testid={`grid.${contextMenuAxis}.insert-after`}
-            >
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('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')}
-              data-testid={`grid.${contextMenuAxis}.drop`}
-            >
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('drop')}>
               <Icon size={5} icon='ph--backspace--regular' />
               <span>{t(`delete ${contextMenuAxis} label`)}</span>
             </DropdownMenu.Item>

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

@@ -2,40 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { type Intent, IntentProvider } from '@dxos/app-framework';
-import { useSpace, create } from '@dxos/react-client/echo';
+import { useSpace } 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 { SheetAction, SheetType } from '../../types';
+import { 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();
@@ -48,26 +26,6 @@ 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/Toolbar/Toolbar.tsx

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

package/src/components/index.ts

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

package/src/integrations/thread-ranges.ts

@@ -43,8 +43,6 @@ 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/dist/types/src/components/SheetObjectSettings.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { type SheetType } from '../types';
-export type SheetObjectSettingsProps = {
-    sheet: SheetType;
-};
-export declare const SheetObjectSettings: ({ sheet }: SheetObjectSettingsProps) => React.JSX.Element;
-//# sourceMappingURL=SheetObjectSettings.d.ts.map

package/dist/types/src/components/SheetObjectSettings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SheetObjectSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/SheetObjectSettings.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,cAAe,wBAAwB,sBAqBtE,CAAC"}

package/dist/types/src/testing/playwright/playwright.config.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
-export default _default;
-//# sourceMappingURL=playwright.config.d.ts.map

package/dist/types/src/testing/playwright/playwright.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../../src/testing/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}

package/dist/types/src/testing/playwright/sheet-manager.d.ts

@@ -1,24 +0,0 @@
-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 declare class SheetManager {
-    constructor(page: Page, grid?: Locator);
-    grid: DxGridManager;
-    page: Page;
-    ready(): Promise<void>;
-    fill(text: string): Promise<void>;
-    press(key: string): Promise<void>;
-    commit(key: string): Promise<void>;
-    cellByText(text: string): Locator;
-    setFocusedCellValue(text: string, commitKey: string): Promise<void>;
-    selectRange(start: DxGridPosition, end: DxGridPosition): Promise<void>;
-    deleteAxis(axis: DxGridAxis, position: number): Promise<void>;
-    toolbarAction(key: string, value: string): Locator;
-    cellEditor(): Locator;
-    rangeInList(a1Coords: string): Locator;
-}
-//# sourceMappingURL=sheet-manager.d.ts.map

package/dist/types/src/testing/playwright/sheet-manager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sheet-manager.d.ts","sourceRoot":"","sources":["../../../../../src/testing/playwright/sheet-manager.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE3E;;;GAGG;AACH,qBAAa,YAAY;gBACX,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,OAAO;IAKtC,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC;IAEL,KAAK;IAKL,IAAI,CAAC,IAAI,EAAE,MAAM;IAOjB,KAAK,CAAC,GAAG,EAAE,MAAM;IAOjB,MAAM,CAAC,GAAG,EAAE,MAAM;IAMxB,UAAU,CAAC,IAAI,EAAE,MAAM;IAIjB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM;IASnD,WAAW,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc;IAWtD,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM;IAQnD,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAIxC,UAAU;IAIV,WAAW,CAAC,QAAQ,EAAE,MAAM;CAG7B"}

package/dist/types/src/testing/playwright/sheet.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=sheet.spec.d.ts.map

package/dist/types/src/testing/playwright/sheet.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sheet.spec.d.ts","sourceRoot":"","sources":["../../../../../src/testing/playwright/sheet.spec.ts"],"names":[],"mappings":""}

package/src/components/SheetObjectSettings.tsx

@@ -1,38 +0,0 @@
-//
-// 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/testing/playwright/playwright.config.ts

@@ -1,18 +0,0 @@
-//
-// 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

@@ -1,91 +0,0 @@
-//
-// 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

@@ -1,78 +0,0 @@
-//
-// 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();
-  });
-});