@dxos/react-ui-table 0.4.10-main.0302e13 → 0.4.10-main.06ef97a

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -0,0 +1,166 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
+import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { useRef, useState, useCallback } from 'react';
+
+import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { useColumnSorting } from '../../hooks';
+import { type TableDef, type ColumnProps } 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;
+  const header = props.context.header;
+
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
+
+  const columnSettingsAnchorRef = useRef<any>(null);
+
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState(false);
+
+  const shouldPreventFocusOnClose = useRef(false);
+
+  const onOpenColumnSettings = useCallback(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [shouldPreventFocusOnClose, setIsColumnSettingsOpen]); // setIsColumnSettingsOpen is a dependency
+
+  const onDropdownCloseAutoFocus = useCallback(
+    (event: Event) => {
+      if (shouldPreventFocusOnClose.current) {
+        event.preventDefault();
+        shouldPreventFocusOnClose.current = false;
+      }
+    },
+    [shouldPreventFocusOnClose],
+  );
+
+  return (
+    <div className='flex items-center justify-center justify-between'>
+      <div className='flex items-center gap-1 truncate' title={title}>
+        <SortIndicator direction={sortDirection} onClick={onToggleSort} />
+        <div className='truncate'>{title}</div>
+      </div>
+
+      <DropdownMenu.Root modal={false}>
+        <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
+          <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
+            <Popover.Anchor asChild>
+              <Button variant='ghost'>
+                <CaretDown className={getSize(4)} />
+              </Button>
+            </Popover.Anchor>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              {canSort && (
+                <>
+                  <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
+                    <span className='grow'>Sort ascending</span>
+                    <span className='opacity-50'>
+                      <ArrowUp className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
+                    <span className='grow'>Sort descending</span>
+                    <span className='opacity-50'>
+                      <ArrowDown className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  {sortDirection !== false && (
+                    <DropdownMenu.Item onClick={onClearSort}>
+                      <span className='grow'>Clear sort</span>
+                      <span className='opacity-50'>
+                        <X className={getSize(4)} />
+                      </span>
+                    </DropdownMenu.Item>
+                  )}
+                </>
+              )}
+              <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                <span className='grow'>Column settings</span>
+                <span className='opacity-50'>
+                  <GearSix className={mx(getSize(4), 'rotate-90')} />
+                </span>
+              </DropdownMenu.Item>
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+
+          <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
+        </Popover.Root>
+      </DropdownMenu.Root>
+    </div>
+  );
+};
+
+export const ColumnSettingsPanel = <TData extends RowData, TValue>({
+  tableDefs,
+  tableDef,
+  column,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
+  <Popover.Portal>
+    <Popover.Content>
+      <Popover.Viewport classNames='w-60'>
+        <DensityProvider density='fine'>
+          <ColumnSettingsForm
+            column={column}
+            tableDefs={tableDefs}
+            tableDef={tableDef}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            onClose={onClose}
+          />
+        </DensityProvider>
+      </Popover.Viewport>
+      <Popover.Arrow />
+    </Popover.Content>
+  </Popover.Portal>
+);
+
+export const SortIndicator = ({
+  direction,
+  onClick,
+}: {
+  direction: SortDirection | false;
+  onClick: (e: any) => void;
+}) => {
+  if (direction === false) {
+    return null;
+  }
+
+  let icon;
+
+  switch (direction) {
+    case 'asc':
+      icon = <ArrowUp className={getSize(3)} />;
+      break;
+    case 'desc':
+      icon = <ArrowDown className={getSize(3)} />;
+      break;
+  }
+
+  return (
+    <div onClick={onClick} className='flex items-center cursor-pointer'>
+      {icon}
+    </div>
+  );
+};

package/src/components/ColumnMenu/ColumnSettingsForm.tsx

@@ -0,0 +1,208 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Check, Trash, X } from '@phosphor-icons/react';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, Input, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { type TableDef, type ColumnProps, type ColumnType } from '../../schema';
+import { translationKey } from '../../translations';
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export type ColumnSettingsFormProps = {
+  column: ColumnProps;
+  tableDef: TableDef;
+  tableDefs: TableDef[];
+  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
+  onDelete?: ((id: string) => void) | undefined;
+  onClose?: () => void;
+};
+
+export const ColumnSettingsForm = ({
+  column,
+  tableDef,
+  tableDefs,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnSettingsFormProps) => {
+  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 { t } = useTranslation(translationKey);
+
+  const handleCancel = () => {
+    setProp(column.id);
+    onClose?.();
+  };
+
+  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),
+    });
+
+    onClose?.();
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <Section>
+        <Input.Root>
+          <Input.Label classNames='mbe-1'>{t('column label 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'>{t('property key label')}</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'>{t('column type label')}</Input.Label>
+          <Select.Root value={type} onValueChange={setType}>
+            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                    <Select.Option key={type} value={type}>
+                      {t(`${type} column 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'>{t('digits label')}</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>{t('save label')}</span>
+          <div className='grow' />
+          <Check className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+          <span>{t('cancel label', { ns: 'os' })}</span>
+          <div className='grow' />
+          <X className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
+          <span>{t('delete label')}</span>
+          <div className='grow' />
+          <Trash className={getSize(5)} />
+        </Button>
+      </Section>
+    </div>
+  );
+};

package/src/components/ColumnMenu/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './ColumnMenu';
+export * from './ColumnSettingsForm';

package/src/components/Table/Table.tsx

@@ -26,8 +26,8 @@ import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTabl
 import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { type TableProps } from './props';
+import { usePinLastRow } from '../../hooks';
 import { groupTh, tableRoot } from '../../theme';
-import { usePinLastRow } from '../hooks/usePinLastRow';
 
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {

package/src/components/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Cell';
 export * from './ColumnMenu';
 export * from './Table';
-export * from './Cell';

package/src/helpers.tsx

@@ -340,7 +340,7 @@ export class ColumnBuilder<TData extends RowData> {
         ...props.meta,
         onUpdate,
         digits,
-        header: { classNames: 'text-end', ...props.meta?.header },
+        header: { ...props.meta?.header },
         cell: { ...props.meta?.cell, classNames },
       },
     };
@@ -498,4 +498,26 @@ export class ColumnBuilder<TData extends RowData> {
       ...props,
     };
   }
+
+  /**
+   * This display column type is for nested/unhandled data to appear as JSON.
+   */
+  display({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
+    return {
+      size: 120,
+      minSize: 120,
+      header: (cell) => label ?? cell.header.id,
+      cell: (cell) => {
+        const value = cell.getValue();
+
+        return (
+          <div className='overflow-scroll'>
+            <code className='text-xs'>{JSON.stringify(value)}</code>
+          </div>
+        );
+      },
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
+    };
+  }
 }

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useColumnSorting';
+export * from './usePinLastRow';

package/src/hooks/useColumnSorting.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SortDirection, type Column } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const useColumnSorting = (column: Column<any>) => {
+  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+
+  const canSort = column.getCanSort();
+
+  const updateColumnSort = (direction: SortDirection | false) => {
+    setSortDirection(direction);
+
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case 'asc':
+        column.toggleSorting(false); // descending false
+        break;
+      case 'desc':
+        column.toggleSorting(true); // descending true
+        break;
+    }
+  };
+
+  // Whichever sort is explicitly set first, will be the first sort direction
+  // When toggling, we always go to the other direction, and then to unsorted.
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    } else {
+      updateColumnSort(false);
+    }
+  };
+
+  const onSelectSort = (direction: SortDirection) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+
+  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
+};

package/src/index.ts

@@ -2,9 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export { default as translations } from './translations';
+
 export * from './components';
 export * from './helpers';
+export * from './hooks';
 export * from './schema';
 export * from './theme';
-export { default as translations } from './translations';
 export * from './types';

package/src/schema/SchemaToTable.stories.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import * as Arbitrary from '@effect/schema/Arbitrary';
+import * as S from '@effect/schema/Schema';
+import * as fc from 'fast-check';
+import React, { useRef } from 'react';
+
+import { DensityProvider } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { schemaToColumnDefs } from './schemaToColumns';
+import { Table } from '../components';
+
+export default {
+  title: 'react-ui-table/SchemaTable',
+  args: {},
+  decorators: [
+    withTheme,
+    (Story: any) => (
+      <DensityProvider density='fine'>
+        <Story />
+      </DensityProvider>
+    ),
+  ],
+};
+
+const exampleSchema = S.struct({
+  field1: S.string,
+  field2: S.number,
+  field3: S.Date,
+  field4: S.optional(S.string.pipe(S.length(10))),
+  field5: S.optional(
+    S.struct({
+      innerField1: S.string,
+      innerField2: S.number,
+    }),
+  ),
+});
+
+type ExampleSchema = S.Schema.Type<typeof exampleSchema>;
+
+const columns = schemaToColumnDefs(exampleSchema);
+
+const exampleSchemaArbitrary = Arbitrary.make(exampleSchema)(fc);
+
+const items = fc.sample(exampleSchemaArbitrary, 10);
+
+export const SchemaTable = {
+  render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<ExampleSchema>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => JSON.stringify(row)}
+          columns={columns}
+          data={items}
+          fullWidth
+          stickyHeader
+          border
+          getScrollElement={() => containerRef.current}
+        />
+      </div>
+    );
+  },
+};

package/src/schema/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './schemaToColumns';
+export * from './types';