@dxos/react-ui-form 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446
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 +537 -846
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +506 -807
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +537 -846
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/{ControlSection/ControlSection.d.ts → ControlSection.d.ts} +5 -8
- package/dist/types/src/components/ControlSection.d.ts.map +1 -0
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/Form/ArrayField.d.ts.map +1 -1
- package/dist/types/src/components/Form/Defaults.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.d.ts +4 -6
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +34 -37
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormActions.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormContent.d.ts +11 -14
- package/dist/types/src/components/Form/FormContent.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormContext.d.ts +2 -2
- package/dist/types/src/components/Form/FormContext.d.ts.map +1 -1
- package/dist/types/src/components/Form/Input.d.ts.map +1 -1
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +1 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts.map +1 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +1 -1
- package/dist/types/src/components/Form/factory.d.ts +1 -1
- package/dist/types/src/components/Form/factory.d.ts.map +1 -1
- package/dist/types/src/components/Form/index.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/Test.stories.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +2 -2
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/deprecated/Form.d.ts +2 -2
- package/dist/types/src/components/deprecated/Form.d.ts.map +1 -1
- package/dist/types/src/components/deprecated/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/deprecated/FormInput.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/testing.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +0 -2
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useForm.d.ts +2 -2
- package/dist/types/src/hooks/useForm.d.ts.map +1 -1
- package/dist/types/src/util/field.d.ts.map +1 -1
- package/dist/types/src/util/formatting.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +0 -2
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +25 -26
- package/src/components/{ControlSection/ControlSection.tsx → ControlSection.tsx} +14 -38
- package/src/components/FieldEditor/FieldEditor.stories.tsx +1 -1
- package/src/components/Form/ArrayField.tsx +17 -13
- package/src/components/Form/Defaults.tsx +1 -4
- package/src/components/Form/Form.stories.tsx +43 -92
- package/src/components/Form/Form.tsx +3 -7
- package/src/components/Form/FormContent.tsx +19 -90
- package/src/components/Form/FormContext.tsx +3 -13
- package/src/components/Form/Input.tsx +9 -3
- package/src/components/Form/custom/GeoPointInput.tsx +2 -2
- package/src/components/Form/custom/SelectOptionsInput.stories.tsx +5 -6
- package/src/components/Form/custom/SelectOptionsInput.tsx +2 -2
- package/src/components/Form/factory.tsx +1 -1
- package/src/components/Form/index.ts +1 -0
- package/src/components/ViewEditor/ViewEditor.stories.tsx +4 -5
- package/src/components/ViewEditor/ViewEditor.tsx +20 -23
- package/src/components/deprecated/Form.stories.tsx +6 -6
- package/src/components/deprecated/Form.tsx +6 -6
- package/src/components/deprecated/FormInput.tsx +1 -1
- package/src/components/index.ts +0 -1
- package/src/hooks/index.ts +1 -3
- package/src/hooks/useForm.ts +3 -4
- package/src/util/formatting.ts +3 -15
- package/src/util/index.ts +1 -3
- package/dist/types/src/components/ControlSection/ControlSection.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts +0 -8
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/index.d.ts +0 -2
- package/dist/types/src/components/ControlSection/index.d.ts.map +0 -1
- package/dist/types/src/components/Form/RefField.d.ts +0 -12
- package/dist/types/src/components/Form/RefField.d.ts.map +0 -1
- package/dist/types/src/hooks/useQueryRefOptions.d.ts +0 -23
- package/dist/types/src/hooks/useQueryRefOptions.d.ts.map +0 -1
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts +0 -8
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts.map +0 -1
- package/dist/types/src/util/refs.d.ts +0 -9
- package/dist/types/src/util/refs.d.ts.map +0 -1
- package/dist/types/src/util/schema.d.ts +0 -3
- package/dist/types/src/util/schema.d.ts.map +0 -1
- package/src/components/ControlSection/ControlSection.stories.tsx +0 -29
- package/src/components/ControlSection/index.ts +0 -5
- package/src/components/Form/RefField.tsx +0 -197
- package/src/hooks/useQueryRefOptions.ts +0 -53
- package/src/hooks/useRefQueryLookupHandler.ts +0 -41
- package/src/util/refs.ts +0 -38
- package/src/util/schema.ts +0 -14
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { type Schema } from 'effect';
|
|
1
|
+
import { type Schema as S } from 'effect';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
4
4
|
import { type ViewType } from '@dxos/schema';
|
|
5
5
|
export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
|
|
6
6
|
view: ViewType;
|
|
7
7
|
object: T;
|
|
8
|
-
schema?:
|
|
8
|
+
schema?: S.Schema<T>;
|
|
9
9
|
readonly?: boolean;
|
|
10
10
|
}>;
|
|
11
11
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAoB,KAAK,MAAM,IAAI,CAAC,EAAgB,MAAM,QAAQ,CAAC;AAC1E,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAS,KAAK,eAAe,EAA+C,MAAM,gBAAgB,CAAC;AAE1G,OAAO,EAAE,KAAK,QAAQ,EAAgC,MAAM,cAAc,CAAC;AAE3E,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,eAAe,CAAC;IACnE,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,EAAE,wDAMxC,mBAAmB,CAAC,CAAC,CAAC,sBA0DxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkC,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIlE,QAAA,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkC,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIlE,QAAA,MAAM,YAAY,UAAW,mBAAmB,sBAM/C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/FormInput.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAG7D;;GAEG;AACH,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/FormInput.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAG7D;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,eAAe,CAAC,iBAAiB,CAAC,gBAQnG,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iDAK7B,iBAAiB,CAAC,wBAAwB,CAAC,gBAkC7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,eAAO,MAAM,SAAS,6BAA8B,eAAe,CAAC,iBAAiB,CAAC,sBAIrF,CAAC;AAEF,eAAO,MAAM,UAAU,mCAAoC,eAAe,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC,sBAO5G,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type Schema } from 'effect';
|
|
1
|
+
import { type Schema as S } from 'effect';
|
|
2
2
|
import { type BaseObject } from '@dxos/echo-schema';
|
|
3
3
|
import { type SimpleType, type JsonPath } from '@dxos/effect';
|
|
4
4
|
import { type ValidationError } from '@dxos/schema';
|
|
@@ -29,7 +29,7 @@ export interface FormOptions<T extends BaseObject> {
|
|
|
29
29
|
/**
|
|
30
30
|
* Effect schema (Type literal).
|
|
31
31
|
*/
|
|
32
|
-
schema:
|
|
32
|
+
schema: S.Schema<T>;
|
|
33
33
|
/**
|
|
34
34
|
* Initial values (which may not pass validation).
|
|
35
35
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,KAAK,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAC;AAG5D,OAAO,EAAE,KAAK,UAAU,EAAsB,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAA4C,MAAM,cAAc,CAAC;AAGxG,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxF,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClF,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAmLhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/util/field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAe,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/util/field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAe,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,UAAU,4BAA6B,UAAU,QAsF7D,CAAC;AAGF,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,qBAAsB,4BAA4B,KAAG,MAAM,EAAE,GAAG,SAmCnG,CAAC;AAGF,eAAO,MAAM,kBAAkB,SAAU,MAAM,KAAG,eAGhD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../src/util/formatting.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAe,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEtE,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AAGH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../src/util/formatting.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAe,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEtE,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AAGH,eAAO,MAAM,gBAAgB,oCAAiD,gBAAgB,KAAG,MAyEhG,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAiD,gBAAgB,KAAG,MA8DhG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.7.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-form",
|
|
3
|
-
"version": "0.8.2-
|
|
3
|
+
"version": "0.8.2-staging.7ac8446",
|
|
4
4
|
"description": "Data components.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -28,47 +28,46 @@
|
|
|
28
28
|
"@radix-ui/react-context": "1.1.1",
|
|
29
29
|
"date-fns": "^3.3.1",
|
|
30
30
|
"jsonpath": "^1.1.1",
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/echo-
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
38
|
-
"@dxos/live-object": "0.8.2-
|
|
39
|
-
"@dxos/log": "0.8.2-
|
|
40
|
-
"@dxos/react-
|
|
41
|
-
"@dxos/react-ui-
|
|
42
|
-
"@dxos/react-
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/react-ui-types": "0.8.2-
|
|
45
|
-
"@dxos/schema": "0.8.2-
|
|
46
|
-
"@dxos/util": "0.8.2-main.fbd8ed0"
|
|
31
|
+
"@dxos/debug": "0.8.2-staging.7ac8446",
|
|
32
|
+
"@dxos/echo-schema": "0.8.2-staging.7ac8446",
|
|
33
|
+
"@dxos/effect": "0.8.2-staging.7ac8446",
|
|
34
|
+
"@dxos/echo-db": "0.8.2-staging.7ac8446",
|
|
35
|
+
"@dxos/async": "0.8.2-staging.7ac8446",
|
|
36
|
+
"@dxos/keys": "0.8.2-staging.7ac8446",
|
|
37
|
+
"@dxos/invariant": "0.8.2-staging.7ac8446",
|
|
38
|
+
"@dxos/live-object": "0.8.2-staging.7ac8446",
|
|
39
|
+
"@dxos/log": "0.8.2-staging.7ac8446",
|
|
40
|
+
"@dxos/react-ui-list": "0.8.2-staging.7ac8446",
|
|
41
|
+
"@dxos/react-ui-pickers": "0.8.2-staging.7ac8446",
|
|
42
|
+
"@dxos/react-client": "0.8.2-staging.7ac8446",
|
|
43
|
+
"@dxos/util": "0.8.2-staging.7ac8446",
|
|
44
|
+
"@dxos/react-ui-types": "0.8.2-staging.7ac8446",
|
|
45
|
+
"@dxos/schema": "0.8.2-staging.7ac8446"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
48
|
"@phosphor-icons/react": "^2.1.5",
|
|
50
49
|
"@types/jsonpath": "^0.2.4",
|
|
51
50
|
"@types/react": "~18.2.0",
|
|
52
51
|
"@types/react-dom": "~18.2.0",
|
|
53
|
-
"effect": "3.
|
|
52
|
+
"effect": "3.13.3",
|
|
54
53
|
"fast-check": "^3.19.0",
|
|
55
54
|
"react": "~18.2.0",
|
|
56
55
|
"react-dom": "~18.2.0",
|
|
57
56
|
"vite": "5.4.7",
|
|
58
|
-
"@dxos/echo-signals": "0.8.2-
|
|
59
|
-
"@dxos/random": "0.8.2-
|
|
60
|
-
"@dxos/react-ui": "0.8.2-
|
|
61
|
-
"@dxos/react-ui-syntax-highlighter": "0.8.2-
|
|
62
|
-
"@dxos/react-ui-theme": "0.8.2-
|
|
63
|
-
"@dxos/storybook-utils": "0.8.2-
|
|
57
|
+
"@dxos/echo-signals": "0.8.2-staging.7ac8446",
|
|
58
|
+
"@dxos/random": "0.8.2-staging.7ac8446",
|
|
59
|
+
"@dxos/react-ui": "0.8.2-staging.7ac8446",
|
|
60
|
+
"@dxos/react-ui-syntax-highlighter": "0.8.2-staging.7ac8446",
|
|
61
|
+
"@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
|
|
62
|
+
"@dxos/storybook-utils": "0.8.2-staging.7ac8446"
|
|
64
63
|
},
|
|
65
64
|
"peerDependencies": {
|
|
66
65
|
"@phosphor-icons/react": "^2.1.5",
|
|
67
66
|
"effect": "3.13.3",
|
|
68
67
|
"react": "~18.2.0",
|
|
69
68
|
"react-dom": "~18.2.0",
|
|
70
|
-
"@dxos/react-ui
|
|
71
|
-
"@dxos/react-ui": "0.8.2-
|
|
69
|
+
"@dxos/react-ui": "0.8.2-staging.7ac8446",
|
|
70
|
+
"@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
|
|
72
71
|
},
|
|
73
72
|
"publishConfig": {
|
|
74
73
|
"access": "public"
|
|
@@ -2,45 +2,19 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { type
|
|
5
|
+
import React, { type PropsWithChildren } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
Button,
|
|
9
|
-
type ButtonProps,
|
|
10
|
-
type Label,
|
|
11
|
-
Input,
|
|
12
|
-
type ThemedClassName,
|
|
13
|
-
toLocalizedString,
|
|
14
|
-
useTranslation,
|
|
15
|
-
} from '@dxos/react-ui';
|
|
16
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
7
|
+
import { type Label, toLocalizedString, useTranslation, Input } from '@dxos/react-ui';
|
|
17
8
|
|
|
18
|
-
import { translationKey } from '
|
|
9
|
+
import { translationKey } from '../translations';
|
|
19
10
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
|
|
23
|
-
return (
|
|
24
|
-
<div role='none' className={mx('pli-2', classNames)} {...props}>
|
|
25
|
-
{children}
|
|
26
|
-
</div>
|
|
27
|
-
);
|
|
28
|
-
};
|
|
11
|
+
// TODO(wittjosiah): Copied from @dxos/plugin-client. Reconcile/factor out.
|
|
29
12
|
|
|
30
13
|
export type ControlSectionProps = PropsWithChildren<{
|
|
31
14
|
title: Label;
|
|
32
15
|
description?: Label;
|
|
33
16
|
}>;
|
|
34
17
|
|
|
35
|
-
export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
|
|
36
|
-
return (
|
|
37
|
-
<>
|
|
38
|
-
<ControlSectionHeading title={title} description={description} />
|
|
39
|
-
{children}
|
|
40
|
-
</>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
18
|
export const ControlSectionHeading = ({ title, description }: Omit<ControlSectionProps, 'children'>) => {
|
|
45
19
|
const { t } = useTranslation(translationKey);
|
|
46
20
|
return (
|
|
@@ -53,17 +27,19 @@ export const ControlSectionHeading = ({ title, description }: Omit<ControlSectio
|
|
|
53
27
|
);
|
|
54
28
|
};
|
|
55
29
|
|
|
56
|
-
export const
|
|
57
|
-
return
|
|
30
|
+
export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
|
|
31
|
+
return (
|
|
32
|
+
<>
|
|
33
|
+
<ControlSectionHeading title={title} description={description} />
|
|
34
|
+
{children}
|
|
35
|
+
</>
|
|
36
|
+
);
|
|
58
37
|
};
|
|
59
38
|
|
|
60
|
-
export type ControlGroupProps =
|
|
39
|
+
export type ControlGroupProps = PropsWithChildren<{}>;
|
|
61
40
|
|
|
62
|
-
export const ControlGroup = ({ children
|
|
63
|
-
<div
|
|
64
|
-
role='none'
|
|
65
|
-
className={mx('group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4', classNames)}
|
|
66
|
-
>
|
|
41
|
+
export const ControlGroup = ({ children }: ControlGroupProps) => (
|
|
42
|
+
<div role='none' className='group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'>
|
|
67
43
|
{children}
|
|
68
44
|
</div>
|
|
69
45
|
);
|
|
@@ -37,7 +37,7 @@ const meta: Meta<StoryProps> = {
|
|
|
37
37
|
title: 'ui/react-ui-form/FieldEditor',
|
|
38
38
|
component: FieldEditor,
|
|
39
39
|
render: DefaultStory,
|
|
40
|
-
decorators: [withLayout({ fullscreen: true }), withTheme],
|
|
40
|
+
decorators: [withLayout({ fullscreen: true, tooltips: true }), withTheme],
|
|
41
41
|
parameters: {
|
|
42
42
|
translations,
|
|
43
43
|
},
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { pipe } from 'effect';
|
|
6
6
|
import { capitalize } from 'effect/String';
|
|
7
|
-
import React, { useCallback } from 'react';
|
|
7
|
+
import React, { useCallback, useMemo } from 'react';
|
|
8
8
|
|
|
9
|
+
import { AST } from '@dxos/echo-schema';
|
|
9
10
|
import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
|
|
10
11
|
import { invariant } from '@dxos/invariant';
|
|
11
12
|
import { IconButton, useTranslation } from '@dxos/react-ui';
|
|
@@ -17,7 +18,6 @@ import { FormField } from './FormContent';
|
|
|
17
18
|
import { useFormValues, type FormInputStateProps } from './FormContext';
|
|
18
19
|
import { InputHeader, type InputComponent } from './Input';
|
|
19
20
|
import { translationKey } from '../../translations';
|
|
20
|
-
import { findArrayElementType } from '../../util';
|
|
21
21
|
|
|
22
22
|
const padding = 'px-2';
|
|
23
23
|
|
|
@@ -33,17 +33,16 @@ type ArrayFieldProps = {
|
|
|
33
33
|
export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
|
|
34
34
|
const { t } = useTranslation(translationKey);
|
|
35
35
|
const { ast, name, type, title } = property;
|
|
36
|
-
|
|
37
|
-
// It doesn't become live until another field is touched, but that's better than the whole form crashing.
|
|
38
|
-
const values = (useFormValues(path ?? []) ?? []) as any[];
|
|
36
|
+
const values = useFormValues(path ?? []) as any[];
|
|
39
37
|
invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
|
|
40
38
|
const label = title ?? pipe(name, capitalize);
|
|
41
39
|
|
|
42
|
-
const
|
|
40
|
+
const tupleType = findNode(ast, AST.isTupleType);
|
|
41
|
+
const elementType = (tupleType as AST.TupleType | undefined)?.rest[0]?.type;
|
|
43
42
|
|
|
44
|
-
const getDefaultObjectValue = (typeNode:
|
|
43
|
+
const getDefaultObjectValue = (typeNode: AST.AST): any => {
|
|
45
44
|
const baseNode = findNode(typeNode, isDiscriminatedUnion);
|
|
46
|
-
const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode,
|
|
45
|
+
const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, AST.isTypeLiteral);
|
|
47
46
|
if (!typeLiteral) {
|
|
48
47
|
return {};
|
|
49
48
|
}
|
|
@@ -51,12 +50,17 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
|
|
|
51
50
|
return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
|
|
52
51
|
};
|
|
53
52
|
|
|
54
|
-
const
|
|
55
|
-
type === 'object' && elementType
|
|
53
|
+
const newValue = useMemo(() => {
|
|
54
|
+
if (type === 'object' && elementType) {
|
|
55
|
+
return getDefaultObjectValue(elementType);
|
|
56
|
+
} else {
|
|
57
|
+
return SimpleType.getDefaultValue(type);
|
|
58
|
+
}
|
|
59
|
+
}, [type, elementType]);
|
|
56
60
|
|
|
57
61
|
const handleAdd = useCallback(() => {
|
|
58
|
-
inputProps.onValueChange(type, [...values,
|
|
59
|
-
}, [type, elementType, inputProps, values]);
|
|
62
|
+
inputProps.onValueChange(type, [...values, newValue]);
|
|
63
|
+
}, [type, elementType, inputProps, newValue, values]);
|
|
60
64
|
|
|
61
65
|
const handleRemove = useCallback(
|
|
62
66
|
(index: number) => {
|
|
@@ -107,9 +107,6 @@ export const SelectInput = ({
|
|
|
107
107
|
}: SelectInputOptions) => {
|
|
108
108
|
const { status, error } = getStatus();
|
|
109
109
|
|
|
110
|
-
const value = getValue() as string | undefined;
|
|
111
|
-
const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
|
|
112
|
-
|
|
113
110
|
return (
|
|
114
111
|
<Input.Root validationValence={status}>
|
|
115
112
|
{!inputOnly && (
|
|
@@ -117,7 +114,7 @@ export const SelectInput = ({
|
|
|
117
114
|
<Input.Label>{label}</Input.Label>
|
|
118
115
|
</InputHeader>
|
|
119
116
|
)}
|
|
120
|
-
<Select.Root value={
|
|
117
|
+
<Select.Root value={getValue()} onValueChange={(value) => onValueChange(type, value)}>
|
|
121
118
|
{/* TODO(burdon): Placeholder not working? */}
|
|
122
119
|
<Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
|
|
123
120
|
<Select.Portal>
|
|
@@ -5,12 +5,9 @@
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
6
|
|
|
7
7
|
import { type Meta, type StoryObj } from '@storybook/react';
|
|
8
|
-
import { Schema, SchemaAST } from 'effect';
|
|
9
8
|
import React, { useCallback, useState } from 'react';
|
|
10
9
|
|
|
11
|
-
import {
|
|
12
|
-
import { type BaseObject, Expando, Format, getDXN, Ref, type TypeAnnotation } from '@dxos/echo-schema';
|
|
13
|
-
import { live } from '@dxos/live-object';
|
|
10
|
+
import { AST, type BaseObject, Format, S } from '@dxos/echo-schema';
|
|
14
11
|
import { Testing } from '@dxos/schema/testing';
|
|
15
12
|
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
16
13
|
|
|
@@ -19,27 +16,25 @@ import { Form, type FormProps } from './Form';
|
|
|
19
16
|
import translations from '../../translations';
|
|
20
17
|
import { TestLayout, TestPanel } from '../testing';
|
|
21
18
|
|
|
22
|
-
const AddressSchema =
|
|
23
|
-
street:
|
|
24
|
-
city:
|
|
25
|
-
zip:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
location: Schema.optional(Format.GeoPoint.annotations({ [SchemaAST.TitleAnnotationId]: 'Location' })),
|
|
29
|
-
}).annotations({ [SchemaAST.TitleAnnotationId]: 'Address' });
|
|
19
|
+
const AddressSchema = S.Struct({
|
|
20
|
+
street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
|
|
21
|
+
city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
|
|
22
|
+
zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
|
|
23
|
+
location: S.optional(Format.GeoPoint.annotations({ [AST.TitleAnnotationId]: 'Location' })),
|
|
24
|
+
}).annotations({ [AST.TitleAnnotationId]: 'Address' });
|
|
30
25
|
|
|
31
26
|
// TODO(burdon): Translations?
|
|
32
|
-
const TestSchema =
|
|
33
|
-
name:
|
|
34
|
-
active:
|
|
35
|
-
rank:
|
|
36
|
-
website:
|
|
37
|
-
address:
|
|
38
|
-
}).pipe(
|
|
27
|
+
const TestSchema = S.Struct({
|
|
28
|
+
name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
|
|
29
|
+
active: S.optional(S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Active' })),
|
|
30
|
+
rank: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Rank' })),
|
|
31
|
+
website: S.optional(Format.URL.annotations({ [AST.TitleAnnotationId]: 'Website' })),
|
|
32
|
+
address: S.optional(AddressSchema),
|
|
33
|
+
}).pipe(S.mutable);
|
|
39
34
|
|
|
40
|
-
type TestType =
|
|
35
|
+
type TestType = S.Schema.Type<typeof TestSchema>;
|
|
41
36
|
|
|
42
|
-
type StoryProps<T extends BaseObject> = { schema:
|
|
37
|
+
type StoryProps<T extends BaseObject> = { schema: S.Schema<T> } & FormProps<T>;
|
|
43
38
|
|
|
44
39
|
const DefaultStory = <T extends BaseObject>({ schema, values: initialValues, ...props }: StoryProps<T>) => {
|
|
45
40
|
const [values, setValues] = useState(initialValues);
|
|
@@ -60,7 +55,7 @@ const meta: Meta<StoryProps<any>> = {
|
|
|
60
55
|
title: 'ui/react-ui-form/Form',
|
|
61
56
|
component: Form,
|
|
62
57
|
render: DefaultStory,
|
|
63
|
-
decorators: [withLayout({ fullscreen: true }), withTheme],
|
|
58
|
+
decorators: [withLayout({ fullscreen: true, tooltips: true }), withTheme],
|
|
64
59
|
parameters: {
|
|
65
60
|
translations,
|
|
66
61
|
},
|
|
@@ -83,9 +78,9 @@ export const Default: Story<TestType> = {
|
|
|
83
78
|
},
|
|
84
79
|
};
|
|
85
80
|
|
|
86
|
-
export const
|
|
81
|
+
export const Org: Story<Testing.Org> = {
|
|
87
82
|
args: {
|
|
88
|
-
schema: Testing.
|
|
83
|
+
schema: Testing.OrgSchema,
|
|
89
84
|
values: {
|
|
90
85
|
name: 'DXOS',
|
|
91
86
|
// website: 'https://dxos.org',
|
|
@@ -93,9 +88,9 @@ export const Organization: Story<Testing.Organization> = {
|
|
|
93
88
|
},
|
|
94
89
|
};
|
|
95
90
|
|
|
96
|
-
export const
|
|
91
|
+
export const OrgAutoSave: Story<Testing.Org> = {
|
|
97
92
|
args: {
|
|
98
|
-
schema: Testing.
|
|
93
|
+
schema: Testing.OrgSchema,
|
|
99
94
|
values: {
|
|
100
95
|
name: 'DXOS',
|
|
101
96
|
// website: 'https://dxos.org',
|
|
@@ -120,24 +115,22 @@ export const OrganizationAutoSave: Story<Testing.Organization> = {
|
|
|
120
115
|
// TODO(burdon): Move into separate storybook and use test types.
|
|
121
116
|
//
|
|
122
117
|
|
|
123
|
-
const ShapeSchema =
|
|
124
|
-
shape:
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
type:
|
|
128
|
-
radius:
|
|
118
|
+
const ShapeSchema = S.Struct({
|
|
119
|
+
shape: S.optional(
|
|
120
|
+
S.Union(
|
|
121
|
+
S.Struct({
|
|
122
|
+
type: S.Literal('circle').annotations({ [AST.TitleAnnotationId]: 'Type' }),
|
|
123
|
+
radius: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Radius' })),
|
|
129
124
|
}),
|
|
130
|
-
|
|
131
|
-
type:
|
|
132
|
-
size:
|
|
133
|
-
Schema.Number.pipe(Schema.nonNegative()).annotations({ [SchemaAST.TitleAnnotationId]: 'Size' }),
|
|
134
|
-
),
|
|
125
|
+
S.Struct({
|
|
126
|
+
type: S.Literal('square').annotations({ [AST.TitleAnnotationId]: 'Type' }),
|
|
127
|
+
size: S.optional(S.Number.pipe(S.nonNegative()).annotations({ [AST.TitleAnnotationId]: 'Size' })),
|
|
135
128
|
}),
|
|
136
|
-
).annotations({ [
|
|
129
|
+
).annotations({ [AST.TitleAnnotationId]: 'Shape' }),
|
|
137
130
|
),
|
|
138
|
-
}).pipe(
|
|
131
|
+
}).pipe(S.mutable);
|
|
139
132
|
|
|
140
|
-
type ShapeType =
|
|
133
|
+
type ShapeType = S.Schema.Type<typeof ShapeSchema>;
|
|
141
134
|
|
|
142
135
|
type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
|
|
143
136
|
|
|
@@ -183,12 +176,12 @@ export const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps> = {
|
|
|
183
176
|
},
|
|
184
177
|
};
|
|
185
178
|
|
|
186
|
-
const ArraysSchema =
|
|
187
|
-
names:
|
|
188
|
-
addresses:
|
|
189
|
-
}).pipe(
|
|
179
|
+
const ArraysSchema = S.Struct({
|
|
180
|
+
names: S.Array(S.String.pipe(S.nonEmptyString())),
|
|
181
|
+
addresses: S.Array(AddressSchema),
|
|
182
|
+
}).pipe(S.mutable);
|
|
190
183
|
|
|
191
|
-
type ArraysType =
|
|
184
|
+
type ArraysType = S.Schema.Type<typeof ArraysSchema>;
|
|
192
185
|
|
|
193
186
|
const ArraysStory = ({ values: initialValues }: FormProps<ArraysType>) => {
|
|
194
187
|
const [values, setValues] = useState(initialValues);
|
|
@@ -215,13 +208,13 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
|
|
|
215
208
|
},
|
|
216
209
|
};
|
|
217
210
|
|
|
218
|
-
const ColorSchema =
|
|
219
|
-
color:
|
|
220
|
-
[
|
|
211
|
+
const ColorSchema = S.Struct({
|
|
212
|
+
color: S.Union(S.Literal('red'), S.Literal('green'), S.Literal('blue')).annotations({
|
|
213
|
+
[AST.TitleAnnotationId]: 'Color',
|
|
221
214
|
}),
|
|
222
|
-
}).pipe(
|
|
215
|
+
}).pipe(S.mutable);
|
|
223
216
|
|
|
224
|
-
type ColorType =
|
|
217
|
+
type ColorType = S.Schema.Type<typeof ColorSchema>;
|
|
225
218
|
|
|
226
219
|
const EnumStory = ({ values: initialValues }: FormProps<ColorType>) => {
|
|
227
220
|
const [values, setValues] = useState(initialValues);
|
|
@@ -246,45 +239,3 @@ export const Enum: StoryObj<FormProps<ColorType>> = {
|
|
|
246
239
|
},
|
|
247
240
|
},
|
|
248
241
|
};
|
|
249
|
-
|
|
250
|
-
const RefSchema = Schema.Struct({
|
|
251
|
-
contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
|
|
252
|
-
optionalContact: Schema.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
|
|
253
|
-
refArray: Schema.optional(Schema.Array(Ref(ContactType))),
|
|
254
|
-
unknownExpando: Schema.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
|
|
255
|
-
});
|
|
256
|
-
|
|
257
|
-
const RefStory = ({ values: initialValues }: FormProps<any>) => {
|
|
258
|
-
const [values, setValues] = useState(initialValues);
|
|
259
|
-
const handleSave = useCallback<NonNullable<FormProps<any>['onSave']>>((values) => {
|
|
260
|
-
setValues(values);
|
|
261
|
-
}, []);
|
|
262
|
-
|
|
263
|
-
const contact1 = live(ContactType, { identifiers: [] });
|
|
264
|
-
const contact2 = live(ContactType, { identifiers: [] });
|
|
265
|
-
|
|
266
|
-
const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
|
|
267
|
-
switch (typeInfo.typename) {
|
|
268
|
-
case ContactType.typename:
|
|
269
|
-
return [
|
|
270
|
-
{ dxn: getDXN(contact1)!, label: 'John Coltraine' },
|
|
271
|
-
{ dxn: getDXN(contact2)!, label: 'Erykah Badu' },
|
|
272
|
-
];
|
|
273
|
-
default:
|
|
274
|
-
return [];
|
|
275
|
-
}
|
|
276
|
-
}, []);
|
|
277
|
-
|
|
278
|
-
return (
|
|
279
|
-
<TestLayout json={{ values, schema: RefSchema.ast.toJSON() }}>
|
|
280
|
-
<TestPanel>
|
|
281
|
-
<Form schema={RefSchema} values={values} onSave={handleSave} onQueryRefOptions={onQueryRefOptions} />
|
|
282
|
-
</TestPanel>
|
|
283
|
-
</TestLayout>
|
|
284
|
-
);
|
|
285
|
-
};
|
|
286
|
-
|
|
287
|
-
export const Refs: StoryObj<FormProps<ContactType>> = {
|
|
288
|
-
render: RefStory,
|
|
289
|
-
args: { values: {} },
|
|
290
|
-
};
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { type Schema } from 'effect';
|
|
6
5
|
import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
|
|
7
6
|
|
|
8
|
-
import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
|
|
7
|
+
import { type BaseObject, type S, type PropertyKey } from '@dxos/echo-schema';
|
|
9
8
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
10
9
|
import { mx } from '@dxos/react-ui-theme';
|
|
11
10
|
import { type SchemaProperty } from '@dxos/schema';
|
|
@@ -14,13 +13,13 @@ import { FormActions } from './FormActions';
|
|
|
14
13
|
import { FormFields } from './FormContent';
|
|
15
14
|
import { FormProvider } from './FormContext';
|
|
16
15
|
import { type InputProps, type InputComponent } from './Input';
|
|
17
|
-
import { type FormOptions
|
|
16
|
+
import { type FormOptions } from '../../hooks';
|
|
18
17
|
|
|
19
18
|
export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
|
|
20
19
|
|
|
21
20
|
export type ComponentLookup = (args: {
|
|
22
21
|
prop: string;
|
|
23
|
-
schema:
|
|
22
|
+
schema: S.Schema<any>;
|
|
24
23
|
inputProps: InputProps;
|
|
25
24
|
}) => ReactElement | undefined;
|
|
26
25
|
|
|
@@ -42,7 +41,6 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
|
|
|
42
41
|
autoSave?: boolean;
|
|
43
42
|
testId?: string;
|
|
44
43
|
onCancel?: () => void;
|
|
45
|
-
onQueryRefOptions?: QueryRefOptions;
|
|
46
44
|
lookupComponent?: ComponentLookup;
|
|
47
45
|
/**
|
|
48
46
|
* Map of custom renderers for specific properties.
|
|
@@ -67,7 +65,6 @@ export const Form = <T extends BaseObject>({
|
|
|
67
65
|
onValidate,
|
|
68
66
|
onSave,
|
|
69
67
|
onCancel,
|
|
70
|
-
onQueryRefOptions,
|
|
71
68
|
lookupComponent,
|
|
72
69
|
Custom,
|
|
73
70
|
}: FormProps<T>) => {
|
|
@@ -103,7 +100,6 @@ export const Form = <T extends BaseObject>({
|
|
|
103
100
|
readonly={readonly}
|
|
104
101
|
filter={filter}
|
|
105
102
|
sort={sort}
|
|
106
|
-
onQueryRefOptions={onQueryRefOptions}
|
|
107
103
|
lookupComponent={lookupComponent}
|
|
108
104
|
Custom={Custom}
|
|
109
105
|
/>
|