@ukhomeoffice/cop-react-form-renderer 2.5.0 → 2.6.1-beta

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,31 +9,51 @@ 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 _validateDate2 = _interopRequireDefault(require("./validateDate"));
-
 var _validateTime2 = _interopRequireDefault(require("./validateTime"));
 
-var _additional = _interopRequireDefault(require("./additional"));
-
 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;
 
@@ -45,7 +65,7 @@ var validateComponent = function validateComponent(component, formData) {
       error = (0, _validateEmail.default)(value, component.label);
     }
 
-    if (!error && component.type === _models.ComponentTypes.DATE && value) {
+    if (!error && component.type === _models.ComponentTypes.DATE) {
       var _validateDate = (0, _validateDate2.default)(value),
           message = _validateDate.message,
           propsInError = _validateDate.propsInError;
@@ -54,7 +74,7 @@ var validateComponent = function validateComponent(component, formData) {
       error = message;
     }
 
-    if (!error && component.type === _models.ComponentTypes.TIME && value) {
+    if (!error && component.type === _models.ComponentTypes.TIME) {
       var _validateTime = (0, _validateTime2.default)(value),
           _message = _validateTime.message,
           _propsInError = _validateTime.propsInError;

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

@@ -160,6 +160,50 @@ describe('utils', function () {
           });
         });
       });
+      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

@@ -51,11 +51,22 @@ 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('-'),

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

@@ -11,6 +11,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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({

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;

package/dist/utils/Validate/validateTime.js

@@ -19,7 +19,26 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+/**
+ * Checks if a time passed is a valid time.
+ * This will validate for missing components, invalid hour or minute components.
+ * EXAMPLE USE : const { message, propsInError } = validateTime('15:30')
+ * 
+ * Note that an empty string is not considered invalid. You should use
+ * validateRequired (Validate.required) for that sort of validation.
+ * 
+ * @param {string} time time as a string
+ * @returns an object with an error message and instructions for which parts of the time are in error
+ * or undefined for both if the time is valid
+ */
 var validateTime = function validateTime(time) {
+  if (!time) {
+    return {
+      message: undefined,
+      propsInError: undefined
+    };
+  }
+
   var formattedDate = (0, _utils.formattedTime)(time);
 
   var _formattedDate$split = formattedDate.split(':'),

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

@@ -7,6 +7,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 describe('utils', function () {
   describe('Validate', function () {
     describe('time', function () {
+      test('should return no error when the value is an empty string', function () {
+        expect((0, _validateTime.default)('')).toEqual({
+          message: undefined,
+          propsInError: undefined
+        });
+      });
       test('should return undefined if a time string is valid', function () {
         var output = (0, _validateTime.default)('14:30');
         expect(output).toEqual({

package/dist/utils/index.js

@@ -11,6 +11,10 @@ var _CheckYourAnswers = _interopRequireDefault(require("./CheckYourAnswers"));
 
 var _Component = _interopRequireDefault(require("./Component"));
 
+var _Condition = _interopRequireDefault(require("./Condition"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
 var _Data = _interopRequireDefault(require("./Data"));
 
 var _Format = _interopRequireDefault(require("./Format"));
@@ -19,8 +23,6 @@ var _FormPage = _interopRequireDefault(require("./FormPage"));
 
 var _Hub = _interopRequireDefault(require("./Hub"));
 
-var _meetsCondition = _interopRequireDefault(require("./meetsCondition"));
-
 var _Validate = _interopRequireDefault(require("./Validate"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,11 +36,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Utils = _objectSpread({
   CheckYourAnswers: _CheckYourAnswers.default,
   Component: _Component.default,
+  Container: _Container.default,
   Data: _Data.default,
   Format: _Format.default,
   FormPage: _FormPage.default,
   Hub: _Hub.default,
-  meetsCondition: _meetsCondition.default,
+  Condition: _Condition.default,
   Validate: _Validate.default
 }, _copReactComponents.Utils);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.5.0",
+  "version": "2.6.1-beta",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -43,22 +43,24 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^12.1.10",
     "axios-mock-adapter": "^1.18.1",
+    "babel-loader": "8.1.0",
     "cross-env": "^7.0.3",
     "html-react-parser": "^0.10.5",
     "node-sass": "^6.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
-    "storybook-addon-mock": "^2.0.1"
+    "storybook-addon-mock": "^2.0.1",
+    "webpack": "4.44.2"
   },
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "4.0.3"
   },
-  "optionalDependencies": {
-    "babel-loader": "8.1.0",
-    "webpack": "4.44.2"
+  "optionalDependencies": {},
+  "resolutions": {
+    "immer": "9.0.6"
   },
   "main": "dist/index.js",
   "files": [

package/dist/utils/FormPage/getEditableComponents.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Component = _interopRequireDefault(require("../Component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Gets all the editable components on a page.
- * @param {object} page The page to consider.
- * @returns An array of ONLY the editable components on a page.
- */
-var getEditableComponents = function getEditableComponents(page) {
-  if (page && Array.isArray(page.components)) {
-    return page.components.filter(function (c) {
-      return _Component.default.editable(c);
-    });
-  }
-
-  return [];
-};
-
-var _default = getEditableComponents;
-exports.default = _default;

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

@@ -1,75 +0,0 @@
-"use strict";
-
-var _getEditableComponents = _interopRequireDefault(require("./getEditableComponents"));
-
-var _isEditable = require("../Component/isEditable");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('utils', function () {
-  describe('FormPage', function () {
-    describe('getEditableComponents', function () {
-      var HTML = {
-        type: 'html',
-        tagName: 'p',
-        content: 'Alpha'
-      };
-      var INSET_TEXT = {
-        type: 'inset-text',
-        content: 'Bravo'
-      };
-      var HEADING = {
-        type: 'heading',
-        size: 'm',
-        content: 'Charlie'
-      };
-      it('should return an empty array for a null page', function () {
-        expect((0, _getEditableComponents.default)(null)).toEqual([]);
-      });
-      it('should return an empty array for a page with no components', function () {
-        expect((0, _getEditableComponents.default)({
-          components: []
-        })).toEqual([]);
-      });
-      it('should return an empty array for a page with only non-editable components', function () {
-        var COMPONENTS = [HTML, INSET_TEXT, HEADING];
-        expect((0, _getEditableComponents.default)({
-          components: COMPONENTS
-        })).toEqual([]);
-      });
-
-      _isEditable.EDITABLE_TYPES.forEach(function (type) {
-        it("should return just the \"".concat(type, "\" component if it exists in the components but no non-editable ones"), function () {
-          var EDITABLE = {
-            type: type
-          };
-          var COMPONENTS = [HTML, EDITABLE, INSET_TEXT, HEADING];
-          expect((0, _getEditableComponents.default)({
-            components: COMPONENTS
-          })).toEqual([EDITABLE]);
-        });
-      });
-
-      it('should return all editable components and no non-editable ones', function () {
-        var COMPONENTS = [HTML, INSET_TEXT, HEADING];
-
-        _isEditable.EDITABLE_TYPES.forEach(function (type) {
-          COMPONENTS.push({
-            type: type
-          });
-        });
-
-        var RESULT = (0, _getEditableComponents.default)({
-          components: COMPONENTS
-        });
-        expect(RESULT.length).toEqual(_isEditable.EDITABLE_TYPES.length);
-
-        _isEditable.EDITABLE_TYPES.forEach(function (type) {
-          expect(RESULT).toContainEqual({
-            type: type
-          });
-        });
-      });
-    });
-  });
-});