@nolwenture/formik-jsonschema-form 0.4.0 → 0.4.2

package/dist/Form.js

@@ -36,6 +36,8 @@ export function Form(props) {
         "children",
         "fields",
         "formContext",
+        "components",
+        "hideUnmarkedAdditionalProperties",
     ]);
     var isSubmitting = useFormikContext().isSubmitting;
     var schema = props.schema, _a = props.uiSchema, uiSchema = _a === void 0 ? {} : _a, className = props.className, children = props.children, _b = props.fields, fields = _b === void 0 ? {} : _b, _c = props.templates, templates = _c === void 0 ? {} : _c, _d = props.components, components = _d === void 0 ? {} : _d, _e = props.formContext, formContext = _e === void 0 ? {} : _e, _f = props.useItemsAsAdditionalItems, useItemsAsAdditionalItems = _f === void 0 ? false : _f, _g = props.hideUnmarkedAdditionalProperties, hideUnmarkedAdditionalProperties = _g === void 0 ? false : _g;

package/dist/Form.stories.js

@@ -118,6 +118,13 @@ export var StylesCustomized = function () {
                 return [2 /*return*/];
             });
         }); } }, { children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
+                age: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
                 firstName: {
                     props: {
                         wrapper: {

package/dist/_sampleData.js

@@ -4,6 +4,7 @@ export var simpleSchema = {
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
     },
 };
 export var simpleUiSchema = {
@@ -298,7 +299,7 @@ export var generatedSchema = {
 };
 export var requiredInputSchema = {
     title: "TITLE",
-    required: ["lastName"],
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
@@ -319,13 +320,13 @@ export var requiredInputSchema = {
                 title: "Second favourites",
                 required: ["secondFavouriteSong"],
                 properties: {
-                    secondFavouriteFood: {
+                    anotherFavouriteFood: {
                         type: "string",
-                        title: "Second favourite food",
+                        title: "Another favourite food",
                     },
-                    secondFavouriteSong: {
+                    anotherFavouriteSong: {
                         type: "string",
-                        title: "Second favourite song",
+                        title: "Another favourite song",
                     },
                 },
             },
@@ -339,5 +340,21 @@ export var requiredInputSchema = {
                 tasks: { type: "string", title: "Tasks" },
             },
         },
+        requiredNestedObject: {
+            type: "object",
+            title: "Required Nested Object",
+            properties: {
+                plans: { type: "string", title: "Future plans" },
+                past: { type: "string", title: "Past achievements" },
+            },
+        },
+        requiredArray: {
+            type: "array",
+            title: "Required Array",
+            description: "Array description for required array",
+            additionalItems: {
+                type: "string",
+            },
+        },
     },
 };

package/dist/templates/ArrayFieldTemplate.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
+import { RequiredIndicator } from "../styledComponents";
 export function ArrayFieldTemplate(props) {
     var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
     var name = props.name, uiSchema = props.uiSchema, children = props.children;
@@ -23,5 +24,5 @@ export function ArrayFieldTemplate(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(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
 }

package/dist/templates/ObjectFieldTemplate.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { getDescription, getTitle, useExtractUiSchema } from "../utils";
+import { RequiredIndicator } from "../styledComponents";
 export function ObjectFieldTemplate(props) {
     var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
     var children = props.children, uiSchema = props.uiSchema;
@@ -23,5 +24,5 @@ export function ObjectFieldTemplate(props) {
     _c = _b.props, 
     //TODO: This is not right
     _d = _c === void 0 ? {} : _c, wrapperProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help;
-    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && _jsx(ObjectFieldTitle, __assign({}, titleProps, { children: title })), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
+    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, __assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
 }

package/dist/utils.js

@@ -63,6 +63,9 @@ export function useSetDefault(props) {
 }
 export function useExtractUiSchema(props) {
     if (props === void 0) { props = {}; }
+    if (props.props !== undefined) {
+        props["ui:props"] = __assign(__assign({}, props["ui:props"]), props.props);
+    }
     return useMemo(function () {
         var _a = props["ui:options"], options = _a === void 0 ? {} : _a, uiSchema = __rest(props, ["ui:options"]);
         return __assign(__assign({}, Object.keys(uiSchema || {}).reduce(function (result, key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -22,7 +22,11 @@
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist", "package.json", "LICENSE"],
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE"
+  ],
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",