@dxos/react-ui-table 0.6.12-staging.e11e696 → 0.6.13-main.09887cd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +40 -124
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts +6 -3
- package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts.map +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts +3 -3
- package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts.map +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnSettings.d.ts +15 -0
- package/dist/types/src/components/ColumnMenu/ColumnSettings.d.ts.map +1 -0
- package/dist/types/src/components/ColumnMenu/ColumnSettings.stories.d.ts +84 -0
- package/dist/types/src/components/ColumnMenu/ColumnSettings.stories.d.ts.map +1 -0
- package/dist/types/src/components/ColumnMenu/index.d.ts +1 -1
- package/dist/types/src/components/ColumnMenu/index.d.ts.map +1 -1
- package/dist/types/src/components/Table/Table.d.ts.map +1 -1
- package/dist/types/src/components/Table/Table.stories.d.ts +21 -9
- package/dist/types/src/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/types/src/components/Table/TableContext.d.ts +2 -4
- package/dist/types/src/components/Table/TableContext.d.ts.map +1 -1
- package/dist/types/src/components/Table/index.d.ts +2 -1
- package/dist/types/src/components/Table/index.d.ts.map +1 -1
- package/dist/types/src/helpers.d.ts +1 -1
- package/dist/types/src/helpers.d.ts.map +1 -1
- package/dist/types/src/schema/{SchemaToTable.stories.d.ts → Schema.stories.d.ts} +2 -3
- package/dist/types/src/schema/Schema.stories.d.ts.map +1 -0
- package/dist/types/src/schema/{schemaToColumns.d.ts → column-utils.d.ts} +1 -1
- package/dist/types/src/schema/column-utils.d.ts.map +1 -0
- package/dist/types/src/schema/index.d.ts +1 -1
- package/dist/types/src/schema/index.d.ts.map +1 -1
- package/dist/types/src/schema/types.d.ts +10 -4
- package/dist/types/src/schema/types.d.ts.map +1 -1
- package/package.json +18 -15
- package/src/components/ColumnMenu/ColumnMenu.stories.tsx +13 -12
- package/src/components/ColumnMenu/ColumnMenu.tsx +8 -5
- package/src/components/ColumnMenu/{ColumnSettingsForm.stories.tsx → ColumnSettings.stories.tsx} +27 -23
- package/src/components/ColumnMenu/{ColumnSettingsForm.tsx → ColumnSettings.tsx} +43 -43
- package/src/components/ColumnMenu/index.ts +1 -1
- package/src/components/Table/Table.stories.tsx +97 -85
- package/src/components/Table/Table.tsx +5 -6
- package/src/components/Table/TableContext.tsx +13 -7
- package/src/components/Table/index.ts +2 -1
- package/src/components/Table/props.ts +4 -4
- package/src/helpers.tsx +4 -6
- package/src/schema/{SchemaToTable.stories.tsx → Schema.stories.tsx} +10 -22
- package/src/schema/{schemaToColumns.ts → column-utils.ts} +8 -8
- package/src/schema/index.ts +1 -1
- package/src/schema/types.ts +14 -6
- package/src/translations.ts +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts +0 -12
- package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts.map +0 -1
- package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.stories.d.ts +0 -63
- package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.stories.d.ts.map +0 -1
- package/dist/types/src/schema/SchemaToTable.stories.d.ts.map +0 -1
- package/dist/types/src/schema/schema.d.ts +0 -5
- package/dist/types/src/schema/schema.d.ts.map +0 -1
- package/dist/types/src/schema/schema.test.d.ts +0 -2
- package/dist/types/src/schema/schema.test.d.ts.map +0 -1
- package/dist/types/src/schema/schemaToColumns.d.ts.map +0 -1
- package/src/schema/schema.test.ts +0 -146
- package/src/schema/schema.ts +0 -92
|
@@ -3,26 +3,32 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type RowData } from '@tanstack/react-table';
|
|
6
|
-
import React, {
|
|
6
|
+
import React, {
|
|
7
|
+
useContext,
|
|
8
|
+
createContext,
|
|
9
|
+
type Context,
|
|
10
|
+
type JSX,
|
|
11
|
+
type PropsWithChildren,
|
|
12
|
+
type ReactNode,
|
|
13
|
+
} from 'react';
|
|
14
|
+
|
|
15
|
+
import { raise } from '@dxos/debug';
|
|
7
16
|
|
|
8
17
|
import { type TableContextValue } from './props';
|
|
9
18
|
|
|
10
19
|
export const TABLE_NAME = 'Table';
|
|
11
20
|
|
|
12
|
-
|
|
13
|
-
// The expectation is that the provider will always supply a value, so no need to define a default here.
|
|
14
|
-
const TableContext = createContext<TableContextValue<RowData>>({} as TableContextValue<RowData>);
|
|
21
|
+
const TableContext = createContext<TableContextValue<RowData> | undefined>(undefined);
|
|
15
22
|
|
|
16
23
|
export type TypedTableProvider<TData extends RowData> = {
|
|
17
24
|
(props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
|
|
18
25
|
displayName: string;
|
|
19
26
|
};
|
|
20
27
|
|
|
21
|
-
export const TableProvider
|
|
28
|
+
export const TableProvider = ({ children, ...value }: PropsWithChildren<TableContextValue<RowData>>) => {
|
|
22
29
|
return <TableContext.Provider value={value}>{children}</TableContext.Provider>;
|
|
23
30
|
};
|
|
24
31
|
|
|
25
|
-
// Create a custom hook to consume the context.
|
|
26
32
|
export const useTableContext = <TData extends RowData>(): TableContextValue<TData> => {
|
|
27
|
-
return useContext(TableContext as Context<TableContextValue<TData>>);
|
|
33
|
+
return useContext(TableContext as Context<TableContextValue<TData>>) ?? raise(new Error('Missing TableContext'));
|
|
28
34
|
};
|
|
@@ -25,7 +25,7 @@ export type TableFlags = Partial<{
|
|
|
25
25
|
* This is ‘current’ in the `aria-current` sense.
|
|
26
26
|
*/
|
|
27
27
|
export type TableCurrent<TData extends RowData> = Partial<{
|
|
28
|
-
// App state
|
|
28
|
+
// App state.
|
|
29
29
|
currentDatum: TData;
|
|
30
30
|
onDatumClick: (datum: TData) => void;
|
|
31
31
|
}>;
|
|
@@ -39,13 +39,13 @@ export type TableProps<TData extends RowData> = TableFlags &
|
|
|
39
39
|
onColumnResize: (state: Record<string, number>) => void;
|
|
40
40
|
onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
|
|
41
41
|
columnVisibility: VisibilityState;
|
|
42
|
-
// Controllable row selection
|
|
42
|
+
// Controllable row selection.
|
|
43
43
|
rowSelection: RowSelectionState;
|
|
44
44
|
defaultRowSelection: RowSelectionState;
|
|
45
45
|
onRowSelectionChange: (rowSelection: RowSelectionState) => void;
|
|
46
|
-
// Derived from row selection
|
|
46
|
+
// Derived from row selection.
|
|
47
47
|
onDataSelectionChange: (dataSelection: TData[]) => void;
|
|
48
|
-
// `table` element props
|
|
48
|
+
// `table` element props.
|
|
49
49
|
classNames: ClassNameValue;
|
|
50
50
|
pinLastRow: boolean;
|
|
51
51
|
}>;
|
package/src/helpers.tsx
CHANGED
|
@@ -21,8 +21,7 @@ import { log } from '@dxos/log';
|
|
|
21
21
|
import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
|
|
22
22
|
import { getSize, mx } from '@dxos/react-ui-theme';
|
|
23
23
|
|
|
24
|
-
import { CellCombobox } from './components';
|
|
25
|
-
import { useTableContext } from './components/Table/TableContext';
|
|
24
|
+
import { CellCombobox, useTableContext } from './components';
|
|
26
25
|
import { textPadding } from './theme';
|
|
27
26
|
|
|
28
27
|
export type ValueUpdater<TData extends RowData, TValue> = (row: TData, id: string, value: TValue) => void;
|
|
@@ -470,7 +469,7 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
470
469
|
size: 50,
|
|
471
470
|
minSize: 50,
|
|
472
471
|
header: (column) => label ?? column.header.id,
|
|
473
|
-
// TODO(zan): Implement sort algorithm
|
|
472
|
+
// TODO(zan): Implement sort algorithm.
|
|
474
473
|
enableSorting: true,
|
|
475
474
|
cell: SwitchBuilderCell,
|
|
476
475
|
...props,
|
|
@@ -486,7 +485,7 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
486
485
|
const IconOff = off?.Icon ?? X;
|
|
487
486
|
return {
|
|
488
487
|
size: size ?? 32,
|
|
489
|
-
// TODO(zan): Implement sort algorithm
|
|
488
|
+
// TODO(zan): Implement sort algorithm.
|
|
490
489
|
enableSorting: false,
|
|
491
490
|
header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
|
|
492
491
|
cell: (cell) => {
|
|
@@ -506,14 +505,13 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
506
505
|
/**
|
|
507
506
|
* This display column type is for nested/unhandled data to appear as JSON.
|
|
508
507
|
*/
|
|
509
|
-
|
|
508
|
+
json({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
|
|
510
509
|
return {
|
|
511
510
|
size: 120,
|
|
512
511
|
minSize: 120,
|
|
513
512
|
header: (cell) => label ?? cell.header.id,
|
|
514
513
|
cell: (cell) => {
|
|
515
514
|
const value = cell.getValue();
|
|
516
|
-
|
|
517
515
|
return (
|
|
518
516
|
<div className='overflow-scroll'>
|
|
519
517
|
<code className='text-xs'>{JSON.stringify(value)}</code>
|
|
@@ -9,26 +9,17 @@ import * as fc from 'fast-check';
|
|
|
9
9
|
import React from 'react';
|
|
10
10
|
|
|
11
11
|
import { S } from '@dxos/echo-schema';
|
|
12
|
-
import {
|
|
13
|
-
import { withTheme } from '@dxos/storybook-utils';
|
|
12
|
+
import { withTheme, withLayout } from '@dxos/storybook-utils';
|
|
14
13
|
|
|
15
|
-
import { schemaToColumnDefs } from './
|
|
14
|
+
import { schemaToColumnDefs } from './column-utils';
|
|
16
15
|
import { Table } from '../components';
|
|
17
16
|
|
|
18
17
|
export default {
|
|
19
|
-
title: 'react-ui-table/
|
|
20
|
-
|
|
21
|
-
decorators: [
|
|
22
|
-
withTheme,
|
|
23
|
-
(Story: any) => (
|
|
24
|
-
<DensityProvider density='fine'>
|
|
25
|
-
<Story />
|
|
26
|
-
</DensityProvider>
|
|
27
|
-
),
|
|
28
|
-
],
|
|
18
|
+
title: 'react-ui-table/Schema',
|
|
19
|
+
decorators: [withTheme, withLayout()],
|
|
29
20
|
};
|
|
30
21
|
|
|
31
|
-
const
|
|
22
|
+
const TestSchema = S.Struct({
|
|
32
23
|
field1: S.String,
|
|
33
24
|
field2: S.Number,
|
|
34
25
|
field3: S.Date,
|
|
@@ -41,20 +32,17 @@ const exampleSchema = S.Struct({
|
|
|
41
32
|
),
|
|
42
33
|
});
|
|
43
34
|
|
|
44
|
-
type
|
|
35
|
+
type TestType = S.Schema.Type<typeof TestSchema>;
|
|
45
36
|
|
|
46
|
-
const columns = schemaToColumnDefs(
|
|
37
|
+
const columns = schemaToColumnDefs(TestSchema);
|
|
38
|
+
const items = fc.sample(Arbitrary.make(TestSchema), 10);
|
|
47
39
|
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
const items = fc.sample(exampleSchemaArbitrary, 10);
|
|
51
|
-
|
|
52
|
-
export const SchemaTable = {
|
|
40
|
+
export const Default = {
|
|
53
41
|
render: () => {
|
|
54
42
|
return (
|
|
55
43
|
<Table.Root>
|
|
56
44
|
<Table.Viewport classNames='fixed inset-0'>
|
|
57
|
-
<Table.Main<
|
|
45
|
+
<Table.Main<TestType>
|
|
58
46
|
role='grid'
|
|
59
47
|
rowsSelectable='multi'
|
|
60
48
|
keyAccessor={(row) => JSON.stringify(row)}
|
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
import { type ColumnDef } from '@tanstack/react-table';
|
|
6
6
|
|
|
7
7
|
import { type S } from '@dxos/echo-schema';
|
|
8
|
+
import { FieldValueType, mapSchemaToFields } from '@dxos/schema';
|
|
8
9
|
|
|
9
|
-
import { classifySchemaProperties } from './schema';
|
|
10
10
|
import { createColumnBuilder } from '../helpers';
|
|
11
11
|
|
|
12
12
|
export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
|
|
13
13
|
const { helper, builder } = createColumnBuilder<T>();
|
|
14
14
|
|
|
15
|
-
const classified =
|
|
15
|
+
const classified = mapSchemaToFields(schema);
|
|
16
16
|
return classified.map(([name, type]) => {
|
|
17
17
|
const propertyKey = name.toString();
|
|
18
18
|
|
|
19
19
|
let column: Partial<ColumnDef<any, any>> | undefined;
|
|
20
20
|
switch (type) {
|
|
21
|
-
case
|
|
21
|
+
case FieldValueType.String: {
|
|
22
22
|
column = builder.string({ label: propertyKey });
|
|
23
23
|
break;
|
|
24
24
|
}
|
|
25
|
-
case
|
|
25
|
+
case FieldValueType.Number: {
|
|
26
26
|
column = builder.number({ label: propertyKey });
|
|
27
27
|
break;
|
|
28
28
|
}
|
|
29
|
-
case
|
|
29
|
+
case FieldValueType.Boolean: {
|
|
30
30
|
column = builder.switch({ label: propertyKey });
|
|
31
31
|
break;
|
|
32
32
|
}
|
|
33
|
-
case
|
|
33
|
+
case FieldValueType.Date: {
|
|
34
34
|
column = builder.date({ label: propertyKey });
|
|
35
35
|
break;
|
|
36
36
|
}
|
|
37
|
-
case
|
|
38
|
-
column = builder.
|
|
37
|
+
case FieldValueType.JSON: {
|
|
38
|
+
column = builder.json({ label: propertyKey, id: propertyKey });
|
|
39
39
|
break;
|
|
40
40
|
}
|
|
41
41
|
default: {
|
package/src/schema/index.ts
CHANGED
package/src/schema/types.ts
CHANGED
|
@@ -2,18 +2,26 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { type FieldValueType } from '@dxos/schema';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated
|
|
9
|
+
*/
|
|
10
|
+
// TODO(burdon): Reconcile with @dxos/schema/View.
|
|
5
11
|
export type TableDef = {
|
|
6
12
|
id: string;
|
|
7
|
-
name?: string;
|
|
8
|
-
columns:
|
|
13
|
+
name?: string;
|
|
14
|
+
columns: ColumnDef[];
|
|
9
15
|
};
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated
|
|
19
|
+
*/
|
|
20
|
+
// TODO(burdon): Reconcile with @dxos/schema/Field.
|
|
21
|
+
export type ColumnDef = {
|
|
14
22
|
id: string;
|
|
15
23
|
prop: string;
|
|
16
|
-
type:
|
|
24
|
+
type: FieldValueType;
|
|
17
25
|
size?: number;
|
|
18
26
|
label?: string;
|
|
19
27
|
|
package/src/translations.ts
CHANGED
|
@@ -10,7 +10,7 @@ export default [
|
|
|
10
10
|
[translationKey]: {
|
|
11
11
|
'no selection label': ' ',
|
|
12
12
|
'number column type label': 'Number',
|
|
13
|
-
'boolean column type label': '
|
|
13
|
+
'boolean column type label': 'Boolean',
|
|
14
14
|
'date column type label': 'Date',
|
|
15
15
|
'string column type label': 'Text',
|
|
16
16
|
'ref column type label': 'Reference',
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type TableDef, type ColumnProps } from '../../schema';
|
|
3
|
-
export type ColumnSettingsFormProps = {
|
|
4
|
-
column: ColumnProps;
|
|
5
|
-
tableDef: TableDef;
|
|
6
|
-
tablesToReference: TableDef[];
|
|
7
|
-
onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
|
|
8
|
-
onDelete?: ((id: string) => void) | undefined;
|
|
9
|
-
onClose?: () => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const ColumnSettingsForm: ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose, }: ColumnSettingsFormProps) => React.JSX.Element;
|
|
12
|
-
//# sourceMappingURL=ColumnSettingsForm.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,cAAc,CAAC;AAGhF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAO5B,uBAAuB,sBAkLzB,CAAC"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import '@dxos-theme';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { type ColumnSettingsFormProps } from './ColumnSettingsForm';
|
|
4
|
-
import { type TableDef } from '../../schema';
|
|
5
|
-
declare const _default: {
|
|
6
|
-
title: string;
|
|
7
|
-
component: ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose, }: ColumnSettingsFormProps) => React.JSX.Element;
|
|
8
|
-
decorators: import("@storybook/react/*").Decorator[];
|
|
9
|
-
};
|
|
10
|
-
export default _default;
|
|
11
|
-
export declare const Default: {
|
|
12
|
-
args: ColumnSettingsFormProps;
|
|
13
|
-
};
|
|
14
|
-
export declare const NumberColumn: {
|
|
15
|
-
args: {
|
|
16
|
-
column: {
|
|
17
|
-
id: string;
|
|
18
|
-
prop: string;
|
|
19
|
-
type: string;
|
|
20
|
-
label: string;
|
|
21
|
-
digits: number;
|
|
22
|
-
};
|
|
23
|
-
tableDef: TableDef;
|
|
24
|
-
tablesToReference: TableDef[];
|
|
25
|
-
onUpdate?: ((id: string, column: import("../../schema").ColumnProps) => void) | undefined;
|
|
26
|
-
onDelete?: ((id: string) => void) | undefined;
|
|
27
|
-
onClose?: () => void;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export declare const ReferenceColumn: {
|
|
31
|
-
args: {
|
|
32
|
-
column: {
|
|
33
|
-
id: string;
|
|
34
|
-
prop: string;
|
|
35
|
-
type: string;
|
|
36
|
-
label: string;
|
|
37
|
-
refTable: string;
|
|
38
|
-
refProp: string;
|
|
39
|
-
};
|
|
40
|
-
tableDef: TableDef;
|
|
41
|
-
tablesToReference: TableDef[];
|
|
42
|
-
onUpdate?: ((id: string, column: import("../../schema").ColumnProps) => void) | undefined;
|
|
43
|
-
onDelete?: ((id: string) => void) | undefined;
|
|
44
|
-
onClose?: () => void;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export declare const NewColumn: {
|
|
48
|
-
args: {
|
|
49
|
-
column: {
|
|
50
|
-
id: string;
|
|
51
|
-
prop: string;
|
|
52
|
-
type: string;
|
|
53
|
-
label: string;
|
|
54
|
-
};
|
|
55
|
-
tableDef: TableDef;
|
|
56
|
-
tablesToReference: TableDef[];
|
|
57
|
-
onUpdate?: ((id: string, column: import("../../schema").ColumnProps) => void) | undefined;
|
|
58
|
-
onDelete?: ((id: string) => void) | undefined;
|
|
59
|
-
onClose?: () => void;
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
export declare const Interactive: (args: ColumnSettingsFormProps) => React.JSX.Element;
|
|
63
|
-
//# sourceMappingURL=ColumnSettingsForm.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsForm.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;;;;;;AAE7C,wBAIE;AAqCF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAWxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAY3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAUrB,CAAC;AAQF,eAAO,MAAM,WAAW,SANA,uBAAuB,sBAMH,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SchemaToTable.stories.d.ts","sourceRoot":"","sources":["../../../../src/schema/SchemaToTable.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAS1B,wBAWE;AAuBF,eAAO,MAAM,WAAW;;CAmBvB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { type S } from '@dxos/echo-schema';
|
|
2
|
-
import { type ColumnType } from './types';
|
|
3
|
-
export type ClassifiedColumnType = ColumnType | 'display';
|
|
4
|
-
export declare const classifySchemaProperties: (schema: S.Schema<any, any>) => [string, ClassifiedColumnType][];
|
|
5
|
-
//# sourceMappingURL=schema.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AAG1D,eAAO,MAAM,wBAAwB,WAAY,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAwBnG,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.test.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../src/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAK3C,eAAO,MAAM,kBAAkB,GAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,KAAG,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAoCjF,CAAC"}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Schema as S } from '@effect/schema';
|
|
6
|
-
import { describe, expect, test } from 'vitest';
|
|
7
|
-
|
|
8
|
-
import { classifySchemaProperties } from './schema';
|
|
9
|
-
|
|
10
|
-
describe('schema->column-type', () => {
|
|
11
|
-
test('basic', () => {
|
|
12
|
-
const simpleSchema = S.Struct({
|
|
13
|
-
field1: S.String,
|
|
14
|
-
field2: S.Number,
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
18
|
-
|
|
19
|
-
expect(columns).to.deep.equal([
|
|
20
|
-
['field1', 'string'],
|
|
21
|
-
['field2', 'number'],
|
|
22
|
-
]);
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
test('optional properties', () => {
|
|
26
|
-
const simpleSchema = S.Struct({
|
|
27
|
-
field1: S.optional(S.String),
|
|
28
|
-
field2: S.optional(S.Number),
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
32
|
-
|
|
33
|
-
expect(columns).to.deep.equal([
|
|
34
|
-
['field1', 'string'],
|
|
35
|
-
['field2', 'number'],
|
|
36
|
-
]);
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
test('dates', () => {
|
|
40
|
-
const simpleSchema = S.Struct({
|
|
41
|
-
field1: S.Date,
|
|
42
|
-
field2: S.optional(S.Date),
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
46
|
-
|
|
47
|
-
expect(columns).to.deep.equal([
|
|
48
|
-
['field1', 'date'],
|
|
49
|
-
['field2', 'date'],
|
|
50
|
-
]);
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
test('Piped validators', () => {
|
|
54
|
-
const simpleSchema = S.Struct({
|
|
55
|
-
name: S.optional(S.String.pipe(S.nonEmpty(), S.maxLength(10))),
|
|
56
|
-
age: S.Number.pipe(S.negative()),
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
60
|
-
|
|
61
|
-
expect(columns).to.deep.equal([
|
|
62
|
-
['name', 'string'],
|
|
63
|
-
['age', 'number'],
|
|
64
|
-
]);
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
test('nested schema', () => {
|
|
68
|
-
const simpleSchema = S.Struct({
|
|
69
|
-
name: S.String,
|
|
70
|
-
nested: S.Struct({
|
|
71
|
-
age: S.Number,
|
|
72
|
-
}),
|
|
73
|
-
someUnion: S.Union(S.String, S.Number),
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
77
|
-
|
|
78
|
-
expect(columns).to.deep.equal([
|
|
79
|
-
['name', 'string'],
|
|
80
|
-
['nested.age', 'number'],
|
|
81
|
-
['someUnion', 'display'],
|
|
82
|
-
]);
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
test('deeply nested schema', () => {
|
|
86
|
-
const simpleSchema = S.Struct({
|
|
87
|
-
name: S.String,
|
|
88
|
-
nested: S.Struct({
|
|
89
|
-
age: S.Number,
|
|
90
|
-
deeplyNested: S.Struct({
|
|
91
|
-
height: S.Number,
|
|
92
|
-
}),
|
|
93
|
-
}),
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
97
|
-
|
|
98
|
-
expect(columns).to.deep.equal([
|
|
99
|
-
['name', 'string'],
|
|
100
|
-
['nested.age', 'number'],
|
|
101
|
-
['nested.deeplyNested.height', 'number'],
|
|
102
|
-
]);
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
test('even more deeply nested schema with optionals', () => {
|
|
106
|
-
const simpleSchema = S.Struct({
|
|
107
|
-
name: S.String,
|
|
108
|
-
nested: S.Struct({
|
|
109
|
-
age: S.Number,
|
|
110
|
-
deeplyNested: S.optional(
|
|
111
|
-
S.Struct({
|
|
112
|
-
height: S.optional(S.Number),
|
|
113
|
-
}),
|
|
114
|
-
),
|
|
115
|
-
}),
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
119
|
-
|
|
120
|
-
expect(columns).to.deep.equal([
|
|
121
|
-
['name', 'string'],
|
|
122
|
-
['nested.age', 'number'],
|
|
123
|
-
['nested.deeplyNested.height', 'number'],
|
|
124
|
-
]);
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
test('multiple-nested schemata as sibblings', () => {
|
|
128
|
-
const simpleSchema = S.Struct({
|
|
129
|
-
name: S.String,
|
|
130
|
-
nested: S.Struct({
|
|
131
|
-
age: S.Number,
|
|
132
|
-
}),
|
|
133
|
-
nested2: S.Struct({
|
|
134
|
-
height: S.Number,
|
|
135
|
-
}),
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
139
|
-
|
|
140
|
-
expect(columns).to.deep.equal([
|
|
141
|
-
['name', 'string'],
|
|
142
|
-
['nested.age', 'number'],
|
|
143
|
-
['nested2.height', 'number'],
|
|
144
|
-
]);
|
|
145
|
-
});
|
|
146
|
-
});
|
package/src/schema/schema.ts
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { AST, type S } from '@dxos/echo-schema';
|
|
6
|
-
|
|
7
|
-
import { type ColumnType } from './types';
|
|
8
|
-
|
|
9
|
-
// TODO(burdon): Reconcile with react-ui-table.
|
|
10
|
-
export type ClassifiedColumnType = ColumnType | 'display';
|
|
11
|
-
|
|
12
|
-
// TODO(burdon): Rename getX? and return typed array?
|
|
13
|
-
export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
|
|
14
|
-
const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
|
|
15
|
-
const properties = AST.getPropertySignatures(node);
|
|
16
|
-
properties.forEach((prop) => {
|
|
17
|
-
const propName = prop.name.toString();
|
|
18
|
-
|
|
19
|
-
if (prop.isOptional) {
|
|
20
|
-
const unwrappedAst = unwrapOptionProperty(prop);
|
|
21
|
-
if (isStruct(unwrappedAst)) {
|
|
22
|
-
return recurse(unwrappedAst, [...path, propName], acc);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
if (isStruct(prop.type)) {
|
|
27
|
-
recurse(prop.type, [...path, propName], acc);
|
|
28
|
-
} else {
|
|
29
|
-
acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
return acc;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
return recurse(schema.ast, [], []);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
|
|
40
|
-
|
|
41
|
-
const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
|
|
42
|
-
|
|
43
|
-
const unwrapOptionProperty = (prop: AST.PropertySignature) => {
|
|
44
|
-
if (!isOptionalUnion(prop)) {
|
|
45
|
-
throw new Error(`Not an optional property: ${String(prop.name)}`);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if (!AST.isUnion(prop.type)) {
|
|
49
|
-
throw new Error(`Not a union type: ${String(prop.name)}`);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
const [type, _undefinedCase] = prop.type.types;
|
|
53
|
-
return type;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
|
|
57
|
-
if (AST.isStringKeyword(type)) {
|
|
58
|
-
return 'string';
|
|
59
|
-
} else if (AST.isNumberKeyword(type)) {
|
|
60
|
-
return 'number';
|
|
61
|
-
} else if (AST.isBooleanKeyword(type)) {
|
|
62
|
-
return 'boolean';
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
if (AST.isRefinement(type)) {
|
|
66
|
-
return typeToColumn(type.from);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// TODO(zan): How should we be thinking about transformations?
|
|
70
|
-
// - Which of these are we storing in the database?
|
|
71
|
-
// - For types that aren't the 'DateFromString' transformation, should we be using the 'from' or 'to' type?
|
|
72
|
-
|
|
73
|
-
if (AST.isTransformation(type)) {
|
|
74
|
-
const identifier = AST.getIdentifierAnnotation(type);
|
|
75
|
-
if (identifier._tag === 'Some') {
|
|
76
|
-
if (identifier.value === 'DateFromString') {
|
|
77
|
-
return 'date';
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
return 'display';
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
|
|
86
|
-
let type = prop.type;
|
|
87
|
-
if (prop.isOptional) {
|
|
88
|
-
type = unwrapOptionProperty(prop);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
return typeToColumn(type);
|
|
92
|
-
};
|