@nolwenture/formik-jsonschema-form 0.2.0 → 0.3.0

package/README.md

@@ -129,6 +129,125 @@ return (
 );
 ```
 
+The style for buttons to add and remove (and move) array or object items can be overridden within the uiSchema by giving inline style.
+
+The buttons that can be customized that way are:
+
+- "ui:addButtonOptions"
+- "ui:removeButtonOptions"
+- "ui:upButtonOptions"
+- "ui:downButtonOptions"
+- "ui:customButtonOptions"
+
+`content` takes a ReactNode as input.
+
+```tsx
+
+const schema = {
+  title: "Form with customized buttons",
+  type: "object",
+  properties: {
+    someArray: {
+      type: "array",
+      title: "Some array",
+      description: "Array with customized buttons",
+      additionalItems: {
+        type: "string",
+      },
+    },
+  }
+}
+
+const uiSchema = {
+  "ui:description": "Form description",
+  // make a green ADD button for someArray that reads "Hello!"
+    someArray: {
+    "ui:addButtonOptions": {
+      content: <b>Hello!</b>,
+      props: { style: { background: "green" } },
+    },
+};
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+    ></Form>
+  </Formik>
+);
+```
+
+### Required input
+
+Required input can be displayed with an asterisk next to the title.
+The respective fieldname needs to be given inside the required-array of the object holding the field in question in the schema.
+In the example, required fields are 'lastName', 'favouriteFood' inside the arrayOfObject, and 'tasks' in nestedObject.
+
+The styling of the asterisk can be customised by applying style to styledComponents.RequiredIndicator.
+
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import { Formik } from "formik";
+
+const CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)`
+  color: aqua;
+`;
+
+const schema = {
+  title: "My Form",
+  required: ["lastName"],
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+    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" },
+        },
+      },
+    },
+    nestedObject: {
+      type: "object",
+      title: "Nested Object",
+      required: ["tasks"],
+      properties: {
+        hobbies: { type: "string", title: "Hobbies" },
+        tasks: { type: "string", title: "Tasks" },
+      },
+    },
+  },
+};
+
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+};
+
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={{ firstName: "", lastName: "" }}
+      onSubmit={handleSubmit}
+    >
+      <Form
+        schema={schema}
+        uiSchema={uiSchema}
+        components={{ RequiredIndicator: CustomizedRequiredIndicator }}
+      ></Form>
+    </Formik>
+  );
+}
+```
+
 ## Props
 
 `Form` component props:

package/dist/Form.stories.d.ts

@@ -9,3 +9,4 @@ export declare const CompleteSchema: ComponentStory<typeof Form>;
 export declare const StrictlyTyped: () => JSX.Element;
 export declare const StylesCustomized: () => JSX.Element;
 export declare const WithGeneratedSchema: ComponentStory<typeof Form>;
+export declare const WithRequiredInput: ComponentStory<typeof Form>;

package/dist/Form.stories.js

@@ -53,7 +53,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
 import { Formik, useFormikContext } from "formik";
-import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, } from "./_sampleData";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, } from "./_sampleData";
 import { Form, styledComponents } from "./";
 export default {
     title: "Form",
@@ -105,6 +105,7 @@ var CustomizedErrorMessage = function (props) {
     var error = errors[name];
     return error ? _jsx("p", { children: error }) : _jsx("p", { children: "Hurray! No errors" });
 };
+var CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: aqua;\n"], ["\n  color: aqua;\n"])));
 export var StylesCustomized = function () {
     return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -124,6 +125,7 @@ export var StylesCustomized = function () {
             }, components: {
                 FieldWrapper: CustomizedFieldWrapper,
                 ErrorMessage: CustomizedErrorMessage,
+                RequiredIndicator: CustomizedRequiredIndicator,
             } }) })));
 };
 export var WithGeneratedSchema = Template.bind({});
@@ -132,4 +134,9 @@ WithGeneratedSchema.args = {
     uiSchema: {},
     useItemsAsAdditionalItems: true,
 };
-var templateObject_1, templateObject_2;
+export var WithRequiredInput = Template.bind({});
+WithRequiredInput.args = {
+    schema: requiredInputSchema,
+    uiSchema: {},
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/_sampleData.d.ts

@@ -8,3 +8,4 @@ export declare const simpleUiSchema: UiSchema;
 export declare const completeSchema: Schema;
 export declare const completeUiSchema: UiSchema;
 export declare const generatedSchema: Schema;
+export declare const requiredInputSchema: Schema;

package/dist/_sampleData.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export var simpleSchema = {
     title: "TITLE",
     properties: {
@@ -178,6 +179,7 @@ export var completeSchema = {
                     },
                 },
             },
+            default: [{ string: "Hello" }],
         },
     },
 };
@@ -207,6 +209,7 @@ export var completeUiSchema = {
     enum: {
         "ui:help": "Enum help",
     },
+    enumOneOf: { placeholder: "Select one" },
     null: {
         "ui:help": "Null help",
     },
@@ -239,6 +242,34 @@ export var completeUiSchema = {
         null: {
             "ui:help": "Null help",
         },
+        "ui:addButtonOptions": {
+            content: _jsx("b", { children: "Hello in an Object!" }),
+            props: { style: { background: "pink" } },
+        },
+    },
+    partiallyFixedArray: {
+        "ui:addButtonOptions": {
+            content: _jsx("b", { children: "Hello!" }),
+            props: { style: { background: "green" } },
+        },
+        "ui:removeButtonOptions": {
+            content: _jsx("span", { children: "-" }),
+            props: {
+                style: {
+                    height: "25px",
+                    width: "25px",
+                    background: "red",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    border: "unset",
+                    padding: "unset",
+                    color: "white",
+                    fontWeight: "bolder",
+                    textAlign: "center",
+                    lineHeight: "1.4em",
+                },
+            },
+        },
     },
 };
 export var generatedSchema = {
@@ -260,3 +291,42 @@ export var generatedSchema = {
     required: ["object", "value", "property"],
     additionalProperties: false,
 };
+export var requiredInputSchema = {
+    title: "TITLE",
+    required: ['lastName'],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        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: {
+                    secondFavouriteFood: { type: "string", title: "Second favourite food" },
+                    secondFavouriteSong: { type: "string", title: "Second favourite song" }
+                }
+            }
+        },
+        nestedObject: {
+            type: "object",
+            title: "Nested Object",
+            required: ["tasks"],
+            properties: {
+                hobbies: { type: "string", title: "Hobbies" },
+                tasks: { type: "string", title: "Tasks" }
+            }
+        }
+    },
+};

package/dist/fields/ArrayField.js

@@ -23,7 +23,8 @@ import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { useField } from "formik";
 import { ArrayFieldButtonPurpose } from "../types";
-import { useExtractUiSchema } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+import { GetArrayFieldButton } from "../styledComponents";
 function appendArray(values) {
     return values ? __spreadArray(__spreadArray([], values, true), [""], false) : [""];
 }
@@ -45,7 +46,8 @@ function moveInArray(values, index, direction) {
     }
 }
 export function ArrayField(props) {
-    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ArrayFieldTemplate = _a.templates.ArrayFieldTemplate, _b = _a.components, ArrayFieldItem = _b.ArrayFieldItem, ArrayFieldList = _b.ArrayFieldList, ArrayFieldItemButtons = _b.ArrayFieldItemButtons, ArrayFieldButton = _b.ArrayFieldButton, useItemsAsAdditionalItems = _a.useItemsAsAdditionalItems;
+    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ArrayFieldTemplate = _a.templates.ArrayFieldTemplate, _b = _a.components, ArrayFieldItem = _b.ArrayFieldItem, ArrayFieldList = _b.ArrayFieldList, ArrayFieldItemButtons = _b.ArrayFieldItemButtons, useItemsAsAdditionalItems = _a.useItemsAsAdditionalItems;
+    useSetDefault(props);
     var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
     var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
     var _d = useMemo(function () {
@@ -106,14 +108,35 @@ export function ArrayField(props) {
     //   [schema]
     // );
     // Bacwards compatibility ends
-    var _e = useExtractUiSchema(uiSchema), inputProps = _e.props, disabled = _e.disabled;
-    return (_jsxs(ArrayFieldTemplate, __assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map(function (itemSchema, index) { return (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: "".concat(name, "[").concat(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) }, index) })); }), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map(function (_, index) { return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, __assign({}, __assign({ disabled: disabled }, inputProps), { name: "".concat(name, "[").concat(index + items.length, "]"), schema: additionalItems && typeof additionalItems !== "boolean"
+    var disabled = useExtractUiSchema(uiSchema).disabled;
+    return (_jsxs(ArrayFieldTemplate, __assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map(function (itemSchema, index) { return (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: "".concat(name, "[").concat(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)); }), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map(function (_, index) { return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: "".concat(name, "[").concat(index + items.length, "]"), schema: additionalItems && typeof additionalItems !== "boolean"
                                     ? additionalItems
-                                    : {}, uiSchema: __assign({ disabled: disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), index), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.REMOVE, onClick: function () {
+                                    : {}, uiSchema: __assign({ disabled: 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,
+                                        onClick: function () {
                                             return setValue(removeFromArray(value, index + items.length));
-                                        } }), value.length > 1 && index > 0 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_UP, onClick: function () {
-                                            return setValue(moveInArray(value, index + items.length, -1));
-                                        } })), value.length > 1 && index < value.length - 1 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_DOWN, onClick: function () {
-                                            return setValue(moveInArray(value, index + items.length, 1));
-                                        } }))] })] })); })] }), additionalItems && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.ADD, onClick: function () { return setValue(appendArray(value)); } }))] })));
+                                        },
+                                        uiSchema: uiSchema,
+                                    }), value.length > 1 &&
+                                        index > 0 &&
+                                        GetArrayFieldButton({
+                                            purpose: ArrayFieldButtonPurpose.MOVE_UP,
+                                            onClick: function () {
+                                                return setValue(moveInArray(value, index + items.length, -1));
+                                            },
+                                            uiSchema: uiSchema,
+                                        }), value.length > 1 &&
+                                        index < value.length - 1 &&
+                                        GetArrayFieldButton({
+                                            purpose: ArrayFieldButtonPurpose.MOVE_DOWN,
+                                            onClick: function () {
+                                                return setValue(moveInArray(value, index + items.length, 1));
+                                            },
+                                            uiSchema: uiSchema,
+                                        })] })] }, index)); })] }), additionalItems &&
+                GetArrayFieldButton({
+                    purpose: ArrayFieldButtonPurpose.ADD,
+                    onClick: function () { return setValue(appendArray(value)); },
+                    uiSchema: uiSchema,
+                })] })));
 }

package/dist/fields/ObjectField.js

@@ -25,11 +25,14 @@ import { useField } from "formik";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { ObjectFieldButtonPurpose } from "../types";
+import { useSetDefault } from "../utils";
+import { getObjectFieldButton } from "../styledComponents";
 export function ObjectField(props) {
-    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ObjectFieldTemplate = _a.templates.ObjectFieldTemplate, _b = _a.components, ObjectFieldItem = _b.ObjectFieldItem, ObjectFieldList = _b.ObjectFieldList, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, ObjectFieldButton = _b.ObjectFieldButton, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
+    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ObjectFieldTemplate = _a.templates.ObjectFieldTemplate, _b = _a.components, ObjectFieldItem = _b.ObjectFieldItem, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
+    useSetDefault(props);
     var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
     var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
-    var properties = schema.properties, additionalProperties = schema.additionalProperties;
+    var properties = schema.properties, additionalProperties = schema.additionalProperties, required = schema.required;
     var propertyKeys = useMemo(function () { return Object.keys(properties || {}); }, [properties]);
     var additionalValues = useMemo(function () {
         return Object.fromEntries(Object.entries(value || {}).filter(function (_a) {
@@ -39,19 +42,28 @@ export function ObjectField(props) {
     }, [value, propertyKeys]);
     return (_jsxs(ObjectFieldTemplate, __assign({}, props, { children: [Object.entries(properties || {}).map(function (_a) {
                 var childName = _a[0], childSchema = _a[1];
-                return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+                return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
             }), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
                 Object.entries(additionalValues || {}).map(function (_a) {
                     var childName = _a[0], childSchema = _a[1];
-                    return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }), _jsx(ObjectFieldItemButtons, { children: _jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.REMOVE, onClick: function () {
+                    return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                                    purpose: ObjectFieldButtonPurpose.REMOVE,
+                                    onClick: function () {
                                         var _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                                         setValue(newValue);
-                                    } }) })] }, childName));
-                }), additionalProperties && (_jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.ADD, onClick: function () {
-                    var _a;
-                    var key = prompt("Give key");
-                    if (key) {
-                        setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
-                    }
-                } }))] })));
+                                    },
+                                    uiSchema: uiSchema,
+                                }) })] }, childName));
+                }), additionalProperties &&
+                getObjectFieldButton({
+                    purpose: ObjectFieldButtonPurpose.ADD,
+                    onClick: function () {
+                        var _a;
+                        var key = prompt("Give key");
+                        if (key) {
+                            setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
+                        }
+                    },
+                    uiSchema: uiSchema,
+                })] })));
 }

package/dist/fields/SchemaField.js

@@ -14,7 +14,7 @@ import { useContext } from "react";
 import { useExtractUiSchema, getSchemaType } from "../utils";
 import { FormRegistry } from "../Form";
 import { COMPONENT_TYPES } from "./types";
-function getFieldComponent(schema, uiSchema, fields) {
+function useFieldComponent(schema, uiSchema, fields) {
     var field = useExtractUiSchema(uiSchema).field;
     if (typeof field === "function") {
         return field;
@@ -34,6 +34,6 @@ function getFieldComponent(schema, uiSchema, fields) {
 export function SchemaField(props) {
     var schema = props.schema, uiSchema = props.uiSchema;
     var fields = useContext(FormRegistry).fields;
-    var FieldComponent = getFieldComponent(schema, uiSchema, fields);
+    var FieldComponent = useFieldComponent(schema, uiSchema, fields);
     return _jsx(FieldComponent, __assign({}, props));
 }

package/dist/fields/StringField.js

@@ -53,7 +53,7 @@ export function StringField(props) {
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
         case "multiSelect":
-            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, { children: [enums.type !== "multiSelect" && _jsx("option", { value: "" }), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ value: option.const }, { children: option.title }), index)); })] })) })));
+            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, { children: [enums.type !== "multiSelect" && (_jsx("option", __assign({ value: "", disabled: true, selected: true, hidden: true }, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ value: option.const }, { children: option.title }), index)); })] })) })));
         default:
             return (_jsx(FieldTemplate, __assign({}, props, { children: _jsx(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name })) })));
     }

package/dist/styledComponents.d.ts

@@ -9,18 +9,29 @@ export declare const ObjectFieldTitle: import("styled-components").StyledCompone
 export declare const ObjectFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ObjectFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const ObjectFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ObjectFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare function ObjectFieldButton({ purpose, onClick, }: ObjectFieldButtonProps): JSX.Element;
+export declare const ObjectFieldButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldLineButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldUpButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldDownButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldRemoveButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldAddButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function getObjectFieldButton({ purpose, onClick, uiSchema, }: ObjectFieldButtonProps): JSX.Element;
 export declare const ArrayFieldWrapper: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 export declare const ArrayFieldTitle: import("styled-components").StyledComponent<"legend", any, {}, never>;
 export declare const ArrayFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ArrayFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const ArrayFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrayFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare function ArrayFieldButton({ purpose, onClick }: ArrayFieldButtonProps): JSX.Element;
+export declare const ArrayFieldButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldLineButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldUpButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldDownButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldRemoveButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldAddButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function GetArrayFieldButton({ purpose, onClick, uiSchema, }: ArrayFieldButtonProps): JSX.Element;
 export declare const FieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FieldTitle: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const FieldDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const FieldHelp: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<import("react").ComponentType<formik.ErrorMessageProps>, any, {}, never>;
 export declare const FieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+export declare const RequiredIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/styledComponents.js

@@ -28,6 +28,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as formik from "formik";
 import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose, } from "./types";
+import { useContext } from "react";
+import { FormRegistry } from "./Form";
 export var Form = styled(formik.Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 export var FormButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 export var FormButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
@@ -36,20 +38,26 @@ export var ObjectFieldTitle = styled.legend(templateObject_5 || (templateObject_
 export var ObjectFieldList = styled.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style-type: none;\n  padding: 0;\n"], ["\n  list-style-type: none;\n  padding: 0;\n"])));
 export var ObjectFieldItem = styled.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var ObjectFieldItemButtons = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: 0.5rem;\n"], ["\n  display: flex;\n  margin: 0.5rem;\n"])));
-export var ObjectFieldButtonEl = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"])));
-export function ObjectFieldButton(_a) {
-    var purpose = _a.purpose, onClick = _a.onClick;
+export var ObjectFieldButton = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"])));
+export var ObjectFieldLineButton = styled(ObjectFieldButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
+export var ObjectFieldUpButton = styled(ObjectFieldLineButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
+export var ObjectFieldDownButton = styled(ObjectFieldLineButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
+export var ObjectFieldRemoveButton = styled(ObjectFieldLineButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+export var ObjectFieldAddButton = styled(ObjectFieldButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
+export function getObjectFieldButton(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
     switch (purpose) {
         case ObjectFieldButtonPurpose.ADD:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+            return (_jsx(ObjectFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
         case ObjectFieldButtonPurpose.REMOVE:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+            return (_jsx(ObjectFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
         case ObjectFieldButtonPurpose.MOVE_UP:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+            return (_jsx(ObjectFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
         case ObjectFieldButtonPurpose.MOVE_DOWN:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+            return (_jsx(ObjectFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
         default:
-            return (_jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+            return (_jsx(ObjectFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
     }
 }
 export var ArrayFieldWrapper = ObjectFieldWrapper;
@@ -57,27 +65,34 @@ export var ArrayFieldTitle = ObjectFieldTitle;
 export var ArrayFieldList = ObjectFieldList;
 export var ArrayFieldItem = ObjectFieldItem;
 export var ArrayFieldItemButtons = ObjectFieldItemButtons;
-export var ArrayFieldButtonEl = ObjectFieldButtonEl;
-export function ArrayFieldButton(_a) {
-    var purpose = _a.purpose, onClick = _a.onClick;
+export var ArrayFieldButton = styled(ObjectFieldButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+export var ArrayFieldLineButton = styled(ArrayFieldButton)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
+export var ArrayFieldUpButton = styled(ArrayFieldLineButton)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
+export var ArrayFieldDownButton = styled(ArrayFieldLineButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""])));
+export var ArrayFieldRemoveButton = styled(ArrayFieldLineButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
+export var ArrayFieldAddButton = styled(ArrayFieldButton)(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
+export function GetArrayFieldButton(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
+    var _x = useContext(FormRegistry).components, ArrayFieldAddButton = _x.ArrayFieldAddButton, ArrayFieldRemoveButton = _x.ArrayFieldRemoveButton, ArrayFieldUpButton = _x.ArrayFieldUpButton, ArrayFieldDownButton = _x.ArrayFieldDownButton;
     switch (purpose) {
         case ArrayFieldButtonPurpose.ADD:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+            return (_jsx(ArrayFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
         case ArrayFieldButtonPurpose.REMOVE:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+            return (_jsx(ArrayFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
         case ArrayFieldButtonPurpose.MOVE_UP:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+            return (_jsx(ArrayFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
         case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+            return (_jsx(ArrayFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
         default:
-            return (_jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+            return (_jsx(ArrayFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
     }
 }
-export var FieldWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
-export var FieldTitle = styled.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
-export var FieldDescription = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var FieldHelp = styled.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
+export var FieldWrapper = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
+export var FieldTitle = styled.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
+export var FieldDescription = styled.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var FieldHelp = styled.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_25 || (templateObject_25 = __makeTemplateObject([""], [""])));
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
@@ -85,5 +100,6 @@ export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_14 || (temp
 export var FieldInput = styled(function (_a) {
     var formikAs = _a.formikAs, props = __rest(_a, ["formikAs"]);
     return _jsx(formik.Field, __assign({}, props, { as: formikAs }));
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+})(templateObject_26 || (templateObject_26 = __makeTemplateObject([""], [""])));
+export var RequiredIndicator = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;

package/dist/templates/FieldTemplate.js

@@ -14,7 +14,7 @@ import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
 export function FieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp;
+    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, RequiredIndicator = _a.RequiredIndicator;
     var name = props.name, uiSchema = props.uiSchema, children = props.children;
     var title = getTitle(props);
     var description = getDescription(props);
@@ -23,5 +23,5 @@ export function FieldTemplate(props) {
     _c = _b.props, 
     //TODO: This is not right
     _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
 }

package/dist/types.d.ts

@@ -97,19 +97,28 @@ export type ComponentsType = {
     ObjectFieldItem: React.FunctionComponent<any>;
     ObjectFieldItemButtons: React.FunctionComponent<any>;
     ObjectFieldList: React.FunctionComponent<any>;
-    ObjectFieldButton: React.FunctionComponent<ObjectFieldButtonProps>;
+    ObjectFieldButton: React.FunctionComponent<any>;
+    ObjectFieldAddButton: React.FunctionComponent<any>;
+    ObjectFieldRemoveButton: React.FunctionComponent<any>;
+    ObjectFieldUpButton: React.FunctionComponent<any>;
+    ObjectFieldDownButton: React.FunctionComponent<any>;
     ArrayFieldWrapper: React.FunctionComponent<any>;
     ArrayFieldTitle: React.FunctionComponent<any>;
     ArrayFieldItem: React.FunctionComponent<any>;
     ArrayFieldItemButtons: React.FunctionComponent<any>;
     ArrayFieldList: React.FunctionComponent<any>;
-    ArrayFieldButton: React.FunctionComponent<ArrayFieldButtonProps>;
+    ArrayFieldButton: React.FunctionComponent<any>;
+    ArrayFieldAddButton: React.FunctionComponent<any>;
+    ArrayFieldRemoveButton: React.FunctionComponent<any>;
+    ArrayFieldUpButton: React.FunctionComponent<any>;
+    ArrayFieldDownButton: React.FunctionComponent<any>;
     FieldWrapper: React.FunctionComponent<any>;
     FieldTitle: React.FunctionComponent<any>;
     FieldDescription: React.FunctionComponent<any>;
     FieldHelp: React.FunctionComponent<any>;
     ErrorMessage: React.FunctionComponent<any>;
     FieldInput: React.FunctionComponent<any>;
+    RequiredIndicator: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -120,6 +129,7 @@ export declare enum ObjectFieldButtonPurpose {
 export type ObjectFieldButtonProps = {
     purpose: ObjectFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
 };
 export declare enum ArrayFieldButtonPurpose {
     ADD = 0,
@@ -130,6 +140,7 @@ export declare enum ArrayFieldButtonPurpose {
 export type ArrayFieldButtonProps = {
     purpose: ArrayFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
 };
 /*** ***/
 export type AjvError = {

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { FieldProps, Schema, UiSchema } from "./types";
+import { JSONSchema7 } from "json-schema";
 export declare function getTitle({ title, uiSchema, schema, name, }: {
     title?: string;
     uiSchema?: UiSchema;
@@ -10,6 +11,7 @@ export declare function getDescription({ description, uiSchema, schema, }: {
     uiSchema?: UiSchema;
     schema?: Schema;
 }): any;
+export declare function getDefaultValueForType(type: JSONSchema7["type"]): {} | null;
 export declare function useSetDefault(props: FieldProps): void;
 export declare function useExtractUiSchema(props?: UiSchema | undefined): {
     [name: string]: any;

package/dist/utils.js

@@ -39,11 +39,25 @@ export function getDescription(_a) {
         (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:description"]) ||
         (schema === null || schema === void 0 ? void 0 : schema.description));
 }
+export function getDefaultValueForType(type) {
+    if (type && !Array.isArray(type)) {
+        if (type === "array")
+            return [];
+        if (type === "object")
+            return {};
+    }
+    return null;
+}
 export function useSetDefault(props) {
     var _a = useField(props.name), value = _a[0].value, _ = _a[1], setValue = _a[2].setValue;
     useEffect(function () {
-        if (!value && props.schema.default) {
-            setValue(props.schema.default);
+        if (!value) {
+            if (props.schema.default) {
+                setValue(props.schema.default);
+            }
+            else if (props.forceDefaultValue) {
+                setValue(getDefaultValueForType(props.schema.type));
+            }
         }
     }, []);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [