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

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -6,25 +6,26 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { View } from '@dxos/echo';
+import { random } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { View } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { TableCellEditor } from './TableCellEditor';
 
-type StoryProps = {
+type DefaultStoryProps = {
   editing: GridEditing;
 };
 
 // TODO(burdon): Broken layout.
-const DefaultStory = ({ editing }: StoryProps) => {
+const DefaultStory = ({ editing }: DefaultStoryProps) => {
   const { model, table } = useTestTableModel();
 
   if (!model || !table) {
@@ -45,22 +46,22 @@ const meta = {
   component: DefaultStory,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withClientProvider({
       types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Task.Task, {
-              title: faker.person.fullName(),
-              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
-              description: faker.lorem.sentence(),
+              title: random.person.fullName(),
+              status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: random.lorem.sentence(),
             }),
           );
         });

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/index.ts

@@ -2,11 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './model';
 export * from './util';
-
-export { translations };

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';
@@ -37,7 +38,7 @@ export type FieldSortType = {
 import { type SelectionMode, SelectionModel } from './selection-model';
 
 /**
- * Callback type for wrapping mutations in Obj.change().
+ * Callback type for wrapping mutations in Obj.update().
  * Contains separate callbacks for table object and row mutations.
  */
 export type TableChangeCallback<T extends TableRow> = {
@@ -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.update(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.update(row, (row) => mutate(row as T));
     } else {
       mutate(row);
     }
@@ -111,7 +112,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   projection: ProjectionModel;
   db?: Database.Database;
   /**
-   * Callbacks to wrap mutations in Obj.change().
+   * Callbacks to wrap mutations in Obj.update().
    * Use createEchoChangeCallback() for ECHO-backed objects or createDirectChangeCallback() for plain objects.
    */
   change?: TableChangeCallback<T>;
@@ -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,10 +692,10 @@ 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);
+      const schema = Obj.getSchema(currentRow as unknown as Obj.Unknown);
       invariant(schema);
 
       const validationResult = validateSchema(schema, snapshot);
@@ -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.update(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.update(view, (view) => {
+        view.query.ast = baseQuery.ast as Mutable<typeof baseQuery.ast>;
       });
     }
 

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

@@ -6,16 +6,22 @@ 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';
 
-describe('TablePresentation', () => {
+// Quarantined in CI only — vite resolves `@dxos/react-ui-grid` to the hoisted
+// node_modules copy, which fails the `node` export condition under the
+// workflow's `--no-file-parallelism` runner. Tests pass locally so the suite
+// still runs during development.
+// Trunk.io tracking:
+//   https://app.trunk.io/dxos/flaky-tests/test/e027ed98-4aea-5a63-b5ed-10baf76fb11e
+const describeOutsideCI = process.env.CI ? describe.skip : describe;
+describeOutsideCI('TablePresentation', () => {
   describe('getCells', () => {
     let registry: Registry.Registry;
     let data: any[];
@@ -92,14 +98,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 +114,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,
   },