@dxos/react-ui-table 0.6.13 → 0.6.14-main.7bd9c89
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 +45 -131
- 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 +9 -27
- 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/TableHead.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/hooks/useRowSelection.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} +2 -2
- 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 +22 -20
- package/src/components/ColumnMenu/ColumnMenu.stories.tsx +14 -13
- 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} +44 -43
- package/src/components/ColumnMenu/index.ts +1 -1
- package/src/components/Table/Table.stories.tsx +93 -95
- package/src/components/Table/Table.tsx +10 -15
- package/src/components/Table/TableContext.tsx +13 -7
- package/src/components/Table/TableHead.tsx +0 -1
- package/src/components/Table/index.ts +2 -1
- package/src/components/Table/props.ts +4 -4
- package/src/helpers.tsx +4 -6
- package/src/hooks/useRowSelection.ts +1 -0
- package/src/schema/{SchemaToTable.stories.tsx → Schema.stories.tsx} +11 -23
- package/src/schema/{schemaToColumns.ts → column-utils.ts} +9 -9
- 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 -148
- package/src/schema/schema.ts +0 -93
|
@@ -16,16 +16,16 @@ import {
|
|
|
16
16
|
} from '@tanstack/react-table';
|
|
17
17
|
import React, {
|
|
18
18
|
type ComponentPropsWithoutRef,
|
|
19
|
+
type ReactNode,
|
|
19
20
|
Fragment,
|
|
21
|
+
memo,
|
|
20
22
|
useCallback,
|
|
21
23
|
useEffect,
|
|
22
24
|
useState,
|
|
23
25
|
useContext,
|
|
24
|
-
type ReactNode,
|
|
25
|
-
memo,
|
|
26
26
|
} from 'react';
|
|
27
27
|
|
|
28
|
-
import {
|
|
28
|
+
import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
|
|
29
29
|
import { mx } from '@dxos/react-ui-theme';
|
|
30
30
|
|
|
31
31
|
import { TableBody } from './TableBody';
|
|
@@ -40,11 +40,7 @@ type TableRootProps = { children: ReactNode };
|
|
|
40
40
|
|
|
41
41
|
const TableRoot = ({ children }: TableRootProps) => {
|
|
42
42
|
const contextValue = useTableRootContext();
|
|
43
|
-
return
|
|
44
|
-
<TableRootContext.Provider value={contextValue}>
|
|
45
|
-
<DensityProvider density='fine'>{children}</DensityProvider>
|
|
46
|
-
</TableRootContext.Provider>
|
|
47
|
-
);
|
|
43
|
+
return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
|
|
48
44
|
};
|
|
49
45
|
|
|
50
46
|
type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
|
|
@@ -55,7 +51,6 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
|
|
|
55
51
|
const { scrollContextRef } = useContext(TableRootContext);
|
|
56
52
|
|
|
57
53
|
const classes = mx(classNames, 'overflow-auto');
|
|
58
|
-
|
|
59
54
|
return asChild ? (
|
|
60
55
|
<Slot ref={scrollContextRef} className={classes} {...props}>
|
|
61
56
|
{children}
|
|
@@ -70,17 +65,17 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
|
|
|
70
65
|
export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
|
|
71
66
|
const {
|
|
72
67
|
role,
|
|
73
|
-
onColumnResize,
|
|
74
|
-
columnVisibility,
|
|
75
68
|
header = true,
|
|
76
69
|
rowsSelectable,
|
|
77
70
|
debug,
|
|
78
|
-
onDataSelectionChange,
|
|
79
71
|
pinLastRow,
|
|
72
|
+
columnVisibility,
|
|
73
|
+
onColumnResize,
|
|
74
|
+
onDataSelectionChange,
|
|
80
75
|
} = props;
|
|
81
76
|
|
|
82
|
-
const columns = useDefaultValue(props.columns, []);
|
|
83
|
-
const incomingData = useDefaultValue(props.data, []);
|
|
77
|
+
const columns = useDefaultValue(props.columns, () => []);
|
|
78
|
+
const incomingData = useDefaultValue(props.data, () => []);
|
|
84
79
|
|
|
85
80
|
const [data, setData] = useState([...incomingData]);
|
|
86
81
|
|
|
@@ -110,7 +105,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
|
|
|
110
105
|
// Columns
|
|
111
106
|
columns,
|
|
112
107
|
defaultColumn: {
|
|
113
|
-
size:
|
|
108
|
+
size: 400, // Required in order remove default width.
|
|
114
109
|
maxSize: 1024,
|
|
115
110
|
},
|
|
116
111
|
|
|
@@ -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>
|
|
@@ -4,31 +4,22 @@
|
|
|
4
4
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import { Arbitrary } from '@effect/schema';
|
|
8
8
|
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: 'ui/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)}
|
|
@@ -4,38 +4,38 @@
|
|
|
4
4
|
|
|
5
5
|
import { type ColumnDef } from '@tanstack/react-table';
|
|
6
6
|
|
|
7
|
-
import type
|
|
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":"AAGA,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 * as S from '@effect/schema/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":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,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,KAAK,EAAE,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,148 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { expect } from 'chai';
|
|
6
|
-
|
|
7
|
-
import { S } from '@dxos/echo-schema';
|
|
8
|
-
import { describe, test } from '@dxos/test';
|
|
9
|
-
|
|
10
|
-
import { classifySchemaProperties } from './schema';
|
|
11
|
-
|
|
12
|
-
describe('schema->column-type', () => {
|
|
13
|
-
test('basic', () => {
|
|
14
|
-
const simpleSchema = S.Struct({
|
|
15
|
-
field1: S.String,
|
|
16
|
-
field2: S.Number,
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
20
|
-
|
|
21
|
-
expect(columns).to.deep.equal([
|
|
22
|
-
['field1', 'string'],
|
|
23
|
-
['field2', 'number'],
|
|
24
|
-
]);
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
test('optional properties', () => {
|
|
28
|
-
const simpleSchema = S.Struct({
|
|
29
|
-
field1: S.optional(S.String),
|
|
30
|
-
field2: S.optional(S.Number),
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
34
|
-
|
|
35
|
-
expect(columns).to.deep.equal([
|
|
36
|
-
['field1', 'string'],
|
|
37
|
-
['field2', 'number'],
|
|
38
|
-
]);
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
test('dates', () => {
|
|
42
|
-
const simpleSchema = S.Struct({
|
|
43
|
-
field1: S.Date,
|
|
44
|
-
field2: S.optional(S.Date),
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
48
|
-
|
|
49
|
-
expect(columns).to.deep.equal([
|
|
50
|
-
['field1', 'date'],
|
|
51
|
-
['field2', 'date'],
|
|
52
|
-
]);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
test('Piped validators', () => {
|
|
56
|
-
const simpleSchema = S.Struct({
|
|
57
|
-
name: S.optional(S.String.pipe(S.nonEmpty(), S.maxLength(10))),
|
|
58
|
-
age: S.Number.pipe(S.negative()),
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
62
|
-
|
|
63
|
-
expect(columns).to.deep.equal([
|
|
64
|
-
['name', 'string'],
|
|
65
|
-
['age', 'number'],
|
|
66
|
-
]);
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
test('nested schema', () => {
|
|
70
|
-
const simpleSchema = S.Struct({
|
|
71
|
-
name: S.String,
|
|
72
|
-
nested: S.Struct({
|
|
73
|
-
age: S.Number,
|
|
74
|
-
}),
|
|
75
|
-
someUnion: S.Union(S.String, S.Number),
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
79
|
-
|
|
80
|
-
expect(columns).to.deep.equal([
|
|
81
|
-
['name', 'string'],
|
|
82
|
-
['nested.age', 'number'],
|
|
83
|
-
['someUnion', 'display'],
|
|
84
|
-
]);
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
test('deeply nested schema', () => {
|
|
88
|
-
const simpleSchema = S.Struct({
|
|
89
|
-
name: S.String,
|
|
90
|
-
nested: S.Struct({
|
|
91
|
-
age: S.Number,
|
|
92
|
-
deeplyNested: S.Struct({
|
|
93
|
-
height: S.Number,
|
|
94
|
-
}),
|
|
95
|
-
}),
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
99
|
-
|
|
100
|
-
expect(columns).to.deep.equal([
|
|
101
|
-
['name', 'string'],
|
|
102
|
-
['nested.age', 'number'],
|
|
103
|
-
['nested.deeplyNested.height', 'number'],
|
|
104
|
-
]);
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
test('even more deeply nested schema with optionals', () => {
|
|
108
|
-
const simpleSchema = S.Struct({
|
|
109
|
-
name: S.String,
|
|
110
|
-
nested: S.Struct({
|
|
111
|
-
age: S.Number,
|
|
112
|
-
deeplyNested: S.optional(
|
|
113
|
-
S.Struct({
|
|
114
|
-
height: S.optional(S.Number),
|
|
115
|
-
}),
|
|
116
|
-
),
|
|
117
|
-
}),
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
121
|
-
|
|
122
|
-
expect(columns).to.deep.equal([
|
|
123
|
-
['name', 'string'],
|
|
124
|
-
['nested.age', 'number'],
|
|
125
|
-
['nested.deeplyNested.height', 'number'],
|
|
126
|
-
]);
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
test('multiple-nested schemata as sibblings', () => {
|
|
130
|
-
const simpleSchema = S.Struct({
|
|
131
|
-
name: S.String,
|
|
132
|
-
nested: S.Struct({
|
|
133
|
-
age: S.Number,
|
|
134
|
-
}),
|
|
135
|
-
nested2: S.Struct({
|
|
136
|
-
height: S.Number,
|
|
137
|
-
}),
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
const columns = classifySchemaProperties(simpleSchema);
|
|
141
|
-
|
|
142
|
-
expect(columns).to.deep.equal([
|
|
143
|
-
['name', 'string'],
|
|
144
|
-
['nested.age', 'number'],
|
|
145
|
-
['nested2.height', 'number'],
|
|
146
|
-
]);
|
|
147
|
-
});
|
|
148
|
-
});
|