@nolwenture/formik-jsonschema-form 0.12.0 → 0.14.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
@@ -822,7 +866,7 @@ const refDefUiSchema: UiSchema = {
 ### Ordering fields
 
 The order of fields can be set using `"ui:order": ["fieldName"]` inside the uiSchema.
-If using "ui:order", all fields that should be visible in the form need to be included in the given array.
+If using `"ui:order"`, all fields that should be visible in the form need to be included in the given array. Fields excluded will not show on the form, in the following they will be referred to as `"hidden fields"`.
 
 ```tsx
 const schema = {
@@ -838,6 +882,42 @@ const uiSchema = {
 };
 ```
 
+Fields excluded will not show on the form. So in the following example "thirdField" will be a `hidden field`.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["firstField", "secondField"],
+};
+```
+
+Using `"*"`-wildcard inside the array will add all property fields that were not specifically added to the order-array.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["secondField", "*"],
+};
+```
+
+In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
+
+Wildcard `"*"` and `hidden fields` cannot be combined.
+
 ## Props
 
 `Form` component props:

package/dist/fields/ObjectField.js

@@ -17,6 +17,7 @@ import { ObjectFieldButtonPurpose } from "../types";
 import { resolveSchema } from "../utils/resolveSchema";
 import { useSetDefault } from "../hooks";
 import { getObjectFieldButton } from "../styledComponents";
+import { orderByUiSchema } from "../utils";
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = useFormikContext();
@@ -26,7 +27,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
@@ -48,7 +49,8 @@ export const ObjectField = (props) => {
     const FieldTemplateComponent = ((_b = (_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isCollapsible)
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
-    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [((_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"]) !== null && _c !== void 0 ? _c : Object.keys(properties || {}))
+    const orderedProperties = orderByUiSchema(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"], Object.keys(properties || {}));
+    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
                 .map((childName) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)

package/dist/fields/TextAreaField.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { TextAreaInputField } from "../styledComponents";
 export const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { TextAreaInputField }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);

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/__tests/orderByUiSchema.test.d.ts

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

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

@@ -0,0 +1,63 @@
+import { orderByUiSchema } from "../orderByUiSchema";
+const allProperties = ["firstName", "lastName", "age", "hobbies"];
+const emptyOrder = undefined;
+const noAsteriskOrder = ["firstName", "age"];
+const asteriskAsFirstElement = ["*", "firstName"];
+const asteriskAsLastElement = ["age", "*"];
+const asteriskAsMiddleElement = ["hobbies", "*", "age"];
+const orderWithDuplicates = ["age", "*", "age", "*", "lastName"];
+describe("orderByUiSchema", () => {
+    it("returns empty array when ui:order is not given", () => {
+        const orderedProperties = orderByUiSchema(emptyOrder, allProperties);
+        expect(orderedProperties).toEqual(undefined);
+    });
+    it("returns only given properties when order includes no asterisk", () => {
+        const orderedProperties = orderByUiSchema(noAsteriskOrder, allProperties);
+        expect(orderedProperties).toEqual(["firstName", "age"]);
+    });
+    it("returns all properties in the given order with asterisk as first element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsFirstElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "lastName",
+            "age",
+            "hobbies",
+            "firstName",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as last element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsLastElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "lastName",
+            "hobbies",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("ignores duplicates in order array to avoid errors", () => {
+        const orderedProperties = orderByUiSchema(orderWithDuplicates, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "hobbies",
+            "lastName",
+        ]);
+    });
+});

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

package/dist/utils/index.js

@@ -6,6 +6,8 @@ export * from "./mergeSchemas";
 export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
+export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/dist/utils/orderByUiSchema.d.ts

@@ -0,0 +1 @@
+export declare function orderByUiSchema(order: string[] | undefined, allProperties: string[]): string[] | undefined;

package/dist/utils/orderByUiSchema.js

@@ -0,0 +1,67 @@
+export function orderByUiSchema(order, allProperties) {
+    if (order !== undefined && allProperties !== undefined) {
+        if (order.includes("*")) {
+            return orderWithAsterisk(order, allProperties);
+        }
+        else {
+            return order;
+        }
+    }
+    return undefined;
+}
+function orderWithAsterisk(order, allProperties) {
+    //to avoid issues when asterisk or other strings were wrongly given multiple times
+    const orderWithoutDuplicates = [...new Set(order)];
+    const indexOfAsterisk = orderWithoutDuplicates.indexOf("*");
+    const elementsBeforeAsterisk = indexOfAsterisk !== 0
+        ? orderWithoutDuplicates.slice(0, indexOfAsterisk)
+        : undefined;
+    const elementsAfterAsterisk = indexOfAsterisk !== orderWithoutDuplicates.length - 1
+        ? orderWithoutDuplicates.slice(indexOfAsterisk + 1, orderWithoutDuplicates.length)
+        : undefined;
+    let asteriskArray = [];
+    let finalOrderedArray = [];
+    if (elementsBeforeAsterisk === undefined &&
+        elementsAfterAsterisk === undefined) {
+        finalOrderedArray = allProperties;
+    }
+    if (elementsBeforeAsterisk !== undefined) {
+        finalOrderedArray = finalOrderedArray.concat(elementsBeforeAsterisk);
+        allProperties.map((property) => {
+            elementsBeforeAsterisk.map((e) => {
+                if (e !== property) {
+                    asteriskArray.push(property);
+                }
+            });
+        });
+        if (elementsAfterAsterisk === undefined) {
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+        }
+    }
+    if (elementsAfterAsterisk !== undefined) {
+        if (asteriskArray.length === 0) {
+            allProperties.map((property) => {
+                elementsAfterAsterisk.map((e) => {
+                    if (e !== property) {
+                        asteriskArray.push(property);
+                    }
+                });
+            });
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+            finalOrderedArray = finalOrderedArray.concat(elementsAfterAsterisk);
+        }
+        else {
+            asteriskArray.map((property) => {
+                elementsAfterAsterisk.map((e) => {
+                    if (e === property) {
+                        const index = asteriskArray.indexOf(property);
+                        asteriskArray.splice(index, 1);
+                    }
+                });
+            });
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+            finalOrderedArray = finalOrderedArray.concat(elementsAfterAsterisk);
+        }
+    }
+    return finalOrderedArray;
+}

package/package.json

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