@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.e098934",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,21 +10,25 @@
   "type": "module",
   "exports": {
     "./deprecated": {
+      "source": "./src/deprecated/index.ts",
       "types": "./dist/types/src/deprecated/index.d.ts",
       "browser": "./dist/lib/browser/deprecated/index.mjs",
       "node": "./dist/lib/node-esm/deprecated/index.mjs"
     },
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
@@ -49,9 +53,9 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
+    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.2",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
@@ -61,51 +65,52 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.4-main.c1de068",
-    "@dxos/debug": "0.8.4-main.c1de068",
-    "@dxos/echo": "0.8.4-main.c1de068",
-    "@dxos/effect": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/echo-db": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/lit-grid": "0.8.4-main.c1de068",
-    "@dxos/keys": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/plugin-search": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui-form": "0.8.4-main.c1de068",
-    "@dxos/react-ui-grid": "0.8.4-main.c1de068",
-    "@dxos/react-ui-editor": "0.8.4-main.c1de068",
-    "@dxos/react-ui-menu": "0.8.4-main.c1de068",
-    "@dxos/react-ui-searchlist": "0.8.4-main.c1de068",
-    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c1de068",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.c1de068",
-    "@dxos/react-ui-types": "0.8.4-main.c1de068",
-    "@dxos/schema": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@dxos/async": "0.8.4-main.e098934",
+    "@dxos/context": "0.8.4-main.e098934",
+    "@dxos/echo": "0.8.4-main.e098934",
+    "@dxos/echo-db": "0.8.4-main.e098934",
+    "@dxos/effect": "0.8.4-main.e098934",
+    "@dxos/echo-schema": "0.8.4-main.e098934",
+    "@dxos/invariant": "0.8.4-main.e098934",
+    "@dxos/keys": "0.8.4-main.e098934",
+    "@dxos/lit-grid": "0.8.4-main.e098934",
+    "@dxos/live-object": "0.8.4-main.e098934",
+    "@dxos/debug": "0.8.4-main.e098934",
+    "@dxos/log": "0.8.4-main.e098934",
+    "@dxos/plugin-search": "0.8.4-main.e098934",
+    "@dxos/random": "0.8.4-main.e098934",
+    "@dxos/react-client": "0.8.4-main.e098934",
+    "@dxos/react-ui-attention": "0.8.4-main.e098934",
+    "@dxos/react-ui-editor": "0.8.4-main.e098934",
+    "@dxos/react-ui-form": "0.8.4-main.e098934",
+    "@dxos/react-ui-grid": "0.8.4-main.e098934",
+    "@dxos/react-ui-menu": "0.8.4-main.e098934",
+    "@dxos/react-ui-searchlist": "0.8.4-main.e098934",
+    "@dxos/react-ui-stack": "0.8.4-main.e098934",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.e098934",
+    "@dxos/react-ui-types": "0.8.4-main.e098934",
+    "@dxos/util": "0.8.4-main.e098934",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.e098934",
+    "@dxos/schema": "0.8.4-main.e098934"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.c1de068",
-    "@dxos/plugin-search": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068",
-    "@dxos/test-utils": "0.8.4-main.c1de068"
+    "vite": "7.1.1",
+    "@dxos/plugin-search": "0.8.4-main.e098934",
+    "@dxos/echo-signals": "0.8.4-main.e098934",
+    "@dxos/random": "0.8.4-main.e098934",
+    "@dxos/react-ui": "0.8.4-main.e098934",
+    "@dxos/react-ui-theme": "0.8.4-main.e098934",
+    "@dxos/storybook-utils": "0.8.4-main.e098934",
+    "@dxos/test-utils": "0.8.4-main.e098934"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -113,8 +118,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.e098934",
+    "@dxos/react-ui-theme": "0.8.4-main.e098934"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type ColumnActionsMenuProps = { model: TableModel; modals: ModalController };

package/src/components/Table/ColumnSettings.tsx

@@ -10,7 +10,7 @@ import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
 type ColumnSettingsProps = {
   registry?: SchemaRegistry;

package/src/components/Table/CreateRefPanel.tsx

@@ -5,49 +5,66 @@
 import { Schema } from 'effect';
 import React, { useCallback, useMemo } from 'react';
 
+import { Type } from '@dxos/echo';
 import { live } from '@dxos/live-object';
 // TODO(wittjosiah): Remove dependency on react-client.
+import { useClient } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
 export type CreateRefPanelProps = { model?: TableModel; modals: ModalController };
 
 // TODO(burdon): Factor out Space dependency (to plugin?)
 export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
   const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
+  const client = useClient();
   const space = model && getSpace(model?.view);
   const state = modals.state.value;
 
-  const schema = useMemo<Schema.Schema<any> | undefined>(() => {
+  const getSchema = useCallback(() => {
     if (!space || state?.type !== 'createRefPanel') {
       return;
     }
 
-    const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
-    if (schema) {
-      const omit = Schema.omit<any, any, ['id']>('id');
-      return omit(schema);
+    const staticSchema = client.graph.schemaRegistry.schemas.find(
+      (schema) => Type.getTypename(schema) === state.typename,
+    );
+    if (staticSchema) {
+      return staticSchema;
     }
+
+    const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
+    return schema;
   }, [space, state]);
 
+  const schema = useMemo<Schema.Schema<any> | undefined>(() => {
+    const schema = getSchema();
+    if (!schema) {
+      return;
+    }
+
+    const omit = Schema.omit<any, any, ['id']>('id');
+    return omit(schema);
+  }, [getSchema]);
+
   const handleSave = useCallback(
     (values: any) => {
       if (!model || !space || state?.type !== 'createRefPanel') {
         return;
       }
 
-      const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
+      const schema = getSchema();
       if (schema) {
         const obj = space.db.add(live(schema, values));
         state.onCreate?.(obj);
       }
       void modals.close();
     },
-    [modals, space, state],
+    [model, modals, space, state],
   );
 
   const handleCancel = useCallback(() => {

package/src/components/Table/DynamicTable.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -17,10 +17,11 @@ import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { DynamicTable } from './DynamicTable';
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
 
+import { DynamicTable } from './DynamicTable';
+
 faker.seed(0);
 
 const useTestPropertiesAndObjects = () => {
@@ -56,15 +57,17 @@ const DynamicTableStory = () => {
 // Story definitions.
 //
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
   parameters: { translations },
   decorators: [withLayout({ fullscreen: true }), withTheme],
-};
+} satisfies Meta<typeof DynamicTable>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj = {
   render: DynamicTableStory,
 };

package/src/components/Table/DynamicTable.tsx

@@ -3,16 +3,17 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useRef, useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { type JsonSchemaType } from '@dxos/echo-schema';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { Table, type TableController } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
-import { getBaseSchema, makeDynamicTable, type TablePropertyDefinition } from '../../util';
+import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '../../util';
+
+import { Table, type TableController } from './Table';
 
 type DynamicTableProps = ThemedClassName<{
   name?: string; // TODO(burdon): Remove?

package/src/components/Table/{relations.stories.tsx → Relations.stories.tsx}

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Type } from '@dxos/echo';
@@ -12,16 +12,17 @@ import { type JsonSchemaType } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import { translations } from '../../translations';
-import { TableView } from '../../types';
-import { createTable } from '../../util';
+import { Table } from '../../types';
+
+import { Table as TableComponent } from './Table';
 
 faker.seed(1);
 const generator: ValueGenerator = faker as any;
@@ -41,20 +42,24 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
     [],
   );
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     if (!space) {
       return;
     }
 
-    const timeout = setTimeout(async () => {
-      const { jsonSchema, view } = await createTable({ client, space, typename: Type.getTypename(schema) });
-      setJsonSchema(jsonSchema);
-      setView(view);
-    });
-    return () => clearTimeout(timeout);
+    const {
+      jsonSchema,
+      schema: effectSchema,
+      view,
+    } = await Table.makeView({ client, space, typename: Type.getTypename(schema) });
+    setJsonSchema(jsonSchema);
+    setView(view);
+    space.db.add(view);
+    await space.db.schemaRegistry.register([effectSchema]);
   }, [client, space, schema]);
 
   const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+
   useEffect(() => {
     if (!model || !space) {
       return;
@@ -84,33 +89,45 @@ const DefaultStory = () => {
 
   return (
     <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
-      <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} client={client} ignoreAttention />
-      </Table.Root>
-      <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} client={client} ignoreAttention />
-      </Table.Root>
+      <TableComponent.Root>
+        <TableComponent.Main
+          model={orgModel}
+          schema={DataType.Organization}
+          presentation={orgPresentation}
+          client={client}
+          ignoreAttention
+        />
+      </TableComponent.Root>
+      <TableComponent.Root>
+        <TableComponent.Main
+          model={contactModel}
+          schema={DataType.Person}
+          presentation={contactPresentation}
+          client={client}
+          ignoreAttention
+        />
+      </TableComponent.Root>
     </div>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-table/relations',
+const meta = {
+  title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
   parameters: { translations, controls: { disable: true } },
   decorators: [
     withClientProvider({
-      types: [DataType.View, DataType.Organization, DataType.Person, TableView],
+      types: [DataType.View, DataType.Organization, DataType.Person, Table.Table],
       createIdentity: true,
       createSpace: true,
     }),
     withTheme,
     withLayout({ fullscreen: true }),
   ],
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/Table/RowActionsMenu.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type RowActionsMenuProps = { model: TableModel; modals: ModalController };
@@ -38,7 +38,7 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
                 model.handleRowAction(action.id, state.rowIndex);
               }}
             >
-              {t(action.translationKey)}
+              {toLocalizedString(action.label, t)}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Viewport>

package/src/components/Table/Table.stories.tsx

@@ -4,36 +4,37 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback } from 'react';
 
-import { Obj, Type } from '@dxos/echo';
+import { Filter, Obj, Query, Type } from '@dxos/echo';
 import {
-  FormatEnum,
   EchoObject,
-  GeneratorAnnotation,
   FormatAnnotation,
+  FormatEnum,
+  GeneratorAnnotation,
+  LabelAnnotation,
   PropertyMetaAnnotationId,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { live, type Space } from '@dxos/react-client/echo';
+import { type Space, live } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { getSchemaFromPropertyDefinitions, DataType } from '@dxos/schema';
+import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table } from './Table';
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
-import { TableView } from '../../types';
-import { createTable } from '../../util';
+import { Table } from '../../types';
 import { TableToolbar } from '../TableToolbar';
 
+import { Table as TableComponent } from './Table';
+
 const TestSchema = Schema.Struct({
   // TODO(wittjosiah): Should be title. Currently name to work with default label.
   name: Schema.optional(Schema.String).annotations({ title: 'Title' }),
@@ -58,7 +59,10 @@ const TestSchema = Schema.Struct({
   parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
     title: 'Parent',
   }),
-}).pipe(Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }));
+}).pipe(
+  Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  LabelAnnotation.set(['name']),
+);
 interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
 
 const StoryViewEditor = ({
@@ -72,13 +76,13 @@ const StoryViewEditor = ({
   space?: Space;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
-  const handleTypenameChanged = useCallback(
+  const handleQueryChanged = useCallback(
     (typename: string) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
       schema.updateTypename(typename);
       invariant(view);
-      view.query.typename = typename;
+      view.query = Query.select(Filter.typename(typename)).ast;
     },
     [schema, view],
   );
@@ -92,7 +96,7 @@ const StoryViewEditor = ({
       registry={space?.db.schemaRegistry}
       schema={schema}
       view={view}
-      onTypenameChanged={handleTypenameChanged}
+      onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
     />
   );
@@ -124,8 +128,8 @@ const DefaultStory = () => {
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
         <TableToolbar classNames='border-be border-subduedSeparator' onAdd={handleInsertRow} onSave={handleSaveView} />
-        <Table.Root>
-          <Table.Main
+        <TableComponent.Root>
+          <TableComponent.Main
             ref={tableRef}
             model={model}
             presentation={presentation}
@@ -133,11 +137,11 @@ const DefaultStory = () => {
             client={client}
             ignoreAttention
           />
-        </Table.Root>
+        </TableComponent.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
         <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
+        <SyntaxHighlighter language='json' className='text-xs'>
           {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
@@ -153,7 +157,7 @@ type StoryProps = { rows?: number };
 
 // TODO(burdon): Need super simple story.
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   parameters: {
@@ -167,12 +171,17 @@ const meta: Meta<StoryProps> = {
     withTheme,
     withLayout({ fullscreen: true }),
     withClientProvider({
-      types: [DataType.View, TableView],
+      types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
         const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-        const { view } = await createTable({ client, space, typename: schema.typename });
+        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+        view.projection.fields = [
+          view.projection.fields.find((field) => field.path === 'name')!,
+          ...view.projection.fields.filter((field) => field.path !== 'name'),
+        ];
+
         space.db.add(view);
 
         Array.from({ length: 10 }).map(() => {
@@ -187,22 +196,24 @@ const meta: Meta<StoryProps> = {
       },
     }),
   ],
-};
+} satisfies Meta<typeof TableComponent>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
 export const StaticSchema: StoryObj = {
   render: DefaultStory,
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView, Testing.Contact, Testing.Organization],
+      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const { view } = await createTable({ client, space, typename: Testing.Contact.typename });
+        const { view } = await Table.makeView({ client, space, typename: Testing.Contact.typename });
         space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -239,11 +250,11 @@ export const ArrayOfObjects: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const { view } = await createTable({ client, space, typename: ContactWithArrayOfEmails.typename });
+        const { view } = await Table.makeView({ client, space, typename: ContactWithArrayOfEmails.typename });
         space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -265,7 +276,7 @@ export const Tags: Meta<StoryProps> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView],
+      types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
@@ -296,7 +307,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view } = await createTable({ client, space, typename });
+        const { view } = await Table.makeView({ client, space, typename });
         space.db.add(view);
 
         // Populate.