@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -8,6 +8,8 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { FormatEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
+import { useThemeContext } from '@dxos/react-ui';
+import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
   cellQuery,
   editorKeys,
@@ -21,6 +23,7 @@ import {
   type GridCellEditorProps,
   type GridScopedProps,
 } from '@dxos/react-ui-grid';
+import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { completion } from './extension';
@@ -55,6 +58,7 @@ export const TableCellEditor = ({
 }: GridScopedProps<TableCellEditorProps>) => {
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
+  const { themeMode } = useThemeContext();
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -80,7 +84,7 @@ export const TableCellEditor = ({
       onFocus?.();
       setEditing(null);
     },
-    [model, editing],
+    [model, editing, onEnter, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
@@ -113,7 +117,7 @@ export const TableCellEditor = ({
         onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, determineNavigationAxis, determineNavigationDelta],
+    [model, editing, onFocus, onEnter, fieldProjection],
   );
 
   const extension = useMemo(() => {
@@ -128,6 +132,50 @@ export const TableCellEditor = ({
       }),
     ];
 
+    const format = fieldProjection.props.format;
+
+    if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
+      // TODO(ZaymonFC): Reconcile this with the TagPicker component?
+      // Add markdown extensions needed by tag picker.
+      extension.push(createMarkdownExtensions({ themeMode }));
+
+      const options = fieldProjection.props.options || [];
+
+      const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
+
+      extension.push(
+        tagPickerExtension({
+          mode,
+          inGrid: true,
+          onSearch: (text, selectedIds) => {
+            return options
+              .filter(
+                (option) =>
+                  selectedIds.indexOf(option.id) === -1 &&
+                  (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase())),
+              )
+              .map((option) => ({
+                id: option.id,
+                label: option.title,
+                hue: option.color as any,
+              }));
+          },
+          onUpdate: (ids) => {
+            if (model && editing) {
+              if (ids.length === 0) {
+                return;
+              }
+              if (mode === 'single-select') {
+                handleEnter(ids[0]);
+              } else {
+                handleEnter(ids);
+              }
+            }
+          },
+        }),
+      );
+    }
+
     if (onQuery) {
       switch (fieldProjection.props.format) {
         case FormatEnum.Ref: {
@@ -164,11 +212,61 @@ export const TableCellEditor = ({
     }
 
     return extension;
-  }, [model, modals, editing, fieldProjection, handleClose]);
+  }, [model, modals, editing, fieldProjection, handleClose, themeMode]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
-      const value = model.getCellData(parseCellIndex(editing.index));
+      const cell = parseCellIndex(editing.index);
+      const { col } = cell;
+      const field = model.projection.view.fields[col];
+      const fieldProjection = model.projection.getFieldProjection(field.id);
+
+      if (
+        fieldProjection?.props.format === FormatEnum.SingleSelect ||
+        fieldProjection?.props.format === FormatEnum.MultiSelect
+      ) {
+        const value = model.getCellData(cell);
+
+        if (value !== undefined) {
+          const options = fieldProjection.props.options || [];
+
+          if (fieldProjection.props.format === FormatEnum.MultiSelect && Array.isArray(value)) {
+            const tagItems = value
+              .map((id) => {
+                const option = options.find((o) => o.id === id);
+                if (option) {
+                  return {
+                    id,
+                    label: option.title,
+                    hue: option.color as any,
+                  };
+                }
+                return undefined;
+              })
+              .filter((item): item is { id: any; label: string; hue: any } => item !== undefined);
+
+            return createLinks(tagItems);
+          } else {
+            const option = options.find((o) => o.id === value);
+
+            if (option) {
+              const tagItem = {
+                id: value,
+                label: option.title,
+                hue: option.color as any,
+              };
+
+              return createLinks([tagItem]);
+            }
+          }
+        }
+
+        // Return empty string if no value
+        return '';
+      }
+
+      // Default behavior for other formats
+      const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }
   }, [model, editing]);

package/src/components/testing.ts

@@ -8,7 +8,6 @@ import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@d
 import { faker } from '@dxos/random';
 import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
-import {} from '@dxos/schema';
 
 import { TableType } from '../types';
 

package/src/hooks/useTableModel.ts

@@ -10,28 +10,28 @@ import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { type BaseTableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
+import { type TableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
 import { type TableType } from '../types';
 
-export type UseTableModelParams<T extends BaseTableRow = { id: string }> = {
+export type UseTableModelParams<T extends TableRow = TableRow> = {
   table?: TableType;
   projection?: ViewProjection;
-  objects?: ReactiveObject<T>[];
-  onSelectionChanged?: (selection: string[]) => void;
+  rows?: ReactiveObject<T>[];
   rowActions?: TableRowAction[];
+  onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;
 } & Pick<
   TableModelProps<T>,
-  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
 >;
 
-export const useTableModel = <T extends BaseTableRow = { id: string }>({
-  objects,
+export const useTableModel = <T extends TableRow = TableRow>({
   table,
   projection,
+  rows,
+  rowActions,
   features,
   onSelectionChanged,
-  rowActions,
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
@@ -65,10 +65,10 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
 
   // Update data.
   useEffect(() => {
-    if (objects) {
-      model?.setRows(objects);
+    if (rows) {
+      model?.setRows(rows);
     }
-  }, [model, objects]);
+  }, [model, rows]);
 
   const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.typename].filter(isNonNullable));
 

package/src/model/index.ts

@@ -5,3 +5,4 @@
 export * from './table-model';
 export * from './modal-controller';
 export * from './table-presentation';
+export type { SelectionMode } from './selection-model';

package/src/model/selection-model.ts

@@ -6,10 +6,12 @@ import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-c
 
 import { Resource } from '@dxos/context';
 
-import { type BaseTableRow } from './table-model';
+import { type TableRow } from './table-model';
 import { touch } from '../util';
 
-export class SelectionModel<T extends BaseTableRow> extends Resource {
+export type SelectionMode = 'single' | 'multiple';
+
+export class SelectionModel<T extends TableRow> extends Resource {
   private readonly _selection = signal<Set<string>>(new Set());
 
   private readonly _validSelectedIds = computed<Set<string>>(() => {
@@ -35,6 +37,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
 
   constructor(
     private readonly _rows: ReadonlySignal<T[]>,
+    private readonly _selectionMode: SelectionMode,
     private readonly _onSelectionChanged?: () => void,
   ) {
     super();
@@ -64,6 +67,10 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     return this._allSelected;
   }
 
+  public get selectionMode(): SelectionMode {
+    return this._selectionMode;
+  }
+
   public getSelectedRows = (): T[] => {
     const selectedIds = this._validSelectedIds.value;
     return this._rows.value.filter((row) => selectedIds.has(row.id));
@@ -89,6 +96,9 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (newSelection.has(row.id)) {
       newSelection.delete(row.id);
     } else {
+      if (this._selectionMode === 'single') {
+        newSelection.clear();
+      }
       newSelection.add(row.id);
     }
 

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

@@ -106,7 +106,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema, view);
+  const projection = new ViewProjection(schema.jsonSchema, view);
   const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };

package/src/model/table-model.ts

@@ -18,31 +18,31 @@ import {
 } from '@dxos/react-ui-grid';
 import { type ViewType, type ViewProjection } from '@dxos/schema';
 
-import { SelectionModel } from './selection-model';
+import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
 
-export type BaseTableRow = Record<JsonProp, any> & { id: string };
+// TODO(burdon): Use schema types.
+export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
   translationKey: string;
 };
 
-// TODO(ZaymonFC): There should be a separate concept for immutable schemata.
 export type TableFeatures = {
-  selection: boolean;
+  selection: { enabled: boolean; mode?: SelectionMode };
   dataEditable: boolean;
   schemaEditable: boolean;
 };
 
 const defaultFeatures: TableFeatures = {
-  selection: true,
+  selection: { enabled: true, mode: 'multiple' },
   dataEditable: false,
   schemaEditable: false,
 };
 
-export type TableModelProps<T extends BaseTableRow = { id: string }> = {
+export type TableModelProps<T extends TableRow = TableRow> = {
   id?: string;
   space?: Space;
   view?: ViewType;
@@ -50,16 +50,16 @@ export type TableModelProps<T extends BaseTableRow = { id: string }> = {
   features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
+  rowActions?: TableRowAction[];
   onInsertRow?: (index?: number) => void;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
-  onRowOrderChanged?: () => void;
-  rowActions?: TableRowAction[];
+  onRowOrderChange?: () => void;
   onRowAction?: (actionId: string, data: T) => void;
 };
 
-export class TableModel<T extends BaseTableRow = { id: string }> extends Resource {
+export class TableModel<T extends TableRow = TableRow> extends Resource {
   private readonly _id: string | undefined;
   private readonly _space: Space | undefined;
   private readonly _view: ViewType | undefined;
@@ -74,9 +74,9 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
-  private readonly _onRowOrderChanged?: TableModelProps<T>['onRowOrderChanged'];
-  private readonly _rowActions: TableRowAction[];
+  private readonly _onRowOrderChange?: TableModelProps<T>['onRowOrderChange'];
   private readonly _onRowAction?: TableModelProps<T>['onRowAction'];
+  private readonly _rowActions: TableRowAction[];
   private readonly _features: TableFeatures;
 
   private readonly _rows = signal<T[]>([]);
@@ -94,12 +94,12 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     features = {},
     sorting = [],
     pinnedRows = { top: [], bottom: [] },
+    rowActions = [],
     onCellUpdate,
     onDeleteColumn,
     onDeleteRows,
     onInsertRow,
-    onRowOrderChanged,
-    rowActions = [],
+    onRowOrderChange,
     onRowAction,
   }: TableModelProps<T>) {
     super();
@@ -107,8 +107,15 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._space = space;
     this._view = view;
     this._projection = projection;
+
+    // TODO(ZaymonFC): Use our more robust config merging module?
     this._features = { ...defaultFeatures, ...features };
 
+    invariant(
+      !(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single'),
+      'Single selection is not compatible with editable tables.',
+    );
+
     this._sorting = new TableSorting(this._rows, this._view, projection);
 
     if (sorting.length > 0) {
@@ -117,12 +124,12 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
 
     this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChanged = onRowOrderChanged;
-    this._rowActions = rowActions;
+    this._onRowOrderChange = onRowOrderChange;
     this._onRowAction = onRowAction;
   }
 
@@ -197,7 +204,9 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   protected override async _open() {
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>
+      this._onRowOrderChange?.(),
+    );
     await this._selection.open(this._ctx);
   }
 
@@ -219,7 +228,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
       touch(this._sorting.sortedRows.value);
-      this._onRowOrderChanged?.();
+      this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
 
@@ -268,7 +277,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     const obj = this._rows.value[row];
     const objectsToDelete = [];
 
-    if (this._selection.hasSelection.value) {
+    if (this.features.selection.enabled && this._selection.hasSelection.value) {
       const selectedRows = this._selection.getSelectedRows();
       objectsToDelete.push(...selectedRows);
     } else {

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

@@ -96,7 +96,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema, view);
+  const projection = new ViewProjection(schema.jsonSchema, view);
   const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -5,18 +5,19 @@
 import { signal } from '@preact/signals-core';
 
 import { FormatEnum, getValue } from '@dxos/echo-schema';
-import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay } from '@dxos/react-ui-form';
+import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
   type DxGridPlaneCells,
-  toPlaneCellIndex,
   type DxGridPlaneRange,
   type DxGridCellValue,
+  toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
 
-import { type BaseTableRow, type TableModel } from './table-model';
+import { type SelectionMode } from './selection-model';
+import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
 /**
@@ -24,7 +25,7 @@ import { tableButtons, tableControls } from '../util';
  * Manages rendering of table cells, headers, selection columns, and action columns across
  * different grid planes.
  */
-export class TablePresentation<T extends BaseTableRow = { id: string }> {
+export class TablePresentation<T extends TableRow = TableRow> {
   constructor(
     private readonly model: TableModel<T>,
     private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -62,7 +63,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
     if (plane === 'grid' && this.model.features.dataEditable === false) {
       Object.values(cells).forEach((cell) => {
-        cell.readonly = true;
+        cell.readonly = 'text-select';
       });
     }
 
@@ -85,7 +86,8 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
           switch (props.format) {
             case FormatEnum.Boolean:
-            case FormatEnum.SingleSelect: {
+            case FormatEnum.SingleSelect:
+            case FormatEnum.MultiSelect: {
               return '';
             }
             case FormatEnum.Ref: {
@@ -108,7 +110,10 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = cellClassesForRowSelection(
+        this.model.selection.isObjectSelected(obj),
+        this.model.selection.selectionMode,
+      );
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
@@ -133,7 +138,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
           rowIndex: displayIndex,
           checked: value ?? false,
         });
-        cell.readonly = true;
+        cell.readonly = 'no-text-select';
       }
 
       if (props.format === FormatEnum.SingleSelect) {
@@ -147,6 +152,27 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         }
       }
 
+      if (props.format === FormatEnum.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) {
+          const tags = values
+            .map((value) => {
+              const option = options.find((o) => o.id === value);
+              if (option) {
+                return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+              }
+              return null;
+            })
+            .filter(Boolean)
+            .join(' ');
+
+          if (tags) {
+            cell.accessoryHtml = tags;
+          }
+        }
+      }
+
       const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
       cells[idx] = cell;
     };
@@ -193,10 +219,10 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     const cells: DxGridPlaneCells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
-        readonly: true,
+        readonly: 'no-text-select',
         className: classes ? mx(classes) : undefined,
         accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
       };
@@ -209,7 +235,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     const cells: DxGridPlaneCells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
         readonly: true,
@@ -222,6 +248,16 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   }
 
   private getSelectAllCell(): DxGridPlaneCells {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
+      return {
+        [toPlaneCellIndex({ col: 0, row: 0 })]: {
+          className: '!bg-gridHeader',
+          readonly: true,
+          value: '',
+        },
+      };
+    }
+
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: tableControls.checkbox.render({
@@ -251,3 +287,21 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     };
   }
 }
+
+export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
+  if (!selected) {
+    if (selectionMode === 'single') {
+      return ['!cursor-pointer'];
+    } else {
+      return undefined;
+    }
+  }
+
+  switch (selectionMode) {
+    case 'single':
+      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
+      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+    case 'multiple':
+      return ['!bg-gridCellSelected'];
+  }
+};

package/src/model/table-sorting.ts

@@ -9,7 +9,7 @@ import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortT
 import { formatForDisplay } from '@dxos/react-ui-form';
 import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
 
-import { type BaseTableRow } from './table-model';
+import { type TableRow } from './table-model';
 
 /**
  * Represents the local sort state.
@@ -40,7 +40,7 @@ type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } |
  * │ 2: "Cherry"  │  =>  │ 2: "Cherry"  │  =>  │ 2 => 2 │
  * └──────────────┘      └──────────────┘      └────────┘
  */
-export class TableSorting<T extends BaseTableRow> {
+export class TableSorting<T extends TableRow> {
   private readonly _displayToDataIndex = new Map<number, number>();
   private readonly _rows: Signal<T[]>;
   private readonly _localSort = signal<LocalSort>(undefined);

package/src/playwright/smoke.spec.ts

@@ -4,12 +4,11 @@
 
 import { expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test-utils/playwright';
+import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
-const storyId = 'ui-react-ui-table-table';
-const storyUrl = `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+const storyUrl = storybookUrl('ui-react-ui-table-table--default');
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {

package/src/types/table.ts

@@ -7,14 +7,15 @@ import { EchoObject, Expando, LabelAnnotationId, ObjectId, Ref, S } from '@dxos/
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({
-  id: ObjectId, // TODO(burdon): Where should this be?
+  id: ObjectId,
   name: S.optional(S.String),
   view: S.optional(Ref(ViewType)),
-  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
-  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))), // TODO(dmaretskyi): Breaks edge because plugin-space depends on react-client.
+  // TODO(burdon): Document why threads is included here?
+  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))),
 }).annotations({
+  // TODO(burdon): Move annotation to property.
   [LabelAnnotationId]: 'name',
 });
 
-export const TableType = TableSchema.pipe(EchoObject('dxos.org/type/Table', '0.1.0'));
-export type TableType = S.Schema.Type<typeof TableType>;
+export const TableType = TableSchema.pipe(EchoObject({ typename: 'dxos.org/type/Table', version: '0.1.0' }));
+export interface TableType extends S.Schema.Type<typeof TableType> {}