@nolwenture/formik-jsonschema-form 0.15.0 → 0.17.0

package/README.md

@@ -786,6 +786,57 @@ Schemas can be referenced. A referenced schema can be given to a property using
 
 In order to give uiSchema to reused or recursive fields defined in `schema.definitons`, the uiSchema needs to be given to the matching prop of `definitions`-object. This way, the given uiProps are added to the referencing field, no matter how deeply nested it is inside the schema.
 
+The schema of the field and the referenced schema are merged, meaning that aspects of the reused schema can be adapted:
+
+```tsx
+const schema: Schema = {
+  type: "object",
+  properties: {
+    address: {
+      $ref: "#/definitions/address",
+      required: ["postcode"],
+      default: { country: "US" },
+      properties: {
+        apartmentNumber: { type: "string", title: "Apartment number" },
+      },
+    },
+  },
+  definitions: {
+    address: {
+      type: "object",
+      title: "Address",
+      required: ["country", "city", "street"],
+      properties: {
+        country: { type: "string", title: "Country" },
+        city: { type: "string", title: "City" },
+        street: { type: "string", title: "Street" },
+        postcode: { type: "string", title: "Postcode" },
+      },
+    },
+  },
+};
+```
+
+The resulting schema of the `address` field:
+
+```tsx
+{
+  type: "object",
+  title: "Address",
+  required: ["country", "city", "street", "postcode"],
+  default: { country: "US" },
+  properties: {
+    country: { type: "string", title: "Country" },
+    city: { type: "string", title: "City" },
+    street: { type: "string", title: "Street" },
+    postcode: { type: "string", title: "Postcode" },
+    apartmentNumber: { type: "string", title: "Apartment number" },
+  },
+}
+```
+
+If aspects of the `uiSchema` need to be adapted, `uiSchema.definitions` of that field can be overridden inside `uiSchema` by giving the desired properties to the respective field key. In the following schema/uiSchema `petBirthDate` can be used as an example. The settings are overriding the title of the field from the original "When is your birthday?" to "When is the birthday of your pet?".
+
 ```tsx
 const familyObjectField: Schema = {
   type: "object",
@@ -822,6 +873,8 @@ const refDefSchema: Schema = {
         },
       },
     },
+    pet: { type: "string", title: "Pet name" },
+    petBirthDate: { $ref: "#/definitions/birthDate" },
   },
 
   definitions: {
@@ -846,6 +899,7 @@ const refDefSchema: Schema = {
 };
 
 const refDefUiSchema: UiSchema = {
+  petBirthDate: { "ui:title": "When is the birthday of your pet?" },
   definitions: {
     birthDate: { "ui:field": "DateField" },
     names: {

package/dist/fields/ArrayField.js

@@ -98,7 +98,10 @@ export const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    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) => {
+    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), 
+                            // "true" will prevent validation for required array fields
+                            // since a value always exists in the array
+                            forceDefaultValue: false }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => {
                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                         return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
                                         ? additionalItems

package/dist/sampleData/refDefSchema.js

@@ -14,6 +14,7 @@ export const refDefSchema = {
     properties: {
         names: {
             $ref: "#/definitions/names",
+            required: ["firstName", "lastName"],
         },
         family: {
             type: "object",
@@ -45,7 +46,10 @@ export const refDefSchema = {
             $ref: "#/definitions/age",
         },
         birthDate: {
-            $ref: "#/definitions/birthDate",
+            $ref: "#/definitions/someDate",
+        },
+        specialDate: {
+            $ref: "#/definitions/someDate",
         },
         creditCard: {
             type: "number",
@@ -243,7 +247,7 @@ export const refDefSchema = {
             },
         },
         age: ageFieldDefinition,
-        birthDate: { type: "string", title: "When is your birthday?" },
+        someDate: { type: "string", title: "When is your birthday?" },
         middleName: { type: "string", title: " Middle name" },
     },
 };
@@ -252,6 +256,7 @@ export const refDefUiSchema = {
         "names",
         "age",
         "birthDate",
+        "specialDate",
         "family",
         "creditCard",
         "billing_address",
@@ -271,8 +276,13 @@ export const refDefUiSchema = {
         },
     },
     feedback: { "ui:field": "TextAreaField" },
+    specialDate: {
+        "ui:title": "A day to remember",
+    },
     definitions: {
-        birthDate: { "ui:field": "DateField" },
+        someDate: {
+            "ui:field": "DateField",
+        },
         names: {
             history: { "ui:field": "TextAreaField" },
             middleNames: { "ui:info": { content: "You can leave those blank" } },

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

@@ -13,8 +13,8 @@ describe("solveReferences", () => {
         });
     });
     it("should resolve simple references with uiSchema correctly", () => {
-        var _a;
-        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.birthday, refDefSchema.definitions, refDefUiSchema, refDefUiSchema.definitions);
+        var _a, _b;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.birthday, refDefSchema.definitions, (_b = refDefUiSchema.birthday) !== null && _b !== void 0 ? _b : {}, refDefUiSchema.definitions);
         expect(schemaSolvedForReferences).toEqual({
             schema: {
                 type: "string",
@@ -23,4 +23,38 @@ describe("solveReferences", () => {
             uiSchema: { "ui:field": "DateField" },
         });
     });
+    it("should override uiSchema settings when key of field is also given outside definitions object of uiSchema", () => {
+        var _a, _b;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.friendBirthday, refDefSchema.definitions, (_b = refDefUiSchema.friendBirthday) !== null && _b !== void 0 ? _b : {}, refDefUiSchema.definitions);
+        expect(schemaSolvedForReferences).toEqual({
+            schema: {
+                type: "string",
+                title: "Birthday", //this is the original title that comes from the definitions, but is getting overridden
+            },
+            uiSchema: {
+                "ui:field": "DateField",
+                "ui:title": "The birthday of your best friend", //this is the title that will be displayed as field title
+            },
+        });
+    });
+    it("should merge field and definition schema", () => {
+        var _a;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.address, refDefSchema.definitions, {}, {});
+        expect(schemaSolvedForReferences).toEqual({
+            schema: {
+                type: "object",
+                title: "Address",
+                required: ["country", "city", "street", "postcode"],
+                default: { country: "US" },
+                properties: {
+                    country: { type: "string", title: "Country" },
+                    city: { type: "string", title: "City" },
+                    street: { type: "string", title: "Street" },
+                    postcode: { type: "string", title: "Postcode" },
+                    apartmentNumber: { type: "string", title: "Apartment number" },
+                },
+            },
+            uiSchema: {},
+        });
+    });
 });

package/dist/utils/__tests/testSchemas.js

@@ -9,13 +9,36 @@ export const refDefSchema = {
         birthday: {
             $ref: "#/definitions/birthday",
         },
+        friendBirthday: {
+            $ref: "#/definitions/birthday",
+        },
+        address: {
+            $ref: "#/definitions/address",
+            required: ["postcode"],
+            default: { country: "US" },
+            properties: {
+                apartmentNumber: { type: "string", title: "Apartment number" },
+            },
+        },
     },
     definitions: {
         name: { type: "string", title: "Name" },
         birthday: { type: "string", title: "Birthday" },
+        address: {
+            type: "object",
+            title: "Address",
+            required: ["country", "city", "street"],
+            properties: {
+                country: { type: "string", title: "Country" },
+                city: { type: "string", title: "City" },
+                street: { type: "string", title: "Street" },
+                postcode: { type: "string", title: "Postcode" },
+            },
+        },
     },
 };
 export const refDefUiSchema = {
+    friendBirthday: { "ui:title": "The birthday of your best friend" },
     definitions: {
         birthday: { "ui:field": "DateField" },
     },

package/dist/utils/createValidationSchema.js

@@ -34,7 +34,14 @@ export function createValidationSchema(schema, definitions = {}) {
                 throw new Error("Unsupported schema type");
         }
         if (requiredFields !== undefined && requiredFields.includes(key)) {
-            yupType = yupType["required"]("Required");
+            if (type === "array") {
+                yupType = yupType
+                    .min(1, "Required")
+                    .required("Required");
+            }
+            else {
+                yupType = yupType["required"]("Required");
+            }
         }
         return yupType;
     }

package/dist/utils/solveReferences.js

@@ -1,11 +1,14 @@
+import { mergeSchemas } from "./mergeSchemas";
 export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let solvedSchema = schema;
     let solvedUiSchema = uiSchema;
     if (typeof schema === "object" && schema["$ref"] && definitions) {
         const schemaKey = (_b = (_a = schema["$ref"]) === null || _a === void 0 ? void 0 : _a.substring(14)) !== null && _b !== void 0 ? _b : "";
-        solvedSchema = definitions[schemaKey];
-        solvedUiSchema = (_c = uiSchemaDefinitions === null || uiSchemaDefinitions === void 0 ? void 0 : uiSchemaDefinitions[schemaKey]) !== null && _c !== void 0 ? _c : {};
+        // TODO: Should we overwrite rather than merge? Maybe add a flag for choosing the behavior?
+        solvedSchema = mergeSchemas((_c = definitions[schemaKey]) !== null && _c !== void 0 ? _c : {}, schema !== null && schema !== void 0 ? schema : {});
+        delete solvedSchema.$ref;
+        solvedUiSchema = mergeSchemas((_d = uiSchemaDefinitions === null || uiSchemaDefinitions === void 0 ? void 0 : uiSchemaDefinitions[schemaKey]) !== null && _d !== void 0 ? _d : {}, uiSchema !== null && uiSchema !== void 0 ? uiSchema : {});
     }
     return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

package/package.json

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