@dxos/react-ui-table 0.6.12-main.7907542 → 0.6.12-main.ac23639

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,7 +55,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,13 +69,13 @@ 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, () => []);

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/schema/column-utils.ts

@@ -5,36 +5,36 @@
 import { type ColumnDef } from '@tanstack/react-table';
 
 import { type S } from '@dxos/echo-schema';
+import { FieldValueType, mapSchemaToFields } from '@dxos/schema';
 
-import { getColumnTypes } 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 = getColumnTypes(schema);
+  const classified = mapSchemaToFields(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
 
     let column: Partial<ColumnDef<any, any>> | undefined;
     switch (type) {
-      case 'string': {
+      case FieldValueType.String: {
         column = builder.string({ label: propertyKey });
         break;
       }
-      case 'number': {
+      case FieldValueType.Number: {
         column = builder.number({ label: propertyKey });
         break;
       }
-      case 'boolean': {
+      case FieldValueType.Boolean: {
         column = builder.switch({ label: propertyKey });
         break;
       }
-      case 'date': {
+      case FieldValueType.Date: {
         column = builder.date({ label: propertyKey });
         break;
       }
-      case 'json': {
+      case FieldValueType.JSON: {
         column = builder.json({ label: propertyKey, id: propertyKey });
         break;
       }

package/src/schema/index.ts

@@ -3,6 +3,4 @@
 //
 
 export * from './column-utils';
-export * from './schema';
 export * from './types';
-export * from './schema';

package/src/schema/types.ts

@@ -2,20 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type FieldValueType } from '@dxos/schema';
+
+// TODO(burdon): Reconcile with @dxos/schema/View.
 export type TableDef = {
   id: string;
   name?: string;
-  columns: ColumnProps[];
+  columns: ColumnDef[];
 };
 
-// TODO(burdon): Use Effect defs?
-export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'json' | 'ref';
-
-// TODO(burdon): Effect schema?
-export type ColumnProps = {
+// TODO(burdon): Reconcile with @dxos/schema/Field.
+export type ColumnDef = {
   id: string;
   prop: string;
-  type: ColumnType;
+  type: FieldValueType;
   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/Form/Form.stories.d.ts

@@ -1,42 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-import { S } from '@dxos/echo-schema';
-type FormProps = {
-    schema: S.Schema<any>;
-};
-declare const _default: {
-    title: string;
-    decorators: import("@storybook/react/*").Decorator[];
-    parameters: {
-        translations: {
-            'en-US': {
-                table: {
-                    'no selection label': string;
-                    'number column type label': string;
-                    'boolean column type label': string;
-                    'date column type label': string;
-                    'string column type label': string;
-                    'ref column type label': string;
-                    'digits label': string;
-                    'save label': string;
-                    'delete label': string;
-                    'column label label': string;
-                    'property key label': string;
-                    'column type label': string;
-                };
-            };
-        }[];
-    };
-    render: (props: FormProps) => React.JSX.Element;
-};
-export default _default;
-export declare const Default: {
-    args: {
-        schema: S.Struct<{
-            name: S.SchemaClass<string, string, never>;
-            email: typeof S.String;
-            age: typeof S.Number;
-        }>;
-    };
-};
-//# sourceMappingURL=Form.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAY3C,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;oBARoB,SAAS;;AAyC/B,wBAOE;AAEF,eAAO,MAAM,OAAO;;;;;;;;CAInB,CAAC"}

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

@@ -1,4 +0,0 @@
-import { type S } from '@dxos/effect';
-import { type ColumnType } from './types';
-export declare const getColumnTypes: (schema: S.Schema<any, any>) => [string, ColumnType][];
-//# sourceMappingURL=schema.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,cAAc,WAAY,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAG,CAAC,MAAM,EAAE,UAAU,CAAC,EAwB/E,CAAC"}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=schema.test.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"schema.test.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.test.ts"],"names":[],"mappings":""}

package/src/components/Form/Form.stories.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { AST, S } from '@dxos/echo-schema';
-import { Input } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import translations from '../../translations';
-
-const Story = (props: FormProps) => (
-  <div className='flex w-[240px] m-2 p-2 border border-separator rounded'>
-    <Form {...props} />
-  </div>
-);
-
-type FormProps = {
-  schema: S.Schema<any>;
-};
-
-const Form = ({ schema }: FormProps) => {
-  // const types = getColumnTypes(schema);
-  const props = AST.getPropertySignatures(schema.ast);
-
-  return (
-    <div className='flex flex-col w-full gap-2'>
-      {props.map((prop, i) => {
-        const { name, annotations } = prop;
-        const a = AST.getDescriptionAnnotation(prop);
-        console.log(a, annotations);
-        return (
-          <Input.Root key={i}>
-            <Input.Label>{name.toString()}</Input.Label>
-            <Input.TextInput
-              placeholder={name.toString()}
-              // value={formState.label ?? ''}
-              // onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
-            />
-          </Input.Root>
-        );
-      })}
-    </div>
-  );
-};
-
-const schema = S.Struct({
-  name: S.String.annotations({ [AST.DescriptionAnnotationId]: 'Name' }),
-  email: S.String,
-  age: S.Number,
-});
-
-export default {
-  title: 'react-ui-table/Form',
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    translations,
-  },
-  render: Story,
-};
-
-export const Default = {
-  args: {
-    schema,
-  },
-};

package/src/schema/schema.test.ts

@@ -1,76 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema as S } from '@effect/schema';
-import { describe, expect, test } from 'vitest';
-
-import { getColumnTypes } from './schema';
-
-// TODO(burdon): Realistic data.
-
-describe('getColumnTypes', () => {
-  test('basic', () => {
-    const schema = S.Struct({
-      field1: S.String,
-      field2: S.Number,
-      field3: S.Date,
-    });
-
-    const columns = getColumnTypes(schema);
-    expect(columns).to.deep.equal([
-      ['field1', 'string'],
-      ['field2', 'number'],
-      ['field3', 'date'],
-    ]);
-  });
-
-  test('optional properties', () => {
-    const schema = S.Struct({
-      field1: S.optional(S.String),
-      field2: S.optional(S.Number),
-    });
-
-    const columns = getColumnTypes(schema);
-    expect(columns).to.deep.equal([
-      ['field1', 'string'],
-      ['field2', 'number'],
-    ]);
-  });
-
-  test('piped validators', () => {
-    const schema = S.Struct({
-      name: S.optional(S.String.pipe(S.nonEmptyString(), S.maxLength(10))),
-      age: S.Number.pipe(S.negative()),
-    });
-
-    const columns = getColumnTypes(schema);
-    expect(columns).to.deep.equal([
-      ['name', 'string'],
-      ['age', 'number'],
-    ]);
-  });
-
-  test('nested schema', () => {
-    const schema = S.Struct({
-      name: S.String,
-      nested1: S.Struct({
-        age: S.Number,
-        deeplyNested: S.Struct({
-          height: S.optional(S.Number),
-        }),
-      }),
-      nested2: S.Struct({
-        height: S.Number,
-      }),
-    });
-
-    const columns = getColumnTypes(schema);
-    expect(columns).to.deep.equal([
-      ['name', 'string'],
-      ['nested1.age', 'number'],
-      ['nested1.deeplyNested.height', 'number'],
-      ['nested2.height', 'number'],
-    ]);
-  });
-});

package/src/schema/schema.ts

@@ -1,86 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { AST, type S } from '@dxos/effect';
-
-import { type ColumnType } from './types';
-
-// TODO(burdon): Factor out to @dxos/effect?
-// TODO(burdon): Return struct (with prop metadata).
-export const getColumnTypes = (schema: S.Schema<any, any>): [string, ColumnType][] => {
-  const visitNode = (node: AST.AST, path: string[] = [], acc: [string, ColumnType][] = []) => {
-    const props = AST.getPropertySignatures(node);
-    props.forEach((prop) => {
-      const propName = prop.name.toString();
-
-      if (prop.isOptional) {
-        const unwrappedAst = unwrapOptionProperty(prop);
-        if (isStruct(unwrappedAst)) {
-          return visitNode(unwrappedAst, [...path, propName], acc);
-        }
-      }
-
-      if (isStruct(prop.type)) {
-        visitNode(prop.type, [...path, propName], acc);
-      } else {
-        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
-      }
-    });
-
-    return acc;
-  };
-
-  return visitNode(schema.ast);
-};
-
-// TODO(burdon): Document AST?
-const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
-
-const propertyToColumn = (prop: AST.PropertySignature): ColumnType => {
-  let type = prop.type;
-  if (prop.isOptional) {
-    type = unwrapOptionProperty(prop);
-  }
-
-  return typeToColumn(type);
-};
-
-const unwrapOptionProperty = (prop: AST.PropertySignature) => {
-  if (!AST.isUnion(prop.type)) {
-    throw new Error(`Not a union type: ${String(prop.name)}`);
-  }
-
-  const [type] = prop.type.types;
-  return type;
-};
-
-const typeToColumn = (type: AST.AST): ColumnType => {
-  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';
-      }
-    }
-  }
-
-  // TODO(burdon): Better fallback?
-  return 'json';
-};