@nolwenture/formik-jsonschema-form 0.8.0 → 0.9.1

package/dist/sampleData/refDefSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const refDefSchema: Schema;
+export declare const refDefUiSchema: UiSchema;

package/dist/sampleData/refDefSchema.js

@@ -0,0 +1,219 @@
+import { ageFieldDefinition } from "./ageFieldDefinition";
+export const refDefSchema = {
+    title: "References and Definitions",
+    type: "object",
+    required: ["name", "field"],
+    properties: {
+        name: {
+            $ref: "#/definitions/name",
+        },
+        age: {
+            $ref: "#/definitions/age",
+        },
+        creditCard: {
+            type: "number",
+            title: "Credit card number",
+            description: "Giving input to this field will trigger its dependent field 'billing_address'",
+        },
+        fieldType: {
+            type: "string",
+            description: "Selecting an option in this field will render the correct dependent field from the provided oneOf-array",
+            enum: ["no type", "string", "object", "array", "object and string"],
+        },
+        boolean: {
+            type: "boolean",
+            title: "I already had coffee today",
+        },
+        animal: {
+            type: "string",
+            oneOf: [
+                { const: "cat", title: "Cat" },
+                { const: "fish", title: "Fish" },
+                { const: "dog", title: "Dog" },
+                { const: "horse", title: "Horse" },
+                { const: "hamster", title: "Hamster" },
+            ],
+        },
+    },
+    dependencies: {
+        creditCard: {
+            properties: {
+                billing_address: {
+                    type: "object",
+                    description: "This object depends on creditCard field input",
+                    properties: {
+                        street: { type: "string", title: "Street" },
+                        city: { type: "string", title: "City" },
+                        postalCode: { type: "number", title: "Postal code" },
+                    },
+                },
+            },
+            required: ["billing_address"],
+        },
+        fieldType: {
+            oneOf: [
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["no type"],
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["string"],
+                        },
+                        stringField: {
+                            type: "string",
+                            title: "StringField",
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["object"],
+                        },
+                        objectField: {
+                            type: "object",
+                            properties: {
+                                objectString: {
+                                    type: "string",
+                                    title: "StringField in Object",
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["array"],
+                        },
+                        arrayField: {
+                            type: "array",
+                            additionalItems: { type: "string" },
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["object and string"],
+                        },
+                        stringField: {
+                            type: "string",
+                            title: "StringField",
+                        },
+                        objectField: {
+                            type: "object",
+                            properties: {
+                                objectString: {
+                                    type: "string",
+                                    title: "StringField in Object",
+                                },
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+        boolean: {
+            oneOf: [
+                {
+                    properties: { boolean: false },
+                },
+                {
+                    properties: {
+                        boolean: true,
+                        something: { type: "string" },
+                    },
+                },
+            ],
+        },
+    },
+    allOf: [
+        {
+            if: {
+                properties: {
+                    animal: {
+                        const: "cat",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    food: {
+                        type: "string",
+                        enum: ["meat", "grass", "fish"],
+                    },
+                },
+                required: ["food"],
+            },
+        },
+        {
+            if: {
+                properties: {
+                    animal: {
+                        const: "fish",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    food: {
+                        type: "string",
+                        enum: ["insect", "worms"],
+                    },
+                    water: {
+                        type: "string",
+                        enum: ["lake", "sea"],
+                    },
+                },
+                required: ["food", "water"],
+            },
+            // else: {
+            //   properties: {
+            //     likesWalkiesWhere: {
+            //       type: "string",
+            //       enum: ["park", "forest", "garden"],
+            //     },
+            //   },
+            // },
+        },
+        {
+            required: ["animal"],
+        },
+    ],
+    definitions: {
+        name: {
+            type: "string",
+            title: "Name",
+            description: "The schema for this field comes from the 'definitions' object inside the main schema",
+        },
+        age: ageFieldDefinition,
+    },
+};
+export const refDefUiSchema = {
+    "ui:order": [
+        "name",
+        "age",
+        "creditCard",
+        "billing_address",
+        "fieldType",
+        "stringField",
+        "objectField",
+        "arrayField",
+        "boolean",
+        "something",
+        "animal",
+        "food",
+        "water",
+    ],
+    fieldType: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+};

package/dist/styledComponents.js

@@ -295,8 +295,6 @@ const MultipleChoiceFieldElement = styled(RadioButtonFieldElement) ``;
 const MultipleChoiceFieldInput = styled(RadioButtonFieldInput) ``;
 const MultipleChoiceFieldLabel = styled(ButtonLabel) ``;
 export const MultipleChoiceField = ({ inputProps, name, className, enums, style, }) => {
-    console.log("style", style);
-    console.log("function", getStyle(style !== null && style !== void 0 ? style : ""));
     return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => (_jsxs(MultipleChoiceFieldElement, { children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, inputProps, { name: name, type: enums.type === "multiSelect" ? "checkbox" : "radio", value: typeof v === "string" || typeof v === "number" ? v : v.const })), _jsx(MultipleChoiceFieldLabel, { children: typeof v === "string" || typeof v === "number" ? v : v.title })] }, typeof v === "string" || typeof v === "number" ? v : v.const))) }));
 };
 RadioButtonField.styles = {

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { JSONSchema7 } from "json-schema";
+import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import React from "react";
 export type FormProps<T> = React.PropsWithChildren<{
     /** If true, disabled prop is passed down to each field on the form */
@@ -48,7 +48,9 @@ export type FormRegistryContextValue = {
     fields: Record<string, Field>;
     templates: TemplatesType;
     components: ComponentsType;
-    definitions: Record<string, any>;
+    definitions: {
+        [key: string]: JSONSchema7Definition;
+    } | undefined;
     formContext: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;

package/dist/utils/__tests/createInitialValues.test.js

@@ -7,12 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { ageFieldDefinition } from "../../sampleData/ageFieldDefinition";
 import { createInitialValues } from "../createInitialValues";
 const exampleSchema = {
     title: "TITLE",
     required: ["lastName", "requiredNestedObject", "requiredArray"],
     properties: {
         name: { type: "string", title: "Full name" },
+        age: { $ref: "#/definitions/age" },
         number: { type: "number", title: "Phone number" },
         feeling: { type: "boolean", title: "Feeling happy today?" },
         arrayOfObject: {
@@ -53,12 +55,16 @@ const exampleSchema = {
             },
         },
     },
+    definitions: {
+        age: ageFieldDefinition,
+    },
 };
 describe("Create Initial Values", () => {
     it("creates for an object type", () => __awaiter(void 0, void 0, void 0, function* () {
         const result = createInitialValues(exampleSchema);
         const expected = {
             name: "",
+            age: 0,
             number: 0,
             feeling: false,
             arrayOfObject: [],

package/dist/utils/__tests/resolveSchema.test.js

@@ -1,35 +1,6 @@
 import { resolveSchema } from "../resolveSchema";
+import { schemaWithDependenciesAndOneOf, simpleConditionalSchema, } from "./testSchemas";
 describe("resolveSchema", () => {
-    const simpleConditionalSchema = {
-        type: "object",
-        title: "Title",
-        properties: {
-            animal: {
-                type: "string",
-                enum: ["cat", "bird"],
-            },
-        },
-        allOf: [
-            {
-                if: {
-                    properties: {
-                        animal: {
-                            const: "cat",
-                        },
-                    },
-                },
-                then: {
-                    properties: {
-                        food: {
-                            type: "string",
-                            enum: ["meat", "grass", "fish"],
-                        },
-                    },
-                    required: ["food"],
-                },
-            },
-        ],
-    };
     test("adds conditional properties when condition is met", () => {
         const value = { animal: "cat" };
         const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
@@ -103,4 +74,43 @@ describe("resolveSchema", () => {
             ["food"],
         ]);
     });
+    test("selects the correct oneOf schema based on the type dependency", () => {
+        const valueCar = { type: "car" };
+        const resolvedCarSchema = resolveSchema(schemaWithDependenciesAndOneOf, valueCar);
+        expect(resolvedCarSchema).toEqual([
+            {
+                type: "object",
+                properties: {
+                    type: { type: "string", enum: ["car", "bike"] },
+                    wheels: { type: "number", enum: [4] },
+                },
+            },
+            [],
+        ]);
+        const valueBike = { type: "bike" };
+        const resolvedBikeSchema = resolveSchema(schemaWithDependenciesAndOneOf, valueBike);
+        expect(resolvedBikeSchema).toEqual([
+            {
+                type: "object",
+                properties: {
+                    type: { type: "string", enum: ["car", "bike"] },
+                    wheels: { type: "number", enum: [2] },
+                },
+            },
+            [],
+        ]);
+    });
+    test("handles missing dependencies", () => {
+        const valueEmpty = {};
+        const resolvedEmptySchema = resolveSchema(schemaWithDependenciesAndOneOf, valueEmpty);
+        expect(resolvedEmptySchema).toEqual([
+            {
+                type: "object",
+                properties: {
+                    type: { type: "string", enum: ["car", "bike"] },
+                },
+            },
+            [],
+        ]);
+    });
 });

package/dist/utils/__tests/solveReferences.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/__tests/solveReferences.test.js

@@ -0,0 +1,12 @@
+import { solveReferences } from "../solveReferences";
+import { refDefSchema } from "./testSchemas";
+describe("solveReferences", () => {
+    it("should resolve simple references correctly", () => {
+        var _a;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.name, refDefSchema.definitions);
+        expect(schemaSolvedForReferences).toEqual({
+            type: "string",
+            title: "Name",
+        });
+    });
+});

package/dist/utils/__tests/testSchemas.d.ts

@@ -0,0 +1,4 @@
+import { Schema } from "../../types";
+export declare const refDefSchema: Schema;
+export declare const simpleConditionalSchema: Schema;
+export declare const schemaWithDependenciesAndOneOf: Schema;

package/dist/utils/__tests/testSchemas.js

@@ -0,0 +1,67 @@
+export const refDefSchema = {
+    title: "References and Definitions",
+    type: "object",
+    required: ["string"],
+    properties: {
+        name: {
+            $ref: "#/definitions/name",
+        },
+    },
+    definitions: {
+        name: { type: "string", title: "Name" },
+    },
+};
+export const simpleConditionalSchema = {
+    type: "object",
+    title: "Title",
+    properties: {
+        animal: {
+            type: "string",
+            enum: ["cat", "bird"],
+        },
+    },
+    allOf: [
+        {
+            if: {
+                properties: {
+                    animal: {
+                        const: "cat",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    food: {
+                        type: "string",
+                        enum: ["meat", "grass", "fish"],
+                    },
+                },
+                required: ["food"],
+            },
+        },
+    ],
+};
+export const schemaWithDependenciesAndOneOf = {
+    type: "object",
+    properties: {
+        type: { type: "string", enum: ["car", "bike"] },
+    },
+    dependencies: {
+        type: {
+            oneOf: [
+                {
+                    properties: {
+                        type: { enum: ["car"] },
+                        wheels: { type: "number", enum: [4] },
+                    },
+                },
+                {
+                    properties: {
+                        type: { enum: ["bike"] },
+                        wheels: { type: "number", enum: [2] },
+                    },
+                },
+            ],
+        },
+    },
+};

package/dist/utils/createInitialValues.js

@@ -1,3 +1,4 @@
+import { solveReferences } from "./solveReferences";
 export function createInitialValues(schema) {
     if (!schema) {
         return {};
@@ -6,7 +7,8 @@ export function createInitialValues(schema) {
         return Object.keys(schema === null || schema === void 0 ? void 0 : schema.properties).reduce((acc, key) => {
             var _a;
             const value = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a[key];
-            return Object.assign(Object.assign({}, acc), { [key]: createInitialValues(value) });
+            const solvedValue = solveReferences(value, schema.definitions);
+            return Object.assign(Object.assign({}, acc), { [key]: createInitialValues(solvedValue) });
         }, {});
     }
     const type = schema.type;

package/dist/utils/index.d.ts

@@ -4,5 +4,6 @@ export * from "./getTitleAndDescription";
 export * from "./getTypes";
 export * from "./mergeSchemas";
 export * from "./resolveSchema";
+export * from "./solveReferences";
 export * from "./createInitialValues";
 export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;

package/dist/utils/index.js

@@ -4,6 +4,7 @@ export * from "./getTitleAndDescription";
 export * from "./getTypes";
 export * from "./mergeSchemas";
 export * from "./resolveSchema";
+export * from "./solveReferences";
 export * from "./createInitialValues";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {

package/dist/utils/resolveSchema.d.ts

@@ -1,2 +1,2 @@
 import type { Schema } from "../types";
-export declare const resolveSchema: ({ allOf, ...schema }: Schema, value: Record<string, any>) => [Schema, string[]];
+export declare const resolveSchema: ({ allOf, dependencies, ...schema }: Schema, value: Record<string, any>) => [Schema, string[]];

package/dist/utils/resolveSchema.js

@@ -19,50 +19,99 @@ const resolveEquality = (value, expression) => {
     };
     return deepOverlap(expression, newObject);
 };
+function resolveOneOfValue(value) {
+    var _a;
+    if (typeof value !== "boolean" && ((_a = value.enum) === null || _a === void 0 ? void 0 : _a[0]) !== undefined) {
+        return value.enum[0];
+    }
+    else if (value === true || value === false) {
+        return value;
+    }
+    else
+        return undefined;
+}
+const resolveSelectedOneOfValue = (key, value, oneOf) => {
+    const update = oneOf.findIndex((one) => resolveOneOfValue(one.properties[key]) === value[key]);
+    const manipulatedUpdateValue = Object.keys(oneOf[update].properties)
+        .filter((objKey) => objKey !== key)
+        .reduce((newObj, innerKey) => {
+        newObj[innerKey] = oneOf[update].properties[innerKey];
+        return newObj;
+    }, {});
+    return { properties: manipulatedUpdateValue };
+};
 export const resolveSchema = (_a, value) => {
-    var _b;
-    var { allOf } = _a, schema = __rest(_a, ["allOf"]);
-    if (!allOf) {
-        return [schema, []];
+    var _b, _c;
+    var { allOf, dependencies } = _a, schema = __rest(_a, ["allOf", "dependencies"]);
+    let schemaCopy = schema;
+    let valuesToRemoveDeps = [];
+    let valuesToRemoveAllOf = [];
+    if (dependencies) {
+        schemaCopy = Object.entries(dependencies).reduce((schema, [key, dependency]) => {
+            if (value[key] !== undefined && value[key] !== "") {
+                const oneOf = dependency.oneOf;
+                if (Array.isArray(oneOf) && oneOf !== undefined) {
+                    const selectedOneOf = resolveSelectedOneOfValue(key, value, oneOf);
+                    return mergeSchemas(schema, selectedOneOf);
+                }
+                return mergeSchemas(schema, dependency);
+            }
+            return schema;
+        }, schemaCopy);
     }
-    const { resolvedSchema, notAddedProperties } = allOf.reduce(({ resolvedSchema, notAddedProperties }, current) => {
-        var _a, _b;
-        if (!current || typeof current === "boolean") {
-            return { resolvedSchema, notAddedProperties };
-        }
-        const { if: expression, then, else: otherwise } = current, resolvedSchemaLessConditional = __rest(current, ["if", "then", "else"]);
-        if (!expression || typeof expression === "boolean") {
-            return {
-                resolvedSchema: mergeSchemas(resolvedSchema, resolvedSchemaLessConditional),
-                notAddedProperties,
-            };
+    const usedProperties = Object.keys((_b = schemaCopy.properties) !== null && _b !== void 0 ? _b : {});
+    Object.keys(value).map((key) => {
+        if (!usedProperties.includes(key)) {
+            valuesToRemoveDeps.push(key);
         }
-        if (resolveEquality(value, expression)) {
-            if (then && typeof then !== "boolean") {
-                resolvedSchema = mergeSchemas(resolvedSchema, then);
+    });
+    if (!allOf && dependencies) {
+        return [schemaCopy, valuesToRemoveDeps];
+    }
+    if (allOf) {
+        const { resolvedSchema, notAddedProperties } = allOf.reduce(({ resolvedSchema, notAddedProperties }, current) => {
+            var _a, _b;
+            if (!current || typeof current === "boolean") {
+                return { resolvedSchema, notAddedProperties };
             }
-            if (otherwise && typeof otherwise !== "boolean") {
-                notAddedProperties = [
-                    ...notAddedProperties,
-                    ...Object.keys((_a = otherwise.properties) !== null && _a !== void 0 ? _a : {}),
-                ];
+            const { if: expression, then, else: otherwise } = current, resolvedSchemaLessConditional = __rest(current, ["if", "then", "else"]);
+            if (!expression || typeof expression === "boolean") {
+                return {
+                    resolvedSchema: mergeSchemas(resolvedSchema, resolvedSchemaLessConditional),
+                    notAddedProperties,
+                };
             }
-        }
-        else {
-            if (then && typeof then !== "boolean") {
-                notAddedProperties = [
-                    ...notAddedProperties,
-                    ...Object.keys((_b = then.properties) !== null && _b !== void 0 ? _b : {}),
-                ];
+            if (resolveEquality(value, expression)) {
+                if (then && typeof then !== "boolean") {
+                    resolvedSchema = mergeSchemas(resolvedSchema, then);
+                }
+                if (otherwise && typeof otherwise !== "boolean") {
+                    notAddedProperties = [
+                        ...notAddedProperties,
+                        ...Object.keys((_a = otherwise.properties) !== null && _a !== void 0 ? _a : {}),
+                    ];
+                }
             }
-            if (otherwise && typeof otherwise !== "boolean") {
-                resolvedSchema = mergeSchemas(resolvedSchema, otherwise);
+            else {
+                if (then && typeof then !== "boolean") {
+                    notAddedProperties = [
+                        ...notAddedProperties,
+                        ...Object.keys((_b = then.properties) !== null && _b !== void 0 ? _b : {}),
+                    ];
+                }
+                if (otherwise && typeof otherwise !== "boolean") {
+                    resolvedSchema = mergeSchemas(resolvedSchema, otherwise);
+                }
             }
-        }
-        return { resolvedSchema, notAddedProperties };
-    }, { resolvedSchema: schema, notAddedProperties: [] });
-    //Values that do not exists due to conditions
-    const usedProperties = Object.keys((_b = resolvedSchema.properties) !== null && _b !== void 0 ? _b : {});
-    const valuesToRemove = [...new Set([...notAddedProperties])].filter((key) => !usedProperties.includes(key) && typeof value[key] !== "undefined");
-    return [resolvedSchema, valuesToRemove];
+            return { resolvedSchema, notAddedProperties };
+        }, { resolvedSchema: schemaCopy, notAddedProperties: [] });
+        //Values that do not exists due to conditions
+        const usedPropertiesAllOf = Object.keys((_c = resolvedSchema.properties) !== null && _c !== void 0 ? _c : {});
+        valuesToRemoveAllOf = [...new Set([...notAddedProperties])].filter((key) => !usedPropertiesAllOf.includes(key) && typeof value[key] !== "undefined");
+        const valuesToRemove = [
+            ...new Set([...valuesToRemoveDeps, ...valuesToRemoveAllOf]),
+        ];
+        return [resolvedSchema, valuesToRemove];
+    }
+    return [schemaCopy, []];
 };

package/dist/utils/solveReferences.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from "../types";
+export declare function solveReferences(schema: Schema, definitions: any): any;

package/dist/utils/solveReferences.js

@@ -0,0 +1,8 @@
+export function solveReferences(schema, definitions) {
+    var _a, _b;
+    if (typeof schema === "object" && schema["$ref"]) {
+        const schemaKey = (_b = (_a = schema["$ref"]) === null || _a === void 0 ? void 0 : _a.substring(14)) !== null && _b !== void 0 ? _b : "";
+        return definitions[schemaKey];
+    }
+    return schema;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [