@ukhomeoffice/cop-react-form-renderer 3.0.0 → 3.0.3

package/dist/utils/Component/getComponentTests/getComponent.date.test.js

@@ -94,8 +94,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(2);
-    expect(ON_CHANGE_CALLS[1]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
       name: FIELD_ID,
       value: '5--'
     }); // And now the month...
@@ -107,8 +107,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(3);
-    expect(ON_CHANGE_CALLS[2]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(2);
+    expect(ON_CHANGE_CALLS[1]).toMatchObject({
       name: FIELD_ID,
       value: '5-11-'
     }); // And finally the year.
@@ -120,8 +120,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(4);
-    expect(ON_CHANGE_CALLS[3]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(3);
+    expect(ON_CHANGE_CALLS[2]).toMatchObject({
       name: FIELD_ID,
       value: '5-11-2022'
     });

package/dist/utils/FormPage/getFormPage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _Container = _interopRequireDefault(require("../Container"));
 
 var _Data = _interopRequireDefault(require("../Data"));
@@ -35,6 +37,8 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     return null;
   }
 
+  pageOptions = interpolatePageOptions(pageOptions, formData);
+  formComponents = interpolateFormComponents(formComponents, formData);
   var components = pageOptions.components.map(function (componentOptions) {
     if (typeof componentOptions === 'string') {
       return (0, _getParagraphFromText.default)(componentOptions);
@@ -57,6 +61,42 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     actions: actions
   }));
 };
+/**
+ * Interpolate 'Variable Expression' using formData - for local use only.
+ * @param {object} pageOptions The JSON page.
+ * @param {object} formData The top-level form data, used for setting up components.
+ * @returns interpolated pageOptions.
+ */
+
+
+var interpolatePageOptions = function interpolatePageOptions(pageOptions, formData) {
+  return JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(pageOptions), formData));
+};
+/**
+ * Interpolate 'Variable Expression' using formData excluding each component's data block - for local use only.
+ * @param {Array} formComponents The components defined at the top-level of the form.
+ * @param {object} formData The top-level form data, used for setting up components.
+ * @returns interpolated formComponents
+ */
+
+
+var interpolateFormComponents = function interpolateFormComponents(formComponents, formData) {
+  return formComponents.map(function (formComponent) {
+    var formComponentDataUrl = undefined;
+
+    if (formComponent.data && formComponent.data.url) {
+      formComponentDataUrl = formComponent.data.url;
+    }
+
+    var interpolatedFormComponent = JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(formComponent), formData));
+
+    if (formComponentDataUrl) {
+      interpolatedFormComponent.data.url = formComponentDataUrl;
+    }
+
+    return interpolatedFormComponent;
+  });
+};
 
 var _default = getFormPage;
 exports.default = _default;

package/dist/utils/FormPage/getFormPage.test.js

@@ -32,6 +32,18 @@ describe('utils', function () {
         data: {
           url: '${urls.refData}/v3/charlies'
         }
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'd',
+        fieldId: 'd',
+        label: 'Roger ${currentUser.firstname}',
+        type: 'text'
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'e',
+        fieldId: 'e',
+        label: 'Bravo ${currentUser.surname}',
+        type: 'text'
       }];
       var FORM_DATA = {
         urls: {
@@ -165,6 +177,59 @@ describe('utils', function () {
         var C = FORM_COMPONENTS[2];
         expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, {})).toEqual({
           title: PAGE.title,
+          components: [{
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[0]
+          }, _objectSpread(_objectSpread({}, PAGE.components[1]), {}, {
+            full_path: PAGE.components[1].fieldId
+          }), {
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[2]
+          }, // eslint-disable-next-line no-template-curly-in-string
+          _objectSpread(_objectSpread({
+            use: 'c'
+          }, C), {}, {
+            cya_label: C.label,
+            full_path: C.fieldId,
+            data: {
+              url: '${urls.refData}/v3/charlies'
+            }
+          })],
+          formData: {}
+        });
+      });
+      it('should interpolate and handle a page that references a form-level component with formData', function () {
+        var PAGE = {
+          // eslint-disable-next-line no-template-curly-in-string
+          title: 'Page ${postFixTitle}',
+          components: ["Opening paragraph", {
+            type: 'heading',
+            size: 'l',
+            content: 'Page heading'
+          }, "Closing paragraph", {
+            use: 'c'
+          }, {
+            use: 'd'
+          }, "Kevin", {
+            use: 'e'
+          }]
+        };
+
+        var DATA = _objectSpread(_objectSpread({}, FORM_DATA), {}, {
+          currentUser: {
+            firstname: 'Bob',
+            surname: 'Kevin'
+          },
+          postFixTitle: 'Everyone'
+        });
+
+        var C = FORM_COMPONENTS[2];
+        var D = FORM_COMPONENTS[3];
+        var E = FORM_COMPONENTS[4];
+        expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, DATA)).toEqual({
+          title: 'Page Everyone',
           components: [{
             type: 'html',
             tagName: 'p',
@@ -179,9 +244,28 @@ describe('utils', function () {
             use: 'c'
           }, C), {}, {
             cya_label: C.label,
+            data: {
+              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
+            },
             full_path: C.fieldId
+          }), _objectSpread(_objectSpread({
+            use: 'd'
+          }, D), {}, {
+            label: 'Roger ' + DATA.currentUser.firstname,
+            cya_label: 'Roger ' + DATA.currentUser.firstname,
+            full_path: D.fieldId
+          }), {
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[5]
+          }, _objectSpread(_objectSpread({
+            use: 'e'
+          }, E), {}, {
+            label: 'Bravo ' + DATA.currentUser.surname,
+            cya_label: 'Bravo ' + DATA.currentUser.surname,
+            full_path: E.fieldId
           })],
-          formData: {}
+          formData: DATA
         });
       });
     });

package/dist/utils/Validate/index.js

@@ -13,6 +13,8 @@ var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
 var _validatePage = _interopRequireDefault(require("./validatePage"));
 
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
 var _validateTime = _interopRequireDefault(require("./validateTime"));
@@ -25,6 +27,7 @@ var Validate = {
   email: _validateEmail.default,
   date: _validateDate.default,
   page: _validatePage.default,
+  regex: _validateRegex.default,
   required: _validateRequired.default,
   time: _validateTime.default
 };

package/dist/utils/Validate/validateCollection.js

@@ -15,7 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var validateCollection = function validateCollection(collection, items) {
+/**
+ * Validates all of the items within a collection.
+ * @param {object} collection The collection to validate.
+ * @param {object} items The data items in the collection.
+ * @param {object} formData The data at the top level of the form.
+ * @returns Errors for all components for all items within the collection.
+ */
+var validateCollection = function validateCollection(collection, items, formData) {
   var errors = [];
 
   if (collection && Array.isArray(collection.item) && Array.isArray(items)) {
@@ -29,7 +36,7 @@ var validateCollection = function validateCollection(collection, items) {
           });
         })
       };
-      errors.push((0, _validateContainer.default)(container, item));
+      errors.push((0, _validateContainer.default)(container, item, formData));
     });
   }
 

package/dist/utils/Validate/validateComponent.js

@@ -19,6 +19,8 @@ var _validateDate = _interopRequireDefault(require("./validateDate"));
 
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
 var _validateTime = _interopRequireDefault(require("./validateTime"));
@@ -30,25 +32,27 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 /**
  * Validates a single component.
  * @param {object} component The component to validate.
- * @param {object} formData The data to use that holds this component's value.
+ * @param {object} outerData The data to use that holds this component's value.
+ * @param {object} formData The data at the top level of the form.
  * @returns The first encountered error with the component.
  */
-var validateComponent = function validateComponent(component, formData) {
+var validateComponent = function validateComponent(component, outerData, formData) {
   var _component$data$optio;
 
-  if (!(0, _showComponent.default)(component, formData)) {
+  var fd = formData || outerData;
+
+  if (!(0, _showComponent.default)(component, fd)) {
     return undefined;
   }
 
-  var error = undefined;
-  var nestedId = undefined;
-  var propertiesInError = undefined;
-  var data = formData && _typeof(formData) === 'object' ? formData : {};
-
   if (component.type === _models.ComponentTypes.CONTAINER) {
-    return (0, _validateContainer.default)(component, formData);
+    return (0, _validateContainer.default)(component, outerData, fd);
   }
 
+  var error = undefined;
+  var nestedId = undefined;
+  var properties = undefined;
+  var data = outerData && _typeof(outerData) === 'object' ? outerData : {};
   var value = data[component.fieldId];
 
   if (component.required) {
@@ -58,7 +62,7 @@ var validateComponent = function validateComponent(component, formData) {
   if (!error) {
     switch (component.type) {
       case _models.ComponentTypes.COLLECTION:
-        return (0, _validateCollection.default)(component, value);
+        return (0, _validateCollection.default)(component, value, fd);
 
       case _models.ComponentTypes.EMAIL:
         error = (0, _validateEmail.default)(value, component.label);
@@ -72,7 +76,7 @@ var validateComponent = function validateComponent(component, formData) {
             message = _validator.message,
             propsInError = _validator.propsInError;
 
-        propertiesInError = propsInError;
+        properties = propsInError;
         error = message;
         break;
 
@@ -81,12 +85,10 @@ var validateComponent = function validateComponent(component, formData) {
           var nestedError;
 
           if (option.nested && option.nested.shown) {
-            var _nestedError;
-
-            nestedError = validateComponent(option.nested, formData);
-            error = (_nestedError = nestedError) === null || _nestedError === void 0 ? void 0 : _nestedError.error;
+            nestedError = validateComponent(option.nested, outerData, fd);
 
             if (nestedError) {
+              error = nestedError.error;
               nestedId = nestedError.id;
             }
           }
@@ -99,11 +101,15 @@ var validateComponent = function validateComponent(component, formData) {
         break;
     }
 
+    if (!error && component.pattern) {
+      error = (0, _validateRegex.default)(value, component.label, component.pattern, component.custom_errors);
+    }
+
     if (!error && component.additionalValidation) {
       error = (0, _additional.default)(component, value);
 
       if (component.type === _models.ComponentTypes.DATE && error) {
-        propertiesInError = {
+        properties = {
           day: true,
           month: true,
           year: true
@@ -116,7 +122,7 @@ var validateComponent = function validateComponent(component, formData) {
     return {
       id: nestedId || component.full_path || component.id,
       error: error,
-      properties: propertiesInError
+      properties: properties
     };
   }
 

package/dist/utils/Validate/validateContainer.js

@@ -10,13 +10,22 @@ var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
-var validateContainer = function validateContainer(container, formData) {
+
+/**
+ * Validates all components within a container.
+ * @param {object} container The container to validate.
+ * @param {object} outerData The data to use that holds this component's value.
+ * @param {object} formData The data at the top level of the form.
+ * @returns Errors for all components within the container.
+ */
+var validateContainer = function validateContainer(container, outerData, formData) {
+  var fd = formData || outerData;
   var errors = [];
 
   if (container && Array.isArray(container.components)) {
-    var fd = formData && container.fieldId ? formData[container.fieldId] : formData;
+    var containerData = outerData && container.fieldId ? outerData[container.fieldId] : outerData;
     container.components.forEach(function (component) {
-      errors.push((0, _validateComponent.default)(component, fd));
+      errors.push((0, _validateComponent.default)(component, containerData, fd));
     });
   }
 

package/dist/utils/Validate/validatePage.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var validatePage = function validatePage(page) {
   if ((0, _showFormPage.default)(page, page.formData) && Array.isArray(page.components)) {
     return page.components.reduce(function (errors, component) {
-      return errors.concat((0, _validateComponent.default)(component, page.formData));
+      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData));
     }, []).filter(function (e) {
       return !!e;
     }).flat();

package/dist/utils/Validate/validateRegex.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Validates an components value against a given regex pattern.
+ * 
+ * An empty string for value is considered valid as not all components
+ * with pattern validation have to be required. 
+ * @param {*} value The value to validate.
+ * @param {string} label The label to use in the default error message.
+ * @param {string} pattern The regex pattern to validate against.
+ * @param {array} customErrors The array of custom errors for the component.
+ * @returns An error if the value doesn't match the regex pattern.
+ */
+var validateRegex = function validateRegex(value) {
+  var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var pattern = arguments.length > 2 ? arguments[2] : undefined;
+  var customErrors = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!value) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    var regex = new RegExp(pattern);
+
+    if (regex.test(value)) {
+      return undefined;
+    }
+
+    if (Array.isArray(customErrors)) {
+      var _result$;
+
+      var result = customErrors.filter(function (error) {
+        return error.type === 'pattern';
+      });
+
+      if (result !== null && result !== void 0 && (_result$ = result[0]) !== null && _result$ !== void 0 && _result$.message) {
+        return result[0].message;
+      }
+    }
+  }
+
+  if (label === '') {
+    return 'Component failed regex validation';
+  }
+
+  return "".concat(label, " failed regex validation");
+};
+
+var _default = validateRegex;
+exports.default = _default;

package/dist/utils/Validate/validateRegex.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('regex', function () {
+      var GOOD_VALUE = 'hello';
+      var BAD_VALUE = 'h3llo';
+      var LABEL = 'Component';
+      var PATTERN = '^[a-z]*$';
+      var CUSTOM_ERRORS = [{
+        "type": "pattern",
+        "message": "Regex validation failed for ".concat(LABEL)
+      }];
+      var DEFAULT_ERROR = [{
+        "type": "pattern"
+      }]; // Valid values
+
+      it('should return no error when the value matches the regex pattern', function () {
+        expect((0, _validateRegex.default)(GOOD_VALUE, LABEL, PATTERN, CUSTOM_ERRORS)).toBeUndefined();
+      });
+      it('should return no error when the value is an empty string', function () {
+        expect((0, _validateRegex.default)('', LABEL, PATTERN, CUSTOM_ERRORS)).toBeUndefined();
+      }); // Invalid values
+
+      it('should return a custom error when the value does not match the regex pattern and one is specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, LABEL, PATTERN, CUSTOM_ERRORS)).toEqual(CUSTOM_ERRORS[0].message);
+      });
+      it('should return an error using label when the value does not match the regex pattern and a custom error is not specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, LABEL, PATTERN, DEFAULT_ERROR)).toEqual("".concat(LABEL, " failed regex validation"));
+      });
+      it('should return a default error when the value does not match the regex pattern and both a custom error and label are not specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, '', PATTERN, DEFAULT_ERROR)).toEqual('Component failed regex validation');
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.6.0",
+    "@ukhomeoffice/cop-react-components": "1.7.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",