@ukhomeoffice/cop-react-form-renderer 2.1.0 → 2.6.0

package/dist/utils/Validate/additional/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formattedTime = exports.formatString = exports.DATE_FORMAT = void 0;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var isNumeric = function isNumeric(value) {
+  return /^-?\d+$/.test(value);
+};
+
+var formatString = function formatString(date) {
+  var _date$split = date.split('-'),
+      _date$split2 = _slicedToArray(_date$split, 3),
+      day = _date$split2[0],
+      month = _date$split2[1],
+      year = _date$split2[2];
+
+  return "".concat(formatInTwoDigits(day), "-").concat(formatInTwoDigits(month), "-").concat(year);
+};
+
+exports.formatString = formatString;
+
+var formattedTime = function formattedTime(time) {
+  var _time$split = time.split(':'),
+      _time$split2 = _slicedToArray(_time$split, 2),
+      hour = _time$split2[0],
+      minute = _time$split2[1];
+
+  return "".concat(formatInTwoDigits(hour), ":").concat(formatInTwoDigits(minute));
+};
+/**
+
+/**
+ * Prepends a leading zero if the 'date component' parameter contains only a single digit.
+ * if the parameter contains more than one digit it is returned unchanged.
+ * If the parameter contains a non-numeric value it returned as an empty string.
+ * @param {string} dateComponent - the value representing a day or month.
+ * @returns  the value (appended with a leading zero, if the value passed in was a single digit)
+ */
+
+
+exports.formattedTime = formattedTime;
+
+var formatInTwoDigits = function formatInTwoDigits(dateComponent) {
+  if (isNumeric(dateComponent)) {
+    return dateComponent.padStart(2, '0');
+  }
+
+  return '';
+};
+
+var DATE_FORMAT = 'DD-MM-YYYY';
+exports.DATE_FORMAT = DATE_FORMAT;

package/dist/utils/Validate/index.js

@@ -7,20 +7,26 @@ exports.default = void 0;
 
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 
+var _validateDate = _interopRequireDefault(require("./validateDate"));
+
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
 var _validatePage = _interopRequireDefault(require("./validatePage"));
 
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
+var _validateTime = _interopRequireDefault(require("./validateTime"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
 var Validate = {
   component: _validateComponent.default,
   email: _validateEmail.default,
+  date: _validateDate.default,
   page: _validatePage.default,
-  required: _validateRequired.default
+  required: _validateRequired.default,
+  time: _validateTime.default
 };
 var _default = Validate;
 exports.default = _default;

package/dist/utils/Validate/validateComponent.js

@@ -9,26 +9,53 @@ var _models = require("../../models");
 
 var _showComponent = _interopRequireDefault(require("../Component/showComponent"));
 
+var _additional = _interopRequireDefault(require("./additional"));
+
+var _validateDate2 = _interopRequireDefault(require("./validateDate"));
+
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
+var _validateTime2 = _interopRequireDefault(require("./validateTime"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+var validateContainer = function validateContainer(container, formData) {
+  var errors = [];
+
+  if (Array.isArray(container.components)) {
+    var fd = formData && container.fieldId ? formData[container.fieldId] : formData;
+    container.components.forEach(function (component) {
+      errors.push(validateComponent(component, fd));
+    });
+  }
+
+  return errors.filter(function (e) {
+    return !!e;
+  });
+};
 /**
  * Validates a single component.
  * @param {object} component The component to validate.
  * @param {object} formData The data to use that holds this component's value.
  * @returns The first encountered error with the component.
  */
+
+
 var validateComponent = function validateComponent(component, formData) {
   var error = undefined;
   var data = formData && _typeof(formData) === 'object' ? formData : {};
 
   if (component && (0, _showComponent.default)(component, formData)) {
+    if (component.type === _models.ComponentTypes.CONTAINER) {
+      return validateContainer(component, formData);
+    }
+
     var value = data[component.fieldId];
+    delete component.propsInError;
 
     if (component.required) {
       error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
@@ -38,6 +65,36 @@ var validateComponent = function validateComponent(component, formData) {
       error = (0, _validateEmail.default)(value, component.label);
     }
 
+    if (!error && component.type === _models.ComponentTypes.DATE) {
+      var _validateDate = (0, _validateDate2.default)(value),
+          message = _validateDate.message,
+          propsInError = _validateDate.propsInError;
+
+      component.propsInError = propsInError;
+      error = message;
+    }
+
+    if (!error && component.type === _models.ComponentTypes.TIME) {
+      var _validateTime = (0, _validateTime2.default)(value),
+          _message = _validateTime.message,
+          _propsInError = _validateTime.propsInError;
+
+      component.propsInError = _propsInError;
+      error = _message;
+    }
+
+    if (!error && component.additionalValidation) {
+      error = (0, _additional.default)(component, value);
+
+      if (component.type === _models.ComponentTypes.DATE && error) {
+        component.propsInError = {
+          day: true,
+          month: true,
+          year: true
+        };
+      }
+    }
+
     component.error = error;
   }
 

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

@@ -11,13 +11,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 describe('utils', function () {
   describe('Validate', function () {
     describe('component', function () {
-      var setup = function setup(id, type, label, required) {
+      var setup = function setup(id, type, label, required, additionalValidation) {
         return {
           id: id,
           fieldId: id,
           type: type,
           label: label,
-          required: required
+          required: required,
+          additionalValidation: additionalValidation
         };
       };
 
@@ -114,6 +115,95 @@ describe('utils', function () {
           });
         });
       });
+      describe('when the component is a Date Input', function () {
+        var ID = 'field';
+        it('should always reject invalid dates', function () {
+          var LABEL = 'Field';
+          var COMPONENT = setup(ID, _models.ComponentTypes.DATE, LABEL, false);
+
+          var DATA = _defineProperty({}, ID, '25-45-2033');
+
+          expect((0, _validateComponent.default)(COMPONENT, DATA)).toEqual({
+            error: 'Month must be between 1 and 12',
+            id: ID
+          });
+        });
+        it('should apply optional validators when specified', function () {
+          var LABEL = 'Field';
+
+          var DATA = _defineProperty({}, ID, '25-3-3033');
+
+          var ADDITIONAL_VALIDATION = [{
+            function: 'mustBeBefore',
+            value: 3,
+            unit: 'day',
+            message: 'Date must be less than 3 days in the future'
+          }];
+          var COMPONENT = setup(ID, _models.ComponentTypes.DATE, LABEL, false, ADDITIONAL_VALIDATION);
+          expect((0, _validateComponent.default)(COMPONENT, DATA)).toEqual({
+            error: 'Date must be less than 3 days in the future',
+            id: ID
+          });
+        });
+      });
+      describe('when the component is a Time Input', function () {
+        var ID = 'field';
+        it('should always reject invalid time', function () {
+          var LABEL = 'Field';
+          var COMPONENT = setup(ID, _models.ComponentTypes.TIME, LABEL, false);
+
+          var DATA = _defineProperty({}, ID, '25:45');
+
+          expect((0, _validateComponent.default)(COMPONENT, DATA)).toEqual({
+            error: 'Hour must be between 0 and 23',
+            id: ID
+          });
+        });
+      });
+      describe('when the component is a container', function () {
+        it('should return an empty array when the container has an undefined components array', function () {
+          var ID = 'container';
+          var LABEL = 'field';
+          var CONTAINER = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false);
+          expect((0, _validateComponent.default)(CONTAINER, null)).toEqual([]);
+        });
+        it('should return an empty array when the container has no components', function () {
+          var ID = 'container';
+          var LABEL = 'field';
+          var CONTAINER = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false);
+          CONTAINER.components = [];
+          expect((0, _validateComponent.default)(CONTAINER, null)).toEqual([]);
+        });
+        it('should return an empty array when the container has only valid components', function () {
+          var EMAIL_ID = 'email';
+          var EMAIL_LABEL = 'Email';
+          var EMAIL = setup(EMAIL_ID, _models.ComponentTypes.EMAIL, EMAIL_LABEL, false);
+          var ID = 'container';
+          var LABEL = 'field';
+          var CONTAINER = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false);
+          CONTAINER.components = [EMAIL];
+
+          var DATA = _defineProperty({}, ID, _defineProperty({}, EMAIL_ID, 'alpha.bravo@digital.homeoffice.gov.uk'));
+
+          expect((0, _validateComponent.default)(CONTAINER, DATA)).toEqual([]);
+        });
+        it('should return an array containing an error when the container has an invalid component', function () {
+          var EMAIL_ID = 'email';
+          var EMAIL_LABEL = 'Email';
+          var EMAIL = setup(EMAIL_ID, _models.ComponentTypes.EMAIL, EMAIL_LABEL, false);
+          var ID = 'container';
+          var LABEL = 'field';
+          var CONTAINER = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false);
+          CONTAINER.components = [EMAIL];
+
+          var DATA = _defineProperty({}, ID, _defineProperty({}, EMAIL_ID, 'alpha.bravo@digital.homeoffice.com'));
+
+          expect((0, _validateComponent.default)(CONTAINER, DATA)).toEqual([{
+            id: EMAIL_ID,
+            error: "Enter ".concat(EMAIL_LABEL.toLowerCase(), " in the correct format, like jane.doe@homeoffice.gov.uk")
+          }]);
+        });
+      });
     });
   });
 });

package/dist/utils/Validate/validateDate.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.maxMonthDays = exports.default = void 0;
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+
+var _isToday = _interopRequireDefault(require("dayjs/plugin/isToday"));
+
+var _isLeapYear = _interopRequireDefault(require("dayjs/plugin/isLeapYear"));
+
+var _utils = require("./additional/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+_dayjs.default.extend(_customParseFormat.default);
+
+_dayjs.default.extend(_isToday.default);
+
+_dayjs.default.extend(_isLeapYear.default);
+
+var maxMonthDays = function maxMonthDays(month, year) {
+  if (month === '02') {
+    return (0, _dayjs.default)().year(year).isLeapYear() ? 29 : 28;
+  } else if (['04', '06', '09', '11'].includes(month)) {
+    return 30;
+  }
+
+  return 31;
+};
+
+exports.maxMonthDays = maxMonthDays;
+
+/**
+ * Checks if a date passed is a valid date.
+ * This will validate for 'leap years', missing components, invalid day, monnth or year components.
+ * EXAMPLE USE : const { message, propsInError } = validateDate('2-11-2020')
+ * 
+ * Note that an empty string is not considered invalid. You should use
+ * validateRequired (Validate.required) for that sort of validation.
+ * 
+ * @param {string} date  date as a string
+ * @returns an object with an error message and instructions for which parts of the date are in error
+ * or undefined for both if the date is valid
+ */
+var validateDate = function validateDate(date) {
+  if (!date) {
+    return {
+      message: undefined,
+      propsInError: undefined
+    };
+  }
+
+  var formattedDate = (0, _utils.formatString)(date);
+
+  var _formattedDate$split = formattedDate.split('-'),
+      _formattedDate$split2 = _slicedToArray(_formattedDate$split, 3),
+      day = _formattedDate$split2[0],
+      month = _formattedDate$split2[1],
+      year = _formattedDate$split2[2];
+
+  var intDay = parseInt(day, 10);
+  var intMonth = parseInt(month, 10);
+
+  if (year.length === 0) {
+    return {
+      message: 'Date must include a year',
+      propsInError: {
+        year: true
+      }
+    };
+  }
+
+  if (year.length !== 4) {
+    return {
+      message: 'Year must be 4 numbers',
+      propsInError: {
+        year: true
+      }
+    };
+  }
+
+  if (month.length === 0) {
+    return {
+      message: 'Date must include a month',
+      propsInError: {
+        month: true
+      }
+    };
+  }
+
+  if (intMonth > 12 || intMonth < 1) {
+    return {
+      message: 'Month must be between 1 and 12',
+      propsInError: {
+        month: true
+      }
+    };
+  }
+
+  if (day.length === 0) {
+    return {
+      message: 'Date must include a day',
+      propsInError: {
+        day: true
+      }
+    };
+  }
+
+  var maxDays = maxMonthDays(month, year);
+
+  if (intDay > maxDays || intDay < 1) {
+    return {
+      message: "Day must be between 1 and ".concat(maxDays),
+      propsInError: {
+        day: true
+      }
+    };
+  }
+
+  if ((0, _dayjs.default)(formattedDate, _utils.DATE_FORMAT).format(_utils.DATE_FORMAT) !== formattedDate) {
+    return {
+      message: 'Enter a valid date',
+      propsInError: {
+        day: true,
+        month: true,
+        year: true
+      }
+    };
+  }
+
+  return {
+    message: undefined,
+    propsInError: undefined
+  };
+};
+
+var _default = validateDate;
+exports.default = _default;

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

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _validateDate = _interopRequireWildcard(require("./validateDate"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('date', function () {
+      test('should return no error when the value is an empty string', function () {
+        expect((0, _validateDate.default)('', 'DD-MM-YYYY')).toEqual({
+          message: undefined,
+          propsInError: undefined
+        });
+      });
+      test('should return undefined if a date string is valid', function () {
+        var output = (0, _validateDate.default)('28-02-2024', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: undefined,
+          propsInError: undefined
+        });
+      });
+      test('should return undefined to a correct leap year date', function () {
+        var output = (0, _validateDate.default)('29-02-2024', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: undefined,
+          propsInError: undefined
+        });
+      });
+      test('should validate false if NOT a leap year & 29 Feb is entered', function () {
+        var output = (0, _validateDate.default)('29-02-2023', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Day must be between 1 and 28',
+          propsInError: {
+            day: true
+          }
+        });
+      });
+      test('should return an error if no year is given', function () {
+        var output = (0, _validateDate.default)('29-02-', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Date must include a year',
+          propsInError: {
+            year: true
+          }
+        });
+      });
+      test('should return an error if the year contains less than 4 numbers', function () {
+        var output = (0, _validateDate.default)('29-02-20', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Year must be 4 numbers',
+          propsInError: {
+            year: true
+          }
+        });
+      });
+      test('should return an error if the year contains more than 4 numbers', function () {
+        var output = (0, _validateDate.default)('29-02-20202', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Year must be 4 numbers',
+          propsInError: {
+            year: true
+          }
+        });
+      });
+      test('should return an error if no month is given', function () {
+        var output = (0, _validateDate.default)('29--2020', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Date must include a month',
+          propsInError: {
+            month: true
+          }
+        });
+      });
+      test('should return an error if the month is not between 1 and 12', function () {
+        var output = (0, _validateDate.default)('29-14-2020', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Month must be between 1 and 12',
+          propsInError: {
+            month: true
+          }
+        });
+      });
+      test('should return an error if no day is given', function () {
+        var output = (0, _validateDate.default)('-03-2020', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Date must include a day',
+          propsInError: {
+            day: true
+          }
+        });
+      });
+      test('should return an error if the day is not between 1 and 31', function () {
+        var output = (0, _validateDate.default)('45-12-2020', 'DD-MM-YYYY');
+        expect(output).toEqual({
+          message: 'Day must be between 1 and 31',
+          propsInError: {
+            day: true
+          }
+        });
+      });
+      test('should correctly identify the maximum numbers of days in a given month and year', function () {
+        var max = (0, _validateDate.maxMonthDays)('02', '2024');
+        expect(max).toEqual(29);
+        max = (0, _validateDate.maxMonthDays)('02', '2023');
+        expect(max).toEqual(28);
+        max = (0, _validateDate.maxMonthDays)('06', '2023');
+        expect(max).toEqual(30);
+        max = (0, _validateDate.maxMonthDays)('07', '2023');
+        expect(max).toEqual(31);
+      });
+    });
+  });
+});

package/dist/utils/Validate/validatePage.js

@@ -18,17 +18,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns An array containing all of the errors.
  */
 var validatePage = function validatePage(components, formData) {
-  var errors = [];
-
   if (Array.isArray(components)) {
-    components.forEach(function (component) {
-      errors.push((0, _validateComponent.default)(component, formData));
-    });
+    return components.reduce(function (errors, component) {
+      return errors.concat((0, _validateComponent.default)(component, formData));
+    }, []).filter(function (e) {
+      return !!e;
+    }).flat();
   }
 
-  return errors.filter(function (e) {
-    return !!e;
-  });
+  return [];
 };
 
 var _default = validatePage;