@nolwenture/formik-jsonschema-form 0.5.0 → 0.6.0
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/README.md +74 -0
- package/dist/Form.d.ts +2 -2
- package/dist/Form.js +4 -4
- package/dist/Form.stories.d.ts +12 -11
- package/dist/Form.stories.js +65 -38
- package/dist/Form.test.js +1 -1
- package/dist/FormEditor.d.ts +3 -3
- package/dist/FormEditor.js +6 -6
- package/dist/FormEditor.stories.d.ts +5 -4
- package/dist/FormEditor.stories.js +3 -5
- package/dist/fields/AnyField.d.ts +3 -3
- package/dist/fields/AnyField.js +5 -6
- package/dist/fields/ArrayField.d.ts +3 -3
- package/dist/fields/ArrayField.js +10 -10
- package/dist/fields/BooleanField.d.ts +3 -3
- package/dist/fields/BooleanField.js +3 -3
- package/dist/fields/DateField.d.ts +3 -3
- package/dist/fields/DateField.js +3 -3
- package/dist/fields/NullField.d.ts +3 -3
- package/dist/fields/NullField.js +2 -2
- package/dist/fields/NumberField.d.ts +3 -3
- package/dist/fields/NumberField.js +2 -2
- package/dist/fields/ObjectField.d.ts +3 -3
- package/dist/fields/ObjectField.js +27 -7
- package/dist/fields/RadioField.d.ts +3 -3
- package/dist/fields/RadioField.js +3 -3
- package/dist/fields/SchemaField.d.ts +3 -3
- package/dist/fields/SchemaField.js +6 -5
- package/dist/fields/SearchMultiTagSelectField.d.ts +3 -3
- package/dist/fields/SearchMultiTagSelectField.js +4 -3
- package/dist/fields/StringField.d.ts +3 -3
- package/dist/fields/StringField.js +9 -7
- package/dist/fields/ToggleField.d.ts +3 -3
- package/dist/fields/ToggleField.js +3 -3
- package/dist/formEditorSchemas.d.ts +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useExtractUiSchema.d.ts +8 -0
- package/dist/hooks/useExtractUiSchema.js +22 -0
- package/dist/hooks/useSetDefault.d.ts +2 -0
- package/dist/hooks/useSetDefault.js +16 -0
- package/dist/sampleData/completeSchema.d.ts +3 -0
- package/dist/{_sampleData.js → sampleData/completeSchema.js} +0 -107
- package/dist/sampleData/conditionsSchema.d.ts +3 -0
- package/dist/sampleData/conditionsSchema.js +80 -0
- package/dist/sampleData/generatedSchema.d.ts +2 -0
- package/dist/sampleData/generatedSchema.js +19 -0
- package/dist/sampleData/index.d.ts +5 -0
- package/dist/sampleData/index.js +5 -0
- package/dist/sampleData/requiredInputSchema.d.ts +3 -0
- package/dist/sampleData/requiredInputSchema.js +72 -0
- package/dist/sampleData/simpleData.d.ts +7 -0
- package/dist/sampleData/simpleData.js +16 -0
- package/dist/styledComponents.d.ts +181 -84
- package/dist/styledComponents.js +28 -29
- package/dist/templates/ArrayFieldTemplate.d.ts +3 -3
- package/dist/templates/ArrayFieldTemplate.js +5 -4
- package/dist/templates/FieldTemplate.d.ts +3 -3
- package/dist/templates/FieldTemplate.js +6 -5
- package/dist/templates/ObjectFieldTemplate.d.ts +3 -3
- package/dist/templates/ObjectFieldTemplate.js +4 -3
- package/dist/types.d.ts +2 -2
- package/dist/utils/__tests/getEnums.test.d.ts +1 -0
- package/dist/utils/__tests/getEnums.test.js +64 -0
- package/dist/utils/__tests/resolveSchema.test.d.ts +1 -0
- package/dist/utils/__tests/resolveSchema.test.js +106 -0
- package/dist/utils/deepEqual.d.ts +1 -0
- package/dist/utils/deepEqual.js +18 -0
- package/dist/utils/getEnums.d.ts +10 -0
- package/dist/utils/getEnums.js +30 -0
- package/dist/utils/getTitleAndDescription.d.ts +12 -0
- package/dist/utils/getTitleAndDescription.js +15 -0
- package/dist/utils/getTypes.d.ts +5 -0
- package/dist/utils/getTypes.js +53 -0
- package/dist/utils/index.d.ts +7 -0
- package/dist/utils/index.js +14 -0
- package/dist/utils/mergeSchemas.d.ts +1 -0
- package/dist/utils/mergeSchemas.js +26 -0
- package/dist/utils/resolveSchema.d.ts +2 -0
- package/dist/utils/resolveSchema.js +68 -0
- package/package.json +32 -37
- package/dist/_sampleData.d.ts +0 -12
- package/dist/utils.d.ts +0 -32
- package/dist/utils.js +0 -138
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useContext } from "react";
|
|
3
3
|
import { FormRegistry } from "../Form";
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import { getDescription, getTitle } from "../utils";
|
|
5
|
+
import { useExtractUiSchema } from "../hooks";
|
|
6
|
+
export const FieldTemplate = (props) => {
|
|
6
7
|
const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, InfoFieldButton, }, } = useContext(FormRegistry);
|
|
7
8
|
const { name, uiSchema, children } = props;
|
|
8
9
|
const title = getTitle(props);
|
|
9
10
|
const description = getDescription(props);
|
|
10
11
|
const { help, info,
|
|
11
12
|
//TODO: This is not right
|
|
12
|
-
props: { wrapper:
|
|
13
|
-
return (_jsxs(FieldWrapper, Object.assign({},
|
|
14
|
-
}
|
|
13
|
+
props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
|
|
14
|
+
return (_jsxs(FieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(FieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
|
|
15
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
export declare
|
|
1
|
+
import type { ObjectFieldTemplateProps } from "../types";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export declare const ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useContext } from "react";
|
|
3
3
|
import { FormRegistry } from "../Form";
|
|
4
|
-
import { getDescription, getTitle
|
|
4
|
+
import { getDescription, getTitle } from "../utils";
|
|
5
|
+
import { useExtractUiSchema } from "../hooks";
|
|
5
6
|
import { RequiredIndicator } from "../styledComponents";
|
|
6
|
-
export
|
|
7
|
+
export const ObjectFieldTemplate = (props) => {
|
|
7
8
|
const { components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
|
|
8
9
|
const { children, uiSchema } = props;
|
|
9
10
|
const title = getTitle(props);
|
|
@@ -14,4 +15,4 @@ export function ObjectFieldTemplate(props) {
|
|
|
14
15
|
// error: errorProps,
|
|
15
16
|
} = {}, } = useExtractUiSchema(uiSchema);
|
|
16
17
|
return (_jsxs(ObjectFieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, Object.assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
|
|
17
|
-
}
|
|
18
|
+
};
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import type { JSONSchema7 } from "json-schema";
|
|
2
|
+
import React from "react";
|
|
3
3
|
export type FormProps<T> = React.PropsWithChildren<{
|
|
4
4
|
/** If true, disabled prop is passed down to each field on the form */
|
|
5
5
|
disabled?: boolean | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { getEnums } from "../getEnums";
|
|
2
|
+
describe("getEnums", () => {
|
|
3
|
+
test("enum works", () => {
|
|
4
|
+
const result = getEnums({ schema: { enum: ["one", "two", "three"] } });
|
|
5
|
+
expect(result).toEqual({
|
|
6
|
+
type: "select",
|
|
7
|
+
values: [
|
|
8
|
+
{ const: "one", title: "one" },
|
|
9
|
+
{ const: "two", title: "two" },
|
|
10
|
+
{ const: "three", title: "three" },
|
|
11
|
+
],
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
test("oneOf works", () => {
|
|
15
|
+
const result = getEnums({
|
|
16
|
+
schema: {
|
|
17
|
+
oneOf: [
|
|
18
|
+
{
|
|
19
|
+
const: "horse",
|
|
20
|
+
title: "Horse",
|
|
21
|
+
},
|
|
22
|
+
{ const: "frog", title: "Frog" },
|
|
23
|
+
{ const: "bird", title: "Bird" },
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
expect(result).toEqual({
|
|
28
|
+
type: "select",
|
|
29
|
+
values: [
|
|
30
|
+
{
|
|
31
|
+
const: "horse",
|
|
32
|
+
title: "Horse",
|
|
33
|
+
},
|
|
34
|
+
{ const: "frog", title: "Frog" },
|
|
35
|
+
{ const: "bird", title: "Bird" },
|
|
36
|
+
],
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
test("anyOf works", () => {
|
|
40
|
+
const result = getEnums({
|
|
41
|
+
schema: {
|
|
42
|
+
anyOf: [
|
|
43
|
+
{
|
|
44
|
+
const: "tangerine",
|
|
45
|
+
title: "Tangerine",
|
|
46
|
+
},
|
|
47
|
+
{ const: "mandarin", title: "Mandarin" },
|
|
48
|
+
{ const: "bruno", title: "Bruno" },
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
expect(result).toEqual({
|
|
53
|
+
type: "multiSelect",
|
|
54
|
+
values: [
|
|
55
|
+
{
|
|
56
|
+
const: "tangerine",
|
|
57
|
+
title: "Tangerine",
|
|
58
|
+
},
|
|
59
|
+
{ const: "mandarin", title: "Mandarin" },
|
|
60
|
+
{ const: "bruno", title: "Bruno" },
|
|
61
|
+
],
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { resolveSchema } from "../resolveSchema";
|
|
2
|
+
const simpleConditionalSchema = {
|
|
3
|
+
type: "object",
|
|
4
|
+
title: "Title",
|
|
5
|
+
properties: {
|
|
6
|
+
animal: {
|
|
7
|
+
type: "string",
|
|
8
|
+
enum: ["cat", "bird"],
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
allOf: [
|
|
12
|
+
{
|
|
13
|
+
if: {
|
|
14
|
+
properties: {
|
|
15
|
+
animal: {
|
|
16
|
+
const: "cat",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
then: {
|
|
21
|
+
properties: {
|
|
22
|
+
food: {
|
|
23
|
+
type: "string",
|
|
24
|
+
enum: ["meat", "grass", "fish"],
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
required: ["food"],
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
};
|
|
32
|
+
describe("resolveSchema", () => {
|
|
33
|
+
test("with matching if value", () => {
|
|
34
|
+
const value = { animal: "cat" };
|
|
35
|
+
const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
|
|
36
|
+
expect(resolvedSchema).toEqual([
|
|
37
|
+
{
|
|
38
|
+
type: "object",
|
|
39
|
+
title: "Title",
|
|
40
|
+
properties: {
|
|
41
|
+
animal: {
|
|
42
|
+
type: "string",
|
|
43
|
+
enum: ["cat", "bird"],
|
|
44
|
+
},
|
|
45
|
+
food: {
|
|
46
|
+
type: "string",
|
|
47
|
+
enum: ["meat", "grass", "fish"],
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
required: ["food"],
|
|
51
|
+
},
|
|
52
|
+
[],
|
|
53
|
+
]);
|
|
54
|
+
});
|
|
55
|
+
test("with non-matching if value", () => {
|
|
56
|
+
const value = { animal: "bird" };
|
|
57
|
+
const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
|
|
58
|
+
expect(resolvedSchema).toEqual([
|
|
59
|
+
{
|
|
60
|
+
type: "object",
|
|
61
|
+
title: "Title",
|
|
62
|
+
properties: {
|
|
63
|
+
animal: {
|
|
64
|
+
type: "string",
|
|
65
|
+
enum: ["cat", "bird"],
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
[],
|
|
70
|
+
]);
|
|
71
|
+
});
|
|
72
|
+
test("with empty values", () => {
|
|
73
|
+
const value = {};
|
|
74
|
+
const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
|
|
75
|
+
expect(resolvedSchema).toEqual([
|
|
76
|
+
{
|
|
77
|
+
type: "object",
|
|
78
|
+
title: "Title",
|
|
79
|
+
properties: {
|
|
80
|
+
animal: {
|
|
81
|
+
type: "string",
|
|
82
|
+
enum: ["cat", "bird"],
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
[],
|
|
87
|
+
]);
|
|
88
|
+
});
|
|
89
|
+
test("with value changed", () => {
|
|
90
|
+
const value = { animal: "bird", food: "meat" };
|
|
91
|
+
const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
|
|
92
|
+
expect(resolvedSchema).toEqual([
|
|
93
|
+
{
|
|
94
|
+
type: "object",
|
|
95
|
+
title: "Title",
|
|
96
|
+
properties: {
|
|
97
|
+
animal: {
|
|
98
|
+
type: "string",
|
|
99
|
+
enum: ["cat", "bird"],
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
["food"],
|
|
104
|
+
]);
|
|
105
|
+
});
|
|
106
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const deepEqual: (object1: any, object2: any) => boolean;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { isObject } from "./getTypes";
|
|
2
|
+
export const deepEqual = (object1, object2) => {
|
|
3
|
+
const keys1 = Object.keys(object1);
|
|
4
|
+
const keys2 = Object.keys(object2);
|
|
5
|
+
if (keys1.length !== keys2.length) {
|
|
6
|
+
return false;
|
|
7
|
+
}
|
|
8
|
+
for (const key of keys1) {
|
|
9
|
+
const val1 = object1[key];
|
|
10
|
+
const val2 = object2[key];
|
|
11
|
+
const areObjects = isObject(val1) && isObject(val2);
|
|
12
|
+
if ((areObjects && !deepEqual(val1, val2)) ||
|
|
13
|
+
(!areObjects && val1 !== val2)) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return true;
|
|
18
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export const getEnums = ({ schema }) => {
|
|
2
|
+
const numberOfDefined = [schema.enum, schema.oneOf, schema.anyOf].filter((x) => x).length;
|
|
3
|
+
if (numberOfDefined === 0) {
|
|
4
|
+
return;
|
|
5
|
+
}
|
|
6
|
+
if (numberOfDefined > 1) {
|
|
7
|
+
throw new Error('Only one of "enum", "oneOf" or "anyOf" can be defined!');
|
|
8
|
+
}
|
|
9
|
+
if (schema.enum) {
|
|
10
|
+
return {
|
|
11
|
+
type: "select",
|
|
12
|
+
values: schema.enum.map((option) => ({
|
|
13
|
+
const: option,
|
|
14
|
+
title: `${option}`,
|
|
15
|
+
})),
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
if (schema.oneOf) {
|
|
19
|
+
return {
|
|
20
|
+
type: "select",
|
|
21
|
+
values: schema.oneOf,
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
if (schema.anyOf) {
|
|
25
|
+
return {
|
|
26
|
+
type: "multiSelect",
|
|
27
|
+
values: schema.anyOf,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Schema, UiSchema } from "../types";
|
|
2
|
+
export declare const getTitle: ({ title, uiSchema, schema, name, }: {
|
|
3
|
+
title?: string | undefined;
|
|
4
|
+
uiSchema?: UiSchema | undefined;
|
|
5
|
+
schema?: import("json-schema").JSONSchema7 | undefined;
|
|
6
|
+
name?: string | undefined;
|
|
7
|
+
}) => any;
|
|
8
|
+
export declare const getDescription: ({ description, uiSchema, schema, }: {
|
|
9
|
+
description?: string | undefined;
|
|
10
|
+
uiSchema?: UiSchema | undefined;
|
|
11
|
+
schema?: import("json-schema").JSONSchema7 | undefined;
|
|
12
|
+
}) => any;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export const getTitle = ({ title, uiSchema, schema, name, }) => {
|
|
2
|
+
var _a;
|
|
3
|
+
return (title ||
|
|
4
|
+
((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _a === void 0 ? void 0 : _a.title) ||
|
|
5
|
+
(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:title"]) ||
|
|
6
|
+
(schema === null || schema === void 0 ? void 0 : schema.title) ||
|
|
7
|
+
(name === null || name === void 0 ? void 0 : name.split(".")[(name === null || name === void 0 ? void 0 : name.split(".").length) - 1]));
|
|
8
|
+
};
|
|
9
|
+
export const getDescription = ({ description, uiSchema, schema, }) => {
|
|
10
|
+
var _a;
|
|
11
|
+
return (description ||
|
|
12
|
+
((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _a === void 0 ? void 0 : _a.description) ||
|
|
13
|
+
(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:description"]) ||
|
|
14
|
+
(schema === null || schema === void 0 ? void 0 : schema.description));
|
|
15
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { Schema } from "../types";
|
|
2
|
+
export declare const isObject: (object: any) => boolean;
|
|
3
|
+
export declare const getDefaultValueForType: (type: Schema["type"]) => {} | null;
|
|
4
|
+
export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
|
|
5
|
+
export declare const getSchemaType: (schema: Schema) => import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export const isObject = (object) => {
|
|
2
|
+
return object != null && typeof object === "object";
|
|
3
|
+
};
|
|
4
|
+
export const getDefaultValueForType = (type) => {
|
|
5
|
+
if (type && !Array.isArray(type)) {
|
|
6
|
+
if (type === "array")
|
|
7
|
+
return [];
|
|
8
|
+
if (type === "object")
|
|
9
|
+
return {};
|
|
10
|
+
}
|
|
11
|
+
return null;
|
|
12
|
+
};
|
|
13
|
+
export const guessType = (value) => {
|
|
14
|
+
if (Array.isArray(value)) {
|
|
15
|
+
return "array";
|
|
16
|
+
}
|
|
17
|
+
else if (typeof value === "string") {
|
|
18
|
+
return "string";
|
|
19
|
+
}
|
|
20
|
+
else if (value == null) {
|
|
21
|
+
return "null";
|
|
22
|
+
}
|
|
23
|
+
else if (typeof value === "boolean") {
|
|
24
|
+
return "boolean";
|
|
25
|
+
}
|
|
26
|
+
else if (!isNaN(value)) {
|
|
27
|
+
return "number";
|
|
28
|
+
}
|
|
29
|
+
else if (typeof value === "object") {
|
|
30
|
+
return "object";
|
|
31
|
+
}
|
|
32
|
+
// Default to string if we can't figure it out
|
|
33
|
+
return "string";
|
|
34
|
+
};
|
|
35
|
+
export const getSchemaType = (schema) => {
|
|
36
|
+
if (!schema) {
|
|
37
|
+
return undefined;
|
|
38
|
+
}
|
|
39
|
+
let { type } = schema;
|
|
40
|
+
if (!type && schema.const) {
|
|
41
|
+
return guessType(schema.const);
|
|
42
|
+
}
|
|
43
|
+
if (!type && schema.enum) {
|
|
44
|
+
return "string";
|
|
45
|
+
}
|
|
46
|
+
if (!type && (schema.properties || schema.additionalProperties)) {
|
|
47
|
+
return "object";
|
|
48
|
+
}
|
|
49
|
+
if (type instanceof Array && type.length === 2 && type.includes("null")) {
|
|
50
|
+
return type.find((type) => type !== "null");
|
|
51
|
+
}
|
|
52
|
+
return type;
|
|
53
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export * from "./deepEqual";
|
|
2
|
+
export * from "./getEnums";
|
|
3
|
+
export * from "./getTitleAndDescription";
|
|
4
|
+
export * from "./getTypes";
|
|
5
|
+
export * from "./mergeSchemas";
|
|
6
|
+
export * from "./resolveSchema";
|
|
7
|
+
export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export * from "./deepEqual";
|
|
2
|
+
export * from "./getEnums";
|
|
3
|
+
export * from "./getTitleAndDescription";
|
|
4
|
+
export * from "./getTypes";
|
|
5
|
+
export * from "./mergeSchemas";
|
|
6
|
+
export * from "./resolveSchema";
|
|
7
|
+
//TODO: REMOVE WHEN ALL SUPPORTED
|
|
8
|
+
export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
|
|
9
|
+
Object.keys(data).forEach((key) => {
|
|
10
|
+
if (!supportedKeys.includes(key)) {
|
|
11
|
+
console.warn(`Component "${componentName}" does not support (yet) key "${key}"`);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const mergeSchemas: (obj1: any, obj2: any) => any;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { getSchemaType } from "./getTypes";
|
|
2
|
+
export const mergeSchemas = (obj1, obj2) => {
|
|
3
|
+
const acc = Object.assign({}, obj1); // Prevent mutation of source object.
|
|
4
|
+
return Object.keys(obj2).reduce((acc, key) => {
|
|
5
|
+
const left = obj1 ? obj1[key] : {}, right = obj2[key];
|
|
6
|
+
if (obj1 &&
|
|
7
|
+
key in obj1 &&
|
|
8
|
+
typeof right === "object" &&
|
|
9
|
+
!Array.isArray(right)) {
|
|
10
|
+
acc[key] = mergeSchemas(left, right);
|
|
11
|
+
}
|
|
12
|
+
else if (obj1 &&
|
|
13
|
+
obj2 &&
|
|
14
|
+
(getSchemaType(obj1) === "object" || getSchemaType(obj2) === "object") &&
|
|
15
|
+
key === "required" &&
|
|
16
|
+
Array.isArray(left) &&
|
|
17
|
+
Array.isArray(right)) {
|
|
18
|
+
// Don't include duplicate values when merging 'required' fields.
|
|
19
|
+
acc[key] = [...new Set([...left, ...right])];
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
acc[key] = right;
|
|
23
|
+
}
|
|
24
|
+
return acc;
|
|
25
|
+
}, acc);
|
|
26
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { deepEqual } from "./deepEqual";
|
|
13
|
+
import { mergeSchemas } from "./mergeSchemas";
|
|
14
|
+
const resolveEquality = (value, expression) => {
|
|
15
|
+
const keyOfValue = Object.keys(value);
|
|
16
|
+
const valueOfValue = Object.values(value);
|
|
17
|
+
const newObject = {
|
|
18
|
+
properties: { [keyOfValue[0]]: { const: valueOfValue[0] } },
|
|
19
|
+
};
|
|
20
|
+
return deepEqual(newObject, expression);
|
|
21
|
+
};
|
|
22
|
+
export const resolveSchema = (_a, value) => {
|
|
23
|
+
var _b;
|
|
24
|
+
var { allOf } = _a, schema = __rest(_a, ["allOf"]);
|
|
25
|
+
if (!allOf) {
|
|
26
|
+
return [schema, []];
|
|
27
|
+
}
|
|
28
|
+
const { resolvedSchema, notAddedProperties } = allOf.reduce(({ resolvedSchema, notAddedProperties }, current) => {
|
|
29
|
+
var _a, _b;
|
|
30
|
+
if (!current || typeof current === "boolean") {
|
|
31
|
+
return { resolvedSchema, notAddedProperties };
|
|
32
|
+
}
|
|
33
|
+
const { if: expression, then, else: otherwise } = current, resolvedSchemaLessConditional = __rest(current, ["if", "then", "else"]);
|
|
34
|
+
if (!expression || typeof expression === "boolean") {
|
|
35
|
+
return {
|
|
36
|
+
resolvedSchema: mergeSchemas(resolvedSchema, resolvedSchemaLessConditional),
|
|
37
|
+
notAddedProperties,
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
if (resolveEquality(value, expression)) {
|
|
41
|
+
if (then && typeof then !== "boolean") {
|
|
42
|
+
resolvedSchema = mergeSchemas(resolvedSchema, then);
|
|
43
|
+
}
|
|
44
|
+
if (otherwise && typeof otherwise !== "boolean") {
|
|
45
|
+
notAddedProperties = [
|
|
46
|
+
...notAddedProperties,
|
|
47
|
+
...Object.keys((_a = otherwise.properties) !== null && _a !== void 0 ? _a : {}),
|
|
48
|
+
];
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
if (then && typeof then !== "boolean") {
|
|
53
|
+
notAddedProperties = [
|
|
54
|
+
...notAddedProperties,
|
|
55
|
+
...Object.keys((_b = then.properties) !== null && _b !== void 0 ? _b : {}),
|
|
56
|
+
];
|
|
57
|
+
}
|
|
58
|
+
if (otherwise && typeof otherwise !== "boolean") {
|
|
59
|
+
resolvedSchema = mergeSchemas(resolvedSchema, otherwise);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return { resolvedSchema, notAddedProperties };
|
|
63
|
+
}, { resolvedSchema: schema, notAddedProperties: [] });
|
|
64
|
+
//Values that do not exists due to conditions
|
|
65
|
+
const usedProperties = Object.keys((_b = resolvedSchema.properties) !== null && _b !== void 0 ? _b : {});
|
|
66
|
+
const valuesToRemove = [...new Set([...notAddedProperties])].filter((key) => !usedProperties.includes(key) && typeof value[key] !== "undefined");
|
|
67
|
+
return [resolvedSchema, valuesToRemove];
|
|
68
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nolwenture/formik-jsonschema-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Formik form generation from json schema",
|
|
5
5
|
"author": "Antti Vikman <antti.vikman@nolwenture.com>",
|
|
6
6
|
"contributors": [
|
|
@@ -27,32 +27,41 @@
|
|
|
27
27
|
"package.json",
|
|
28
28
|
"LICENSE"
|
|
29
29
|
],
|
|
30
|
+
"scripts": {
|
|
31
|
+
"build": "tsc --build",
|
|
32
|
+
"clean": "tsc --build --clean",
|
|
33
|
+
"test": "jest",
|
|
34
|
+
"storybook": "storybook dev -p 6006"
|
|
35
|
+
},
|
|
30
36
|
"dependencies": {
|
|
31
|
-
"
|
|
32
|
-
"@testing-library/react": "^13.3.0",
|
|
33
|
-
"@testing-library/user-event": "^13.5.0",
|
|
34
|
-
"@types/jest": "^27.5.2",
|
|
35
|
-
"@types/node": "^16.11.45",
|
|
36
|
-
"@types/react": "^18.0.15",
|
|
37
|
-
"@types/react-dom": "^18.0.6",
|
|
38
|
-
"@types/styled-components": "^5.1.25",
|
|
39
|
-
"formik": "^2.2.9",
|
|
37
|
+
"formik": "^2.4.5",
|
|
40
38
|
"json-schema": "^0.4.0",
|
|
41
39
|
"react": "^18.2.0",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"styled-components": "^5.3.5",
|
|
45
|
-
"typescript": "^4.7.4",
|
|
46
|
-
"web-vitals": "^2.1.4"
|
|
40
|
+
"styled-components": "^6.1.8",
|
|
41
|
+
"typescript": "^5.4.3"
|
|
47
42
|
},
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"storybook": "
|
|
55
|
-
"
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@babel/preset-react": "^7.24.1",
|
|
45
|
+
"@babel/preset-typescript": "^7.24.1",
|
|
46
|
+
"@storybook/addon-essentials": "^8.0.5",
|
|
47
|
+
"@storybook/addon-interactions": "^8.0.5",
|
|
48
|
+
"@storybook/addon-links": "^8.0.5",
|
|
49
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
50
|
+
"@storybook/react": "^8.0.5",
|
|
51
|
+
"@storybook/react-webpack5": "^8.0.5",
|
|
52
|
+
"@storybook/test": "^8.0.5",
|
|
53
|
+
"@testing-library/jest-dom": "^6.4.2",
|
|
54
|
+
"@testing-library/react": "^14.2.2",
|
|
55
|
+
"@testing-library/user-event": "^14.5.2",
|
|
56
|
+
"@types/jest": "^29.5.12",
|
|
57
|
+
"@types/node": "^20.12.2",
|
|
58
|
+
"@types/react": "^18.2.73",
|
|
59
|
+
"@types/styled-components": "^5.1.34",
|
|
60
|
+
"babel-plugin-named-exports-order": "^0.0.2",
|
|
61
|
+
"jest": "^29.7.0",
|
|
62
|
+
"storybook": "^8.0.5",
|
|
63
|
+
"ts-jest": "^29.1.2",
|
|
64
|
+
"webpack": "^5.91.0"
|
|
56
65
|
},
|
|
57
66
|
"eslintConfig": {
|
|
58
67
|
"extends": [
|
|
@@ -81,19 +90,5 @@
|
|
|
81
90
|
"last 1 firefox version",
|
|
82
91
|
"last 1 safari version"
|
|
83
92
|
]
|
|
84
|
-
},
|
|
85
|
-
"devDependencies": {
|
|
86
|
-
"@storybook/addon-essentials": "^6.5.15",
|
|
87
|
-
"@storybook/addon-interactions": "^6.5.15",
|
|
88
|
-
"@storybook/addon-links": "^6.5.15",
|
|
89
|
-
"@storybook/builder-webpack5": "^6.5.15",
|
|
90
|
-
"@storybook/manager-webpack5": "^6.5.15",
|
|
91
|
-
"@storybook/node-logger": "^6.5.15",
|
|
92
|
-
"@storybook/preset-create-react-app": "^4.1.2",
|
|
93
|
-
"@storybook/react": "^6.5.15",
|
|
94
|
-
"@storybook/testing-library": "^0.0.13",
|
|
95
|
-
"babel-plugin-named-exports-order": "^0.0.2",
|
|
96
|
-
"prop-types": "^15.8.1",
|
|
97
|
-
"webpack": "^5.73.0"
|
|
98
93
|
}
|
|
99
94
|
}
|
package/dist/_sampleData.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Schema, UiSchema } from "./types";
|
|
2
|
-
export type SimpleFormDataType = {
|
|
3
|
-
firstName: string;
|
|
4
|
-
lastName: string;
|
|
5
|
-
};
|
|
6
|
-
export declare const simpleSchema: Schema;
|
|
7
|
-
export declare const simpleUiSchema: UiSchema;
|
|
8
|
-
export declare const completeSchema: Schema;
|
|
9
|
-
export declare const completeUiSchema: UiSchema;
|
|
10
|
-
export declare const generatedSchema: Schema;
|
|
11
|
-
export declare const requiredInputSchema: Schema;
|
|
12
|
-
export declare const requiredInputUiSchema: UiSchema;
|
package/dist/utils.d.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { FieldProps, Schema, UiSchema } from "./types";
|
|
2
|
-
import { JSONSchema7 } from "json-schema";
|
|
3
|
-
export declare function getTitle({ title, uiSchema, schema, name, }: {
|
|
4
|
-
title?: string;
|
|
5
|
-
uiSchema?: UiSchema;
|
|
6
|
-
schema?: Schema;
|
|
7
|
-
name?: string;
|
|
8
|
-
}): any;
|
|
9
|
-
export declare function getDescription({ description, uiSchema, schema, }: {
|
|
10
|
-
description?: string;
|
|
11
|
-
uiSchema?: UiSchema;
|
|
12
|
-
schema?: Schema;
|
|
13
|
-
}): any;
|
|
14
|
-
export declare function getEnums({ schema }: FieldProps): {
|
|
15
|
-
type: string;
|
|
16
|
-
values: {
|
|
17
|
-
const: any;
|
|
18
|
-
title: string;
|
|
19
|
-
}[];
|
|
20
|
-
} | undefined;
|
|
21
|
-
export declare function getDefaultValueForType(type: JSONSchema7["type"]): {} | null;
|
|
22
|
-
export declare function useSetDefault(props: FieldProps): void;
|
|
23
|
-
export declare function useExtractUiSchema(props?: UiSchema | undefined): {
|
|
24
|
-
[name: string]: any;
|
|
25
|
-
field?: UiSchema["ui:field"];
|
|
26
|
-
props?: UiSchema["ui:props"];
|
|
27
|
-
help?: UiSchema["ui:help"];
|
|
28
|
-
info?: UiSchema["ui:info"];
|
|
29
|
-
};
|
|
30
|
-
export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
|
|
31
|
-
export declare function getSchemaType(schema: Schema): import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;
|
|
32
|
-
export declare function warnFromUnsupportedKeys(componentName: string, data: Record<string, any>, supportedKeys: string[]): void;
|