@dxos/react-ui-table 0.3.3-main.006ca4d

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dxos/react-ui-table",
+  "version": "0.3.3-main.006ca4d",
+  "description": "A table component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@fluentui/react-tabster": "^9.12.0",
+    "@tanstack/react-table": "^8.9.3",
+    "date-fns": "^2.29.3",
+    "lodash.defaultsdeep": "^4.6.1",
+    "@dxos/async": "0.3.3-main.006ca4d",
+    "@dxos/invariant": "0.3.3-main.006ca4d",
+    "@dxos/keys": "0.3.3-main.006ca4d",
+    "@dxos/react-ui": "0.3.3-main.006ca4d",
+    "@dxos/react-ui-theme": "0.3.3-main.006ca4d",
+    "@dxos/react-ui-types": "0.3.3-main.006ca4d",
+    "@dxos/util": "0.3.3-main.006ca4d"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.0.2",
+    "@phosphor-icons/react": "^2.0.5",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "chromatic": "^6.17.0",
+    "deepsignal": "^1.3.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^4.3.9",
+    "vite-plugin-turbosnap": "^1.0.2",
+    "@dxos/react-ui-theme": "0.3.3-main.006ca4d"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "chromatic": "true"
+  }
+}

package/src/components/ColumnMenu.stories.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { ColumnPanel } from './ColumnMenu';
+import { type ColumnProps } from '../schema';
+
+export default {
+  component: ColumnPanel,
+};
+
+export const Default = {
+  args: {
+    column: {
+      id: 'test',
+      label: 'test',
+    } as ColumnProps,
+  },
+  decorators: [
+    (Story: any) => (
+      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
+        <div className='flex w-[250px] m-8 bg-white'>
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

package/src/components/ColumnMenu.tsx

@@ -0,0 +1,239 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, CaretDown, Trash, X } from '@phosphor-icons/react';
+import { type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, DensityProvider, Input, Popover, Select, Separator } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { type TableDef, type ColumnProps, columnTypes } from '../schema';
+
+export type ColumnMenuProps<TData extends RowData, TValue> = {
+  context: HeaderContext<TData, TValue>;
+  tableDefs: TableDef[];
+  tableDef: TableDef;
+  column: ColumnProps;
+  onUpdate?: (id: string, column: ColumnProps) => void;
+  onDelete?: (id: string) => void;
+};
+
+export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
+  const title = column.label?.length ? column.label : column.id;
+
+  return (
+    <div className='flex grow items-center overflow-hidden'>
+      <div className='truncate' title={title}>
+        {title}
+      </div>
+      <div className='grow' />
+      <div className='flex shrink-0'>
+        <ColumnPanel {...props} column={column} />
+      </div>
+    </div>
+  );
+};
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export const ColumnPanel = <TData extends RowData, TValue>({
+  context,
+  tableDefs,
+  tableDef,
+  column,
+  onUpdate,
+  onDelete,
+}: ColumnMenuProps<TData, TValue>) => {
+  const [open, setOpen] = useState(false);
+  const [prop, setProp] = useState(column.id);
+  const [refTable, setRefTable] = useState(column.refTable);
+  const [refProp, setRefProp] = useState(column.refProp);
+  const [type, setType] = useState(String(column.type));
+  const [label, setLabel] = useState(column.label);
+  const [digits, setDigits] = useState(String(column.digits ?? '0'));
+  const propRef = useRef<HTMLInputElement>(null);
+
+  const handleCancel = () => {
+    setProp(column.id);
+    setOpen(false);
+  };
+
+  const handleSave = () => {
+    // Check valid.
+    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
+      propRef.current?.focus();
+      return;
+    }
+
+    // If already exists then check same type.
+    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
+    if (current) {
+      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
+      if (current.type !== 'ref' /* || current.ref !== refTable */) {
+        // TODO(burdon): Show error.
+        propRef.current?.focus();
+        return;
+      }
+    }
+
+    onUpdate?.(prop, {
+      id: prop, // TODO(burdon): Make unique.
+      prop,
+      label,
+      type: type as ColumnProps['type'],
+      refTable,
+      refProp,
+      digits: safeParseInt(digits),
+    });
+
+    setOpen(false);
+  };
+
+  return (
+    <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
+      <Popover.Trigger asChild>
+        <Button variant='ghost' classNames='p-0'>
+          <CaretDown className={getSize(4)} />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content>
+          <Popover.Viewport classNames='w-60'>
+            <DensityProvider density='fine'>
+              <div className='flex flex-col gap-1'>
+                <Section>
+                  <Input.Root>
+                    <Input.Label classNames='mbe-1'>Label</Input.Label>
+                    <Input.TextInput
+                      placeholder='Column label'
+                      value={label ?? ''}
+                      onChange={(event) => setLabel(event.target.value)}
+                      autoFocus
+                    />
+                  </Input.Root>
+                  <Input.Root>
+                    <Input.Label classNames='mbe-1 mbs-3'>Property</Input.Label>
+                    <Input.TextInput
+                      ref={propRef}
+                      placeholder='Property key'
+                      // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
+                      value={prop ?? ''}
+                      onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
+                    />
+                  </Input.Root>
+                  <Input.Root>
+                    <Input.Label classNames='mbe-1 mbs-3'>Type</Input.Label>
+                    <Select.Root value={type} onValueChange={setType}>
+                      <Select.TriggerButton placeholder='Type' classNames='is-full' />
+                      <Select.Portal>
+                        <Select.Content>
+                          <Select.Viewport>
+                            {Array.from(columnTypes.entries()).map(([type, label]) => (
+                              <Select.Option key={type} value={type}>
+                                {label}
+                              </Select.Option>
+                            ))}
+                          </Select.Viewport>
+                        </Select.Content>
+                      </Select.Portal>
+                    </Select.Root>
+                  </Input.Root>
+                </Section>
+
+                {type === 'number' && (
+                  <>
+                    <Section>
+                      <Input.Root>
+                        <Input.Label classNames='mbe-1 mbs-3'>Decimal places</Input.Label>
+                        {/* TODO(burdon): Constrain input to numbers. */}
+                        <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
+                      </Input.Root>
+                    </Section>
+                  </>
+                )}
+
+                {/* TODO(burdon): Selectors on same line. */}
+                {type === 'ref' && (
+                  <>
+                    <Section>
+                      <Input.Root>
+                        <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+                        <Select.Root value={refTable} onValueChange={setRefTable}>
+                          <Select.TriggerButton placeholder='Table' classNames='is-full' />
+                          <Select.Portal>
+                            <Select.Content>
+                              <Select.Viewport>
+                                {tableDefs
+                                  .filter((t) => t.id !== tableDef.id)
+                                  .map(({ id, name }) => (
+                                    <Select.Option key={id} value={id}>
+                                      {name ?? id}
+                                    </Select.Option>
+                                  ))}
+                              </Select.Viewport>
+                            </Select.Content>
+                          </Select.Portal>
+                        </Select.Root>
+                      </Input.Root>
+
+                      {refTable && (
+                        <Input.Root>
+                          <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+                          <Select.Root value={refProp} onValueChange={setRefProp}>
+                            <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                            <Select.Portal>
+                              <Select.Content>
+                                <Select.Viewport>
+                                  {tableDefs
+                                    .find((tableDef) => tableDef.id === refTable)
+                                    ?.columns.map(({ id, label }) => (
+                                      <Select.Option key={id} value={id}>
+                                        {label ?? id}
+                                      </Select.Option>
+                                    ))}
+                                </Select.Viewport>
+                              </Select.Content>
+                            </Select.Portal>
+                          </Select.Root>
+                        </Input.Root>
+                      )}
+                    </Section>
+                  </>
+                )}
+
+                <Separator classNames='mli-2' />
+
+                <Section className='space-b-1.5'>
+                  {/* TODO(burdon): Style as DropdownMenuItem. */}
+                  <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
+                    <span>Save</span>
+                    <div className='grow' />
+                    <Check className={getSize(5)} />
+                  </Button>
+                  <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+                    <span>Cancel</span>
+                    <div className='grow' />
+                    <X className={getSize(5)} />
+                  </Button>
+                  <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
+                    <span>Delete</span>
+                    <div className='grow' />
+                    <Trash className={getSize(5)} />
+                  </Button>
+                </Section>
+              </div>
+            </DensityProvider>
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};

package/src/components/Table.stories.tsx

@@ -0,0 +1,328 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import { Plugs, PlugsConnected } from '@phosphor-icons/react';
+import { deepSignal } from 'deepsignal';
+import React, { useEffect, useState } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { DensityProvider } from '@dxos/react-ui';
+import { range } from '@dxos/util';
+
+import { Table } from './Table';
+import { createColumnBuilder, 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;
+  count?: number;
+  started?: Date;
+  complete?: boolean;
+};
+
+faker.seed(911);
+
+const createItems = (count: number) =>
+  range(count).map(
+    () =>
+      deepSignal<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));
+};
+
+/*
+// TODO(burdon): Remove.
+const schamas: TableSchema[] = [
+  {
+    id: 'a',
+    props: [
+      {
+        id: 'complete',
+        type: 'boolean',
+        label: 'ok',
+        fixed: true,
+        editable: true,
+      },
+      {
+        id: 'name',
+        type: 'string',
+        editable: true,
+        resizable: true,
+      },
+      {
+        id: 'count',
+        type: 'number',
+        size: 160,
+        editable: true,
+        resizable: true,
+      },
+    ],
+  },
+  {
+    id: 'b',
+    props: [
+      {
+        id: 'name',
+        type: 'string',
+        editable: true,
+        resizable: true,
+      },
+    ],
+  },
+  {
+    id: 'c',
+    props: [
+      {
+        id: 'count',
+        type: 'number',
+        size: 160,
+        editable: true,
+        resizable: true,
+      },
+    ],
+  },
+];
+*/
+
+const { helper, builder } = createColumnBuilder<Item>();
+const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
+  helper.accessor(
+    'complete',
+    builder.checkbox({
+      // enableGrouping: true,
+      getGroupingValue: (row) => row.complete === true,
+      label: '',
+      onUpdate,
+    }),
+  ),
+  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
+  helper.accessor(
+    'name',
+    builder.string({ onUpdate, meta: { expand: true }, footer: (props) => props.table.getRowModel().rows.length }),
+  ),
+  helper.accessor('started', builder.date({ relative: true })),
+  helper.accessor(
+    'count',
+    builder.number({
+      // TODO(burdon): Sorting.
+      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
+    }),
+  ),
+  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' },
+    }),
+  ),
+];
+
+//
+// Tests
+//
+
+export default {
+  component: Table,
+  args: {
+    header: true,
+    keyAccessor: (item: Item) => item.publicKey.toHex(),
+  },
+  argTypes: {
+    header: {
+      control: 'boolean',
+    },
+    footer: {
+      control: 'boolean',
+    },
+    border: {
+      control: 'boolean',
+    },
+    fullWidth: {
+      control: 'boolean',
+    },
+    pinToBottom: {
+      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 },
+      },
+    },
+    select: {
+      control: 'select',
+      options: ['single', 'single-toggle', 'multiple', 'multiple-toggle'],
+    },
+  },
+  decorators: [
+    (Story: any) => (
+      <div className='flex flex-col items-center h-screen w-full overflow-hidden bg-zinc-200'>
+        <div className='flex w-[800px] h-full'>
+          <DensityProvider density='fine'>
+            <Story />
+          </DensityProvider>
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: {
+    columns: columns(),
+    data: createItems(20),
+  },
+};
+
+export const Scrolling = {
+  args: {
+    columns: columns(),
+    data: createItems(200),
+  },
+};
+
+export const Visibility = {
+  args: {
+    columns: columns(),
+    data: createItems(10),
+    columnVisibility: { key: false, started: false },
+  },
+};
+
+export const Empty = {
+  args: {
+    columns: columns(),
+  },
+};
+
+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);
+    }, []);
+
+    return (
+      <div className='flex grow overflow-hidden'>
+        {/* prettier-ignore */}
+        <Table<Item>
+          keyAccessor={row => row.publicKey.toHex()}
+          columns={columns()}
+          data={items}
+          fullWidth
+          pinToBottom
+          footer
+        />
+      </div>
+    );
+  },
+};
+
+export const Editable = {
+  render: () => {
+    const [items, setItems] = useState<Item[]>(createItems(10));
+    const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
+      setItems((items) => updateItems(items, item.publicKey, prop, value));
+    };
+
+    return (
+      <div className='flex grow overflow-hidden'>
+        {/* prettier-ignore */}
+        <Table<Item>
+          keyAccessor={row => row.publicKey.toHex()}
+          columns={columns(onUpdate)}
+          data={items}
+          fullWidth
+        />
+      </div>
+    );
+  },
+};
+
+/*
+// TODO(burdon): Remove.
+export const Schema = {
+  render: () => {
+    const [schema, setSchema] = useState(schamas[0]);
+    const [items, setItems] = useState(createItems(10));
+
+    const columns = createColumns<Item>(schamas, schema, {
+      onColumnUpdate: (id, column) => {
+        setSchema(({ props, ...rest }) => ({
+          props: props.map((c) => (c.id === id ? column : c)),
+          ...rest,
+        }));
+      },
+      onColumnDelete: (id) => {
+        setSchema(({ props, ...rest }) => ({ props: props.filter((c) => c.id !== id), ...rest }));
+      },
+      onUpdate: (item, prop, value) => {
+        setItems((items) => updateItems(items, item.publicKey, prop, value));
+      },
+    });
+
+    const actionColumn = createActionColumn<Item>(schema, {
+      isDeletable: (row) => !!row.publicKey,
+      onColumnCreate: (column) => {
+        setSchema(({ props, ...rest }) => ({ props: [...props, column], ...rest }));
+      },
+      onRowDelete: (row) => {
+        setItems((items) => items.filter((item) => !item.publicKey.equals(row.publicKey)));
+      },
+    });
+
+    return (
+      <div className='flex grow overflow-hidden'>
+        <Table<Item>
+          keyAccessor={row => row.publicKey.toHex()}
+          columns={[...columns, actionColumn]}
+          data={items}
+          border
+        />
+      </div>
+    );
+  },
+};
+*/