@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

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

@@ -4,61 +4,73 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
+import { FormatEnum, ImmutableSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, useSchema, 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';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { getSchemaFromPropertyDefinitions, ViewProjection, ViewType } from '@dxos/schema';
+import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table, type TableController } from './Table';
-import { useTableModel, type UseTableModelParams } from '../../hooks';
+import { useTableModel } from '../../hooks';
 import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 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);
 
-//
-// Story components.
-//
-
-const DefaultStory = () => {
+/**
+ * Custom hook to create and manage a test table model for storybook demonstrations.
+ * Provides table data, schema, and handlers for table operations.
+ */
+const useTestTableModel = () => {
+  const client = useClient();
   const { space } = useClientProvider();
-  invariant(space);
-
-  const tables = useQuery(space, Filter.schema(TableType));
-  const [table, setTable] = useState<TableType>();
-  const schema = useSchema(space, table?.view?.target?.query.typename);
 
-  useEffect(() => {
-    if (space && tables.length && !table) {
-      const table = tables[0];
-      invariant(table.view);
-      setTable(table);
-    }
-  }, [space, tables]);
+  const filter = useMemo(() => Filter.schema(TableType), []);
+  const tables = useQuery(space, filter);
+  const table = useMemo(() => tables.at(0), [tables]);
+  const schema = useSchema(client, space, table?.view?.target?.query.typename);
 
   const projection = useMemo(() => {
     if (schema && table?.view?.target) {
-      return new ViewProjection(schema, table.view.target);
+      return new ViewProjection(schema.jsonSchema, table.view.target);
     }
   }, [schema, table?.view?.target]);
 
+  const features = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: !(schema instanceof ImmutableSchema),
+    }),
+    [schema],
+  );
+
   const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChange = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
   const handleInsertRow = useCallback(() => {
     if (space && schema) {
       space.db.add(create(schema, {}));
@@ -68,7 +80,7 @@ const DefaultStory = () => {
   const handleDeleteRows = useCallback(
     (_: number, objects: any[]) => {
       for (const object of objects) {
-        space.db.remove(object);
+        space?.db.remove(object);
       }
     },
     [space],
@@ -80,27 +92,19 @@ const DefaultStory = () => {
         projection.deleteFieldProjection(fieldId);
       }
     },
-    [table, projection],
+    [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,
+    features,
+    rows: filteredObjects,
     onInsertRow: handleInsertRow,
     onDeleteRows: handleDeleteRows,
     onDeleteColumn: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
-    onRowOrderChanged: handleRowOrderChanged,
+    onRowOrderChange: handleRowOrderChange,
   });
 
   const presentation = useMemo(() => {
@@ -109,7 +113,7 @@ const DefaultStory = () => {
     }
   }, [model]);
 
-  const handleAction = useCallback(
+  const handleToolbarAction = useCallback(
     (action: { type: string }) => {
       switch (action.type) {
         case 'on-thread-create': {
@@ -129,16 +133,55 @@ const DefaultStory = () => {
     [table, model],
   );
 
-  const onTypenameChanged = useCallback(
+  return {
+    schema,
+    table,
+    tableRef,
+    model,
+    presentation,
+    space,
+    handleToolbarAction,
+    handleDeleteRows,
+    handleDeleteColumn,
+  };
+};
+
+const StoryViewEditor = () => {
+  const { table, space, schema, handleDeleteColumn } = useTestTableModel();
+
+  const handleTypenameChanged = useCallback(
     (typename: string) => {
       if (table?.view?.target) {
-        schema?.updateTypename(typename);
+        invariant(schema);
+        schema.mutable.updateTypename(typename);
         table.view.target.query.typename = typename;
       }
     },
-    [table?.view?.target, schema],
+    [schema, table?.view?.target],
   );
 
+  if (!table || !schema || !table.view?.target) {
+    return null;
+  }
+
+  return (
+    <ViewEditor
+      registry={space?.db.schemaRegistry}
+      schema={schema}
+      view={table.view.target!}
+      onTypenameChanged={handleTypenameChanged}
+      onDelete={handleDeleteColumn}
+    />
+  );
+};
+
+//
+// Story components.
+//
+
+const DefaultStory = () => {
+  const { schema, table, tableRef, model, presentation, handleToolbarAction } = useTestTableModel();
+
   if (!schema || !table) {
     return <div />;
   }
@@ -146,22 +189,13 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <TableToolbar classNames='border-b border-separator' onAction={handleAction} />
+        <TableToolbar classNames='border-be border-separator' onAction={handleToolbarAction} />
         <Table.Root>
           <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?.target && (
-          <ViewEditor
-            registry={space?.db.schemaRegistry}
-            schema={schema}
-            view={table.view.target!}
-            onTypenameChanged={onTypenameChanged}
-            onDelete={handleDeleteColumn}
-          />
-        )}
-
+        <StoryViewEditor />
         <SyntaxHighlighter language='json' className='w-full text-xs'>
           {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
         </SyntaxHighlighter>
@@ -170,57 +204,16 @@ const DefaultStory = () => {
   );
 };
 
-type StoryProps = {
-  rows?: number;
-} & Pick<SimulatorProps, 'insertInterval' | 'updateInterval'>;
-
-const _TablePerformanceStory = (props: StoryProps) => {
-  const getDefaultRows = useCallback(() => 10, []);
-  const rows = useDefaultValue(props.rows, getDefaultRows);
-  const table = useMemo(() => createTable(), []);
-  const items = useMemo(() => createItems(rows), [rows]);
-  const itemsRef = useRef(items);
-  const simulatorProps = useMemo(() => ({ table, items, ...props }), [table, items, props]);
-  useSimulator(simulatorProps);
-
-  const handleDeleteRows = useCallback<NonNullable<UseTableModelParams<any>['onDeleteRows']>>((row) => {
-    itemsRef.current.splice(row, 1);
-  }, []);
-
-  const handleDeleteColumn = useCallback<NonNullable<UseTableModelParams<any>['onDeleteColumn']>>(
-    (fieldId) => {
-      if (table && table.view?.target) {
-        const fieldPosition = table.view.target!.fields.findIndex((field) => field.id === fieldId);
-        table.view.target!.fields.splice(fieldPosition, 1);
-      }
-    },
-    [table],
-  );
-
-  const tableRef = useRef<TableController>(null);
-  const model = useTableModel({
-    table,
-    objects: items as any[],
-    onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: (cell) => tableRef.current?.update?.(cell),
-    onRowOrderChanged: () => tableRef.current?.update?.(),
-  });
-
-  return (
-    <Table.Root>
-      <Table.Main ref={tableRef} model={model} />
-    </Table.Root>
-  );
-};
+type StoryProps = { rows?: number };
 
 //
 // Story definitions.
 //
 
+// TODO(burdon): Need super simple story.
+
 const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
-  component: Table.Main as any,
   render: DefaultStory,
   parameters: { translations },
   decorators: [
@@ -228,9 +221,9 @@ const meta: Meta<StoryProps> = {
       types: [TableType, ViewType],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ space }) => {
+      onSpaceCreated: async ({ client, space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = await initializeTable({ space, table, initialRow: false });
+        const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             create(schema, {
@@ -249,20 +242,82 @@ export default meta;
 
 export const Default = {};
 
-// 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 StaticSchema: StoryObj = {
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType, Testing.Contact, Testing.Org],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ client, space }) => {
+        const table = space.db.add(create(TableType, {}));
+        await initializeTable({ client, space, table, typename: Testing.Contact.typename });
+
+        const factory = createObjectFactory(space.db, faker as any);
+        await factory([
+          { type: Testing.Contact, count: 10 },
+          { type: Testing.Org, count: 1 },
+        ]);
+      },
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export const Tags: Meta<StoryProps> = {
+  title: 'ui/react-ui-table/Table',
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ client, space }) => {
+        // Configure schema.
+        const typename = 'example.com/SingleSelect';
+        const selectOptions = [
+          { id: 'one', title: 'One', color: 'emerald' },
+          { id: 'two', title: 'Two', color: 'blue' },
+          { id: 'three', title: 'Three', color: 'indigo' },
+          { id: 'four', title: 'Four', color: 'red' },
+          { id: 'longer_option', title: 'LONGER OPTION', color: 'amber' },
+        ];
+
+        const selectOptionIds = selectOptions.map((o) => o.id);
+
+        const schema = getSchemaFromPropertyDefinitions(typename, [
+          {
+            name: 'single',
+            format: FormatEnum.SingleSelect,
+            config: { options: selectOptions },
+          },
+          {
+            name: 'multiple',
+            format: FormatEnum.MultiSelect,
+            config: { options: selectOptions },
+          },
+        ]);
+        const [storedSchema] = await space.db.schemaRegistry.register([schema]);
+
+        // Initialize table.
+        const table = space.db.add(create(TableType, {}));
+        await initializeTable({ client, space, table, initialRow: false, typename });
+
+        // Populate.
+        Array.from({ length: 10 }).map(() => {
+          return space.db.add(
+            create(storedSchema, {
+              single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
+              multiple: faker.helpers.randomSubset(selectOptionIds),
+            }),
+          );
+        });
+      },
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};

package/src/components/Table/Table.tsx

@@ -3,24 +3,25 @@
 //
 
 import React, {
-  forwardRef,
+  type MouseEvent,
   type PropsWithChildren,
+  type WheelEvent,
+  forwardRef,
   useCallback,
   useImperativeHandle,
   useState,
-  type WheelEvent,
-  type MouseEvent,
   useMemo,
+  useEffect,
 } from 'react';
 
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Filter, getSpace, fullyQualifiedId } from '@dxos/react-client/echo';
+import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { type DxGridElement, Grid, type GridContentProps, closestCell, type DxGridPosition } from '@dxos/react-ui-grid';
+import { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
@@ -39,10 +40,8 @@ const inlineEndLine =
 const blockEndLine =
   '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
 
-const frozen = { frozenRowsStart: 1, frozenColsStart: 1, frozenColsEnd: 1 };
-
 //
-// Root
+// Table.Root
 //
 
 export type TableRootProps = PropsWithChildren<{ role?: string }>;
@@ -52,8 +51,8 @@ const TableRoot = ({ children, role }: TableRootProps) => {
     <div
       role='none'
       className={mx(
-        'relative border-bs !border-separator',
-        role === 'section'
+        'relative !border-separator',
+        role === 'section' // TODO(burdon): This leaks composer plugin concepts? Standardize for react-ui?
           ? 'attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]'
           : 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
       )}
@@ -64,7 +63,7 @@ const TableRoot = ({ children, role }: TableRootProps) => {
 };
 
 //
-// Main
+// Table.Main
 //
 
 export type TableController = {
@@ -74,16 +73,46 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
+  // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
+  onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-    const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+    const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
+    const frozen = useMemo(() => {
+      const noActionColumn =
+        model?.features.dataEditable === false &&
+        model?.features.schemaEditable === false &&
+        model.rowActions.length === 0;
+
+      return {
+        frozenRowsStart: 1,
+        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsEnd: noActionColumn ? 0 : 1,
+      };
+    }, [model]);
+
+    // TODO(burdon): Replace useEffect below.
+    // const getCells = useCallback<GridContentProps['getCells']>(
+    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+    //   [presentation],
+    // );
+
+    useEffect(() => {
+      if (!presentation || !dxGrid) {
+        return;
+      }
+
+      // TODO(burdon): Pass to Grid.Content?
+      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+    }, [presentation, dxGrid]);
+
     /**
      * Provides an external controller that can be called to repaint the table.
      */
@@ -94,7 +123,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           return {};
         }
 
-        dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
         return {
           update: (cell) => {
             if (cell) {
@@ -111,6 +139,18 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
+        const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
+        if (rowIndex != null) {
+          if (onRowClick) {
+            const row = model?.getRowAt(rowIndex);
+            row && onRowClick(row);
+          }
+
+          if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
+            model.selection.toggleSelectionForRowIndex(rowIndex);
+          }
+        }
+
         if (!modals) {
           return;
         }
@@ -197,6 +237,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
       (cell) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
         // TODO(burdon): Insert row only if bottom row isn't completely blank already.
         if (model && cell.row === model.getRowCount() - 1) {
           model.insertRow(cell.row);
@@ -213,6 +257,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
       (event) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
         const cell = closestCell(event.target);
         if (!model || !cell) {
           return;
@@ -260,7 +308,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
       async ({ field, props }, text) => {
         if (model && props.referenceSchema && field.referencePath) {
-          const space = getSpace(model.table);
+          const space = model.space;
           invariant(space);
           const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
           if (schema) {
@@ -291,7 +339,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
         return [];
       },
-      [model],
+      [model, t],
     );
 
     if (!model || !modals) {
@@ -299,7 +347,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     }
 
     return (
-      <Grid.Root id={model.table.id ?? 'table-grid'}>
+      <Grid.Root id={model.id ?? 'table-grid'}>
         <TableCellEditor
           model={model}
           modals={modals}
@@ -308,32 +356,29 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onQuery={handleQuery}
         />
         <Grid.Content
-          onWheelCapture={handleWheel}
           className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
           frozen={frozen}
+          // getCells={getCells}
           columns={model.columnMeta.value}
           limitRows={model.getRowCount() ?? 0}
-          limitColumns={model.table.view?.target?.fields?.length ?? 0}
+          limitColumns={model.view?.fields?.length ?? 0}
+          overscroll='trap'
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
           onKeyDown={handleKeyDown}
-          overscroll='trap'
+          onWheelCapture={handleWheel}
           ref={setDxGrid}
         />
         <RowActionsMenu model={model} modals={modals} />
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
-        <RefPanel model={model} modals={modals} />
         <CreateRefPanel model={model} modals={modals} />
+        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },
 );
 
-//
-// CellEditor
-//
-
 export const Table = {
   Root: TableRoot,
   Main: TableMain,

package/src/components/Table/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Table';
+export * from './DynamicTable';