@dxos/react-ui-form 0.7.4 → 0.7.5-feature-compute.4d9d99a

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.
Files changed (49) hide show
  1. package/dist/lib/browser/index.mjs +292 -221
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +380 -308
  5. package/dist/lib/node/index.cjs.map +4 -4
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +292 -221
  8. package/dist/lib/node-esm/index.mjs.map +4 -4
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +2 -2
  11. package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
  12. package/dist/types/src/components/Form/Defaults.d.ts.map +1 -1
  13. package/dist/types/src/components/Form/Form.d.ts +10 -4
  14. package/dist/types/src/components/Form/Form.d.ts.map +1 -1
  15. package/dist/types/src/components/Form/Form.stories.d.ts +5 -0
  16. package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
  17. package/dist/types/src/components/Form/Input.d.ts +3 -3
  18. package/dist/types/src/components/Form/Input.d.ts.map +1 -1
  19. package/dist/types/src/components/Form/{Custom.d.ts → custom/GeoPointInput.d.ts} +3 -3
  20. package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +1 -0
  21. package/dist/types/src/components/Form/custom/TupleInput.d.ts +7 -0
  22. package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +1 -0
  23. package/dist/types/src/components/Form/custom/index.d.ts +3 -0
  24. package/dist/types/src/components/Form/custom/index.d.ts.map +1 -0
  25. package/dist/types/src/components/Form/factory.d.ts.map +1 -1
  26. package/dist/types/src/components/Form/index.d.ts +2 -2
  27. package/dist/types/src/components/Form/index.d.ts.map +1 -1
  28. package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +6 -5
  29. package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
  30. package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
  31. package/dist/types/src/hooks/useForm.d.ts +10 -11
  32. package/dist/types/src/hooks/useForm.d.ts.map +1 -1
  33. package/dist/types/tsconfig.tsbuildinfo +1 -0
  34. package/package.json +26 -26
  35. package/src/components/FieldEditor/FieldEditor.stories.tsx +2 -2
  36. package/src/components/FieldEditor/FieldEditor.tsx +75 -50
  37. package/src/components/Form/Defaults.tsx +2 -0
  38. package/src/components/Form/Form.stories.tsx +33 -1
  39. package/src/components/Form/Form.tsx +33 -5
  40. package/src/components/Form/Input.tsx +3 -3
  41. package/src/components/Form/{Custom.tsx → custom/GeoPointInput.tsx} +4 -16
  42. package/src/components/Form/custom/TupleInput.tsx +53 -0
  43. package/src/components/Form/custom/index.ts +6 -0
  44. package/src/components/Form/factory.tsx +2 -2
  45. package/src/components/Form/index.ts +3 -2
  46. package/src/components/ViewEditor/ViewEditor.stories.tsx +30 -8
  47. package/src/components/ViewEditor/ViewEditor.tsx +13 -8
  48. package/src/hooks/useForm.ts +35 -54
  49. package/dist/types/src/components/Form/Custom.d.ts.map +0 -1
package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FieldEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldEditor/FieldEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,4DAA6D,gBAAgB,6BAmIpG,CAAC"}
1
+ {"version":3,"file":"FieldEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldEditor/FieldEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,4DAA6D,gBAAgB,6BA2JpG,CAAC"}
package/dist/types/src/components/Form/Defaults.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Defaults.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Defaults.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,UAAU,4GAW3C,UAAU,CAAC,CAAC,CAAC,sBAoBf,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,4GAW7C,UAAU,CAAC,CAAC,CAAC,sBAqBf,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,UAAU,6EAQ9C,UAAU,CAAC,CAAC,CAAC,sBAiBf,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACrE,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,6GAW7C,kBAAkB,CAAC,CAAC,CAAC,sBA6BvB,CAAC"}
1
+ {"version":3,"file":"Defaults.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Defaults.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,UAAU,4GAW3C,UAAU,CAAC,CAAC,CAAC,sBAoBf,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,4GAW7C,UAAU,CAAC,CAAC,CAAC,sBAqBf,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,UAAU,6EAQ9C,UAAU,CAAC,CAAC,CAAC,sBAmBf,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACrE,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,6GAW7C,kBAAkB,CAAC,CAAC,CAAC,sBA6BvB,CAAC"}
package/dist/types/src/components/Form/Form.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
- import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
2
+ import { type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
3
3
  import { type ThemedClassName } from '@dxos/react-ui';
4
4
  import { type SchemaProperty } from '@dxos/schema';
5
- import { type InputComponent } from './Input';
5
+ import { type InputProps, type InputComponent } from './Input';
6
6
  import { type FormOptions } from '../../hooks';
7
7
  export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
8
8
  export type FormProps<T extends BaseObject> = ThemedClassName<{
9
- values: T;
9
+ values: Partial<T>;
10
10
  /** Path to the current object from the root. Used with nested forms. */
11
11
  path?: string[];
12
12
  autoFocus?: boolean;
@@ -16,15 +16,21 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
16
16
  autoSave?: boolean;
17
17
  testId?: string;
18
18
  onCancel?: () => void;
19
+ lookupComponent?: (args: {
20
+ prop: string;
21
+ schema: S.Schema<any>;
22
+ inputProps: InputProps<T>;
23
+ }) => React.ReactElement | undefined;
19
24
  /**
20
25
  * Map of custom renderers for specific properties.
26
+ * @deprecated Use lookupComponent instead.
21
27
  */
22
28
  Custom?: Partial<Record<string, InputComponent<T>>>;
23
29
  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>>;
24
30
  /**
25
31
  * General purpose form component that displays field controls based on the given schema.
26
32
  */
27
- export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom, }: FormProps<T>) => React.JSX.Element;
33
+ export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom, }: FormProps<T>) => React.JSX.Element;
28
34
  type FormActionsProps = {
29
35
  readonly?: boolean;
30
36
  canSubmit: boolean;
package/dist/types/src/components/Form/Form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IAEE,MAAM,EAAE,CAAC,CAAC;IAEV,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,yJAetC,SAAS,CAAC,CAAC,CAAC,sBAwId,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}
1
+ {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAE,CAAC,EAAE,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE5E,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IACE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;KAC3B,KAAK,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,0KAgBtC,SAAS,CAAC,CAAC,CAAC,sBA8Jd,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}
package/dist/types/src/components/Form/Form.stories.d.ts CHANGED
@@ -47,4 +47,9 @@ declare const ArraysSchema: S.mutable<S.Struct<{
47
47
  }>>;
48
48
  type ArraysType = S.Schema.Type<typeof ArraysSchema>;
49
49
  export declare const Arrays: StoryObj<FormProps<ArraysType>>;
50
+ declare const ColorSchema: S.mutable<S.Struct<{
51
+ color: S.Union<[S.Literal<["red"]>, S.Literal<["green"]>, S.Literal<["blue"]>]>;
52
+ }>>;
53
+ type ColorType = S.Schema.Type<typeof ColorSchema>;
54
+ export declare const Enum: StoryObj<FormProps<ColorType>>;
50
55
  //# sourceMappingURL=Form.stories.d.ts.map
package/dist/types/src/components/Form/Form.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC"}
1
+ {"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC;AAEF,QAAA,MAAM,WAAW;;GAIC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAiBnD,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAO/C,CAAC"}
package/dist/types/src/components/Form/Input.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import React, { type FC, type PropsWithChildren } from 'react';
2
- import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
2
+ import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
3
3
  import { type SimpleType } from '@dxos/effect';
4
- import { type FormPath, type FormHandler } from '../../hooks';
4
+ import { type FormHandler } from '../../hooks';
5
5
  /**
6
6
  * Props passed to input components.
7
7
  */
8
8
  export type InputProps<T extends BaseObject> = {
9
- property: FormPath<T>;
9
+ property: PropertyKey<T>;
10
10
  type: SimpleType;
11
11
  format?: FormatEnum;
12
12
  label?: string;
package/dist/types/src/components/Form/Input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
package/dist/types/src/components/Form/{Custom.d.ts → custom/GeoPointInput.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { type BaseObject } from '@dxos/echo-schema';
3
- import { type InputProps } from './Input';
4
- export declare const GeiPointInput: <T extends BaseObject>({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T>) => React.JSX.Element;
5
- //# sourceMappingURL=Custom.d.ts.map
3
+ import { type InputProps } from '../Input';
4
+ export declare const GeoPointInput: <T extends BaseObject>({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T>) => React.JSX.Element;
5
+ //# sourceMappingURL=GeoPointInput.d.ts.map
package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GeoPointInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/GeoPointInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAKnE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,oFAS/C,UAAU,CAAC,CAAC,CAAC,sBA8Bf,CAAC"}
package/dist/types/src/components/Form/custom/TupleInput.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { type BaseObject } from '@dxos/echo-schema';
3
+ import { type InputProps } from '../Input';
4
+ export declare const TupleInput: <T extends BaseObject>({ binding, property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T> & {
5
+ binding: string[];
6
+ }) => React.JSX.Element;
7
+ //# sourceMappingURL=TupleInput.d.ts.map
package/dist/types/src/components/Form/custom/TupleInput.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TupleInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/TupleInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAIxD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,UAAU,6FAU5C,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sBA2BvC,CAAC"}
package/dist/types/src/components/Form/custom/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './GeoPointInput';
2
+ export * from './TupleInput';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/types/src/components/Form/custom/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
package/dist/types/src/components/Form/factory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,UAAU,QAC9C,UAAU,WACP,UAAU,KAClB,cAAc,CAAC,CAAC,CAAC,GAAG,SActB,CAAC"}
1
+ {"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,UAAU,QAC9C,UAAU,WACP,UAAU,KAClB,cAAc,CAAC,CAAC,CAAC,GAAG,SActB,CAAC"}
package/dist/types/src/components/Form/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export * from './Form';
2
- export * from './Custom';
1
+ export * from './custom';
3
2
  export * from './Defaults';
3
+ export * from './Form';
4
4
  export * from './Input';
5
5
  //# sourceMappingURL=index.d.ts.map
package/dist/types/src/components/Form/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AAEzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
package/dist/types/src/components/ViewEditor/ViewEditor.d.ts CHANGED
@@ -1,18 +1,19 @@
1
1
  import React from 'react';
2
- import { type SchemaResolver } from '@dxos/echo-db';
3
- import { type MutableSchema } from '@dxos/echo-schema';
2
+ import { type SchemaRegistry } from '@dxos/echo-db';
3
+ import { type EchoSchema } from '@dxos/echo-schema';
4
4
  import { type ThemedClassName } from '@dxos/react-ui';
5
5
  import { type ViewType } from '@dxos/schema';
6
6
  export type ViewEditorProps = ThemedClassName<{
7
- schema: MutableSchema;
7
+ schema: EchoSchema;
8
8
  view: ViewType;
9
- registry?: SchemaResolver;
9
+ registry?: SchemaRegistry;
10
10
  readonly?: boolean;
11
11
  showHeading?: boolean;
12
+ onTypenameChanged: (typename: string) => void;
12
13
  onDelete: (fieldId: string) => void;
13
14
  }>;
14
15
  /**
15
16
  * Schema-based object form.
16
17
  */
17
- export declare const ViewEditor: ({ classNames, schema, view, registry, readonly, showHeading, onDelete, }: ViewEditorProps) => React.JSX.Element;
18
+ export declare const ViewEditor: ({ classNames, schema, view, registry, readonly, showHeading, onTypenameChanged, onDelete, }: ViewEditorProps) => React.JSX.Element;
18
19
  //# sourceMappingURL=ViewEditor.d.ts.map
package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,aAAa,EAAK,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAQpB,eAAe,sBA2GjB,CAAC"}
1
+ {"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,UAAU,EAAK,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,gGASpB,eAAe,sBA8GjB,CAAC"}
package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA0C1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAQjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
1
+ {"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAU5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+D1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAQjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
package/dist/types/src/hooks/useForm.d.ts CHANGED
@@ -3,23 +3,22 @@ import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
3
3
  import { type SimpleType, type S } from '@dxos/effect';
4
4
  import { type ValidationError } from '@dxos/schema';
5
5
  import { type MaybePromise } from '@dxos/util';
6
- export type FormPath<T extends object = {}> = PropertyKey<T> | `${PropertyKey<T>}.${number}`;
7
6
  /**
8
7
  * Return type from `useForm` hook.
9
8
  */
10
9
  export type FormHandler<T extends BaseObject> = {
11
- values: T;
12
- errors: Record<FormPath<T>, string>;
13
- touched: Record<FormPath<T>, boolean>;
14
- changed: Record<FormPath<T>, boolean>;
10
+ values: Partial<T>;
11
+ errors: Record<PropertyKey<T>, string>;
12
+ touched: Record<PropertyKey<T>, boolean>;
13
+ changed: Record<PropertyKey<T>, boolean>;
15
14
  canSave: boolean;
16
15
  handleSave: () => void;
17
- getStatus: (property: FormPath<T>) => {
16
+ getStatus: (property: PropertyKey<T>) => {
18
17
  status?: 'error';
19
18
  error?: string;
20
19
  };
21
- getValue: <V>(property: FormPath<T>) => V;
22
- onValueChange: <V>(property: FormPath<T>, type: SimpleType, value: V) => void;
20
+ getValue: <V>(property: PropertyKey<T>) => V | undefined;
21
+ onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
23
22
  onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
24
23
  };
25
24
  /**
@@ -27,19 +26,19 @@ export type FormHandler<T extends BaseObject> = {
27
26
  */
28
27
  export interface FormOptions<T extends BaseObject> {
29
28
  /**
30
- * Effect schema.
29
+ * Effect schema (Type literal).
31
30
  */
32
31
  schema: S.Schema<T>;
33
32
  /**
34
33
  * Initial values (which may not pass validation).
35
34
  */
36
- initialValues: T;
35
+ initialValues: Partial<T>;
37
36
  /**
38
37
  * Callback for value changes. Note: This is called even when values are invalid.
39
38
  * Sometimes the parent component may want to know about changes even if the form is
40
39
  * in an invalid state.
41
40
  */
42
- onValuesChanged?: (values: T) => void;
41
+ onValuesChanged?: (values: Partial<T>) => void;
43
42
  /**
44
43
  * Custom validation function that runs only after schema validation passes.
45
44
  * Use this for complex validation logic that can't be expressed in the schema.
package/dist/types/src/hooks/useForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC;AAE7F;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC1C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IAEH,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;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,CAwIhC,CAAC"}
1
+ {"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAsB,MAAM,cAAc,CAAC;AAG3E,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,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzD,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,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,CAyIhC,CAAC"}
package/dist/types/tsconfig.tsbuildinfo ADDED
@@ -0,0 +1 @@
1
+ {"version":"5.7.2"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-form",
3
- "version": "0.7.4",
3
+ "version": "0.7.5-feature-compute.4d9d99a",
4
4
  "description": "Data components.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,47 +27,47 @@
27
27
  "@effect/schema": "^0.75.5",
28
28
  "@radix-ui/react-context": "^1.0.0",
29
29
  "date-fns": "^3.3.1",
30
- "effect": "^3.9.2",
31
30
  "jsonpath": "^1.1.1",
32
- "@dxos/async": "0.7.4",
33
- "@dxos/echo-db": "0.7.4",
34
- "@dxos/debug": "0.7.4",
35
- "@dxos/echo-schema": "0.7.4",
36
- "@dxos/invariant": "0.7.4",
37
- "@dxos/effect": "0.7.4",
38
- "@dxos/live-object": "0.7.4",
39
- "@dxos/keys": "0.7.4",
40
- "@dxos/log": "0.7.4",
41
- "@dxos/react-client": "0.7.4",
42
- "@dxos/react-ui-list": "0.7.4",
43
- "@dxos/schema": "0.7.4",
44
- "@dxos/react-ui-types": "0.7.4",
45
- "@dxos/util": "0.7.4"
31
+ "@dxos/async": "0.7.5-feature-compute.4d9d99a",
32
+ "@dxos/debug": "0.7.5-feature-compute.4d9d99a",
33
+ "@dxos/echo-db": "0.7.5-feature-compute.4d9d99a",
34
+ "@dxos/echo-schema": "0.7.5-feature-compute.4d9d99a",
35
+ "@dxos/invariant": "0.7.5-feature-compute.4d9d99a",
36
+ "@dxos/effect": "0.7.5-feature-compute.4d9d99a",
37
+ "@dxos/keys": "0.7.5-feature-compute.4d9d99a",
38
+ "@dxos/live-object": "0.7.5-feature-compute.4d9d99a",
39
+ "@dxos/log": "0.7.5-feature-compute.4d9d99a",
40
+ "@dxos/react-client": "0.7.5-feature-compute.4d9d99a",
41
+ "@dxos/react-ui-list": "0.7.5-feature-compute.4d9d99a",
42
+ "@dxos/react-ui-types": "0.7.5-feature-compute.4d9d99a",
43
+ "@dxos/schema": "0.7.5-feature-compute.4d9d99a",
44
+ "@dxos/util": "0.7.5-feature-compute.4d9d99a"
46
45
  },
47
46
  "devDependencies": {
48
47
  "@phosphor-icons/react": "^2.1.5",
49
- "@types/jsonpath": "~0.2.4",
48
+ "@types/jsonpath": "^0.2.4",
50
49
  "@types/react": "~18.2.0",
51
50
  "@types/react-dom": "~18.2.0",
51
+ "effect": "^3.12.3",
52
52
  "fast-check": "^3.19.0",
53
53
  "react": "~18.2.0",
54
54
  "react-dom": "~18.2.0",
55
55
  "vite": "5.4.7",
56
- "@dxos/echo-signals": "0.7.4",
57
- "@dxos/react-ui": "0.7.4",
58
- "@dxos/react-ui-syntax-highlighter": "0.7.4",
59
- "@dxos/random": "0.7.4",
60
- "@dxos/react-ui-theme": "0.7.4",
61
- "@dxos/storybook-utils": "0.7.4"
56
+ "@dxos/echo-signals": "0.7.5-feature-compute.4d9d99a",
57
+ "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
58
+ "@dxos/react-ui-syntax-highlighter": "0.7.5-feature-compute.4d9d99a",
59
+ "@dxos/random": "0.7.5-feature-compute.4d9d99a",
60
+ "@dxos/storybook-utils": "0.7.5-feature-compute.4d9d99a",
61
+ "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a"
62
62
  },
63
63
  "peerDependencies": {
64
64
  "@effect/schema": "^0.75.5",
65
65
  "@phosphor-icons/react": "^2.1.5",
66
- "effect": "^3.9.2",
66
+ "effect": "^3.12.3",
67
67
  "react": "~18.2.0",
68
68
  "react-dom": "~18.2.0",
69
- "@dxos/react-ui": "0.7.4",
70
- "@dxos/react-ui-theme": "0.7.4"
69
+ "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
70
+ "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a"
71
71
  },
72
72
  "publishConfig": {
73
73
  "access": "public"
package/src/components/FieldEditor/FieldEditor.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import '@dxos-theme';
7
7
  import { type Meta, type StoryObj } from '@storybook/react';
8
8
  import React from 'react';
9
9
 
10
- import { createMutableSchema } from '@dxos/live-object/testing';
10
+ import { createEchoSchema } from '@dxos/live-object/testing';
11
11
  import { log } from '@dxos/log';
12
12
  import { ViewProjection } from '@dxos/schema';
13
13
  import { TestSchema, testView } from '@dxos/schema/testing';
@@ -49,7 +49,7 @@ type Story = StoryObj<StoryProps>;
49
49
 
50
50
  export const Default: Story = {
51
51
  args: {
52
- projection: new ViewProjection(createMutableSchema(TestSchema), testView),
52
+ projection: new ViewProjection(createEchoSchema(TestSchema), testView),
53
53
  view: testView,
54
54
  field: testView.fields[0],
55
55
  },
package/src/components/FieldEditor/FieldEditor.tsx CHANGED
@@ -2,10 +2,10 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import React, { useCallback, useEffect, useState } from 'react';
5
+ import React, { useCallback, useEffect, useMemo, useState } from 'react';
6
6
 
7
- import { type SchemaResolver } from '@dxos/echo-db';
8
- import { FormatEnum, FormatEnums, formatToType, type MutableSchema } from '@dxos/echo-schema';
7
+ import { type SchemaRegistry } from '@dxos/echo-db';
8
+ import { FormatEnum, FormatEnums, formatToType, type EchoSchema } from '@dxos/echo-schema';
9
9
  import { log } from '@dxos/log';
10
10
  import { useTranslation } from '@dxos/react-ui';
11
11
  import {
@@ -16,16 +16,17 @@ import {
16
16
  type PropertyType,
17
17
  type ViewType,
18
18
  type ViewProjection,
19
+ type SchemaProperty,
19
20
  } from '@dxos/schema';
20
21
 
21
22
  import { translationKey } from '../../translations';
22
- import { Form, type FormProps, SelectInput } from '../Form';
23
+ import { Form, type FormProps, type InputComponent, SelectInput } from '../Form';
23
24
 
24
25
  export type FieldEditorProps = {
25
26
  view: ViewType;
26
27
  projection: ViewProjection;
27
28
  field: FieldType;
28
- registry?: SchemaResolver;
29
+ registry?: SchemaRegistry;
29
30
  onSave: () => void;
30
31
  onCancel?: () => void;
31
32
  };
@@ -38,15 +39,17 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
38
39
  const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
39
40
  useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
40
41
 
41
- const [schemas, setSchemas] = useState<MutableSchema[]>([]);
42
+ const [schemas, setSchemas] = useState<EchoSchema[]>([]);
42
43
  useEffect(() => {
43
44
  if (!registry) {
44
45
  return;
45
46
  }
46
47
 
47
- const subscription = registry.subscribe(setSchemas);
48
+ const subscription = registry.query().subscribe((query) => setSchemas(query.results), { fire: true });
49
+
50
+ // TODO(dmaretskyi): This shouldn't be needed.
48
51
  const t = setTimeout(async () => {
49
- const schemas = await registry.query();
52
+ const schemas = await registry.query().run();
50
53
  setSchemas(schemas);
51
54
  });
52
55
  return () => {
@@ -55,24 +58,36 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
55
58
  };
56
59
  }, [registry]);
57
60
 
58
- const [schema, setSchema] = useState<MutableSchema>();
61
+ const [referenceSchema, setReferenceSchema] = useState<EchoSchema>();
59
62
  useEffect(() => {
60
- setSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
63
+ setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
61
64
  }, [schemas, props?.referenceSchema]);
62
65
 
63
66
  // TODO(burdon): Need to wrap otherwise throws error:
64
67
  // Class constructor SchemaClass cannot be invoked without 'new'.
65
68
  const [{ fieldSchema }, setFieldSchema] = useState({ fieldSchema: getFormatSchema(props?.format) });
69
+
66
70
  const handleValuesChanged = useCallback<NonNullable<FormProps<PropertyType>['onValuesChanged']>>(
67
71
  (_props) => {
68
- // Update schema if format changed.
69
72
  // TODO(burdon): Callback should pass `changed` to indicate which fields have changed.
70
- if (_props.format !== props.format) {
71
- setFieldSchema({ fieldSchema: getFormatSchema(_props.format) });
72
- }
73
- if (_props.referenceSchema !== props.referenceSchema) {
74
- setSchema(schemas.find((schema) => schema.typename === _props.referenceSchema));
75
- }
73
+ // TODO(Zaymon): Workout why old and new format values are the same sometimes even when
74
+ // selecting novel format values.
75
+ setFieldSchema((prev) => {
76
+ const fieldSchema = getFormatSchema(_props.format);
77
+ if (prev.fieldSchema === fieldSchema) {
78
+ return prev;
79
+ }
80
+ return { fieldSchema };
81
+ });
82
+ setReferenceSchema((prev) => {
83
+ if (_props.referenceSchema !== prev?.typename) {
84
+ const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
85
+ if (newSchema) {
86
+ return newSchema;
87
+ }
88
+ }
89
+ return prev;
90
+ });
76
91
 
77
92
  setProps((props) => {
78
93
  const type = formatToType[_props.format as keyof typeof formatToType];
@@ -83,7 +98,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
83
98
  return props;
84
99
  });
85
100
  },
86
- [schemas, props],
101
+ [schemas, props.format, props.referenceSchema],
87
102
  );
88
103
 
89
104
  const handleValidate = useCallback<NonNullable<FormProps<PropertyType>['onValidate']>>(
@@ -114,6 +129,46 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
114
129
  onSave();
115
130
  }, [onSave]);
116
131
 
132
+ const Custom: Partial<Record<string, InputComponent<PropertyType>>> = useMemo(
133
+ () => ({
134
+ ['format' satisfies keyof PropertyType]: (props) => (
135
+ <SelectInput<PropertyType>
136
+ {...props}
137
+ options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
138
+ value,
139
+ label: t(`format ${value}`),
140
+ }))}
141
+ />
142
+ ),
143
+ ['referenceSchema' satisfies keyof PropertyType]: (props) => (
144
+ <SelectInput<PropertyType>
145
+ {...props}
146
+ options={schemas.map((schema) => ({
147
+ value: schema.typename,
148
+ }))}
149
+ />
150
+ ),
151
+ ['referencePath' satisfies keyof PropertyType]: (props) => (
152
+ <SelectInput<PropertyType>
153
+ {...props}
154
+ options={
155
+ referenceSchema
156
+ ? getSchemaProperties(referenceSchema.ast)
157
+ .sort(sortProperties)
158
+ .map((p) => ({ value: p.name }))
159
+ : []
160
+ }
161
+ />
162
+ ),
163
+ }),
164
+ [t, schemas, referenceSchema],
165
+ );
166
+
167
+ const propIsNotType = useCallback(
168
+ (props: SchemaProperty<PropertyType>[]) => props.filter((p) => p.name !== 'type'),
169
+ [],
170
+ );
171
+
117
172
  if (!fieldSchema) {
118
173
  log.warn('invalid format', { props });
119
174
  return null;
@@ -125,43 +180,13 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
125
180
  autoFocus
126
181
  values={props}
127
182
  schema={fieldSchema}
128
- filter={(props) => props.filter((p) => p.name !== 'type')}
183
+ filter={propIsNotType}
129
184
  sort={['property', 'format']}
130
185
  onValuesChanged={handleValuesChanged}
131
186
  onValidate={handleValidate}
132
187
  onSave={handleSave}
133
188
  onCancel={handleCancel}
134
- Custom={{
135
- ['format' satisfies keyof PropertyType]: (props) => (
136
- <SelectInput<PropertyType>
137
- {...props}
138
- options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
139
- value,
140
- label: t(`format ${value}`),
141
- }))}
142
- />
143
- ),
144
- ['referenceSchema' satisfies keyof PropertyType]: (props) => (
145
- <SelectInput<PropertyType>
146
- {...props}
147
- options={schemas.map((schema) => ({
148
- value: schema.typename,
149
- }))}
150
- />
151
- ),
152
- ['referencePath' satisfies keyof PropertyType]: (props) => (
153
- <SelectInput<PropertyType>
154
- {...props}
155
- options={
156
- schema
157
- ? getSchemaProperties(schema.schema.ast)
158
- .sort(sortProperties)
159
- .map((p) => ({ value: p.name }))
160
- : []
161
- }
162
- />
163
- ),
164
- }}
189
+ Custom={Custom}
165
190
  />
166
191
  );
167
192
  };
package/src/components/Form/Defaults.tsx CHANGED
@@ -87,6 +87,8 @@ export const BooleanInput = <T extends BaseObject>({
87
87
  }: InputProps<T>) => {
88
88
  const { status, error } = getStatus?.(property);
89
89
 
90
+ // TODO(burdon): Runtime error:
91
+ // Warning: Unknown event handler property `onCheckedChange`. It will be ignored.
90
92
  return (
91
93
  <Input.Root validationValence={status}>
92
94
  {!inputOnly && (
package/src/components/Form/Form.stories.tsx CHANGED
@@ -83,7 +83,7 @@ export const Org: Story<Testing.OrgSchemaType> = {
83
83
  args: {
84
84
  schema: Testing.OrgSchema,
85
85
  values: {
86
- // name: 'DXOS',
86
+ name: 'DXOS',
87
87
  // website: 'https://dxos.org',
88
88
  },
89
89
  },
@@ -197,3 +197,35 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
197
197
  },
198
198
  },
199
199
  };
200
+
201
+ const ColorSchema = S.Struct({
202
+ color: S.Union(S.Literal('red'), S.Literal('green'), S.Literal('blue')).annotations({
203
+ [AST.TitleAnnotationId]: 'Color',
204
+ }),
205
+ }).pipe(S.mutable);
206
+
207
+ type ColorType = S.Schema.Type<typeof ColorSchema>;
208
+
209
+ const EnumStory = ({ values: initialValues }: FormProps<ColorType>) => {
210
+ const [values, setValues] = useState(initialValues);
211
+ const handleSave = useCallback<NonNullable<FormProps<ColorType>['onSave']>>((values) => {
212
+ setValues(values);
213
+ }, []);
214
+
215
+ return (
216
+ <TestLayout json={{ values, schema: ColorSchema.ast.toJSON() }}>
217
+ <TestPanel>
218
+ <Form<ColorType> schema={ColorSchema} values={values} onSave={handleSave} />
219
+ </TestPanel>
220
+ </TestLayout>
221
+ );
222
+ };
223
+
224
+ export const Enum: StoryObj<FormProps<ColorType>> = {
225
+ render: EnumStory,
226
+ args: {
227
+ values: {
228
+ color: 'red',
229
+ },
230
+ },
231
+ };