@springmicro/forms 0.7.0 → 0.7.1

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 (78) hide show
  1. package/.eslintrc.cjs +22 -22
  2. package/README.md +11 -11
  3. package/dist/index.d.ts +0 -0
  4. package/dist/index.js +0 -0
  5. package/dist/index.umd.cjs +0 -0
  6. package/package.json +3 -3
  7. package/src/builder/bottom-drawer.tsx +429 -429
  8. package/src/builder/form-builder.tsx +256 -256
  9. package/src/builder/modal.tsx +39 -39
  10. package/src/builder/nodes/node-base.tsx +94 -94
  11. package/src/builder/nodes/node-child-helpers.tsx +273 -273
  12. package/src/builder/nodes/node-parent.tsx +187 -187
  13. package/src/builder/nodes/node-types/array-node.tsx +134 -134
  14. package/src/builder/nodes/node-types/date-node.tsx +60 -60
  15. package/src/builder/nodes/node-types/file-node.tsx +67 -67
  16. package/src/builder/nodes/node-types/integer-node.tsx +60 -60
  17. package/src/builder/nodes/node-types/object-node.tsx +67 -67
  18. package/src/builder/nodes/node-types/text-node.tsx +66 -66
  19. package/src/fields/ArrayField.tsx +875 -875
  20. package/src/fields/BooleanField.tsx +110 -110
  21. package/src/fields/MultiSchemaField.tsx +236 -236
  22. package/src/fields/NullField.tsx +22 -22
  23. package/src/fields/NumberField.tsx +87 -87
  24. package/src/fields/ObjectField.tsx +338 -338
  25. package/src/fields/SchemaField.tsx +402 -402
  26. package/src/fields/StringField.tsx +67 -67
  27. package/src/fields/index.ts +24 -24
  28. package/src/index.tsx +26 -26
  29. package/src/interfaces/MessagesProps.interface.ts +5 -5
  30. package/src/interfaces/Option.interface.ts +4 -4
  31. package/src/styles/select.styles.ts +28 -28
  32. package/src/templates/ArrayFieldDescriptionTemplate.tsx +42 -42
  33. package/src/templates/ArrayFieldItemTemplate.tsx +78 -78
  34. package/src/templates/ArrayFieldTemplate.tsx +90 -90
  35. package/src/templates/ArrayFieldTitleTemplate.tsx +44 -44
  36. package/src/templates/BaseInputTemplate.tsx +94 -94
  37. package/src/templates/ButtonTemplates/AddButton.tsx +29 -29
  38. package/src/templates/ButtonTemplates/IconButton.tsx +49 -49
  39. package/src/templates/ButtonTemplates/SubmitButton.tsx +29 -29
  40. package/src/templates/ButtonTemplates/index.ts +16 -16
  41. package/src/templates/DescriptionField.tsx +29 -29
  42. package/src/templates/ErrorList.tsx +25 -25
  43. package/src/templates/FieldTemplate/FieldTemplate.tsx +39 -39
  44. package/src/templates/FieldTemplate/Label.tsx +29 -29
  45. package/src/templates/FieldTemplate/WrapIfAdditional.tsx +85 -85
  46. package/src/templates/FieldTemplate/index.ts +3 -3
  47. package/src/templates/ObjectFieldTemplate.tsx +79 -79
  48. package/src/templates/TitleField.tsx +20 -20
  49. package/src/templates/UnsupportedField.tsx +29 -29
  50. package/src/templates/index.ts +32 -32
  51. package/src/types/Message.type.ts +6 -6
  52. package/src/types/RawMessage.type.ts +15 -15
  53. package/src/types/form-builder.ts +135 -135
  54. package/src/types/utils.type.ts +1 -1
  55. package/src/utils/form-builder.ts +424 -424
  56. package/src/utils/processSelectValue.ts +50 -50
  57. package/src/widgets/AltDateTimeWidget.tsx +17 -17
  58. package/src/widgets/AltDateWidget.tsx +216 -216
  59. package/src/widgets/CheckboxWidget.tsx +80 -80
  60. package/src/widgets/CheckboxesWidget.tsx +74 -74
  61. package/src/widgets/ColorWidget.tsx +26 -26
  62. package/src/widgets/DateTimeWidget.tsx +28 -28
  63. package/src/widgets/DateWidget.tsx +36 -36
  64. package/src/widgets/EmailWidget.tsx +19 -19
  65. package/src/widgets/FileWidget.tsx +144 -144
  66. package/src/widgets/HiddenWidget.tsx +22 -22
  67. package/src/widgets/PasswordWidget.tsx +20 -20
  68. package/src/widgets/RadioWidget.tsx +87 -87
  69. package/src/widgets/RangeWidget.tsx +24 -24
  70. package/src/widgets/SelectWidget.tsx +99 -99
  71. package/src/widgets/TextWidget.tsx +19 -19
  72. package/src/widgets/TextareaWidget.tsx +64 -64
  73. package/src/widgets/URLWidget.tsx +19 -19
  74. package/src/widgets/UpDownWidget.tsx +20 -20
  75. package/src/widgets/index.ts +43 -43
  76. package/tsconfig.json +24 -24
  77. package/tsconfig.node.json +10 -10
  78. package/vite.config.ts +25 -25
@@ -1,60 +1,60 @@
1
- import {
2
- ChildNodeProps,
3
- DateNode as DateNodeType,
4
- FieldArrayType,
5
- } from "../../../types/form-builder";
6
- import React from "react";
7
- import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
- import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
-
10
- export default function DateNode({
11
- nodeState,
12
- updateNode,
13
- defaultFields,
14
- defaultChecks,
15
- }: ChildNodeProps) {
16
- const [node, setNode] = nodeState;
17
-
18
- React.useEffect(() => {
19
- updateNode(node);
20
- }, [node]);
21
-
22
- function isValid(key: string, value: string) {
23
- return true;
24
- }
25
-
26
- const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
-
28
- const fields: FieldArrayType<DateNodeType> = [];
29
-
30
- const checks: FieldArrayType<DateNodeType> = [];
31
-
32
- return (
33
- <>
34
- <FieldContainer>
35
- {defaultFields}
36
- {fields.map((field) => (
37
- <NodeField
38
- key={field.prop}
39
- field={field}
40
- node={node}
41
- update={updateNodeByKeyLocal}
42
- {...field.props}
43
- />
44
- ))}
45
- </FieldContainer>
46
- <FieldContainer>
47
- {defaultChecks}
48
- {checks.map((check) => (
49
- <NodeCheckbox
50
- key={check.prop}
51
- field={check}
52
- node={node}
53
- update={updateNodeByKeyLocal}
54
- {...check.props}
55
- />
56
- ))}
57
- </FieldContainer>
58
- </>
59
- );
60
- }
1
+ import {
2
+ ChildNodeProps,
3
+ DateNode as DateNodeType,
4
+ FieldArrayType,
5
+ } from "../../../types/form-builder";
6
+ import React from "react";
7
+ import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
+ import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
+
10
+ export default function DateNode({
11
+ nodeState,
12
+ updateNode,
13
+ defaultFields,
14
+ defaultChecks,
15
+ }: ChildNodeProps) {
16
+ const [node, setNode] = nodeState;
17
+
18
+ React.useEffect(() => {
19
+ updateNode(node);
20
+ }, [node]);
21
+
22
+ function isValid(key: string, value: string) {
23
+ return true;
24
+ }
25
+
26
+ const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
+
28
+ const fields: FieldArrayType<DateNodeType> = [];
29
+
30
+ const checks: FieldArrayType<DateNodeType> = [];
31
+
32
+ return (
33
+ <>
34
+ <FieldContainer>
35
+ {defaultFields}
36
+ {fields.map((field) => (
37
+ <NodeField
38
+ key={field.prop}
39
+ field={field}
40
+ node={node}
41
+ update={updateNodeByKeyLocal}
42
+ {...field.props}
43
+ />
44
+ ))}
45
+ </FieldContainer>
46
+ <FieldContainer>
47
+ {defaultChecks}
48
+ {checks.map((check) => (
49
+ <NodeCheckbox
50
+ key={check.prop}
51
+ field={check}
52
+ node={node}
53
+ update={updateNodeByKeyLocal}
54
+ {...check.props}
55
+ />
56
+ ))}
57
+ </FieldContainer>
58
+ </>
59
+ );
60
+ }
@@ -1,67 +1,67 @@
1
- import {
2
- ChildNodeProps,
3
- FieldArrayType,
4
- FileNodeEmpty as FileNodeType,
5
- } from "../../../types/form-builder";
6
- import React from "react";
7
- import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
- import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
-
10
- export default function FileNode({
11
- nodeState,
12
- updateNode,
13
- defaultFields,
14
- defaultChecks,
15
- }: ChildNodeProps) {
16
- const [node, setNode] = nodeState;
17
-
18
- React.useEffect(() => {
19
- updateNode(node);
20
- }, [node]);
21
-
22
- function isValid(key: string, value: string) {
23
- return true;
24
- }
25
-
26
- const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
-
28
- const fields: FieldArrayType<FileNodeType> = [
29
- {
30
- prop: "filetype",
31
- tooltip: "Require a specific file type. Leave blank for any filetype.",
32
- },
33
- ];
34
-
35
- const checks: FieldArrayType<FileNodeType> = [
36
- { prop: "multiple", title: "Multiple Files" },
37
- ];
38
-
39
- return (
40
- <>
41
- <FieldContainer>
42
- {defaultFields}
43
- {fields.map((field) => (
44
- <NodeField
45
- key={field.prop}
46
- field={field}
47
- node={node}
48
- update={updateNodeByKeyLocal}
49
- {...field.props}
50
- />
51
- ))}
52
- </FieldContainer>
53
- <FieldContainer>
54
- {defaultChecks}
55
- {checks.map((check) => (
56
- <NodeCheckbox
57
- key={check.prop}
58
- field={check}
59
- node={node}
60
- update={updateNodeByKeyLocal}
61
- {...check.props}
62
- />
63
- ))}
64
- </FieldContainer>
65
- </>
66
- );
67
- }
1
+ import {
2
+ ChildNodeProps,
3
+ FieldArrayType,
4
+ FileNodeEmpty as FileNodeType,
5
+ } from "../../../types/form-builder";
6
+ import React from "react";
7
+ import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
+ import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
+
10
+ export default function FileNode({
11
+ nodeState,
12
+ updateNode,
13
+ defaultFields,
14
+ defaultChecks,
15
+ }: ChildNodeProps) {
16
+ const [node, setNode] = nodeState;
17
+
18
+ React.useEffect(() => {
19
+ updateNode(node);
20
+ }, [node]);
21
+
22
+ function isValid(key: string, value: string) {
23
+ return true;
24
+ }
25
+
26
+ const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
+
28
+ const fields: FieldArrayType<FileNodeType> = [
29
+ {
30
+ prop: "filetype",
31
+ tooltip: "Require a specific file type. Leave blank for any filetype.",
32
+ },
33
+ ];
34
+
35
+ const checks: FieldArrayType<FileNodeType> = [
36
+ { prop: "multiple", title: "Multiple Files" },
37
+ ];
38
+
39
+ return (
40
+ <>
41
+ <FieldContainer>
42
+ {defaultFields}
43
+ {fields.map((field) => (
44
+ <NodeField
45
+ key={field.prop}
46
+ field={field}
47
+ node={node}
48
+ update={updateNodeByKeyLocal}
49
+ {...field.props}
50
+ />
51
+ ))}
52
+ </FieldContainer>
53
+ <FieldContainer>
54
+ {defaultChecks}
55
+ {checks.map((check) => (
56
+ <NodeCheckbox
57
+ key={check.prop}
58
+ field={check}
59
+ node={node}
60
+ update={updateNodeByKeyLocal}
61
+ {...check.props}
62
+ />
63
+ ))}
64
+ </FieldContainer>
65
+ </>
66
+ );
67
+ }
@@ -1,60 +1,60 @@
1
- import {
2
- ChildNodeProps,
3
- FieldArrayType,
4
- IntegerNode as IntegerNodeType,
5
- } from "../../../types/form-builder";
6
- import React from "react";
7
- import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
- import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
-
10
- export default function IntegerNode({
11
- nodeState,
12
- updateNode,
13
- defaultFields,
14
- defaultChecks,
15
- }: ChildNodeProps) {
16
- const [node, setNode] = nodeState;
17
-
18
- React.useEffect(() => {
19
- updateNode(node);
20
- }, [node]);
21
-
22
- function isValid(key: string, value: string) {
23
- return true;
24
- }
25
-
26
- const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
-
28
- const fields: FieldArrayType<IntegerNodeType> = [];
29
-
30
- const checks: FieldArrayType<IntegerNodeType> = [];
31
-
32
- return (
33
- <>
34
- <FieldContainer>
35
- {defaultFields}
36
- {fields.map((field) => (
37
- <NodeField
38
- key={field.prop}
39
- field={field}
40
- node={node}
41
- update={updateNodeByKeyLocal}
42
- {...field.props}
43
- />
44
- ))}
45
- </FieldContainer>
46
- <FieldContainer>
47
- {defaultChecks}
48
- {checks.map((check) => (
49
- <NodeCheckbox
50
- key={check.prop}
51
- field={check}
52
- node={node}
53
- update={updateNodeByKeyLocal}
54
- {...check.props}
55
- />
56
- ))}
57
- </FieldContainer>
58
- </>
59
- );
60
- }
1
+ import {
2
+ ChildNodeProps,
3
+ FieldArrayType,
4
+ IntegerNode as IntegerNodeType,
5
+ } from "../../../types/form-builder";
6
+ import React from "react";
7
+ import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
+ import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
+
10
+ export default function IntegerNode({
11
+ nodeState,
12
+ updateNode,
13
+ defaultFields,
14
+ defaultChecks,
15
+ }: ChildNodeProps) {
16
+ const [node, setNode] = nodeState;
17
+
18
+ React.useEffect(() => {
19
+ updateNode(node);
20
+ }, [node]);
21
+
22
+ function isValid(key: string, value: string) {
23
+ return true;
24
+ }
25
+
26
+ const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
27
+
28
+ const fields: FieldArrayType<IntegerNodeType> = [];
29
+
30
+ const checks: FieldArrayType<IntegerNodeType> = [];
31
+
32
+ return (
33
+ <>
34
+ <FieldContainer>
35
+ {defaultFields}
36
+ {fields.map((field) => (
37
+ <NodeField
38
+ key={field.prop}
39
+ field={field}
40
+ node={node}
41
+ update={updateNodeByKeyLocal}
42
+ {...field.props}
43
+ />
44
+ ))}
45
+ </FieldContainer>
46
+ <FieldContainer>
47
+ {defaultChecks}
48
+ {checks.map((check) => (
49
+ <NodeCheckbox
50
+ key={check.prop}
51
+ field={check}
52
+ node={node}
53
+ update={updateNodeByKeyLocal}
54
+ {...check.props}
55
+ />
56
+ ))}
57
+ </FieldContainer>
58
+ </>
59
+ );
60
+ }
@@ -1,67 +1,67 @@
1
- import {
2
- ChildNodeProps,
3
- FieldArrayType,
4
- ObjectNodeEmpty,
5
- } from "../../../types/form-builder";
6
- import React from "react";
7
- import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
- import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
- import { Button } from "@mui/material";
10
-
11
- export default function ObjectNode({
12
- nodeState,
13
- updateNode,
14
- defaultFields,
15
- defaultChecks,
16
- updatePath,
17
- }: ChildNodeProps) {
18
- const [node, setNode] = nodeState;
19
-
20
- React.useEffect(() => {
21
- updateNode(node);
22
- }, [node]);
23
-
24
- function isValid(key: string, value: string) {
25
- const n = node as ObjectNodeEmpty;
26
- return true;
27
- }
28
-
29
- const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
30
-
31
- const fields: FieldArrayType<ObjectNodeEmpty> = [];
32
-
33
- const checks: FieldArrayType<ObjectNodeEmpty> = [];
34
-
35
- return (
36
- <>
37
- <FieldContainer>
38
- {defaultFields}
39
- {fields.map((field) => (
40
- <NodeField
41
- key={field.prop}
42
- field={field}
43
- node={node}
44
- update={updateNodeByKeyLocal}
45
- {...field.props}
46
- />
47
- ))}
48
- </FieldContainer>
49
- <FieldContainer>
50
- {defaultChecks}
51
- {checks.map((check) => (
52
- <NodeCheckbox
53
- key={check.prop}
54
- field={check}
55
- node={node}
56
- update={updateNodeByKeyLocal}
57
- {...check.props}
58
- />
59
- ))}
60
- </FieldContainer>
61
-
62
- <Button onClick={updatePath} variant="contained" fullWidth>
63
- Open
64
- </Button>
65
- </>
66
- );
67
- }
1
+ import {
2
+ ChildNodeProps,
3
+ FieldArrayType,
4
+ ObjectNodeEmpty,
5
+ } from "../../../types/form-builder";
6
+ import React from "react";
7
+ import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
+ import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
+ import { Button } from "@mui/material";
10
+
11
+ export default function ObjectNode({
12
+ nodeState,
13
+ updateNode,
14
+ defaultFields,
15
+ defaultChecks,
16
+ updatePath,
17
+ }: ChildNodeProps) {
18
+ const [node, setNode] = nodeState;
19
+
20
+ React.useEffect(() => {
21
+ updateNode(node);
22
+ }, [node]);
23
+
24
+ function isValid(key: string, value: string) {
25
+ const n = node as ObjectNodeEmpty;
26
+ return true;
27
+ }
28
+
29
+ const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
30
+
31
+ const fields: FieldArrayType<ObjectNodeEmpty> = [];
32
+
33
+ const checks: FieldArrayType<ObjectNodeEmpty> = [];
34
+
35
+ return (
36
+ <>
37
+ <FieldContainer>
38
+ {defaultFields}
39
+ {fields.map((field) => (
40
+ <NodeField
41
+ key={field.prop}
42
+ field={field}
43
+ node={node}
44
+ update={updateNodeByKeyLocal}
45
+ {...field.props}
46
+ />
47
+ ))}
48
+ </FieldContainer>
49
+ <FieldContainer>
50
+ {defaultChecks}
51
+ {checks.map((check) => (
52
+ <NodeCheckbox
53
+ key={check.prop}
54
+ field={check}
55
+ node={node}
56
+ update={updateNodeByKeyLocal}
57
+ {...check.props}
58
+ />
59
+ ))}
60
+ </FieldContainer>
61
+
62
+ <Button onClick={updatePath} variant="contained" fullWidth>
63
+ Open
64
+ </Button>
65
+ </>
66
+ );
67
+ }
@@ -1,66 +1,66 @@
1
- import {
2
- ChildNodeProps,
3
- FieldArrayType,
4
- TextNodeEmpty,
5
- } from "../../../types/form-builder";
6
- import React from "react";
7
- import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
- import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
-
10
- export default function TextNode({
11
- nodeState,
12
- updateNode,
13
- defaultFields,
14
- defaultChecks,
15
- }: ChildNodeProps) {
16
- const [node, setNode] = nodeState;
17
-
18
- React.useEffect(() => {
19
- updateNode(node);
20
- }, [node]);
21
-
22
- function isValid(key: string, value: string) {
23
- const n = node as TextNodeEmpty;
24
- return true;
25
- }
26
-
27
- const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
28
-
29
- const fields: FieldArrayType<TextNodeEmpty> = [
30
- { prop: "default" },
31
- { prop: "format" },
32
- { prop: "minLength", props: { type: "number" } },
33
- { prop: "maxLength", props: { type: "number" } },
34
- ];
35
-
36
- const checks: FieldArrayType<TextNodeEmpty> = [];
37
-
38
- return (
39
- <>
40
- <FieldContainer>
41
- {defaultFields}
42
- {fields.map((field) => (
43
- <NodeField
44
- key={field.prop}
45
- field={field}
46
- node={node}
47
- update={updateNodeByKeyLocal}
48
- {...field.props}
49
- />
50
- ))}
51
- </FieldContainer>
52
- <FieldContainer>
53
- {defaultChecks}
54
- {checks.map((check) => (
55
- <NodeCheckbox
56
- key={check.prop}
57
- field={check}
58
- node={node}
59
- update={updateNodeByKeyLocal}
60
- {...check.props}
61
- />
62
- ))}
63
- </FieldContainer>
64
- </>
65
- );
66
- }
1
+ import {
2
+ ChildNodeProps,
3
+ FieldArrayType,
4
+ TextNodeEmpty,
5
+ } from "../../../types/form-builder";
6
+ import React from "react";
7
+ import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
8
+ import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
9
+
10
+ export default function TextNode({
11
+ nodeState,
12
+ updateNode,
13
+ defaultFields,
14
+ defaultChecks,
15
+ }: ChildNodeProps) {
16
+ const [node, setNode] = nodeState;
17
+
18
+ React.useEffect(() => {
19
+ updateNode(node);
20
+ }, [node]);
21
+
22
+ function isValid(key: string, value: string) {
23
+ const n = node as TextNodeEmpty;
24
+ return true;
25
+ }
26
+
27
+ const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
28
+
29
+ const fields: FieldArrayType<TextNodeEmpty> = [
30
+ { prop: "default" },
31
+ { prop: "format" },
32
+ { prop: "minLength", props: { type: "number" } },
33
+ { prop: "maxLength", props: { type: "number" } },
34
+ ];
35
+
36
+ const checks: FieldArrayType<TextNodeEmpty> = [];
37
+
38
+ return (
39
+ <>
40
+ <FieldContainer>
41
+ {defaultFields}
42
+ {fields.map((field) => (
43
+ <NodeField
44
+ key={field.prop}
45
+ field={field}
46
+ node={node}
47
+ update={updateNodeByKeyLocal}
48
+ {...field.props}
49
+ />
50
+ ))}
51
+ </FieldContainer>
52
+ <FieldContainer>
53
+ {defaultChecks}
54
+ {checks.map((check) => (
55
+ <NodeCheckbox
56
+ key={check.prop}
57
+ field={check}
58
+ node={node}
59
+ update={updateNodeByKeyLocal}
60
+ {...check.props}
61
+ />
62
+ ))}
63
+ </FieldContainer>
64
+ </>
65
+ );
66
+ }