@dxos/react-ui-table 0.4.9 → 0.4.10-main.068c3d8

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/hooks/usePinLastRow.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Row, type Table } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+export const usePinLastRow = (
+  pinLastRow: boolean | undefined,
+  table: Table<any>,
+  data: any[],
+  getScrollElement?: () => Element | null,
+) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
+
+  // Scrolls to the bottom of a scrollable element.
+  const scrollToBottom = useCallback(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
+    }
+  }, [getScrollElement]);
+
+  const pinRow = useCallback(
+    (rowToPin: Row<any>) => {
+      table.resetRowPinning();
+      rowToPin.pin('bottom');
+      setPinnedRowKey(rowToPin.id);
+    },
+    [table],
+  );
+
+  const clearRowPinning = useCallback(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(undefined);
+  }, [table]);
+
+  // Define the logic for pinning the last row in a callback.
+  const pinLastRowCallback = useCallback(() => {
+    const rows = table.getRowModel().rows;
+
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
+      return;
+    }
+
+    pinRow(lastRow);
+
+    if (pinnedRowKey !== undefined) {
+      scrollToBottom();
+    }
+  }, [table, scrollToBottom, pinnedRowKey]);
+
+  // Effect to handle pinning logic when data changes.
+  useEffect(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [data, pinLastRow, pinLastRowCallback]);
+};

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 fc from 'fast-check';
+import React, { useRef } from 'react';
+
+import { S } from '@dxos/echo-schema';
+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';

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,92 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as AST from '@effect/schema/AST';
+import type * as S from '@effect/schema/Schema';
+
+import { type ColumnType } from './types';
+
+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.isTransform(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/schemaToColumns.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ColumnDef } from '@tanstack/react-table';
+
+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 = classifySchemaProperties(schema);
+  return classified.map(([name, type]) => {
+    const propertyKey = name.toString();
+
+    let column: Partial<ColumnDef<any, any>> | undefined;
+    switch (type) {
+      case 'string': {
+        column = builder.string({ label: propertyKey });
+        break;
+      }
+      case 'number': {
+        column = builder.number({ label: propertyKey });
+        break;
+      }
+      case 'boolean': {
+        column = builder.switch({ label: propertyKey });
+        break;
+      }
+      case 'date': {
+        column = builder.date({ label: propertyKey });
+        break;
+      }
+      case 'display': {
+        column = builder.display({ label: propertyKey, id: propertyKey });
+        break;
+      }
+      default: {
+        throw new Error(`Unhandled column type: ${type}`);
+      }
+    }
+
+    return helper.accessor(propertyKey as any, column);
+  });
+};

package/src/theme.ts

@@ -75,13 +75,14 @@ export const theadResizeRoot: ComponentFunction<{ isResizing: boolean }> = ({ is
 export type TbodyStyleProps = Partial<TableContextValue<any>>;
 export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
 
-export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean }>;
-export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent }, ...etc) =>
+export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean; isPinned?: boolean }>;
+export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, isPinned }, ...etc) =>
   mx(
     'group',
     canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
     canBeCurrent && 'cursor-pointer rounded',
+    isPinned && 'sticky z-1 bottom-[-1px] base-surface',
     ...etc,
   );
 

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

@@ -1,13 +0,0 @@
-import { type HeaderContext, type RowData } from '@tanstack/react-table';
-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 declare const ColumnMenu: <TData extends unknown, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => JSX.Element;
-export declare const ColumnPanel: <TData extends unknown, TValue>({ context, tableDefs, tableDef, column, onUpdate, onDelete, }: ColumnMenuProps<TData, TValue>) => JSX.Element;
-//# sourceMappingURL=ColumnMenu.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQzE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,WAAW,CAAC;AAG7E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,sGAoBtB,CAAC;AAQF,eAAO,MAAM,WAAW,+IAkMvB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;;;AAE7C,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;yBAiBR,GAAG;;;;CASd,CAAC"}

package/dist/types/src/components/SortButton.d.ts

@@ -1,8 +0,0 @@
-import { type SortDirection } from '@tanstack/react-table';
-type SortButtonProps = {
-    sortDirection: false | SortDirection;
-    onClick: (e: any) => void;
-};
-export declare const SortButton: ({ sortDirection, onClick }: SortButtonProps) => JSX.Element;
-export {};
-//# sourceMappingURL=SortButton.d.ts.map

package/dist/types/src/components/SortButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SortButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,eAAe,GAAG;IAAE,aAAa,EAAE,KAAK,GAAG,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAoBrE,CAAC"}

package/dist/types/src/schema.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/src/components/ColumnMenu.stories.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React from 'react';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { ColumnMenu } from './ColumnMenu';
-import { type ColumnProps } from '../schema';
-
-export default {
-  title: 'react-ui-table/ColumnMenu',
-  component: ColumnMenu,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    column: {
-      id: 'test',
-      label: 'test',
-    } as ColumnProps,
-    context: {
-      header: {
-        column: {
-          getCanSort: () => true,
-          getToggleSortingHandler: () => () => console.log('toggleSort'),
-          getIsSorted: () => false,
-        },
-      },
-    },
-  },
-  decorators: [
-    (Story: any) => (
-      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};