@nolwenture/formik-jsonschema-form 0.7.1 → 0.9.0

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

@@ -0,0 +1,53 @@
+import { getTitle, getDescription } from "../getTitleAndDescription";
+describe("getTitleAndDescription", () => {
+    describe("getTitle", () => {
+        test("returns title when provided", () => {
+            const title = "Test Title";
+            expect(getTitle({ title })).toBe(title);
+        });
+        test("returns title from uiSchema options when provided", () => {
+            const uiSchema = {
+                "ui:options": { title: "UI Schema Title" },
+            };
+            expect(getTitle({ uiSchema })).toBe("UI Schema Title");
+        });
+        test("returns title from uiSchema title when provided", () => {
+            const uiSchema = { "ui:title": "UI Schema Title" };
+            expect(getTitle({ uiSchema })).toBe("UI Schema Title");
+        });
+        test("returns title from schema when provided", () => {
+            const schema = { title: "Schema Title" };
+            expect(getTitle({ schema })).toBe("Schema Title");
+        });
+        test("returns last part of name when provided", () => {
+            const name = "nested.property";
+            expect(getTitle({ name })).toBe("property");
+        });
+        test("returns undefined when no title is provided", () => {
+            expect(getTitle({})).toBeUndefined();
+        });
+    });
+    describe("getDescription", () => {
+        test("returns description when provided", () => {
+            const description = "Test Description";
+            expect(getDescription({ description })).toBe(description);
+        });
+        test("returns description from uiSchema options when provided", () => {
+            const uiSchema = {
+                "ui:options": { description: "UI Schema Description" },
+            };
+            expect(getDescription({ uiSchema })).toBe("UI Schema Description");
+        });
+        test("returns description from uiSchema description when provided", () => {
+            const uiSchema = { "ui:description": "UI Schema Description" };
+            expect(getDescription({ uiSchema })).toBe("UI Schema Description");
+        });
+        test("returns description from schema when provided", () => {
+            const schema = { description: "Schema Description" };
+            expect(getDescription({ schema })).toBe("Schema Description");
+        });
+        test("returns undefined when no description is provided", () => {
+            expect(getDescription({})).toBeUndefined();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,62 @@
+import { isObject, getDefaultValueForType, guessType, getSchemaType, } from "../getTypes";
+describe("getTypes", () => {
+    describe("isObject", () => {
+        test("returns true for non-null objects", () => {
+            expect(isObject({})).toBe(true);
+            expect(isObject([])).toBe(true);
+        });
+        test("returns false for null", () => {
+            expect(isObject(null)).toBe(false);
+        });
+        test("returns false for non-object types", () => {
+            expect(isObject(42)).toBe(false);
+            expect(isObject("string")).toBe(false);
+        });
+    });
+    describe("getDefaultValueForType", () => {
+        test("returns empty array for 'array' type", () => {
+            expect(getDefaultValueForType("array")).toEqual([]);
+        });
+        test("returns empty object for 'object' type", () => {
+            expect(getDefaultValueForType("object")).toEqual({});
+        });
+        test("returns null for unspecified or complex types", () => {
+            expect(getDefaultValueForType("string")).toBeNull();
+            expect(getDefaultValueForType(["string", "null"])).toBeNull();
+        });
+    });
+    describe("guessType", () => {
+        test("correctly guesses basic types", () => {
+            expect(guessType([])).toBe("array");
+            expect(guessType("test")).toBe("string");
+            expect(guessType(42)).toBe("number");
+            expect(guessType(true)).toBe("boolean");
+            expect(guessType(null)).toBe("null");
+            expect(guessType({})).toBe("object");
+        });
+        test("defaults to 'string' for unrecognized values", () => {
+            expect(guessType(() => { })).toBe("string");
+        });
+    });
+    describe("getSchemaType", () => {
+        test("returns the explicit type if provided", () => {
+            expect(getSchemaType({ type: "number" })).toBe("number");
+        });
+        test("guesses the type based on const values", () => {
+            expect(getSchemaType({ const: 42 })).toBe("number");
+        });
+        test("returns 'string' for enums", () => {
+            expect(getSchemaType({ enum: ["one", "two"] })).toBe("string");
+        });
+        test("returns 'object' for schemas with properties or additionalProperties", () => {
+            expect(getSchemaType({ properties: { a: { type: "number" } } })).toBe("object");
+            expect(getSchemaType({ additionalProperties: { type: "number" } })).toBe("object");
+        });
+        test('handles array types, excluding "null" when paired with another type', () => {
+            expect(getSchemaType({ type: ["number", "null"] })).toBe("number");
+        });
+        test("returns undefined for empty or invalid schemas", () => {
+            expect(getSchemaType({})).toBeUndefined();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,40 @@
+import { mergeSchemas } from "../mergeSchemas";
+describe("mergeSchemas", () => {
+    test("merges simple objects without overlap", () => {
+        const obj1 = { a: 1 };
+        const obj2 = { b: 2 };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ a: 1, b: 2 });
+    });
+    test("merges objects with nested objects", () => {
+        const obj1 = { a: { b: 1 } };
+        const obj2 = { a: { c: 2 }, d: 3 };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ a: { b: 1, c: 2 }, d: 3 });
+    });
+    test("handles merging with overlapping keys", () => {
+        const obj1 = { a: 1, b: 2 };
+        const obj2 = { a: 3, c: 4 };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ a: 3, b: 2, c: 4 });
+    });
+    test("merges schemas with arrays (ensuring arrays are replaced, not merged)", () => {
+        const obj1 = { a: [1, 2], b: "string" };
+        const obj2 = { a: [3, 4] };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ a: [3, 4], b: "string" });
+    });
+    test("deep merges nested objects", () => {
+        const obj1 = { a: { b: { c: 1 } } };
+        const obj2 = { a: { b: { d: 2 }, e: 3 } };
+        expect(mergeSchemas(obj1, obj2)).toEqual({
+            a: { b: { c: 1, d: 2 }, e: 3 },
+        });
+    });
+    test("retains the more specific type when merging schemas with different types", () => {
+        const obj1 = { type: ["null", "number"] };
+        const obj2 = { type: "number" };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ type: "number" });
+    });
+    test("returns the second object if the first one is null or undefined", () => {
+        const obj1 = null;
+        const obj2 = { a: 1 };
+        expect(mergeSchemas(obj1, obj2)).toEqual({ a: 1 });
+    });
+});

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

@@ -1,36 +1,7 @@
 import { resolveSchema } from "../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"],
-            },
-        },
-    ],
-};
+import { schemaWithDependenciesAndOneOf, simpleConditionalSchema, } from "./testSchemas";
 describe("resolveSchema", () => {
-    test("with matching if value", () => {
+    test("adds conditional properties when condition is met", () => {
         const value = { animal: "cat" };
         const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
         expect(resolvedSchema).toEqual([
@@ -52,7 +23,7 @@ describe("resolveSchema", () => {
             [],
         ]);
     });
-    test("with non-matching if value", () => {
+    test("does not add conditional properties when condition is not met", () => {
         const value = { animal: "bird" };
         const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
         expect(resolvedSchema).toEqual([
@@ -69,7 +40,7 @@ describe("resolveSchema", () => {
             [],
         ]);
     });
-    test("with empty values", () => {
+    test("does not add conditional properties when no value is provided", () => {
         const value = {};
         const resolvedSchema = resolveSchema(simpleConditionalSchema, value);
         expect(resolvedSchema).toEqual([
@@ -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.d.ts

@@ -0,0 +1,4 @@
+import { JSONSchema7 } from "json-schema";
+type ReturnType = 0 | "" | 1 | boolean | Array<any> | object;
+export declare function createInitialValues(schema: JSONSchema7): ReturnType;
+export {};

package/dist/utils/createInitialValues.js

@@ -0,0 +1,27 @@
+export function createInitialValues(schema) {
+    if (!schema) {
+        return {};
+    }
+    if (schema.properties) {
+        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 type = schema.type;
+    switch (type) {
+        case "array":
+            return [];
+        case "boolean":
+            return false;
+        case "null":
+            return "";
+        case "number":
+            return 0;
+        case "string":
+            return "";
+        default:
+            throw new Error("Unsupported schema type");
+    }
+}

package/dist/utils/getStyle.d.ts

@@ -0,0 +1,5 @@
+interface StyleObject {
+    [key: string]: any;
+}
+export declare function getStyle(key: string): StyleObject;
+export {};

package/dist/utils/getStyle.js

@@ -0,0 +1,18 @@
+export function getStyle(key) {
+    const style = {};
+    if (key === "inline") {
+        style.display = "inline-grid";
+    }
+    if (key === "oneColumn") {
+        style.display = "grid";
+    }
+    if (key === "twoColumns") {
+        style.display = "grid";
+        style["grid-template-columns"] = "1fr 1fr";
+    }
+    if (key === "threeColumns") {
+        style.display = "grid";
+        style["grid-template-columns"] = "1fr 1fr 1fr";
+    }
+    return style;
+}

package/dist/utils/getTypes.js

@@ -17,7 +17,7 @@ export const guessType = (value) => {
     else if (typeof value === "string") {
         return "string";
     }
-    else if (value == null) {
+    else if (value === null) {
         return "null";
     }
     else if (typeof value === "boolean") {

package/dist/utils/index.d.ts

@@ -4,4 +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,8 @@ 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) => {
     Object.keys(data).forEach((key) => {

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.7.1",
+  "version": "0.9.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -31,7 +31,8 @@
     "build": "tsc --build",
     "clean": "tsc --build --clean",
     "test": "jest",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "test-storybook": "test-storybook"
   },
   "dependencies": {
     "formik": "^2.4.5",
@@ -50,6 +51,7 @@
     "@storybook/react": "^8.0.5",
     "@storybook/react-webpack5": "^8.0.5",
     "@storybook/test": "^8.0.5",
+    "@storybook/test-runner": "^0.17.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
@@ -59,6 +61,7 @@
     "@types/styled-components": "^5.1.34",
     "babel-plugin-named-exports-order": "^0.0.2",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "storybook": "^8.0.5",
     "ts-jest": "^29.1.2",
     "webpack": "^5.91.0"