@dxos/react-ui-table 0.6.13-main.ed424a1 → 0.6.13

package/src/components/Table/Table.tsx

@@ -16,13 +16,13 @@ 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';
@@ -55,6 +55,7 @@ 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}
@@ -69,17 +70,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,
-    pinLastRow,
-    columnVisibility,
-    onColumnResize,
     onDataSelectionChange,
+    pinLastRow,
   } = 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]);
 
@@ -109,7 +110,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
     // Columns
     columns,
     defaultColumn: {
-      size: 400, // Required in order remove default width.
+      size: 256, // Required in order remove default width.
       maxSize: 1024,
     },
 

package/src/components/Table/TableContext.tsx

@@ -3,32 +3,26 @@
 //
 
 import { type RowData } from '@tanstack/react-table';
-import React, {
-  useContext,
-  createContext,
-  type Context,
-  type JSX,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react';
-
-import { raise } from '@dxos/debug';
+import React, { useContext, createContext, type JSX, type ReactNode, type FC, type Context } from 'react';
 
 import { type TableContextValue } from './props';
 
 export const TABLE_NAME = 'Table';
 
-const TableContext = createContext<TableContextValue<RowData> | undefined>(undefined);
+// 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>);
 
 export type TypedTableProvider<TData extends RowData> = {
   (props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
   displayName: string;
 };
 
-export const TableProvider = ({ children, ...value }: PropsWithChildren<TableContextValue<RowData>>) => {
+export const TableProvider: FC<TableContextValue<RowData> & { children: ReactNode }> = ({ children, ...value }) => {
   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>>) ?? raise(new Error('Missing TableContext'));
+  return useContext(TableContext as Context<TableContextValue<TData>>);
 };

package/src/components/Table/TableHead.tsx

@@ -49,6 +49,7 @@ 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,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './props';
 export * from './Table';
-export * from './TableContext';
+export * from './props';
 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,7 +21,8 @@ import { log } from '@dxos/log';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { CellCombobox, useTableContext } from './components';
+import { CellCombobox } from './components';
+import { useTableContext } from './components/Table/TableContext';
 import { textPadding } from './theme';
 
 export type ValueUpdater<TData extends RowData, TValue> = (row: TData, id: string, value: TValue) => void;
@@ -469,7 +470,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,
@@ -485,7 +486,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) => {
@@ -505,13 +506,14 @@ export class ColumnBuilder<TData extends RowData> {
   /**
    * This display column type is for nested/unhandled data to appear as JSON.
    */
-  json({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
+  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>

package/src/hooks/useRowSelection.ts

@@ -1,7 +1,6 @@
 //
 // 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/{Schema.stories.tsx → SchemaToTable.stories.tsx}

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

package/src/schema/index.ts

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

package/src/schema/schema.test.ts

@@ -0,0 +1,148 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { S } from '@dxos/echo-schema';
+import { describe, test } from '@dxos/test';
+
+import { classifySchemaProperties } from './schema';
+
+describe('schema->column-type', () => {
+  test('basic', () => {
+    const simpleSchema = S.Struct({
+      field1: S.String,
+      field2: S.Number,
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['field1', 'string'],
+      ['field2', 'number'],
+    ]);
+  });
+
+  test('optional properties', () => {
+    const simpleSchema = S.Struct({
+      field1: S.optional(S.String),
+      field2: S.optional(S.Number),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['field1', 'string'],
+      ['field2', 'number'],
+    ]);
+  });
+
+  test('dates', () => {
+    const simpleSchema = S.Struct({
+      field1: S.Date,
+      field2: S.optional(S.Date),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['field1', 'date'],
+      ['field2', 'date'],
+    ]);
+  });
+
+  test('Piped validators', () => {
+    const simpleSchema = S.Struct({
+      name: S.optional(S.String.pipe(S.nonEmpty(), S.maxLength(10))),
+      age: S.Number.pipe(S.negative()),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['name', 'string'],
+      ['age', 'number'],
+    ]);
+  });
+
+  test('nested schema', () => {
+    const simpleSchema = S.Struct({
+      name: S.String,
+      nested: S.Struct({
+        age: S.Number,
+      }),
+      someUnion: S.Union(S.String, S.Number),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['name', 'string'],
+      ['nested.age', 'number'],
+      ['someUnion', 'display'],
+    ]);
+  });
+
+  test('deeply nested schema', () => {
+    const simpleSchema = S.Struct({
+      name: S.String,
+      nested: S.Struct({
+        age: S.Number,
+        deeplyNested: S.Struct({
+          height: S.Number,
+        }),
+      }),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['name', 'string'],
+      ['nested.age', 'number'],
+      ['nested.deeplyNested.height', 'number'],
+    ]);
+  });
+
+  test('even more deeply nested schema with optionals', () => {
+    const simpleSchema = S.Struct({
+      name: S.String,
+      nested: S.Struct({
+        age: S.Number,
+        deeplyNested: S.optional(
+          S.Struct({
+            height: S.optional(S.Number),
+          }),
+        ),
+      }),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['name', 'string'],
+      ['nested.age', 'number'],
+      ['nested.deeplyNested.height', 'number'],
+    ]);
+  });
+
+  test('multiple-nested schemata as sibblings', () => {
+    const simpleSchema = S.Struct({
+      name: S.String,
+      nested: S.Struct({
+        age: S.Number,
+      }),
+      nested2: S.Struct({
+        height: S.Number,
+      }),
+    });
+
+    const columns = classifySchemaProperties(simpleSchema);
+
+    expect(columns).to.deep.equal([
+      ['name', 'string'],
+      ['nested.age', 'number'],
+      ['nested2.height', 'number'],
+    ]);
+  });
+});

package/src/schema/schema.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as AST from '@effect/schema/AST';
+import type * as S from '@effect/schema/Schema';
+
+import { type ColumnType } from './types';
+
+// TODO(burdon): Reconcile with react-ui-table.
+export type ClassifiedColumnType = ColumnType | 'display';
+
+// TODO(burdon): Rename getX? and return typed array?
+export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
+  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [...path, propName], acc);
+        }
+      }
+
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [...path, propName], acc);
+      } else {
+        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
+      }
+    });
+
+    return acc;
+  };
+
+  return recurse(schema.ast, [], []);
+};
+
+const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
+
+const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
+
+const unwrapOptionProperty = (prop: AST.PropertySignature) => {
+  if (!isOptionalUnion(prop)) {
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
+  }
+
+  if (!AST.isUnion(prop.type)) {
+    throw new Error(`Not a union type: ${String(prop.name)}`);
+  }
+
+  const [type, _undefinedCase] = prop.type.types;
+  return type;
+};
+
+const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
+  if (AST.isStringKeyword(type)) {
+    return 'string';
+  } else if (AST.isNumberKeyword(type)) {
+    return 'number';
+  } else if (AST.isBooleanKeyword(type)) {
+    return 'boolean';
+  }
+
+  if (AST.isRefinement(type)) {
+    return typeToColumn(type.from);
+  }
+
+  // TODO(zan): How should we be thinking about transformations?
+  // - Which of these are we storing in the database?
+  // - For types that aren't the 'DateFromString' transformation, should we be using the 'from' or 'to' type?
+
+  if (AST.isTransformation(type)) {
+    const identifier = AST.getIdentifierAnnotation(type);
+    if (identifier._tag === 'Some') {
+      if (identifier.value === 'DateFromString') {
+        return 'date';
+      }
+    }
+  }
+
+  return 'display';
+};
+
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
+  }
+
+  return typeToColumn(type);
+};

package/src/schema/{column-utils.ts → schemaToColumns.ts}

@@ -4,38 +4,38 @@
 
 import { type ColumnDef } from '@tanstack/react-table';
 
-import { type S } from '@dxos/echo-schema';
-import { FieldValueType, mapSchemaToFields } from '@dxos/schema';
+import type { S } from '@dxos/echo-schema';
 
+import { classifySchemaProperties } from './schema';
 import { createColumnBuilder } from '../helpers';
 
 export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
   const { helper, builder } = createColumnBuilder<T>();
 
-  const classified = mapSchemaToFields(schema);
+  const classified = classifySchemaProperties(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
 
     let column: Partial<ColumnDef<any, any>> | undefined;
     switch (type) {
-      case FieldValueType.String: {
+      case 'string': {
         column = builder.string({ label: propertyKey });
         break;
       }
-      case FieldValueType.Number: {
+      case 'number': {
         column = builder.number({ label: propertyKey });
         break;
       }
-      case FieldValueType.Boolean: {
+      case 'boolean': {
         column = builder.switch({ label: propertyKey });
         break;
       }
-      case FieldValueType.Date: {
+      case 'date': {
         column = builder.date({ label: propertyKey });
         break;
       }
-      case FieldValueType.JSON: {
-        column = builder.json({ label: propertyKey, id: propertyKey });
+      case 'display': {
+        column = builder.display({ label: propertyKey, id: propertyKey });
         break;
       }
       default: {

package/src/schema/types.ts

@@ -2,26 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type FieldValueType } from '@dxos/schema';
-
-/**
- * @deprecated
- */
-// TODO(burdon): Reconcile with @dxos/schema/View.
 export type TableDef = {
   id: string;
-  name?: string;
-  columns: ColumnDef[];
+  name?: string; // TODO(burdon): Required?
+  columns: ColumnProps[];
 };
 
-/**
- * @deprecated
- */
-// TODO(burdon): Reconcile with @dxos/schema/Field.
-export type ColumnDef = {
+export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
+
+export type ColumnProps = {
   id: string;
   prop: string;
-  type: FieldValueType;
+  type: ColumnType;
   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': 'Boolean',
+        'boolean column type label': 'Toggle',
         'date column type label': 'Date',
         'string column type label': 'Text',
         'ref column type label': 'Reference',

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { type TableDef, type ColumnDef } from '../../schema';
-export type ColumnSettingsProps = {
-    column: ColumnDef;
-    tableDef: TableDef;
-    tablesToReference: TableDef[];
-    onUpdate?: (id: string, column: ColumnDef) => void;
-    onDelete?: (id: string) => void;
-    onClose?: () => void;
-};
-/**
- * @deprecated
- */
-export declare const ColumnSettings: ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose, }: ColumnSettingsProps) => React.JSX.Element;
-//# sourceMappingURL=ColumnSettings.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettings.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG7D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,0EAOxB,mBAAmB,sBA6KrB,CAAC"}