@nolwenture/formik-jsonschema-form 0.11.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
@@ -365,6 +409,10 @@ export function MyFormComponent() {
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
 There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
 
+The type of the field holding the enum is defined by its return value. `oneOf` enums will only return a single value and therefore, the type of the returned value is used as the field type (in the following example, "number" is the correct field type).
+
+`anyOf`enums will return the value(s) inside an array, even if only one option was selected. Therefore, the correct field type for the field holding the `anyOf`-enum is "array".
+
 ```tsx
 const schema = {
   properties: {
@@ -384,7 +432,7 @@ const schema = {
       ],
     },
     enumAnyOf: {
-      type: "number",
+      type: "array",
       title: "Enum anyOf (non-standard)",
       anyOf: [
         { const: 1, title: "one" },
@@ -394,7 +442,7 @@ const schema = {
       ],
     },
     enumTagSelectAnyOf: {
-      type: "string",
+      type: "array",
       title: "Enum searchable tag select anyOf",
       anyOf: [
         { const: 1, title: "one" },
@@ -420,7 +468,7 @@ const uiSchema = {
 ### Alternative fields
 
 There are alternative fields available for certain types.
-For `type: "string"` there is `DateField`, `MultipleChoiceField` and `TextAreaField`.
+For `type: "string"` there is `DateField`, `TextAreaField` and partly `MultipleChoiceField`.
 
 `DateField` has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
 
@@ -436,7 +484,28 @@ const uiSchema = {
 };
 ```
 
-`MultipleChoiceField` takes an array of `oneOf` or `anyOf`. The choices provided inside an `oneOf`array will be presented on the UI as Radio button selectables and only one of the given values can be selected. The choices provided inside an `anyOf` array will be presented on the UI as Checkbox selectables and multiple values can be selected.
+`TextAreaField` gives more space for a longer string input.
+
+```tsx
+const schema = {
+  properties: {
+    story: { type: "string", title: "A short story" },
+  },
+};
+
+const uiSchema = {
+  story: { "ui:field": "TextAreaField" },
+};
+```
+
+`MultipleChoiceField` takes an array of `oneOf` or `anyOf`.
+If you are creating a schema using `oneOf`, the type of the field is the value returned by the chosen enum option (e.g. "string" or "number").
+If you are creating a schema using `anyOf`, the type of the field is "array", since the returned value will be in an array format, even if only one option is selected.
+
+The choices provided inside an `oneOf`array will be presented on the UI as Radio button selectables and only one of the given values can be selected.
+
+The choices provided inside an `anyOf` array will be presented on the UI as Checkbox selectables and multiple values can be selected.
+
 `MultipleChoiceField` comes with a small number of predefined styles, which are `inline`, `oneColumn`, `twoColumns` and `threeColumns`. When no style is given, the choice options are listed in a row under the title.
 
 ```tsx
@@ -452,6 +521,19 @@ const schema = {
         { const: "nope", title: "Please don't even ask..." },
       ],
     },
+    food: {
+      type: "array",
+      title: "What would you like to eat today? (style: oneColumn)",
+      anyOf: [
+        { const: "breakfast", title: "Breakfast" },
+        { const: "secondBreakfast", title: "What about second breakfast?" },
+        { const: "elevenses", title: "Elevenses" },
+        { const: "luncheon", title: "Luncheon" },
+        { const: "afternoonTea", title: "Afternoon tea" },
+        { const: "dinner", title: "Dinner" },
+        { const: "supper", title: "Supper" },
+      ],
+    },
   },
 };
 
@@ -462,21 +544,13 @@ const uiSchema = {
       style: "twoColumns",
     },
   },
-};
-```
-
-`TextAreaField` gives more space for a longer string input.
-
-```tsx
-const schema = {
-  properties: {
-    story: { type: "string", title: "A short story" },
+  food: {
+    "ui:field": "MultipleChoiceField",
+    "ui:options": {
+      style: "oneColumn",
+    },
   },
 };
-
-const uiSchema = {
-  story: { "ui:field": "TextAreaField" },
-};
 ```
 
 For `type: "boolean"` there is `RadioField` and `ToggleField`.

package/dist/fields/ArrayField.js

@@ -4,7 +4,9 @@ import { useField } from "formik";
 import { FormRegistry } from "../Form";
 import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { GetArrayFieldButton } from "../styledComponents";
+import { FieldInput, GetArrayFieldButton } from "../styledComponents";
+import { FieldTemplate } from "../templates";
+import { getEnums } from "../utils";
 const appendArray = (values) => {
     return values ? [...values, ""] : [""];
 };
@@ -33,6 +35,7 @@ export const ArrayField = (props) => {
     const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
+    const { type, props: inputProps } = useExtractUiSchema(uiSchema);
     const [{ value }, _, { setValue }] = useField(name);
     const { items, additionalItems, } = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -51,6 +54,7 @@ export const ArrayField = (props) => {
                     : undefined,
             };
     }, [schema]);
+    const enums = useMemo(() => getEnums(props), [props]);
     //This whole mess would give backwards compatibility, but maybe we don't do it
     // const {
     //   items,
@@ -91,10 +95,10 @@ export const ArrayField = (props) => {
     //         },
     //   [schema]
     // );
-    // Bacwards compatibility ends
+    // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
                                     ? additionalItems
                                     : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
                                         purpose: ArrayFieldButtonPurpose.REMOVE,

package/dist/fields/StringField.js

@@ -12,9 +12,8 @@ export const StringField = (props) => {
     const enums = useMemo(() => getEnums(props), [props]);
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
-        case "multiSelect":
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: enums.type === "multiSelect", children: [enums.type !== "multiSelect" && (_jsx("option", Object.assign({ value: "", disabled: true,
-                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", disabled: true,
+                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
         default:
             return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,
                     placeholder }, inputProps, { name: name })) })));

package/dist/fields/stories/ArrayField.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const BasicArray: StoryObj<typeof ArrayField>;
 export declare const EnumArray: StoryObj<typeof ArrayField>;
 export declare const ObjectArray: StoryObj<typeof ArrayField>;
+export declare const AnyOfArray: StoryObj<typeof ArrayField>;

package/dist/fields/stories/ArrayField.stories.js

@@ -189,3 +189,36 @@ export const ObjectArray = {
         expect(allLabelsAfterRemove.length).toEqual(0);
     }),
 };
+export const AnyOfArray = {
+    args: {
+        name: "anyOf Select",
+        schema: {
+            type: "array",
+            title: "Array with anyOf-enum",
+            description: "Array description",
+            anyOf: [
+                { const: 1, title: "one" },
+                { const: 2, title: "two" },
+                { const: 3, title: "three" },
+                { const: 4, title: "four" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_d) => __awaiter(void 0, [_d], void 0, function* ({ canvasElement }) {
+        const anyOfSelectField = canvasElement.querySelector('select[name="anyOf Select"]');
+        const optionOne = canvasElement.querySelector('option[value="1"]');
+        const optionTwo = canvasElement.querySelector('option[value="2"]');
+        const optionThree = canvasElement.querySelector('option[value="3"]');
+        const optionFour = canvasElement.querySelector('option[value="4"]');
+        expect(anyOfSelectField).toBeInTheDocument();
+        expect(optionOne).toBeInTheDocument();
+        expect(optionTwo).toBeInTheDocument();
+        expect(optionThree).toBeInTheDocument();
+        expect(optionFour).toBeInTheDocument();
+        yield userEvent.selectOptions(anyOfSelectField, optionOne);
+        yield userEvent.selectOptions(anyOfSelectField, optionThree);
+        yield userEvent.click(optionThree);
+        yield expect(anyOfSelectField).toHaveValue(["1", "3"]);
+    }),
+};

package/dist/fields/stories/MultipleChoiceField.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { MultipleChoiceField } from "../MultipleChoiceField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const OneOf: StoryObj<typeof MultipleChoiceField>;
+export declare const AnyOf: StoryObj<typeof MultipleChoiceField>;

package/dist/fields/stories/MultipleChoiceField.stories.js

@@ -0,0 +1,86 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { MultipleChoiceField } from "../MultipleChoiceField";
+export default {
+    title: "Fields/MultipleChoiceField",
+    component: MultipleChoiceField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { choicesAnyOf: [], choicesOneOf: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const OneOf = {
+    args: {
+        name: "choicesOneOf",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "sunny", title: "Sunny" },
+                { const: "cloudy", title: "Cloudy" },
+                { const: "rainy", title: "Rainy" },
+                { const: "windy", title: "Windy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const optionSunny = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="sunny"]');
+        const optionCloudy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="cloudy"]');
+        const optionRainy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="rainy"]');
+        const optionWindy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="windy"]');
+        yield userEvent.click(optionSunny);
+        yield expect(optionSunny).toBeChecked();
+        yield expect(optionCloudy).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+        yield userEvent.click(optionCloudy);
+        yield expect(optionCloudy).toBeChecked();
+        yield expect(optionSunny).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+    }),
+};
+export const AnyOf = {
+    args: {
+        name: "choicesAnyOf",
+        schema: {
+            type: "array",
+            anyOf: [
+                { const: "lily", title: "Lily" },
+                { const: "rose", title: "Rose" },
+                { const: "iris", title: "Iris" },
+                { const: "daisy", title: "Daisy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const optionLily = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="lily"]');
+        const optionRose = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="rose"]');
+        const optionIris = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="iris"]');
+        const optionDaisy = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="daisy"]');
+        yield userEvent.click(optionIris);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).not.toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+        yield userEvent.click(optionRose);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+    }),
+};

package/dist/fields/stories/SearchMultiTagSelectField.stories.js

@@ -22,7 +22,7 @@ export const Default = {
     args: {
         name: "tags",
         schema: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             anyOf: [
                 { const: "1", title: "First tag" },

package/dist/sampleData/completeSchema.js

@@ -44,7 +44,7 @@ export const completeSchema = {
             ],
         },
         enumAnyOf: {
-            type: "number",
+            type: "array",
             title: "Enum anyOf (non-standard)",
             description: "Enum anyOf description",
             anyOf: [
@@ -55,7 +55,7 @@ export const completeSchema = {
             ],
         },
         enumTagSelectAnyOf: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             description: "Enum searchable tag select anyOf description",
             anyOf: [

package/dist/sampleData/multipleChoiceSchema.js

@@ -23,7 +23,7 @@ export const multipleChoiceSchema = {
             ],
         },
         food: {
-            type: "string",
+            type: "array",
             title: "What would you like to eat today? (style: oneColumn)",
             anyOf: [
                 { const: "breakfast", title: "Breakfast" },
@@ -36,7 +36,7 @@ export const multipleChoiceSchema = {
             ],
         },
         drinks: {
-            type: "string",
+            type: "array",
             title: "What would you like to drink today? (style: twoColumns)",
             anyOf: [
                 { const: "water", title: "Water" },
@@ -53,7 +53,7 @@ export const multipleChoiceSchema = {
             ],
         },
         flowers: {
-            type: "string",
+            type: "array",
             title: "Pick some flowers (style: threeColumns)",
             anyOf: [
                 { const: "lily", title: "Lily" },

package/dist/styledComponents.js

@@ -362,7 +362,7 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
                             setSearch(e.currentTarget.value);
                         }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;

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.11.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",