@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.0

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

@@ -1,508 +1,238 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 import '@dxos-theme';
 
-import { Plugs, PlugsConnected } from '@phosphor-icons/react';
-import { type StoryObj } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { create } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/keys';
-import { log } from '@dxos/log';
+import { type MutableSchema } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { Button } from '@dxos/react-ui';
-import { withSignals, withTheme } from '@dxos/storybook-utils';
-import { range } from '@dxos/util';
-
-import { Table } from './Table';
-import { createColumnBuilder, type SearchListQueryModel, type ValueUpdater } from '../../helpers';
-import { type TableColumnDef } from '../../types';
-
-// TODO(burdon): Header menu builder.
-// TODO(burdon): Expand width if not all columns have explicit size.
-
-type Item = {
-  publicKey: PublicKey;
-  name: string;
-  company?: string;
-  count?: number;
-  started?: Date;
-  complete?: boolean;
-};
-
-faker.seed(911);
-
-const createItems = (count: number) =>
-  range(count).map(
-    () =>
-      create<Item>({
-        publicKey: PublicKey.random(),
-        name: faker.commerce.productName(),
-        count: faker.datatype.boolean({ probability: 0.9 }) ? faker.number.int({ min: 0, max: 10_000 }) : undefined,
-        started: faker.date.recent(),
-        complete: faker.datatype.boolean() ? true : faker.datatype.boolean() ? false : undefined,
-      }) as Item,
-  );
-
-const updateItems = <TValue = any,>(items: Item[], key: PublicKey, id: string, value: TValue) => {
-  return items.map((item) => (item.publicKey.equals(key) ? { ...item, [id]: value } : item));
-};
-
-const tableStorySelectItems: Record<string, Item> = range(128).reduce((acc: Record<string, Item>, _i) => {
-  const id = PublicKey.random();
-  acc[id.toHex()] = {
-    publicKey: id,
-    name: faker.company.name(),
-  };
-  return acc;
-}, {});
-
-const timeout = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-const tableStorySelectModel: SearchListQueryModel<Item> = {
-  getId: (object) => object?.publicKey?.toHex() ?? 'never',
-  getText: (object) => object?.name ?? 'never',
-  query: async (search: string) => {
-    await timeout(400);
-    return Object.values(tableStorySelectItems).filter((item) => {
-      return item.name.toLowerCase().includes(search.toLowerCase());
-    });
-  },
-};
-
-const { helper, builder } = createColumnBuilder<Item>();
-
-const makeColumns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
-  helper.display(builder.selectRow()),
-  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
-  helper.accessor(
-    'name',
-    builder.string({
-      label: 'Name',
-      onUpdate,
-      meta: { expand: true },
-      footer: (props) => props.table.getRowModel().rows.length,
-    }),
-  ),
-  helper.accessor('started', builder.date({ label: 'Started', relative: true, meta: { resizable: true } })),
-  helper.accessor(
-    'count',
-    builder.number({
-      label: 'Count',
-      meta: { resizable: true },
-      onUpdate,
-      getGroupingValue: (row) => (row.count ? (row.count < 2000 ? 'A' : row.count < 5000 ? 'B' : 'C') : 'D'),
-    }),
-  ),
-  helper.accessor('company', builder.combobox({ label: 'Company', model: tableStorySelectModel, onUpdate })),
-  helper.accessor(
-    'complete',
-    builder.switch({ getGroupingValue: (row) => row.complete === true, label: '', onUpdate }),
-  ),
-  helper.accessor('complete', builder.icon({ id: 'done', label: '' })),
-  helper.accessor(
-    'complete',
-    builder.icon({
-      id: 'connected',
-      label: '',
-      on: { Icon: PlugsConnected, className: 'text-blue-500' },
-      off: { Icon: Plugs, className: 'text-blue-200' },
-    }),
-  ),
-];
+import { Filter, useSpaces, useQuery, create } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { useDefaultValue } from '@dxos/react-ui';
+import { ViewEditor } from '@dxos/react-ui-data';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { ViewProjection, ViewType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Table, type TableController } from './Table';
+import { useTableModel, type UseTableModelParams } from '../../hooks';
+import translations from '../../translations';
+import { TableType } from '../../types';
+import { initializeTable } from '../../util';
+import { Toolbar } from '../Toolbar';
+import { createItems, createTable, type SimulatorProps, useSimulator } from '../testing';
 
 //
-// Tests
+// Story components.
 //
 
-const MinimalTable = (props: any) => {
-  return (
-    <Table.Root>
-      <Table.Viewport classNames='fixed inset-0'>
-        <Table.Main<any> {...props} />
-      </Table.Viewport>
-    </Table.Root>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-table/Table',
-  component: MinimalTable,
-  args: {
-    header: true,
-    keyAccessor: (item: Item) => item.publicKey.toHex(),
-  },
-  argTypes: {
-    header: { control: 'boolean' },
-    footer: { control: 'boolean' },
-    border: { control: 'boolean' },
-    fullWidth: { control: 'boolean' },
-    grouping: {
-      control: 'select',
-      options: ['none', 'complete', 'count'],
-      mapping: {
-        none: undefined,
-        complete: ['complete'],
-        count: ['count'],
-      },
-    },
-    columnVisibility: {
-      control: 'select',
-      options: ['all', 'limited'],
-      mapping: {
-        all: undefined,
-        limited: { key: false, started: false },
-      },
-    },
-    rowsSelectable: { control: 'select', options: [false, true, 'multi'] },
-  },
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    columns: makeColumns(),
-    data: createItems(20),
-  },
-};
-
-export const Scrolling = {
-  args: {
-    columns: makeColumns(),
-    data: createItems(200),
-  },
-};
-
-export const Visibility = {
-  args: {
-    columns: makeColumns(),
-    data: createItems(10),
-    columnVisibility: { key: false, started: false },
-  },
-};
-
-export const Empty = {
-  args: {
-    columns: makeColumns(),
-  },
-};
-
-export const Dynamic = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(50));
-
-    useEffect(() => {
-      const interval = setInterval(() => {
-        setItems((items) => {
-          if (items.length >= 200) {
-            clearInterval(interval);
-          }
-          return [...items, ...createItems(1)];
-        });
-      }, 500);
-      return () => clearInterval(interval);
-    }, []);
-
-    const columns = useMemo(() => makeColumns(), []);
-
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={columns}
-            data={items}
-            fullWidth
-            stickyHeader
-            border
-            pinLastRow
-          />
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
-};
-
-export const Editable = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(200));
-
-    const onUpdate: ValueUpdater<Item, any> = useCallback(
-      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
-      [setItems],
-    );
-
-    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
-
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={columns}
-            data={items}
-            fullWidth
-            stickyHeader
-            border
-            pinLastRow
-          />
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
-};
-
-export const PinnedLastRow = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(200));
-
-    const onUpdate: ValueUpdater<Item, any> = useCallback(
-      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
-      [setItems],
-    );
-
-    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
-
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={columns}
-            data={items}
-            fullWidth
-            stickyHeader
-            border
-            pinLastRow
-          />
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
-};
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const tables = useQuery(space, Filter.schema(TableType));
+  const [table, setTable] = useState<TableType>();
+  const [schema, setSchema] = useState<MutableSchema>();
+  useEffect(() => {
+    if (tables.length && !table) {
+      const table = tables[0];
+      invariant(table.view);
+      setTable(table);
+      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+    }
+  }, [tables]);
 
-export const InsertDelete = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(10));
+  const projection = useMemo(() => {
+    if (schema && table?.view) {
+      return new ViewProjection(schema, table.view);
+    }
+  }, [schema, table?.view]);
 
-    const onUpdate: ValueUpdater<Item, any> = useCallback(
-      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
-      [setItems],
-    );
+  const objects = useQuery(space, schema ? Filter.schema(schema) : () => false, undefined, [schema]);
+  const filteredObjects = useGlobalFilteredObjects(objects);
 
-    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
+  const handleInsertRow = useCallback(() => {
+    if (space && schema) {
+      space.db.add(create(schema, {}));
+    }
+  }, [space, schema]);
 
-    const onInsertFirst = () => {
-      setItems((items) => [...createItems(1), ...items]);
-    };
+  const handleDeleteRows = useCallback(
+    (_: number, objects: any[]) => {
+      for (const object of objects) {
+        space.db.remove(object);
+      }
+    },
+    [space],
+  );
 
-    const onInsertLast = () => {
-      setItems((items) => [...items, ...createItems(1)]);
-    };
+  const handleDeleteColumn = useCallback(
+    (fieldId: string) => {
+      if (projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [table, projection],
+  );
 
-    const onDeleteFirst = () => {
-      setItems(([_first, ...rest]) => rest);
-    };
+  const handleAction = useCallback(
+    (action: { type: string }) => {
+      switch (action.type) {
+        case 'on-thread-create': {
+          console.log('Thread creation triggered');
+          break;
+        }
+        case 'add-row': {
+          handleInsertRow();
+        }
+      }
+    },
+    [table, spaces],
+  );
 
-    const onDeleteLast = () => {
-      setItems((items) => [...items.slice(0, items.length - 1)]);
-    };
+  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?.(),
+  });
+
+  if (!schema || !table) {
+    return <div />;
+  }
 
-    return (
-      <div className='space-y-4'>
-        <div className='flex flex-row gap-2'>
-          <Button onClick={onInsertFirst}>Insert first</Button>
-          <Button onClick={onInsertLast}>Insert last</Button>
-          <Button onClick={onDeleteFirst}>Delete first</Button>
-          <Button onClick={onDeleteLast}>Delete last</Button>
-        </div>
+  return (
+    <div className='grow grid grid-cols-[1fr_350px]'>
+      <div className='flex flex-col h-full overflow-hidden'>
+        <Toolbar.Root classNames='border-b border-separator' onAction={handleAction}>
+          <Toolbar.Editing />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
         <Table.Root>
-          <Table.Viewport>
-            <Table.Main<Item>
-              role='grid'
-              rowsSelectable='multi'
-              keyAccessor={(row) => row.publicKey.toHex()}
-              columns={columns}
-              data={items}
-              fullWidth
-              stickyHeader
-              border
-              pinLastRow
-            />
-          </Table.Viewport>
+          <Table.Main ref={tableRef} model={model} />
         </Table.Root>
       </div>
-    );
-  },
-};
-
-export const Resizable = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(10));
-
-    const onUpdate: ValueUpdater<Item, any> = useCallback(
-      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
-      [setItems],
-    );
-
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={makeColumns(onUpdate)}
-            data={items}
-            fullWidth
-            stickyHeader
+      <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
+        {table.view && (
+          <ViewEditor
+            registry={space?.db.schemaRegistry}
+            schema={schema}
+            view={table.view}
+            onDelete={handleDeleteColumn}
           />
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
-};
-
-export const TenThousandRows = {
-  render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(10000));
+        )}
 
-    const onUpdate: ValueUpdater<Item, any> = useCallback(
-      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
-      [setItems],
-    );
-
-    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
-
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={columns}
-            data={items}
-            fullWidth
-            stickyHeader
-            border
-          />{' '}
-        </Table.Viewport>
-      </Table.Root>
-    );
-  },
+        <SyntaxHighlighter language='json' className='w-full text-xs'>
+          {JSON.stringify({ view: table.view, schema }, null, 2)}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
 };
 
-// TODO(burdon): Warning: Encountered two children with the same key.
-
 type StoryProps = {
-  periodicMutations: boolean;
-  mutationInterval: number;
-  periodicDeletions: boolean;
-  deletionInterval: number;
-  periodicInsertions: boolean;
-  insertionInterval: number;
-};
-
-const DefaultStory = ({
-  periodicMutations,
-  mutationInterval,
-  periodicDeletions,
-  deletionInterval,
-  periodicInsertions,
-  insertionInterval,
-}: StoryProps) => {
-  const [state] = useState(() => create({ items: createItems(10) }));
-
-  useEffect(() => {
-    if (!periodicMutations) {
-      return;
-    }
-
-    const i = setInterval(() => {
-      if (state.items.length === 0) {
-        return;
+  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) {
+        const fieldPosition = table.view.fields.findIndex((field) => field.id === fieldId);
+        table.view.fields.splice(fieldPosition, 1);
       }
+    },
+    [table],
+  );
 
-      const idx = Math.floor(Math.random() * state.items.length);
-      log('mutating', { idx });
-      state.items[idx].name = faker.commerce.productName();
-      state.items[idx].count = Math.floor(Math.random() * 1000);
-      state.items[idx].started = new Date();
-    }, mutationInterval);
-
-    return () => clearInterval(i);
-  }, [periodicMutations, mutationInterval, state.items]);
-
-  useEffect(() => {
-    if (!periodicInsertions) {
-      return;
-    }
-
-    const i = setInterval(() => {
-      log('inserting...');
-      state.items.push(createItems(1)[0]);
-    }, insertionInterval);
+  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 () => clearInterval(i);
-  }, [periodicInsertions, insertionInterval, state.items]);
+  return (
+    <Table.Root>
+      <Table.Main ref={tableRef} model={model} />
+    </Table.Root>
+  );
+};
 
-  useEffect(() => {
-    if (!periodicDeletions) {
-      return;
-    }
+//
+// Story definitions.
+//
 
-    const i = setInterval(() => {
-      if (state.items.length === 0) {
-        return;
-      }
+const meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-table/Table',
+  component: Table.Main as any,
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ space }) => {
+        const table = space.db.add(create(TableType, {}));
+        const schema = initializeTable({ space, table });
+        Array.from({ length: 30 }).map(() => {
+          return space.db.add(
+            create(schema, {
+              name: faker.person.fullName(),
+            }),
+          );
+        });
+      },
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
 
-      log('deleting...');
-      const randomIndex = Math.floor(Math.random() * state.items.length);
-      state.items.splice(randomIndex, 1);
-    }, deletionInterval);
+export default meta;
 
-    return () => clearInterval(i);
-  }, [periodicDeletions, deletionInterval, state.items]);
+type Story = StoryObj<StoryProps>;
 
-  const onUpdate = useCallback((...args: any[]) => {}, []);
-  const columns = useMemo(() => makeColumns(onUpdate), []);
+export const Default = {};
 
-  return (
-    <Table.Root>
-      <Table.Viewport classNames='fixed inset-0'>
-        <Table.Main<Item>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns}
-          data={state.items}
-          fullWidth
-          stickyHeader
-          border
-          pinLastRow
-        />
-      </Table.Viewport>
-    </Table.Root>
-  );
+export const Mutations: Story = {
+  render: TablePerformanceStory,
+  args: {
+    rows: 1000,
+    updateInterval: 1,
+  },
 };
 
-export const RealTimeUpdates: StoryObj<StoryProps> = {
-  render: DefaultStory,
-  decorators: [withSignals],
+export const RapidInsertions: Story = {
+  render: TablePerformanceStory,
   args: {
-    periodicMutations: true,
-    mutationInterval: 1000,
-    periodicDeletions: false,
-    deletionInterval: 5000,
-    periodicInsertions: false,
-    insertionInterval: 3000,
+    rows: 0,
+    insertInterval: 100,
   },
 };