@dxos/react-ui-table 0.6.12-main.15a606f → 0.6.12-main.568932b

package/src/components/ColumnMenu/{ColumnSettingsForm.stories.tsx → ColumnSettings.stories.tsx}

@@ -3,17 +3,29 @@
 //
 
 import '@dxos-theme';
+
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { ColumnSettingsForm, type ColumnSettingsFormProps } from './ColumnSettingsForm';
+import { ColumnSettings, type ColumnSettingsProps } from './ColumnSettings';
 import { type TableDef } from '../../schema';
+import translations from '../../translations';
+
+const Story = (props: ColumnSettingsProps) => (
+  <div className='flex w-[240px] m-2 p-2 border border-separator rounded'>
+    <ColumnSettings {...props} />
+  </div>
+);
 
 export default {
-  title: 'react-ui-table/ColumnSettingsForm',
-  component: ColumnSettingsForm,
-  decorators: [withTheme],
+  title: 'react-ui-table/ColumnSettings',
+  component: ColumnSettings,
+  decorators: [withTheme, withLayout()],
+  parameters: {
+    translations,
+  },
+  render: Story,
 };
 
 const sampleTableDef: TableDef = {
@@ -37,7 +49,7 @@ const sampleTablesToReference: TableDef[] = [
   },
 ];
 
-const defaultArgs: ColumnSettingsFormProps = {
+const defaultArgs: ColumnSettingsProps = {
   column: {
     id: 'col-1',
     prop: 'name',
@@ -93,12 +105,3 @@ export const NewColumn = {
     },
   },
 };
-
-const Template = (args: ColumnSettingsFormProps) => (
-  <div className='p-4 max-is-64'>
-    <ColumnSettingsForm {...args} />
-  </div>
-);
-
-export const Interactive = Template.bind({});
-(Interactive as any).args = defaultArgs;

package/src/components/ColumnMenu/{ColumnSettingsForm.tsx → ColumnSettings.tsx}

@@ -10,23 +10,24 @@ import { safeParseInt } from '@dxos/util';
 import { type TableDef, type ColumnProps, type ColumnType } from '../../schema';
 import { translationKey } from '../../translations';
 
-export type ColumnSettingsFormProps = {
+export type ColumnSettingsProps = {
   column: ColumnProps;
   tableDef: TableDef;
+  // TODO(burdon): Rename.
   tablesToReference: TableDef[];
-  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
-  onDelete?: ((id: string) => void) | undefined;
+  onUpdate?: (id: string, column: ColumnProps) => void;
+  onDelete?: (id: string) => void;
   onClose?: () => void;
 };
 
-export const ColumnSettingsForm = ({
+export const ColumnSettings = ({
   column,
   tableDef,
   tablesToReference,
   onUpdate,
   onDelete,
   onClose,
-}: ColumnSettingsFormProps) => {
+}: ColumnSettingsProps) => {
   const [formState, setFormState] = useState({
     prop: column.id,
     refTable: column.refTable,
@@ -76,9 +77,10 @@ export const ColumnSettingsForm = ({
     onClose?.();
   };
 
+  // TODO(burdon): Standardize dialog/popup.
   return (
-    <div className='p-1 space-y-2'>
-      <div className='space-y-1'>
+    <div className='flex flex-col w-full gap-4'>
+      <div className='flex flex-col gap-2'>
         <Input.Root>
           <Input.Label>{t('column label label')}</Input.Label>
           <Input.TextInput
@@ -89,8 +91,7 @@ export const ColumnSettingsForm = ({
             data-testid='table.column-settings.label'
           />
         </Input.Root>
-      </div>
-      <div className='space-y-1'>
+
         <Input.Root>
           <Input.Label>{t('property key label')}</Input.Label>
           <Input.TextInput
@@ -102,8 +103,7 @@ export const ColumnSettingsForm = ({
             }
           />
         </Input.Root>
-      </div>
-      <div className='space-y-1'>
+
         <Input.Root>
           <Input.Label>{t('column type label')}</Input.Label>
           <Select.Root
@@ -124,9 +124,8 @@ export const ColumnSettingsForm = ({
             </Select.Portal>
           </Select.Root>
         </Input.Root>
-      </div>
-      {formState.type === 'number' && (
-        <div className='space-y-1'>
+
+        {formState.type === 'number' && (
           <Input.Root>
             <Input.Label>{t('digits label')}</Input.Label>
             <Input.TextInput
@@ -134,12 +133,10 @@ export const ColumnSettingsForm = ({
               onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
             />
           </Input.Root>
-        </div>
-      )}
+        )}
 
-      {formState.type === 'ref' && (
-        <>
-          <div className='space-y-1'>
+        {formState.type === 'ref' && (
+          <>
             <Input.Root>
               <Input.Label>Table</Input.Label>
               <Select.Root
@@ -162,9 +159,8 @@ export const ColumnSettingsForm = ({
                 </Select.Portal>
               </Select.Root>
             </Input.Root>
-          </div>
-          {formState.refTable && (
-            <div className='space-y-1'>
+
+            {formState.refTable && (
               <Input.Root>
                 <Input.Label>Table property</Input.Label>
                 <Select.Root
@@ -187,20 +183,21 @@ export const ColumnSettingsForm = ({
                   </Select.Portal>
                 </Select.Root>
               </Input.Root>
-            </div>
-          )}
-        </>
-      )}
-
-      <div role='none' className='h-1' />
-
-      <div className='flex flex-row justify-end gap-1'>
-        <Button onClick={handleDelete} data-testid='table.column-settings.delete'>
-          {t('delete label')}
-        </Button>
-        <Button variant='primary' onClick={handleSave} data-testid='table.column-settings.save'>
-          {t('save label')}
-        </Button>
+            )}
+          </>
+        )}
+      </div>
+
+      <div>
+        {/* TODO(burdon): Change delete to cancel. Delete should be menu item. */}
+        <div className='flex flex-row justify-end gap-1'>
+          <Button onClick={handleDelete} data-testid='table.column-settings.delete'>
+            {t('delete label')}
+          </Button>
+          <Button variant='primary' onClick={handleSave} data-testid='table.column-settings.save'>
+            {t('save label')}
+          </Button>
+        </div>
       </div>
     </div>
   );

package/src/components/ColumnMenu/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './ColumnMenu';
-export * from './ColumnSettingsForm';
+export * from './ColumnSettings';

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

@@ -0,0 +1,69 @@
+//
+// 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/components/Table/Table.stories.tsx

@@ -8,7 +8,7 @@ import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
-import { registerSignalRuntime } from '@dxos/echo-signals/react';
+import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { Button, DensityProvider } from '@dxos/react-ui';
@@ -406,7 +406,7 @@ export const TenThousandRows = {
   },
 };
 
-registerSignalRuntime();
+registerSignalsRuntime();
 const state = create({ items: createItems(10) });
 
 export const RealTimeUpdates = {

package/src/components/Table/Table.tsx

@@ -79,8 +79,8 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
     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]);
 

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/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/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/schema/{SchemaToTable.stories.tsx → Schema.stories.tsx}

@@ -4,28 +4,19 @@
 
 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: 'react-ui-table/Schema',
+  decorators: [withTheme, withLayout()],
 };
 
 const exampleSchema = S.Struct({
@@ -49,7 +40,7 @@ const exampleSchemaArbitrary = Arbitrary.make(exampleSchema);
 
 const items = fc.sample(exampleSchemaArbitrary, 10);
 
-export const SchemaTable = {
+export const Default = {
   render: () => {
     return (
       <Table.Root>

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

@@ -4,15 +4,15 @@
 
 import { type ColumnDef } from '@tanstack/react-table';
 
-import type { S } from '@dxos/echo-schema';
+import { type S } from '@dxos/echo-schema';
 
-import { classifySchemaProperties } from './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 = classifySchemaProperties(schema);
+  const classified = getColumnTypes(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
 
@@ -34,8 +34,8 @@ export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, an
         column = builder.date({ label: propertyKey });
         break;
       }
-      case 'display': {
-        column = builder.display({ label: propertyKey, id: propertyKey });
+      case 'json': {
+        column = builder.json({ label: propertyKey, id: propertyKey });
         break;
       }
       default: {

package/src/schema/index.ts

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

package/src/schema/schema.test.ts

@@ -2,63 +2,49 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema as S } from '@effect/schema';
 import { describe, expect, test } from 'vitest';
 
-import { S } from '@dxos/echo-schema';
+import { getColumnTypes } from './schema';
 
-import { classifySchemaProperties } from './schema';
+// TODO(burdon): Realistic data.
 
-describe('schema->column-type', () => {
+describe('getColumnTypes', () => {
   test('basic', () => {
-    const simpleSchema = S.Struct({
+    const schema = S.Struct({
       field1: S.String,
       field2: S.Number,
+      field3: S.Date,
     });
 
-    const columns = classifySchemaProperties(simpleSchema);
-
+    const columns = getColumnTypes(schema);
     expect(columns).to.deep.equal([
       ['field1', 'string'],
       ['field2', 'number'],
+      ['field3', 'date'],
     ]);
   });
 
   test('optional properties', () => {
-    const simpleSchema = S.Struct({
+    const schema = S.Struct({
       field1: S.optional(S.String),
       field2: S.optional(S.Number),
     });
 
-    const columns = classifySchemaProperties(simpleSchema);
-
+    const columns = getColumnTypes(schema);
     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))),
+  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 = classifySchemaProperties(simpleSchema);
-
+    const columns = getColumnTypes(schema);
     expect(columns).to.deep.equal([
       ['name', 'string'],
       ['age', 'number'],
@@ -66,81 +52,24 @@ describe('schema->column-type', () => {
   });
 
   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({
+    const schema = S.Struct({
       name: S.String,
-      nested: S.Struct({
+      nested1: S.Struct({
         age: S.Number,
         deeplyNested: S.Struct({
-          height: S.Number,
+          height: S.optional(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);
-
+    const columns = getColumnTypes(schema);
     expect(columns).to.deep.equal([
       ['name', 'string'],
-      ['nested.age', 'number'],
+      ['nested1.age', 'number'],
+      ['nested1.deeplyNested.height', 'number'],
       ['nested2.height', 'number'],
     ]);
   });