@nolwenture/formik-jsonschema-form 0.12.0 → 0.13.0

package/README.md

@@ -70,8 +70,7 @@ export function MyFormComponent() {
 }
 ```
 
-Pass your uiSchema to the `Form`component. which should be passed as a child to the `Formik`component,
-just like schema. uiSchema will tell the form more about its own layout and styles.
+Pass your uiSchema to the `Form`component, which should be passed as a child to the `Formik`component, just like schema. uiSchema will tell the form more about its own layout and styles.
 
 Basic available elements to add to the form or a field of the form via uiSchema are:
 
@@ -131,6 +130,51 @@ export function MyFormComponent() {
 }
 ```
 
+### Using create-functions for initialValues and validationSchema
+
+This library offers create-functions that, based on the JSON schema provided, will return a basic object of either initialValues or yup validationSchema.
+
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import {
+  createInitialValues,
+  createValidationSchema,
+} from "@nolwenture/formik-jsonschema-form/dist/utils";
+import { Formik } from "formik";
+
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+  },
+};
+
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+  lastName: {
+    "ui:info": {
+      label: "?",
+      content: "Add your family name",
+    },
+  },
+};
+
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={createInitialValues(schema)}
+      validationSchema={createValidationSchema(schema)}
+      onSubmit={handleSubmit}
+    >
+      <Form schema={schema} uiSchema={uiSchema}></Form>
+    </Formik>
+  );
+}
+```
+
 ### Using custom components
 
 Form components (such as wrappers) can be overridden with custom ones

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

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

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

@@ -0,0 +1,136 @@
+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 { ageFieldDefinition } from "../../sampleData/ageFieldDefinition";
+import { createValidationSchema } from "../createValidationSchema";
+const exampleSchema = {
+    title: "TITLE",
+    required: ["name", "age", "feeling"],
+    properties: {
+        name: { type: "string", title: "Full name" },
+        age: { $ref: "#/definitions/age" },
+        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: ["anotherFavouriteSong"],
+                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" },
+            },
+        },
+    },
+    definitions: {
+        age: ageFieldDefinition,
+    },
+};
+const simpleExampleSchema = {
+    title: "TITLE",
+    required: ["lastName"],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
+        drinksCoffee: { type: "boolean", title: "Do you drink coffee?" },
+        simpleArray: { type: "array", title: "Simple array" },
+    },
+};
+describe("Create Validation Schema", () => {
+    it("creates yup validationSchema based on given JSON schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = createValidationSchema(exampleSchema);
+        const expected = result.isValidSync({
+            name: "Jane",
+            age: 54,
+            feeling: false,
+            arrayOfObject: [
+                { favouriteFood: "Pizza!", favouriteSong: undefined },
+                {
+                    anotherFavouriteFood: undefined,
+                    anotherFavouriteSong: "On the turning away",
+                },
+            ],
+            nestedObject: {
+                hobbies: undefined,
+                tasks: "buy groceries",
+            },
+        });
+        expect(expected).toEqual(true);
+    }));
+    it("throws error when required input is missing", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = createValidationSchema(simpleExampleSchema);
+        yield expect(() => result.validate({
+            firstName: "Jane",
+            lastName: undefined,
+            age: 55,
+        })).rejects.toThrow("Required");
+    }));
+    it("throws error when given input is not matching defined type", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = createValidationSchema(simpleExampleSchema);
+        // for 'number' type
+        yield expect(() => result.validate({
+            firstName: "Ella",
+            lastName: "Myller",
+            age: true,
+            drinksCoffee: false,
+            simpleArray: [],
+        }, { strict: true })).rejects.toThrow("age must be a `number` type, but the final value was: `true`.");
+        // for 'string' type
+        yield expect(() => result.validate({
+            firstName: 123,
+            lastName: "Myller",
+            age: 17,
+            drinksCoffee: false,
+            simpleArray: [],
+        }, { strict: true })).rejects.toThrow("firstName must be a `string` type, but the final value was: `123`.");
+        // for 'boolean' type
+        yield expect(() => result.validate({
+            firstName: "Ella",
+            lastName: "Myller",
+            age: 17,
+            drinksCoffee: "Well, sometimes...",
+            simpleArray: [],
+        }, { strict: true })).rejects.toThrow('drinksCoffee must be a `boolean` type, but the final value was: `"Well, sometimes..."`.');
+        // for 'array' type
+        yield expect(() => result.validate({
+            firstName: "Ella",
+            lastName: "Myller",
+            age: 17,
+            drinksCoffee: false,
+            simpleArray: "Hello :)",
+        }, { strict: true })).rejects.toThrow('simpleArray must be a `array` type, but the final value was: `"Hello :)"`.');
+    }));
+});

package/dist/utils/createValidationSchema.d.ts

@@ -0,0 +1,3 @@
+import { JSONSchema7 } from "json-schema";
+import * as Yup from "yup";
+export declare function createValidationSchema(schema: JSONSchema7, definitions?: JSONSchema7): Yup.ObjectSchema<{}, Yup.AnyObject, {}, "">;

package/dist/utils/createValidationSchema.js

@@ -0,0 +1,47 @@
+import { solveReferences } from "./solveReferences";
+import * as Yup from "yup";
+export function createValidationSchema(schema, definitions = {}) {
+    var _a;
+    if (!schema || !schema.properties) {
+        return Yup.object().shape({});
+    }
+    const schemaDefinitions = Object.assign(Object.assign({}, definitions), ((_a = schema.definitions) !== null && _a !== void 0 ? _a : {}));
+    const requiredFields = schema.required;
+    function getValue(schema, key) {
+        if (schema.properties) {
+            return createValidationSchema(schema, schemaDefinitions);
+        }
+        const type = schema.type;
+        let yupType;
+        switch (type) {
+            case "array":
+                yupType = Yup.array();
+                break;
+            case "boolean":
+                yupType = Yup.boolean();
+                break;
+            case "integer":
+            case "number":
+                yupType = Yup.number();
+                break;
+            case "null":
+                yupType = Yup.string().nullable();
+                break;
+            case "string":
+                yupType = Yup.string();
+                break;
+            default:
+                throw new Error("Unsupported schema type");
+        }
+        if (requiredFields !== undefined && requiredFields.includes(key)) {
+            yupType = yupType["required"]("Required");
+        }
+        return yupType;
+    }
+    return Object.keys(schema.properties).reduce((validationSchema, key) => {
+        var _a;
+        const value = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[key];
+        const solvedValue = solveReferences(value, schemaDefinitions, {}, {});
+        return validationSchema.concat(Yup.object().shape({ [key]: getValue(solvedValue.schema, key) }));
+    }, Yup.object().shape({}));
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -6,6 +6,7 @@ export * from "./mergeSchemas";
 export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
+export * from "./createValidationSchema";
 //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.12.0",
+  "version": "0.13.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -39,7 +39,8 @@
     "json-schema": "^0.4.0",
     "react": "^18.2.0",
     "styled-components": "^6.1.8",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",