@dxos/react-ui-table 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/src/playwright/smoke.spec.ts

@@ -4,16 +4,20 @@
 
 import { expect, test } from '@playwright/test';
 
+import { type DxGrid } from '@dxos/lit-grid';
+import { random } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
 const storyUrl = storybookUrl('ui-react-ui-table-table--default', 9004);
+const relationsStoryUrl = storybookUrl('ui-react-ui-table-relations--default', 9004);
 
-// NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
+// NOTE(ZaymonFC): This test suite relies on the random seed being set to 0 in the story.
 test.describe('Table', () => {
   test('Loads', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -23,22 +27,24 @@ test.describe('Table', () => {
 
   test('sort', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     await table.grid.ready();
     await table.sortColumn(0, 'descending');
-    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Uwe Øvergård');
-    await expect(table.grid.cell(0, 9, 'grid')).toContainText('Anita');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Sit.');
+    await expect(table.grid.cell(0, 9, 'grid')).toContainText('Aut.');
 
     await table.sortColumn(0, 'ascending');
-    await expect(table.grid.cell(0, 0, 'grid')).toContainText('Anita');
-    await expect(table.grid.cell(0, 9, 'grid')).toHaveText('Uwe Øvergård');
+    await expect(table.grid.cell(0, 0, 'grid')).toContainText('Aut.');
+    await expect(table.grid.cell(0, 9, 'grid')).toHaveText('Sit.');
     await page.close();
   });
 
   test('selection', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -60,17 +66,20 @@ test.describe('Table', () => {
 
   test('delete row', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     await table.grid.ready();
+    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(1);
     await table.deleteRow(0);
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(0);
     await page.close();
   });
 
   test('delete row--select all', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -80,14 +89,15 @@ test.describe('Table', () => {
     // Delete action affects all selected rows.
     await table.deleteRow(0);
 
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
-    await expect(page.getByRole('gridcell', { name: 'Phonthip Sigurjónsson' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Aut.' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Beatae.' })).toHaveCount(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(0);
     await page.close();
   });
 
   test('delete column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -111,60 +121,39 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow.
-  // TODO(ZaymonFC): Restore this after fixing format selection.
-  test('add column', async ({ browser, browserName }) => {
+  test('add column without changing format', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     await table.grid.ready();
-    const newColumnLabel = 'TEST LABEL';
+    const newColumnLabel = 'DEFAULT FORMAT COL';
 
-    await table.addColumn({ label: newColumnLabel, format: 'number' });
+    await table.addColumn({ label: newColumnLabel });
 
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
   });
 
-  test('reference > reference / create new object', async ({ browser, browserName }) => {
+  test('add column with format', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     await table.grid.ready();
+    const newColumnLabel = 'TEST LABEL';
 
-    // Reference existing object.
-    // Scroll over to the manager column.
-    await table.grid.panByWheel(10000, 0);
-
-    await table.grid.cell(4, 0, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.press('A', { delay: 1_000 });
-    await page.keyboard.press('n', { delay: 1_000 });
-    await page.getByRole('option', { name: 'Anita Mayer' }).click();
-
-    // Assert that the value is shown in the cell.
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' }).first()).toBeVisible();
-
-    // Create new object.
-    await table.grid.cell(4, 1, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.keyboard.type('e', { delay: 1_000 });
-    await page.keyboard.type('s', { delay: 1_000 });
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.getByText('Create new object', { exact: false }).click();
-    await page.getByTestId('save-button').click();
-
-    // Scroll to the left.
-    await page.getByRole('gridcell', { name: 'test' }).first().click();
+    await table.addColumn({ label: newColumnLabel, format: 'Number' });
 
+    await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
   });
 
-  test('test toggles', async ({ browser, browserName }) => {
+  test.skip('test toggles', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -174,13 +163,161 @@ test.describe('Table', () => {
     await page.getByTestId('table-switch').nth(7).click();
 
     // Test that checks are durable in the data model by sorting.
-    await table.sortColumn(3, 'descending');
+    await table.sortColumn(1, 'descending');
 
     // Assert the first two switch checkboxes are checked.
     await expect(page.getByTestId('table-switch').first()).toBeChecked();
     await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
-    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Anita Mayer');
-    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Uwe Øvergård');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Aut.');
+    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Beatae.');
+
+    await page.close();
+  });
+
+  test('add row and edit cell', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    // Click the CTA row at the bottom to add a new row.
+    await table.grid.cell(0, 0, 'frozenRowsEnd').click();
+
+    // All schema fields are optional so the row is added directly to the grid (not as a draft).
+    const newCell = table.grid.cell(0, 10, 'grid');
+    await newCell.waitFor({ state: 'visible' });
+
+    // Focus should already be on the new row; engage edit mode.
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Type text and confirm.
+    const cellContent = 'New row content';
+    await page.keyboard.type(cellContent);
+    await page.keyboard.press('Enter');
+
+    // Assert the cell content is saved.
+    await expect(newCell).toHaveText(cellContent);
+    await page.close();
+  });
+
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('extant relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=4 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.pause();
+    await page.getByPlaceholder('Search…').focus();
+
+    // Type the first few letters of an org name.
+    const orgName =
+      (await page
+        .locator('dx-grid')
+        .nth(0)
+        .locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content')
+        .textContent()) ?? 'never';
+    await page.keyboard.type(orgName.substring(0, 4), { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+
+    // Save the result
+    await page.getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    await page.close();
+  });
+
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('new relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=8 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.getByPlaceholder('Search…').focus();
+
+    // Type the first few letters of an org name.
+    const orgName = 'Sally';
+    await page.keyboard.type(orgName, { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+    await page.pause();
+
+    // Click the save button in the popover
+    await page.getByTestId('create-referenced-object-form').getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    // Make a change to a non-ref cell to check that populated refs don’t cause problems with snapshots or schemas.
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(6);
+    });
+
+    const nonRefContent = random.lorem.words(3);
+    const nonRefCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="6"]');
+    await nonRefCell.click();
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+    await page.keyboard.type(nonRefContent, { delay: 500 });
+    await page.keyboard.press('Enter');
+    await expect(nonRefCell).toHaveText(nonRefContent);
 
     await page.close();
   });

package/src/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useTestTableModel';

package/src/testing/useTestTableModel.ts

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RegistryContext } from '@effect-atom/atom-react';
+import { type RefObject, useCallback, useContext, useMemo, useRef } from 'react';
+
+import { type Database, type Type } from '@dxos/echo';
+import { isMutable } from '@dxos/echo/internal';
+import { random } from '@dxos/random';
+import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { useClientStory } from '@dxos/react-client/testing';
+import { useGlobalFilteredObjects } from '@dxos/react-ui-search';
+import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
+
+import { type TableController } from '../components';
+import { useAddRow, useProjectionModel, useTableModel } from '../hooks';
+import { type TableModel, TablePresentation } from '../model';
+import { Table } from '../types';
+
+random.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+
+export type TestTableModel<T extends Type.AnyObj = Type.AnyObj> = {
+  schema: T | undefined;
+  table: Table.Table | undefined;
+  projection: ProjectionModel | undefined;
+  tableRef: RefObject<TableController | null>;
+  model: TableModel | undefined;
+  presentation: TablePresentation | undefined;
+  db: Database.Database | undefined;
+  handleInsertRow: () => void;
+  handleSaveView: () => void;
+  handleDeleteRows: (rowIndex: number, objects: any[]) => void;
+  handleDeleteColumn: (fieldId: string) => void;
+};
+
+/**
+ * Custom hook to create and manage a test table model for storybook demonstrations.
+ * Provides table data, schema, and handlers for table operations.
+ */
+export const useTestTableModel = <T extends Type.AnyObj = Type.AnyObj>(): TestTableModel<T> => {
+  const registry = useContext(RegistryContext);
+  const { space } = useClientStory();
+  const db = space?.db;
+
+  const tables = useQuery(space?.db, Filter.type(Table.Table));
+  const table = tables.at(0);
+  const typename = table?.view.target?.query ? getTypenameFromQuery(table.view.target.query.ast) : undefined;
+  const schema = useSchema<T>(space?.db, typename);
+  const projection = useProjectionModel(schema, table, registry);
+
+  const features = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: schema && isMutable(schema),
+    }),
+    [schema],
+  );
+
+  const objects = useQuery(db, schema ? Filter.type(schema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChange = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const addRow = useAddRow({ db, schema });
+
+  const handleDeleteRows = useCallback(
+    (_: number, objects: any[]) => {
+      for (const object of objects) {
+        db?.remove(object);
+      }
+    },
+    [db],
+  );
+
+  const handleDeleteColumn = useCallback(
+    (fieldId: string) => {
+      if (projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [projection],
+  );
+
+  const model = useTableModel({
+    object: table,
+    projection,
+    features,
+    rows: filteredObjects,
+    onInsertRow: addRow,
+    onDeleteRows: handleDeleteRows,
+    onColumnDelete: handleDeleteColumn,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+  });
+
+  const handleInsertRow = useCallback(() => {
+    const insertResult = model?.insertRow();
+    tableRef.current?.handleInsertRowResult?.(insertResult);
+  }, [model]);
+
+  const handleSaveView = useCallback(() => {
+    model?.saveView();
+  }, [model]);
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(registry, model);
+    }
+  }, [registry, model]);
+
+  return {
+    schema,
+    table,
+    projection,
+    tableRef,
+    model,
+    presentation,
+    db,
+    handleInsertRow,
+    handleSaveView,
+    handleDeleteRows,
+    handleDeleteColumn,
+  };
+};

package/src/translations.ts

@@ -4,33 +4,31 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-table';
+export const translationKey = '@dxos/react-ui-table';
 
 export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'object placeholder': 'New table',
-        'create object label': 'Create table',
-        'table name placeholder': 'Table name',
-        'settings title': 'Table settings',
-        'table schema label': 'Schema',
-        'new schema': 'New schema',
-        'continue label': 'Continue',
-        'create stack section label': 'Create table',
-        'add row label': 'Add row',
-        'create comment': 'Create thread',
-        'column action sort descending': 'Sort Descending',
-        'column action sort ascending': 'Sort Ascending',
-        'column action clear sorting': 'Clear Sorting',
-        'column action settings': 'Column Settings',
-        'column action delete': 'Delete Column',
-        'delete row label': 'Delete row',
-        'bulk delete row label': 'Delete selected rows',
-        'column deleted label': 'Column deleted',
-        'new column button label': 'Create column',
-        'create new object label': 'Create new object “{{text}}”',
-        'save view label': 'Save changes to view',
+        'object.placeholder': 'New table',
+        'create-object.label': 'Create table',
+        'table-name.placeholder': 'Table name',
+        'settings.title': 'Table settings',
+        'table-schema.label': 'Type',
+        'continue.label': 'Continue',
+        'create-stack-section.label': 'Create table',
+        'add-row.label': 'Add row',
+        'column-action-sort-descending.menu': 'Sort Descending',
+        'column-action-sort-ascending.menu': 'Sort Ascending',
+        'column-action-clear-sorting.menu': 'Clear Sorting',
+        'column-action-settings.menu': 'Column Settings',
+        'column-action-delete.menu': 'Delete Column',
+        'delete-row.label': 'Delete row',
+        'bulk-delete-row.label': 'Delete selected rows',
+        'column-deleted.label': 'Column deleted',
+        'new-column-button.label': 'Create column',
+        'create-new-object.label': 'Create new object “{{text}}”',
+        'save-view.label': 'Save changes to view',
       },
     },
   },

package/src/types/Table.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { Annotation, JsonSchema, Obj, Ref, Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
+import { FormInputAnnotation, type JsonPath, type JsonSchemaType, LabelAnnotation } from '@dxos/echo/internal';
+import { ViewAnnotation } from '@dxos/schema';
+
+export const Table = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+
+  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+
+  sizes: Schema.Record({
+    // TODO(wittjosiah): Should be JsonPath.
+    key: Schema.String,
+    value: Schema.Number,
+  }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.type.table',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name']),
+  ViewAnnotation.set(['view']),
+  Annotation.IconAnnotation.set({
+    icon: 'ph--table--regular',
+    hue: 'green',
+  }),
+);
+
+export interface Table extends Schema.Schema.Type<typeof Table> {}
+
+type MakeProps = {
+  name?: string;
+  sizes?: Record<string, number>;
+  view: View.View;
+  /** Required to auto-size columns. */
+  jsonSchema?: JsonSchemaType;
+};
+
+/**
+ * Make a table as a view of a data set.
+ */
+export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {
+  const table = Obj.make(Table, { name, view: Ref.make(view), sizes } as Obj.MakeProps<typeof Table>);
+
+  // Preset sizes.
+  if (jsonSchema) {
+    const schema = JsonSchema.toEffectSchema(jsonSchema);
+    const properties = SchemaAST.getPropertySignatures(schema.ast);
+    for (const property of properties) {
+      const name = property.name.toString() as JsonPath;
+      if (sizes?.[name]) {
+        table.sizes[name] = sizes[name];
+        continue;
+      }
+
+      Match.type<SchemaAST.AST>().pipe(
+        Match.when({ _tag: 'BooleanKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.when({ _tag: 'NumberKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.orElse(() => {
+          // Noop.
+        }),
+      )(property.type);
+    }
+  }
+
+  return table;
+};

package/src/types/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './table';
+export * as Table from './Table';