@dxos/react-ui-table 0.4.10-main.c42bfdb → 0.4.10-main.c61b011

package/src/schema/SchemaToTable.stories.tsx

@@ -5,10 +5,10 @@
 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 React from 'react';
 
+import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -51,22 +51,21 @@ 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>
+      <Table.Root>
+        <Table.Viewport classNames='inset-0 fixed'>
+          <Table.Table<ExampleSchema>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => JSON.stringify(row)}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };

package/src/schema/schema.test.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as S from '@effect/schema/Schema';
 import { expect } from 'chai';
 
+import { S } from '@dxos/echo-schema';
 import { describe, test } from '@dxos/test';
 
 import { classifySchemaProperties } from './schema';

package/src/schema/schema.ts

@@ -2,26 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { AST } from '@effect/schema';
+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');
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
   }
 
   if (!AST.isUnion(prop.type)) {
-    throw new Error('Not a union type');
+    throw new Error(`Not a union type: ${String(prop.name)}`);
   }
 
   const [type, _undefinedCase] = prop.type.types;
-
   return type;
 };
 
@@ -54,40 +82,11 @@ const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
   return 'display';
 };
 
-const propertyToColumn = (property: AST.PropertySignature): ClassifiedColumnType => {
-  let type = property.type;
-
-  if (property.isOptional) {
-    type = unwrapOptionProperty(property);
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
   }
 
   return typeToColumn(type);
 };
-
-const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
-
-export const classifySchemaProperties = (schema: S.Schema<any, any>) => {
-  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, [], []);
-};

package/src/schema/schemaToColumns.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as S from '@effect/schema/Schema';
 import { type ColumnDef } from '@tanstack/react-table';
 
+import type { S } from '@dxos/echo-schema';
+
 import { classifySchemaProperties } from './schema';
 import { createColumnBuilder } from '../helpers';