@dxos/react-ui-table 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

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

@@ -2,103 +2,113 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import { Registry } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
-
-import { TableView } from '../types';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
+import { createEchoSchema } from '@dxos/echo/testing';
+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', () => {
-  describe('row reactivity', () => {
+  describe('getCells', () => {
+    let registry: Registry.Registry;
     let data: any[];
-    let updateCount: number;
     let model: any;
     let presentation: TablePresentation;
 
     beforeEach(async () => {
-      updateCount = 0;
-      ({ data } = live({
-        data: [
-          { col1: 'A', col2: 1, col3: true },
-          { col1: 'B', col2: 2, col3: false },
-        ],
-      }));
-
-      model = createTableModel({
-        onCellUpdate: () => updateCount++,
-      });
-      model.setRows(data);
+      registry = Registry.make();
+      data = [
+        { id: '1', title: 'A', count: 1 },
+        { id: '2', title: 'B', count: 2 },
+      ];
+
+      model = createTableModel(registry, {});
       await model.open();
-      presentation = new TablePresentation(model);
+      model.setRows(data);
+      presentation = new TablePresentation(registry, model);
     });
 
-    it('should update with row-level reactivity', () => {
-      // Set up visible range to include our test data.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
+    it('should return cells for the visible range', () => {
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
-      // Trigger a row update.
-      data[0].col1 = 'New Value';
-      expect(updateCount).toBe(1);
+      // Verify that cells are returned for the range. The exact column indices depend on the projection.
+      const cellKeys = Object.keys(cells);
+      expect(cellKeys.length).toBeGreaterThan(0);
 
-      // Verify the new value through getCells.
-      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
-      expect(cells['0,0']?.value).toBe('New Value');
+      // Check that values from the data are present in the cells.
+      const values = Object.values(cells).map((c) => c.value);
+      expect(values).toContain('A');
+      expect(values).toContain('B');
     });
 
-    it('should update reactively when adding a new row', () => {
-      // Set up visible range to include our test data.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
+    it('should reflect row data changes', () => {
+      // Update the row data and refresh.
+      data[0].title = 'New Value';
+      model.setRows(data);
 
-      data.push({ col1: 'C', col2: 3, col3: true });
-      expect(updateCount).toBe(1);
+      // Verify the new value through getCells.
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 2 } }, 'grid');
+      const values = Object.values(cells).map((c) => c.value);
+      expect(values).toContain('New Value');
+    });
+
+    it('should reflect new rows', () => {
+      // Add a new row.
+      data.push({ id: '3', title: 'C', count: 3 });
+      model.setRows(data);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
       // Verify the new row's data.
       expect(cells['0,2']?.value).toBe('C');
       expect(cells['1,2']?.value).toBe('3');
-      expect(cells['2,2']?.value).toBe('true');
     });
 
-    it('should handle combined operations reactively', () => {
-      // Set up visible range.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-      // Multiple operations.
-      data[0].col1 = 'Updated A';
-      data.push({ col1: 'C', col2: 3, col3: true });
+    it('should handle row modifications', () => {
+      // Modify the data.
+      data[0].title = 'Updated A';
+      data.push({ id: '3', title: 'C', count: 3 });
       data.splice(1, 1);
-
-      // We expect one update per operation affecting visible rows.
-      expect(updateCount).toBe(3);
+      model.setRows(data);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
       // Verify final state.
       expect(cells['0,0']?.value).toBe('Updated A');
       expect(cells['0,1']?.value).toBe('C');
-      expect(cells['1,1']?.value).toBe('3');
-      expect(cells['2,1']?.value).toBe('true');
     });
   });
 });
 
-class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+const Test = Schema.Struct({
   title: Schema.String,
-  completed: Schema.Boolean,
-}) {}
-
-const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
+  count: Schema.Number,
+}).pipe(
+  Type.object({
+    typename: 'com.example.type.test',
+    version: '0.1.0',
+  }),
+);
+
+const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
-  return new TableModel({ view, schema: schema.jsonSchema, ...props });
+  const view = ViewModel.make({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+  });
+  const object = Table.make({ view });
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: schema.jsonSchema,
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
+  });
+  projection.normalizeView();
+  return new TableModel({ registry, object, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -2,11 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
+import { type View } from '@dxos/echo';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -15,11 +16,10 @@ import {
   type DxGridPlaneRange,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-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';
 
@@ -29,15 +29,20 @@ import { type TableModel, type TableRow } from './table-model';
  * different grid planes.
  */
 export class TablePresentation<T extends TableRow = TableRow> {
+  private readonly _registry: Registry.Registry;
+  private readonly _visibleRange: Atom.Writable<DxGridPlaneRange>;
   private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
 
   constructor(
+    registry: Registry.Registry,
     private readonly model: TableModel<T>,
-    private readonly _visibleRange = signal<DxGridPlaneRange>({
+  ) {
+    this._registry = registry;
+    this._visibleRange = Atom.make<DxGridPlaneRange>({
       start: { row: 0, col: 0 },
       end: { row: 0, col: 0 },
-    }),
-  ) {}
+    });
+  }
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
     // Clear cache at the start of each render pass
@@ -47,7 +52,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
     switch (plane) {
       case 'grid':
-        this._visibleRange.value = range;
+        this._registry.set(this._visibleRange, range);
         cells = this.getMainGridCells(range);
         break;
       case 'frozenRowsStart':
@@ -69,7 +74,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
         cells = this.getDraftRowCells(range);
         break;
       case 'fixedEndStart':
-        cells = this.getDraftSelectCells(range);
+        cells = this.getDraftIconCells(range);
         break;
       case 'fixedEndEnd':
         cells = this.getDraftActionCells(range);
@@ -102,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 {
@@ -120,12 +125,12 @@ export class TablePresentation<T extends TableRow = TableRow> {
         }
 
         switch (props.format) {
-          case FormatEnum.Boolean:
-          case FormatEnum.SingleSelect:
-          case FormatEnum.MultiSelect: {
+          case Format.TypeFormat.Boolean:
+          case Format.TypeFormat.SingleSelect:
+          case Format.TypeFormat.MultiSelect: {
             return '';
           }
-          case FormatEnum.Ref: {
+          case Format.TypeFormat.Ref: {
             if (!field.referencePath) {
               return ''; // TODO(burdon): Show error.
             }
@@ -141,20 +146,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
     };
 
     const classes = [];
-    const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
+    const formatClasses = cellClassesForFieldType(props);
+
     if (formatClasses) {
       classes.push(formatClasses);
     }
+
     const rowSelectionClasses = cellClassesForRowSelection(
       this.model.selection.isObjectSelected(obj),
       this.model.selection.selectionMode,
     );
+
     if (rowSelectionClasses) {
       classes.push(rowSelectionClasses);
     }
-    if (classes.length > 0) {
-      cell.className = mx(classes.flat());
-    }
+
+    cell.className = mx(classes);
 
     // Arrays.
     if (props.type === TypeEnum.Array) {
@@ -188,7 +195,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
         const tags = targetArray
           .map(getLabel)
-          .filter(isNotNullable)
+          .filter(Predicate.isNotNullable)
           .map((title) => {
             return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
           })
@@ -199,16 +206,16 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // References.
-    if (props.format === FormatEnum.Ref && props.referenceSchema) {
+    if (props.format === Format.TypeFormat.Ref && props.referenceSchema) {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        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>`;
       }
     }
 
     // Booleans.
-    if (props.format === FormatEnum.Boolean) {
+    if (props.format === Format.TypeFormat.Boolean) {
       const value = getValue(obj, field.path);
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
@@ -219,7 +226,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Single-Selects.
-    if (props.format === FormatEnum.SingleSelect) {
+    if (props.format === Format.TypeFormat.SingleSelect) {
       const value = getValue(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options) {
@@ -231,7 +238,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Multi-Selects.
-    if (props.format === FormatEnum.MultiSelect) {
+    if (props.format === Format.TypeFormat.MultiSelect) {
       const values = getValue(obj, field.path) as string[] | undefined;
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options && values && values.length > 0) {
@@ -258,7 +265,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
+    const fields = this.model.projection?.getFields() ?? [];
 
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
@@ -267,7 +274,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           continue;
         }
 
-        this.createDataCell(cells, this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
       }
     }
 
@@ -276,30 +283,39 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
-    const draftRows = this.model.draftRows.value;
+    const fields = this.model.projection?.getFields() ?? [];
+    const draftRows = this.model.getDraftRows();
 
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const cellIndex = toPlaneCellIndex({ col, row });
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
+        cells[toPlaneCellIndex({ col, row: 0 })] = {
+          value: '',
+          readonly: true,
+          className: 'dx-grid__row--cta__cell',
+        };
+      }
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const cellIndex = toPlaneCellIndex({ col, row });
+          const field = fields[col];
+          if (!field) {
+            continue;
+          }
 
-        this.createDataCell(cells, draftRow.data, field, col, row);
+          this.createDataCell(cells, draftRow.data, field, col, row);
 
-        if (this.model.hasDraftRowValidationError(row, field.path)) {
-          const cellValue = cells[cellIndex];
-          if (cellValue) {
-            const existingClasses = cellValue.className || '';
-            const draftClasses = 'dx-grid__cell--flagged';
-            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+          if (this.model.hasDraftRowValidationError(row, field.path)) {
+            const cellValue = cells[cellIndex];
+            if (cellValue) {
+              const existingClasses = cellValue.className || '';
+              const draftClasses = 'dx-grid__cell--flagged';
+              cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+            }
           }
         }
-
-        cells[cellIndex].className += ' !bg-toolbarSurface';
       }
     }
 
@@ -308,22 +324,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
+    const fields = this.model.projection?.getFields() ?? [];
+    const currentSort = this.model.getSorting();
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
       const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
-      const sorting = this.model.sorting?.sorting;
-      const direction = sorting?.fieldId === field.id ? sorting.direction : undefined;
+      const direction = currentSort?.fieldId === field.id ? currentSort.direction : undefined;
 
       cells[toPlaneCellIndex({ col, row: 0 })] = {
         // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
+        value: '',
         resizeHandle: 'col',
         accessoryHtml: `
+          <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',
+        className: '!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -366,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: '',
         },
@@ -378,9 +394,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
-          checked: this.model.selection.allRowsSeleted.value,
+          checked: this.model.selection.allRowsSelected,
         }),
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -392,10 +408,10 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -404,32 +420,41 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftActionCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const draftRows = this.model.draftRows.value;
-
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
-      const disabled = !draftRow.valid;
+    const draftRows = this.model.getDraftRows();
 
-      cells[toPlaneCellIndex({ col: 0, row })] = {
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
+      cells[toPlaneCellIndex({ col: 0, row: 0 })] = {
         value: '',
+        className: 'dx-grid__row--cta__cell',
         readonly: true,
-        accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
-        className: '!bg-toolbarSurface',
       };
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        const disabled = !draftRow.valid;
+
+        cells[toPlaneCellIndex({ col: 0, row })] = {
+          value: '',
+          readonly: true,
+          accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        };
+      }
     }
 
     return cells;
   }
 
-  private getDraftSelectCells(range: DxGridPlaneRange): DxGridPlaneCells {
+  private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const draftRows = this.model.draftRows.value;
+    const draftRows = this.model.getDraftRows();
 
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+    for (let row = range.start.row; row <= range.end.row; row++) {
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
         readonly: true,
-        className: '!bg-toolbarSurface',
+        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
+        className: mx('[&>div]:grid [&>div]:place-content-center', draftRows.length < 1 && 'dx-grid__row--cta__cell'),
       };
     }
 
@@ -440,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;
     }
@@ -448,9 +473,8 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
-      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,12 +54,18 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: 'number' }): 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 ${format}`).click();
-    await this.page.getByPlaceholder('Property label.').click();
-    await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).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:serve-e2e -- --port=9004',
+    command: 'pnpm storybook dev --ci --quiet --port=9004 --config-dir=.storybook',
     port: 9004,
     reuseExistingServer: false,
   },