@nolwenture/formik-jsonschema-form 0.7.0 → 0.8.0

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

@@ -0,0 +1,72 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createInitialValues } from "../createInitialValues";
+const exampleSchema = {
+    title: "TITLE",
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
+    properties: {
+        name: { type: "string", title: "Full name" },
+        number: { type: "number", title: "Phone number" },
+        feeling: { type: "boolean", title: "Feeling happy today?" },
+        arrayOfObject: {
+            type: "array",
+            title: "Array of objects",
+            items: {
+                type: "object",
+                title: "Favourites",
+                required: ["favouriteFood"],
+                properties: {
+                    favouriteFood: { type: "string", title: "Favourite food" },
+                    favouriteSong: { type: "string", title: "Favourite song" },
+                },
+            },
+            additionalItems: {
+                type: "object",
+                title: "Second favourites",
+                required: ["secondFavouriteSong"],
+                properties: {
+                    anotherFavouriteFood: {
+                        type: "string",
+                        title: "Another favourite food",
+                    },
+                    anotherFavouriteSong: {
+                        type: "string",
+                        title: "Another favourite song",
+                    },
+                },
+            },
+        },
+        nestedObject: {
+            type: "object",
+            title: "Nested Object",
+            required: ["tasks"],
+            properties: {
+                hobbies: { type: "string", title: "Hobbies" },
+                tasks: { type: "string", title: "Tasks" },
+            },
+        },
+    },
+};
+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: "",
+            number: 0,
+            feeling: false,
+            arrayOfObject: [],
+            nestedObject: {
+                hobbies: "",
+                tasks: "",
+            },
+        };
+        expect(result).toEqual(expected);
+    }));
+});

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

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

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

@@ -0,0 +1,41 @@
+import { deepOverlap } from "../deepOverlap";
+describe("deepOverlap", () => {
+    test("returns true for both empty objects", () => {
+        expect(deepOverlap({}, {})).toBe(true);
+    });
+    test("returns true for identical objects", () => {
+        const obj1 = { a: 1, b: 2 };
+        const obj2 = { a: 1, b: 2 };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns true for nested objects that are identical", () => {
+        const obj1 = { a: { b: 2 } };
+        const obj2 = { a: { b: 2 } };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("handles arrays and non-object types correctly", () => {
+        const obj1 = { a: [1, 2, 3], b: "string", c: true };
+        const obj2 = { a: [1, 2, 3], b: "string", c: true };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns true for objects with keys in different orders", () => {
+        const obj1 = { a: 1, b: { c: 2 } };
+        const obj2 = { b: { c: 2 }, a: 1 };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns false for objects with different values", () => {
+        const obj1 = { a: 1 };
+        const obj2 = { a: 2 };
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+    test("returns false for nested objects that do not overlap", () => {
+        const obj1 = { a: { b: 1 } };
+        const obj2 = { a: { b: 2 } };
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+    test("returns false when one object is empty", () => {
+        const obj1 = { a: 1 };
+        const obj2 = {};
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+});

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

@@ -1,5 +1,12 @@
 import { getEnums } from "../getEnums";
 describe("getEnums", () => {
+    test("returns undefined when no enum types are defined", () => {
+        const result = getEnums({ schema: {} });
+        expect(result).toBeUndefined();
+    });
+    test("throws error when more than one enum type is defined", () => {
+        expect(() => getEnums({ schema: { enum: [], oneOf: [], anyOf: [] } })).toThrow('Only one of "enum", "oneOf" or "anyOf" can be defined!');
+    });
     test("enum works", () => {
         const result = getEnums({ schema: { enum: ["one", "two", "three"] } });
         expect(result).toEqual({
@@ -15,10 +22,7 @@ describe("getEnums", () => {
         const result = getEnums({
             schema: {
                 oneOf: [
-                    {
-                        const: "horse",
-                        title: "Horse",
-                    },
+                    { const: "horse", title: "Horse" },
                     { const: "frog", title: "Frog" },
                     { const: "bird", title: "Bird" },
                 ],
@@ -27,10 +31,7 @@ describe("getEnums", () => {
         expect(result).toEqual({
             type: "select",
             values: [
-                {
-                    const: "horse",
-                    title: "Horse",
-                },
+                { const: "horse", title: "Horse" },
                 { const: "frog", title: "Frog" },
                 { const: "bird", title: "Bird" },
             ],
@@ -40,10 +41,7 @@ describe("getEnums", () => {
         const result = getEnums({
             schema: {
                 anyOf: [
-                    {
-                        const: "tangerine",
-                        title: "Tangerine",
-                    },
+                    { const: "tangerine", title: "Tangerine" },
                     { const: "mandarin", title: "Mandarin" },
                     { const: "bruno", title: "Bruno" },
                 ],
@@ -52,10 +50,7 @@ describe("getEnums", () => {
         expect(result).toEqual({
             type: "multiSelect",
             values: [
-                {
-                    const: "tangerine",
-                    title: "Tangerine",
-                },
+                { const: "tangerine", title: "Tangerine" },
                 { const: "mandarin", title: "Mandarin" },
                 { const: "bruno", title: "Bruno" },
             ],

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

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

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,36 @@
 import { resolveSchema } from "../resolveSchema";
-const simpleConditionalSchema = {
-    type: "object",
-    title: "Title",
-    properties: {
-        animal: {
-            type: "string",
-            enum: ["cat", "bird"],
+describe("resolveSchema", () => {
+    const simpleConditionalSchema = {
+        type: "object",
+        title: "Title",
+        properties: {
+            animal: {
+                type: "string",
+                enum: ["cat", "bird"],
+            },
         },
-    },
-    allOf: [
-        {
-            if: {
-                properties: {
-                    animal: {
-                        const: "cat",
+        allOf: [
+            {
+                if: {
+                    properties: {
+                        animal: {
+                            const: "cat",
+                        },
                     },
                 },
-            },
-            then: {
-                properties: {
-                    food: {
-                        type: "string",
-                        enum: ["meat", "grass", "fish"],
+                then: {
+                    properties: {
+                        food: {
+                            type: "string",
+                            enum: ["meat", "grass", "fish"],
+                        },
                     },
+                    required: ["food"],
                 },
-                required: ["food"],
             },
-        },
-    ],
-};
-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 +52,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 +69,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([

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,5 @@ export * from "./getTitleAndDescription";
 export * from "./getTypes";
 export * from "./mergeSchemas";
 export * from "./resolveSchema";
+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 "./createInitialValues";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.7.0",
+  "version": "0.8.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"