@dxos/react-ui-table 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/src/components/Table/ColumnSettings.tsx

@@ -9,13 +9,13 @@ import { DropdownMenu } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-type ColumnSettingsProps = { model?: TableModel; onNewColumn: () => void };
+type ColumnSettingsProps = { model?: TableModel; modals: ModalController; onNewColumn: () => void };
 
-export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
+export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsProps) => {
   const [newField, setNewField] = useState<FieldType>();
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
 
   const space = getSpace(model?.table);
 
@@ -34,17 +34,17 @@ export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
     if (state?.type === 'columnSettings') {
       const { mode } = state;
       if (mode.type === 'edit') {
-        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+        return model?.table?.view?.target?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return undefined;
-  }, [model?.table?.view?.fields, state]);
+  }, [model?.table?.view?.target?.fields, state]);
 
   const field = existingField ?? newField;
 
   const handleSave = useCallback(() => {
-    model?.modalController.close();
-  }, [model?.modalController]);
+    modals.close();
+  }, [modals]);
 
   const handleCancel = useCallback(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && newField) {
@@ -52,18 +52,18 @@ export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
     }
   }, [model?.projection, state, newField]);
 
-  if (!model?.table?.view || !model.projection || !field) {
+  if (!model?.table?.view?.target || !model.projection || !field) {
     return null;
   }
 
   return (
     <DropdownMenu.Root modal={false} open={state?.type === 'columnSettings'}>
-      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Portal>
         <DropdownMenu.Content classNames='md:is-64'>
           <DropdownMenu.Viewport>
             <FieldEditor
-              view={model.table.view}
+              view={model.table.view.target!}
               projection={model.projection}
               field={field}
               registry={space?.db.schemaRegistry}

package/src/components/Table/CreateRefPanel.tsx

@@ -10,22 +10,22 @@ 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 } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-export type CreateRefPanelProps = { model?: TableModel };
+export type CreateRefPanelProps = { model?: TableModel; modals: ModalController };
 
 // TODO(burdon): Factor out Space dependency (to plugin?)
-export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
+export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
   const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
   const space = getSpace(model?.table);
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
+
   const schema = useMemo<S.Schema<any> | undefined>(() => {
     if (!space || state?.type !== 'createRefPanel') {
       return;
     }
 
-    // TODO(burdon): Factor out.
-    const schema: S.Schema<any> | undefined = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
     if (schema) {
       const omit = S.omit<any, any, ['id']>('id');
       return omit(schema);
@@ -38,22 +38,21 @@ export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRef
         return;
       }
 
-      const schema: S.Schema<any> | undefined = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+      const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
       if (schema) {
         const obj = space.db.add(create(schema, values));
         state.onCreate?.(obj);
       }
-
-      void model.modalController.close();
+      void modals.close();
     },
-    [model?.modalController, space, state],
+    [modals, space, state],
   );
 
   const handleCancel = useCallback(() => {
     if (model) {
-      model.modalController.close();
+      modals.close();
     }
-  }, [model?.modalController]);
+  }, [modals]);
 
   if (!model?.table?.view || !model.projection) {
     return null;
@@ -65,11 +64,11 @@ export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRef
       open={state?.type === 'createRefPanel' && !!schema}
       onOpenChange={(nextOpen) => {
         if (model && !nextOpen) {
-          return model.modalController.close();
+          return modals.close();
         }
       }}
     >
-      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
         <Popover.Content classNames='md:is-64' data-grid={gridId}>
           {state?.type === 'createRefPanel' && schema && (

package/src/components/Table/RefPanel.tsx

@@ -8,9 +8,9 @@ import { getSpace, type Space } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-type RefPanelProps = { model?: TableModel };
+type RefPanelProps = { model: TableModel; modals: ModalController };
 
 const getRefTargetObj = (space?: Space, id?: string) => {
   if (space && id) {
@@ -20,13 +20,13 @@ const getRefTargetObj = (space?: Space, id?: string) => {
   }
 };
 
-export const RefPanel = ({ model }: RefPanelProps) => {
-  const state = model?.modalController.state.value;
-  const space = getSpace(model?.table);
+export const RefPanel = ({ model, modals }: RefPanelProps) => {
+  const state = modals.state.value;
+  const space = getSpace(model.table);
   const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
   const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
 
-  if (!model?.table?.view || !model.projection) {
+  if (!model.table?.view || !model.projection) {
     return null;
   }
 
@@ -35,12 +35,12 @@ export const RefPanel = ({ model }: RefPanelProps) => {
       modal={false}
       open={state?.type === 'refPanel' && !!targetObj && !!schema}
       onOpenChange={(nextOpen) => {
-        if (model && !nextOpen) {
-          return model.modalController.close();
+        if (!nextOpen) {
+          return modals.close();
         }
       }}
     >
-      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
         <Popover.Content classNames='md:is-64'>
           {targetObj && schema && <Form readonly values={targetObj} schema={schema} />}

package/src/components/Table/RowActionsMenu.tsx

@@ -6,22 +6,21 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 import { translationKey } from '../../translations';
 
-type RowActionsMenuProps = { model: TableModel };
+type RowActionsMenuProps = { model: TableModel; modals: ModalController };
 
-export const RowActionsMenu = ({ model }: RowActionsMenuProps) => {
+export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
   const hasSelection = model.selection.hasSelection.value;
-  const state = model.modalController.state.value;
+  const state = modals.state.value;
   if (state?.type !== 'row') {
     return null;
   }
-
   return (
-    <DropdownMenu.Root modal={false} open={true} onOpenChange={model.modalController.close}>
-      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+    <DropdownMenu.Root modal={false} open={true} onOpenChange={modals.close}>
+      <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
           <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>

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

@@ -4,15 +4,15 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type MutableSchema } from '@dxos/echo-schema';
+import { type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { Filter, useSpaces, useQuery, create } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { Filter, useQuery, create } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useDefaultValue } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -21,12 +21,14 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table, type TableController } from './Table';
 import { useTableModel, type UseTableModelParams } from '../../hooks';
+import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
-import { Toolbar } from '../Toolbar';
+import { TableToolbar } from '../TableToolbar';
 import { createItems, createTable, type SimulatorProps, useSimulator } from '../testing';
 
+// NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
 faker.seed(0);
 
 //
@@ -34,25 +36,26 @@ faker.seed(0);
 //
 
 const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
+  const { space } = useClientProvider();
+  invariant(space);
+
   const tables = useQuery(space, Filter.schema(TableType));
   const [table, setTable] = useState<TableType>();
-  const [schema, setSchema] = useState<MutableSchema>();
+  const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (tables.length && !table) {
+    if (space && tables.length && !table) {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type));
     }
-  }, [tables]);
+  }, [space, tables]);
 
   const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema, table.view);
+    if (schema && table?.view?.target) {
+      return new ViewProjection(schema, table.view.target);
     }
-  }, [schema, table?.view]);
+  }, [schema, table?.view?.target]);
 
   const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
@@ -81,6 +84,32 @@ const DefaultStory = () => {
     [table, projection],
   );
 
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChanged = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const model = useTableModel({
+    table,
+    projection,
+    objects: filteredObjects,
+    onInsertRow: handleInsertRow,
+    onDeleteRows: handleDeleteRows,
+    onDeleteColumn: handleDeleteColumn,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChanged: handleRowOrderChanged,
+  });
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
   const handleAction = useCallback(
     (action: { type: string }) => {
       switch (action.type) {
@@ -90,23 +119,26 @@ const DefaultStory = () => {
         }
         case 'add-row': {
           handleInsertRow();
+          break;
+        }
+        case 'save-view': {
+          model?.saveView();
+          break;
         }
       }
     },
-    [table, spaces],
+    [table, model],
   );
 
-  const tableRef = useRef<TableController>(null);
-  const model = useTableModel({
-    table,
-    projection,
-    objects: filteredObjects,
-    onInsertRow: handleInsertRow,
-    onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: (cell) => tableRef.current?.update?.(cell),
-    onRowOrderChanged: () => tableRef.current?.update?.(),
-  });
+  const onTypenameChanged = useCallback(
+    (typename: string) => {
+      if (table?.view?.target) {
+        schema?.updateTypename(typename);
+        table.view.target.query.type = typename;
+      }
+    },
+    [table?.view?.target, schema],
+  );
 
   if (!schema || !table) {
     return <div />;
@@ -115,27 +147,24 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <Toolbar.Root classNames='border-b border-separator' onAction={handleAction}>
-          <Toolbar.Editing />
-          <Toolbar.Separator />
-          <Toolbar.Actions />
-        </Toolbar.Root>
+        <TableToolbar classNames='border-b border-separator' onAction={handleAction} />
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} ignoreAttention />
+          <Table.Main ref={tableRef} model={model} presentation={presentation} ignoreAttention />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
-        {table.view && (
+        {table.view?.target && (
           <ViewEditor
             registry={space?.db.schemaRegistry}
             schema={schema}
-            view={table.view}
+            view={table.view.target!}
+            onTypenameChanged={onTypenameChanged}
             onDelete={handleDeleteColumn}
           />
         )}
 
         <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view: table.view, schema }, null, 2)}
+          {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -146,7 +175,7 @@ type StoryProps = {
   rows?: number;
 } & Pick<SimulatorProps, 'insertInterval' | 'updateInterval'>;
 
-const TablePerformanceStory = (props: StoryProps) => {
+const _TablePerformanceStory = (props: StoryProps) => {
   const getDefaultRows = useCallback(() => 10, []);
   const rows = useDefaultValue(props.rows, getDefaultRows);
   const table = useMemo(() => createTable(), []);
@@ -161,9 +190,9 @@ const TablePerformanceStory = (props: StoryProps) => {
 
   const handleDeleteColumn = useCallback<NonNullable<UseTableModelParams<any>['onDeleteColumn']>>(
     (fieldId) => {
-      if (table && table.view) {
-        const fieldPosition = table.view.fields.findIndex((field) => field.id === fieldId);
-        table.view.fields.splice(fieldPosition, 1);
+      if (table && table.view?.target) {
+        const fieldPosition = table.view.target!.fields.findIndex((field) => field.id === fieldId);
+        table.view.target!.fields.splice(fieldPosition, 1);
       }
     },
     [table],
@@ -202,7 +231,7 @@ const meta: Meta<StoryProps> = {
       createSpace: true,
       onSpaceCreated: async ({ space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = initializeTable({ space, table, initialRow: false });
+        const schema = await initializeTable({ space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             create(schema, {
@@ -219,22 +248,22 @@ const meta: Meta<StoryProps> = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
-
 export const Default = {};
 
-export const Mutations: Story = {
-  render: TablePerformanceStory,
-  args: {
-    rows: 1000,
-    updateInterval: 1,
-  },
-};
+// TODO(ZaymonFC): Restore the performance stories.
+// type Story = StoryObj<StoryProps>;
+// export const Mutations: Story = {
+//   render: TablePerformanceStory,
+//   args: {
+//     rows: 1000,
+//     updateInterval: 1,
+//   },
+// };
 
-export const RapidInsertions: Story = {
-  render: TablePerformanceStory,
-  args: {
-    rows: 0,
-    insertInterval: 100,
-  },
-};
+// export const RapidInsertions: Story = {
+//   render: TablePerformanceStory,
+//   args: {
+//     rows: 0,
+//     insertInterval: 100,
+//   },
+// };