@dxos/react-ui-table 0.6.13 → 0.6.14-main.1366248

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

@@ -5,14 +5,15 @@
 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 { create } from '@dxos/echo-schema';
-import { registerSignalRuntime } from '@dxos/echo-signals/react';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { Button, DensityProvider } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { Button } from '@dxos/react-ui';
+import { withSignals, withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
@@ -127,7 +128,7 @@ const MinimalTable = (props: any) => {
 };
 
 export default {
-  title: 'react-ui-table/Table',
+  title: 'ui/react-ui-table/Table',
   component: MinimalTable,
   args: {
     header: true,
@@ -157,14 +158,7 @@ export default {
     },
     rowsSelectable: { control: 'select', options: [false, true, 'multi'] },
   },
-  decorators: [
-    withTheme,
-    (Story: any) => (
-      <DensityProvider density='fine'>
-        <Story />
-      </DensityProvider>
-    ),
-  ],
+  decorators: [withTheme],
 };
 
 export const Default = {
@@ -406,105 +400,109 @@ export const TenThousandRows = {
   },
 };
 
-registerSignalRuntime();
-const state = create({ items: createItems(10) });
+// TODO(burdon): Warning: Encountered two children with the same key.
 
-export const RealTimeUpdates = {
-  args: {
-    periodicMutations: true,
-    mutationInterval: 1000,
-    periodicDeletions: false,
-    deletionInterval: 5000,
-    periodicInsertions: false,
-    insertionInterval: 3000,
-  },
-  argTypes: {
-    mutationInterval: { control: 'number' },
-    periodicDeletions: { control: 'boolean' },
-    deletionInterval: { control: 'number' },
-    periodicInsertions: { control: 'boolean' },
-    insertionInterval: { control: 'number' },
-  },
-  render: ({
-    periodicMutations,
-    mutationInterval,
-    periodicDeletions,
-    deletionInterval,
-    periodicInsertions,
-    insertionInterval,
-  }: any) => {
-    useEffect(() => {
-      if (!periodicMutations) {
+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;
       }
 
-      const interval = setInterval(() => {
-        if (state.items.length === 0) {
-          return;
-        }
+      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);
 
-        const randomIndex = Math.floor(Math.random() * state.items.length);
-        console.log('Mutating row', randomIndex);
-        state.items[randomIndex].name = faker.commerce.productName();
-        state.items[randomIndex].count = Math.floor(Math.random() * 1000);
-        state.items[randomIndex].started = new Date();
-      }, mutationInterval);
+    return () => clearInterval(i);
+  }, [periodicMutations, mutationInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicMutations, mutationInterval, state.items]);
+  useEffect(() => {
+    if (!periodicInsertions) {
+      return;
+    }
 
-    useEffect(() => {
-      if (!periodicInsertions) {
-        return;
-      }
+    const i = setInterval(() => {
+      log('inserting...');
+      state.items.push(createItems(1)[0]);
+    }, insertionInterval);
 
-      const interval = setInterval(() => {
-        console.log('Inserting...');
-        state.items.push(createItems(1)[0]);
-      }, insertionInterval);
+    return () => clearInterval(i);
+  }, [periodicInsertions, insertionInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicInsertions, insertionInterval, state.items]);
+  useEffect(() => {
+    if (!periodicDeletions) {
+      return;
+    }
 
-    useEffect(() => {
-      if (!periodicDeletions) {
+    const i = setInterval(() => {
+      if (state.items.length === 0) {
         return;
       }
 
-      const interval = setInterval(() => {
-        if (state.items.length === 0) {
-          return;
-        }
-
-        console.log('Deleting');
+      log('deleting...');
+      const randomIndex = Math.floor(Math.random() * state.items.length);
+      state.items.splice(randomIndex, 1);
+    }, deletionInterval);
 
-        // Randomly delete a row from state.items
-        const randomIndex = Math.floor(Math.random() * state.items.length);
-        state.items.splice(randomIndex, 1);
-      }, deletionInterval);
+    return () => clearInterval(i);
+  }, [periodicDeletions, deletionInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicDeletions, deletionInterval, state.items]);
+  const onUpdate = useCallback((...args: any[]) => {}, []);
+  const columns = useMemo(() => makeColumns(onUpdate), []);
 
-    const onUpdate = useCallback((...args: any[]) => {}, []);
-    const columns = useMemo(() => makeColumns(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={state.items}
+          fullWidth
+          stickyHeader
+          border
+          pinLastRow
+        />
+      </Table.Viewport>
+    </Table.Root>
+  );
+};
 
-    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 RealTimeUpdates: StoryObj<StoryProps> = {
+  render: DefaultStory,
+  decorators: [withSignals],
+  args: {
+    periodicMutations: true,
+    mutationInterval: 1000,
+    periodicDeletions: false,
+    deletionInterval: 5000,
+    periodicInsertions: false,
+    insertionInterval: 3000,
   },
 };

package/src/components/Table/Table.tsx

@@ -16,16 +16,16 @@ import {
 } from '@tanstack/react-table';
 import React, {
   type ComponentPropsWithoutRef,
+  type ReactNode,
   Fragment,
+  memo,
   useCallback,
   useEffect,
   useState,
   useContext,
-  type ReactNode,
-  memo,
 } from 'react';
 
-import { DensityProvider, type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
+import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { TableBody } from './TableBody';
@@ -40,11 +40,7 @@ type TableRootProps = { children: ReactNode };
 
 const TableRoot = ({ children }: TableRootProps) => {
   const contextValue = useTableRootContext();
-  return (
-    <TableRootContext.Provider value={contextValue}>
-      <DensityProvider density='fine'>{children}</DensityProvider>
-    </TableRootContext.Provider>
-  );
+  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
 };
 
 type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
@@ -55,7 +51,6 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
   const { scrollContextRef } = useContext(TableRootContext);
 
   const classes = mx(classNames, 'overflow-auto');
-
   return asChild ? (
     <Slot ref={scrollContextRef} className={classes} {...props}>
       {children}
@@ -70,17 +65,17 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
 export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
-    onColumnResize,
-    columnVisibility,
     header = true,
     rowsSelectable,
     debug,
-    onDataSelectionChange,
     pinLastRow,
+    columnVisibility,
+    onColumnResize,
+    onDataSelectionChange,
   } = props;
 
-  const columns = useDefaultValue(props.columns, []);
-  const incomingData = useDefaultValue(props.data, []);
+  const columns = useDefaultValue(props.columns, () => []);
+  const incomingData = useDefaultValue(props.data, () => []);
 
   const [data, setData] = useState([...incomingData]);
 
@@ -110,7 +105,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
     // Columns
     columns,
     defaultColumn: {
-      size: 256, // Required in order remove default width.
+      size: 400, // Required in order remove default width.
       maxSize: 1024,
     },
 

package/src/components/Table/TableContext.tsx

@@ -3,26 +3,32 @@
 //
 
 import { type RowData } from '@tanstack/react-table';
-import React, { useContext, createContext, type JSX, type ReactNode, type FC, type Context } from 'react';
+import React, {
+  useContext,
+  createContext,
+  type Context,
+  type JSX,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+
+import { raise } from '@dxos/debug';
 
 import { type TableContextValue } from './props';
 
 export const TABLE_NAME = 'Table';
 
-// Create the context without a default value.
-// The expectation is that the provider will always supply a value, so no need to define a default here.
-const TableContext = createContext<TableContextValue<RowData>>({} as TableContextValue<RowData>);
+const TableContext = createContext<TableContextValue<RowData> | undefined>(undefined);
 
 export type TypedTableProvider<TData extends RowData> = {
   (props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
   displayName: string;
 };
 
-export const TableProvider: FC<TableContextValue<RowData> & { children: ReactNode }> = ({ children, ...value }) => {
+export const TableProvider = ({ children, ...value }: PropsWithChildren<TableContextValue<RowData>>) => {
   return <TableContext.Provider value={value}>{children}</TableContext.Provider>;
 };
 
-// Create a custom hook to consume the context.
 export const useTableContext = <TData extends RowData>(): TableContextValue<TData> => {
-  return useContext(TableContext as Context<TableContextValue<TData>>);
+  return useContext(TableContext as Context<TableContextValue<TData>>) ?? raise(new Error('Missing TableContext'));
 };

package/src/components/Table/TableHead.tsx

@@ -49,7 +49,6 @@ const TableHead = (_props: TableHeadProps) => {
                    * Resize handle.
                    * https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/column-sizing
                    */}
-
                   {resizable && (
                     <div
                       className={theadResizeRoot({ isResizing })}

package/src/components/Table/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Table';
 export * from './props';
+export * from './Table';
+export * from './TableContext';
 export * from './TableRootContext';

package/src/components/Table/props.ts

@@ -25,7 +25,7 @@ export type TableFlags = Partial<{
  * This is ‘current’ in the `aria-current` sense.
  */
 export type TableCurrent<TData extends RowData> = Partial<{
-  // App state
+  // App state.
   currentDatum: TData;
   onDatumClick: (datum: TData) => void;
 }>;
@@ -39,13 +39,13 @@ export type TableProps<TData extends RowData> = TableFlags &
     onColumnResize: (state: Record<string, number>) => void;
     onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
     columnVisibility: VisibilityState;
-    // Controllable row selection
+    // Controllable row selection.
     rowSelection: RowSelectionState;
     defaultRowSelection: RowSelectionState;
     onRowSelectionChange: (rowSelection: RowSelectionState) => void;
-    // Derived from row selection
+    // Derived from row selection.
     onDataSelectionChange: (dataSelection: TData[]) => void;
-    // `table` element props
+    // `table` element props.
     classNames: ClassNameValue;
     pinLastRow: boolean;
   }>;

package/src/helpers.tsx

@@ -21,8 +21,7 @@ import { log } from '@dxos/log';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { CellCombobox } from './components';
-import { useTableContext } from './components/Table/TableContext';
+import { CellCombobox, useTableContext } from './components';
 import { textPadding } from './theme';
 
 export type ValueUpdater<TData extends RowData, TValue> = (row: TData, id: string, value: TValue) => void;
@@ -470,7 +469,7 @@ export class ColumnBuilder<TData extends RowData> {
       size: 50,
       minSize: 50,
       header: (column) => label ?? column.header.id,
-      // TODO(zan): Implement sort algorithm
+      // TODO(zan): Implement sort algorithm.
       enableSorting: true,
       cell: SwitchBuilderCell,
       ...props,
@@ -486,7 +485,7 @@ export class ColumnBuilder<TData extends RowData> {
     const IconOff = off?.Icon ?? X;
     return {
       size: size ?? 32,
-      // TODO(zan): Implement sort algorithm
+      // TODO(zan): Implement sort algorithm.
       enableSorting: false,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
       cell: (cell) => {
@@ -506,14 +505,13 @@ export class ColumnBuilder<TData extends RowData> {
   /**
    * This display column type is for nested/unhandled data to appear as JSON.
    */
-  display({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
+  json({ 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>

package/src/hooks/useRowSelection.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { type OnChangeFn, type RowSelectionState } from '@tanstack/react-table';
 import { useCallback } from 'react';

package/src/schema/{SchemaToTable.stories.tsx → Schema.stories.tsx}

@@ -4,31 +4,22 @@
 
 import '@dxos-theme';
 
-import * as Arbitrary from '@effect/schema/Arbitrary';
+import { Arbitrary } from '@effect/schema';
 import * as fc from 'fast-check';
 import React from 'react';
 
 import { S } from '@dxos/echo-schema';
-import { DensityProvider } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { schemaToColumnDefs } from './schemaToColumns';
+import { schemaToColumnDefs } from './column-utils';
 import { Table } from '../components';
 
 export default {
-  title: 'react-ui-table/SchemaTable',
-  args: {},
-  decorators: [
-    withTheme,
-    (Story: any) => (
-      <DensityProvider density='fine'>
-        <Story />
-      </DensityProvider>
-    ),
-  ],
+  title: 'ui/react-ui-table/Schema',
+  decorators: [withTheme, withLayout()],
 };
 
-const exampleSchema = S.Struct({
+const TestSchema = S.Struct({
   field1: S.String,
   field2: S.Number,
   field3: S.Date,
@@ -41,20 +32,17 @@ const exampleSchema = S.Struct({
   ),
 });
 
-type ExampleSchema = S.Schema.Type<typeof exampleSchema>;
+type TestType = S.Schema.Type<typeof TestSchema>;
 
-const columns = schemaToColumnDefs(exampleSchema);
+const columns = schemaToColumnDefs(TestSchema);
+const items = fc.sample(Arbitrary.make(TestSchema), 10);
 
-const exampleSchemaArbitrary = Arbitrary.make(exampleSchema);
-
-const items = fc.sample(exampleSchemaArbitrary, 10);
-
-export const SchemaTable = {
+export const Default = {
   render: () => {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<ExampleSchema>
+          <Table.Main<TestType>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => JSON.stringify(row)}

package/src/schema/column-utils.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ColumnDef } from '@tanstack/react-table';
+
+import { TypeEnum, type S } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo-schema';
+import { mapSchemaToFields } from '@dxos/schema';
+
+import { createColumnBuilder } from '../helpers';
+
+/**
+ * @deprecated
+ */
+export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
+  const { helper, builder } = createColumnBuilder<T>();
+
+  return mapSchemaToFields(schema).map(({ property, type, format }) => {
+    const propertyKey = property.toString();
+
+    if (!format) {
+      switch (type) {
+        case TypeEnum.String: {
+          return helper.accessor(
+            propertyKey as any,
+            builder.string({ label: propertyKey, classNames: [property === 'id' && 'font-mono'] }),
+          );
+        }
+        case TypeEnum.Number: {
+          return helper.accessor(propertyKey as any, builder.number({ label: propertyKey }));
+        }
+        case TypeEnum.Boolean: {
+          return helper.accessor(propertyKey as any, builder.switch({ label: propertyKey }));
+        }
+        default: {
+          throw new Error(`Unhandled scalar type: ${type}`);
+        }
+      }
+    }
+
+    switch (format) {
+      case FormatEnum.Date: {
+        return helper.accessor(propertyKey as any, builder.date({ label: propertyKey }));
+      }
+      case FormatEnum.JSON: {
+        return helper.accessor(propertyKey as any, builder.json({ label: propertyKey, id: propertyKey }));
+      }
+      default: {
+        throw new Error(`Unhandled format: ${format}`);
+      }
+    }
+  });
+};

package/src/schema/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './schemaToColumns';
+export * from './column-utils';
 export * from './types';

package/src/schema/types.ts

@@ -2,18 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type TypeEnum, type FormatEnum } from '@dxos/echo-schema';
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Reconcile with @dxos/schema/View.
 export type TableDef = {
   id: string;
-  name?: string; // TODO(burdon): Required?
-  columns: ColumnProps[];
+  name?: string;
+  columns: ColumnDef[];
 };
 
-export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
-
-export type ColumnProps = {
+/**
+ * @deprecated
+ */
+// TODO(burdon): Reconcile with @dxos/schema/Field.
+export type ColumnDef = {
   id: string;
   prop: string;
-  type: ColumnType;
+  type: TypeEnum;
+  format?: FormatEnum;
   size?: number;
   label?: string;
 

package/src/translations.ts

@@ -10,7 +10,7 @@ export default [
       [translationKey]: {
         'no selection label': ' ',
         'number column type label': 'Number',
-        'boolean column type label': 'Toggle',
+        'boolean column type label': 'Boolean',
         'date column type label': 'Date',
         'string column type label': 'Text',
         'ref column type label': 'Reference',

package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { type TableDef, type ColumnProps } from '../../schema';
-export type ColumnSettingsFormProps = {
-    column: ColumnProps;
-    tableDef: TableDef;
-    tablesToReference: TableDef[];
-    onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
-    onDelete?: ((id: string) => void) | undefined;
-    onClose?: () => void;
-};
-export declare const ColumnSettingsForm: ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose, }: ColumnSettingsFormProps) => React.JSX.Element;
-//# sourceMappingURL=ColumnSettingsForm.d.ts.map

package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,cAAc,CAAC;AAGhF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAO5B,uBAAuB,sBAkLzB,CAAC"}