@dxos/react-ui-table 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -25,16 +25,9 @@ import {
 import { type FieldProjection } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
-
 import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
-const editorSlots = {
-  scroll: {
-    className: '!plb-[--dx-grid-cell-editor-padding-block]',
-  },
-};
-
 /**
  * Option to create new object/value.
  */
@@ -42,7 +35,7 @@ export type QueryResult = Pick<Completion, 'label'> & {
   data: any;
 };
 
-export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type TableCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   schema?: T;
   model?: TableModel;
   modals?: ModalController;
@@ -51,7 +44,7 @@ export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> =
   onSave?: () => void;
 };
 
-export const TableValueEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -250,7 +243,16 @@ export const TableCellEditor = ({
   return (
     <>
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
-      <GridCellEditor extensions={extensions} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
+      <GridCellEditor
+        extensions={extensions}
+        slots={{
+          content: {
+            className: '!py-(--dx-grid-cell-editor-padding-block)',
+          },
+        }}
+        getCellContent={getCellContent}
+        onBlur={handleBlur}
+      />
     </>
   );
 };

package/src/components/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './Table';
-export * from './TableToolbar';

package/src/components/testing.ts

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { Format, Type } from '@dxos/echo';
 import { TypeEnum } from '@dxos/echo/internal';
 import { setValue } from '@dxos/effect';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = Schema.Struct({
@@ -19,7 +19,7 @@ export const TestSchema = Schema.Struct({
   netWorth: Schema.optional(Schema.Number),
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );
@@ -37,10 +37,10 @@ export type TestItem = {
 export const createItemsAtom = (n: number) => {
   return Atom.make<{ data: TestItem[] }>({
     data: Array.from({ length: n }, () => ({
-      name: faker.person.fullName(),
-      age: faker.number.int({ min: 20, max: 70 }),
-      active: faker.datatype.boolean(),
-      netWorth: faker.number.int(),
+      name: random.person.fullName(),
+      age: random.number.int({ min: 20, max: 70 }),
+      active: random.datatype.boolean(),
+      netWorth: random.number.int(),
     })),
   }).pipe(Atom.keepAlive);
 };
@@ -50,10 +50,10 @@ export const createItemsAtom = (n: number) => {
  */
 export const createItems = (n: number): TestItem[] => {
   return Array.from({ length: n }, () => ({
-    name: faker.person.fullName(),
-    age: faker.number.int({ min: 20, max: 70 }),
-    active: faker.datatype.boolean(),
-    netWorth: faker.number.int(),
+    name: random.person.fullName(),
+    age: random.number.int({ min: 20, max: 70 }),
+    active: random.datatype.boolean(),
+    netWorth: random.number.int(),
   }));
 };
 

package/src/hooks/useAddRow.ts

@@ -10,7 +10,7 @@ import { type InsertRowResult } from '../model';
 
 export type UseAddRowProps = {
   db?: Database.Database;
-  schema?: Type.Obj.Any;
+  schema?: Type.AnyObj;
 };
 
 /**

package/src/hooks/useProjectionModel.ts

@@ -5,13 +5,13 @@
 import { type Registry } from '@effect-atom/atom-react';
 import { useState } from 'react';
 
-import { Type } from '@dxos/echo';
+import { JsonSchema, Type } from '@dxos/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 
 import { type Table } from '../types';
 
-export const useProjectionModel = <S extends Type.Entity.Any>(
+export const useProjectionModel = <S extends Type.AnyEntity>(
   schema: S | undefined,
   table: Table.Table | undefined,
   registry: Registry.Registry,
@@ -23,7 +23,7 @@ export const useProjectionModel = <S extends Type.Entity.Any>(
       const view = await table.view.load();
       // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
       // For immutable schemas, create a snapshot.
-      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : Type.toJsonSchema(schema);
+      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
 
       // Always use createEchoChangeCallback since the view is ECHO-backed.
       // Pass schema only when mutable to allow schema mutations.

package/src/hooks/useTableModel.ts

@@ -29,7 +29,7 @@ export type UseTableModelProps<T extends TableRow = TableRow> = {
   onRowAction?: (actionId: string, data: T) => void;
 } & Pick<
   TableModelProps<T>,
-  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onColumnDelete' | 'onCellUpdate' | 'onRowOrderChange'
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({

package/src/model/table-model.test.ts

@@ -6,12 +6,11 @@ import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
-import { Filter, Query, Type } from '@dxos/echo';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { ProjectionModel, View, createDirectChangeCallback } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
-
 import {
   TableModel,
   type TableModelProps,
@@ -121,14 +120,14 @@ const Test = Schema.Struct({
   completed: Schema.Boolean,
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
@@ -137,7 +136,7 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     registry,
     view,
     baseSchema: schema.jsonSchema,
-    change: createDirectChangeCallback(view.projection, schema.jsonSchema),
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({

package/src/model/table-model.ts

@@ -6,6 +6,7 @@ import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Resource } from '@dxos/context';
 import { type Database, Format, Obj, Order, Query, type QueryAST, Ref } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import { type JsonProp, type JsonSchemaType, type Mutable, toEffectSchema } from '@dxos/echo/internal';
 import { getSnapshot } from '@dxos/echo/internal';
 import { getValue, setValue } from '@dxos/effect';
@@ -19,7 +20,7 @@ import {
   type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ProjectionModel, type PropertyType, type ValidationError, type View, validateSchema } from '@dxos/schema';
+import { type ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
 import { type Table } from '../types';
 import { extractOrder } from '../util';
@@ -52,10 +53,10 @@ export type TableChangeCallback<T extends TableRow> = {
  * Use this when the table and rows are stored in the ECHO database.
  */
 export const createEchoChangeCallback = <T extends TableRow>(table: Table.Table): TableChangeCallback<T> => ({
-  table: (mutate) => Obj.change(table, (mutableTable) => mutate(mutableTable as unknown as Table.Table)),
+  table: (mutate) => Obj.change(table, (table) => mutate(table as unknown as Table.Table)),
   row: (row, mutate) => {
     if (Obj.isObject(row)) {
-      Obj.change(row, (mutableRow) => mutate(mutableRow as T));
+      Obj.change(row, (row) => mutate(row as T));
     } else {
       mutate(row);
     }
@@ -122,7 +123,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
   onInsertRow?: (data?: any) => InsertRowResult;
   onDeleteRows?: (index: number, obj: T[]) => void;
-  onDeleteColumn?: (fieldId: string) => void;
+  onColumnDelete?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
   onRowOrderChange?: () => void;
   onRowAction?: (actionId: string, data: T) => void;
@@ -139,7 +140,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   private readonly _onInsertRow?: (data?: any) => InsertRowResult;
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
-  private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
+  private readonly _onColumnDelete?: TableModelProps<T>['onColumnDelete'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
   private readonly _onRowOrderChange?: TableModelProps<T>['onRowOrderChange'];
   private readonly _onRowAction?: TableModelProps<T>['onRowAction'];
@@ -176,7 +177,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     pinnedRows = { top: [], bottom: [] },
     rowActions = [],
     onCellUpdate,
-    onDeleteColumn,
+    onColumnDelete,
     onDeleteRows,
     onInsertRow,
     onRowOrderChange,
@@ -292,7 +293,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
-    this._onDeleteColumn = onDeleteColumn;
+    this._onColumnDelete = onColumnDelete;
     this._onCellUpdate = onCellUpdate;
     this._onRowOrderChange = onRowOrderChange;
     this._onRowAction = onRowAction;
@@ -691,7 +692,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       const currentRow = this._registry.get(this._rows)[row];
       invariant(currentRow, 'Invalid row index');
 
-      const snapshot = getSnapshot(currentRow);
+      const snapshot = { ...getSnapshot(currentRow) };
       setValue(snapshot, field.path, transformedValue);
 
       const schema = Obj.getSchema(currentRow);
@@ -796,8 +797,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
 
     const field = this._projection?.getFields().find((field) => field.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      this._onDeleteColumn(field.id);
+    if (field && this._onColumnDelete) {
+      this._onColumnDelete(field.id);
     }
   }
 
@@ -893,14 +894,14 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       if (field) {
         // Persist sort to view.query.ast
         const newQuery = baseQuery.orderBy(Order.property<any>(field.path as string, inMemorySort.direction));
-        Obj.change(view, (v) => {
-          v.query.ast = newQuery.ast as Mutable<typeof newQuery.ast>;
+        Obj.change(view, (view) => {
+          view.query.ast = newQuery.ast as Mutable<typeof newQuery.ast>;
         });
       }
     } else {
       // Clear sort from view.query.ast
-      Obj.change(view, (v) => {
-        v.query.ast = baseQuery.ast as Mutable<typeof baseQuery.ast>;
+      Obj.change(view, (view) => {
+        view.query.ast = baseQuery.ast as Mutable<typeof baseQuery.ast>;
       });
     }
 

package/src/model/table-presentation.test.ts

@@ -6,12 +6,11 @@ import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Filter, Query, Type } from '@dxos/echo';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { ProjectionModel, View, createDirectChangeCallback } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
-
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
 
@@ -92,14 +91,14 @@ const Test = Schema.Struct({
   count: Schema.Number,
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
@@ -108,7 +107,7 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     registry,
     view,
     baseSchema: schema.jsonSchema,
-    change: createDirectChangeCallback(view.projection, schema.jsonSchema),
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({ registry, object, projection, ...props });

package/src/model/table-presentation.ts

@@ -6,6 +6,7 @@ import { Atom, type Registry } from '@effect-atom/atom-react';
 import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
@@ -15,11 +16,10 @@ import {
   type DxGridPlaneRange,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
-import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { VIEW_FIELD_LIMIT } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
 
 import { tableButtons, tableControls } from '../util';
-
 import { type SelectionMode } from './selection-model';
 import { type TableModel, type TableRow } from './table-model';
 
@@ -107,7 +107,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
   private createDataCell(
     cells: DxGridPlaneCells,
     obj: T,
-    field: FieldType,
+    field: View.FieldType,
     colIndex: number,
     displayIndex: number,
   ): void {
@@ -210,7 +210,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
+        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor dxn=${dxn} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
@@ -335,11 +335,11 @@ export class TablePresentation<T extends TableRow = TableRow> {
         value: '',
         resizeHandle: 'col',
         accessoryHtml: `
-          <span class="grow min-is-0 truncate">${props.title ?? field.path}</span>
+          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch',
+        className: '!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -382,7 +382,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
       return {
         [toPlaneCellIndex({ col: 0, row: 0 })]: {
-          className: '!bg-toolbarSurface',
+          className: '!bg-toolbar-surface',
           readonly: true,
           value: '',
         },
@@ -396,7 +396,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           header: true,
           checked: this.model.selection.allRowsSelected,
         }),
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -411,7 +411,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
               disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -465,7 +465,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
   if (!selected) {
     if (selectionMode === 'single') {
-      return ['!cursor-pointer'];
+      return ['cursor-pointer!'];
     } else {
       return undefined;
     }
@@ -473,8 +473,8 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
+      return ['dx-grid__cell--no-focus-unfurl !bg-current-surface hover:bg-hover-surface cursor-pointer!'];
     case 'multiple':
-      return ['!bg-gridCellSelected'];
+      return ['!bg-grid-cell-selected'];
   }
 };

package/src/playwright/TableManager.ts

@@ -17,6 +17,7 @@ const TABLE_SELECTORS = {
   },
   columnDelete: 'column-delete',
   rowDelete: 'row-menu-delete',
+  addRow: 'table.toolbar.add-row',
 } as const;
 
 export class TableManager {
@@ -53,10 +54,16 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: string }): Promise<void> {
+  public async addRow(): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.addRow).click();
+  }
+
+  public async addColumn({ label, format }: { label: string; format?: string }): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
-    await this.page.getByRole('combobox').click();
-    await this.page.getByLabel(format).click();
+    if (format) {
+      await this.page.getByRole('combobox').click();
+      await this.page.getByLabel(format).click();
+    }
     await this.page.getByPlaceholder('Property label').click();
     await this.page.getByPlaceholder('Property label').fill(label);
     await this.page.getByRole('button', { name: 'Save' }).click();

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-react:serve-e2e -- --port=9004',
+    command: 'pnpm storybook dev --ci --quiet --port=9004 --config-dir=.storybook',
     port: 9004,
     reuseExistingServer: false,
   },

package/src/playwright/smoke.spec.ts

@@ -5,7 +5,7 @@
 import { expect, test } from '@playwright/test';
 
 import { type DxGrid } from '@dxos/lit-grid';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
@@ -13,7 +13,7 @@ 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');
@@ -121,8 +121,22 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow.
-  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 = 'DEFAULT FORMAT COL';
+
+    await table.addColumn({ label: newColumnLabel });
+
+    await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
+    await page.close();
+  });
+
+  test('add column with format', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
@@ -160,6 +174,35 @@ test.describe('Table', () => {
     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');
@@ -267,7 +310,7 @@ test.describe('Table', () => {
       dxGridElement.scrollToColumn(6);
     });
 
-    const nonRefContent = faker.lorem.words(3);
+    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');

package/src/testing/useTestTableModel.ts

@@ -7,10 +7,10 @@ import { type RefObject, useCallback, useContext, useMemo, useRef } from 'react'
 
 import { type Database, type Type } from '@dxos/echo';
 import { isMutable } from '@dxos/echo/internal';
-import { faker } from '@dxos/random';
+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-searchlist';
+import { useGlobalFilteredObjects } from '@dxos/react-ui-search';
 import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
@@ -18,9 +18,9 @@ import { useAddRow, useProjectionModel, useTableModel } from '../hooks';
 import { type TableModel, TablePresentation } from '../model';
 import { Table } from '../types';
 
-faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+random.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
-export type TestTableModel<T extends Type.Obj.Any = Type.Obj.Any> = {
+export type TestTableModel<T extends Type.AnyObj = Type.AnyObj> = {
   schema: T | undefined;
   table: Table.Table | undefined;
   projection: ProjectionModel | undefined;
@@ -38,7 +38,7 @@ export type TestTableModel<T extends Type.Obj.Any = Type.Obj.Any> = {
  * 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.Obj.Any = Type.Obj.Any>(): TestTableModel<T> => {
+export const useTestTableModel = <T extends Type.AnyObj = Type.AnyObj>(): TestTableModel<T> => {
   const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const db = space?.db;
@@ -97,7 +97,7 @@ export const useTestTableModel = <T extends Type.Obj.Any = Type.Obj.Any>(): Test
     rows: filteredObjects,
     onInsertRow: addRow,
     onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
+    onColumnDelete: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
     onRowOrderChange: handleRowOrderChange,
   });

package/src/translations.ts

@@ -10,27 +10,25 @@ 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': 'Type',
-        'new schema': 'New type',
-        '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',
       },
     },
   },