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

package/dist/components/CheckYourAnswers/Answer.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _react = require("@testing-library/react");
-
 var _Readonly = require("@ukhomeoffice/cop-react-components/dist/Readonly");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _setupTests = require("../../setupTests");
 
 var _Answer = _interopRequireDefault(require("./Answer"));
 
@@ -17,7 +17,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 describe('components', function () {
   describe('CheckYourAnswers.Answer', function () {
     it('should handle a null value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var VALUE, COMPONENT, _render, container;
+      var VALUE, COMPONENT, _renderWithValidation, container;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -25,10 +25,10 @@ describe('components', function () {
             case 0:
               VALUE = null;
               COMPONENT = null;
-              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render.container;
+              })), container = _renderWithValidation.container;
               expect(container.childNodes.length).toEqual(1);
               expect(container.childNodes[0].textContent).toEqual('No answer');
 
@@ -40,7 +40,7 @@ describe('components', function () {
       }, _callee);
     })));
     it('should handle a null component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var VALUE, COMPONENT, _render2, container;
+      var VALUE, COMPONENT, _renderWithValidation2, container;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
@@ -48,10 +48,10 @@ describe('components', function () {
             case 0:
               VALUE = 'Alpha';
               COMPONENT = null;
-              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render2.container;
+              })), container = _renderWithValidation2.container;
               expect(container.textContent).toEqual(VALUE);
 
             case 4:
@@ -62,7 +62,7 @@ describe('components', function () {
       }, _callee2);
     })));
     it('should handle a component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var VALUE, COMPONENT, _render3, container, answer;
+      var VALUE, COMPONENT, _renderWithValidation3, container, answer;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -75,10 +75,10 @@ describe('components', function () {
                 type: 'text',
                 label: 'Alpha'
               };
-              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render3.container;
+              })), container = _renderWithValidation3.container;
               answer = container.childNodes[0];
               expect(answer.tagName).toEqual('DIV');
               expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);

package/dist/components/FormComponent/FormComponent.test.js

@@ -2,8 +2,6 @@
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useHooks = require("../../hooks/useHooks");
-
 var _setupTests = require("../../setupTests");
 
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
@@ -16,9 +14,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 describe('components', function () {
   describe('FormComponent', function () {
-    beforeEach(function () {
-      (0, _useHooks.resetHooks)();
-    });
     it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation, container, formGroup, label, hint, input;
 
@@ -139,15 +134,17 @@ describe('components', function () {
       }, _callee3);
     })));
     it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var ID, COMPONENT, _renderWithValidation4, container, div;
+      var hooks, ID, COMPONENT, _renderWithValidation4, container, div;
 
       return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              (0, _useHooks.addHook)('onGetComponent', function (config, wrap) {
-                return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
-              });
+              hooks = {
+                onGetComponent: function onGetComponent(config, wrap) {
+                  return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
+                }
+              };
               ID = 'component';
               COMPONENT = {
                 type: 'html',
@@ -157,7 +154,9 @@ describe('components', function () {
               _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _renderWithValidation4.container;
+              }), {
+                hooks: hooks
+              }), container = _renderWithValidation4.container;
               div = container.childNodes[0];
               expect(div.tagName).toEqual('DIV');
               expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
@@ -170,15 +169,17 @@ describe('components', function () {
       }, _callee4);
     })));
     it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var ID, COMPONENT, _renderWithValidation5, container, p;
+      var hooks, ID, COMPONENT, _renderWithValidation5, container, p;
 
       return regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              (0, _useHooks.addHook)('onGetComponent', function () {
-                return null;
-              });
+              hooks = {
+                onGetComponent: function onGetComponent() {
+                  return null;
+                }
+              };
               ID = 'component';
               COMPONENT = {
                 type: 'html',
@@ -188,7 +189,9 @@ describe('components', function () {
               _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _renderWithValidation5.container;
+              }), {
+                hooks: hooks
+              }), container = _renderWithValidation5.container;
               p = container.childNodes[0];
               expect(p.tagName).toEqual('P');
               expect(p.textContent).toEqual(COMPONENT.content);

package/dist/components/FormRenderer/FormRenderer.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _context = require("../../context");
 
-var _hooks2 = require("../../hooks");
+var _hooks = require("../../hooks");
 
 var _models = require("../../models");
 
@@ -74,7 +74,9 @@ var FormRenderer = function FormRenderer(_ref) {
       hide_title = _ref.hide_title,
       summaryListClassModifiers = _ref.summaryListClassModifiers,
       noChangeAction = _ref.noChangeAction;
-  return /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
+  return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
+    overrides: hooks
+  }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
     title: title,
     type: type,
     components: components,
@@ -82,14 +84,13 @@ var FormRenderer = function FormRenderer(_ref) {
     hub: hub,
     cya: cya,
     data: data,
-    hooks: hooks,
     classBlock: classBlock,
     classModifiers: classModifiers,
     className: className,
     hide_title: hide_title,
     summaryListClassModifiers: summaryListClassModifiers,
     noChangeAction: noChangeAction
-  }));
+  })));
 };
 
 var DEFAULT_CLASS = 'hods-form';
@@ -103,7 +104,6 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       _hub = _ref2.hub,
       cya = _ref2.cya,
       _data = _ref2.data,
-      _hooks = _ref2.hooks,
       classBlock = _ref2.classBlock,
       classModifiers = _ref2.classModifiers,
       className = _ref2.className,
@@ -153,19 +153,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       setHubDetails = _useState16[1]; // Set up hooks.
 
 
-  var _useHooks = (0, _hooks2.useHooks)(),
-      hooks = _useHooks.hooks,
-      addHook = _useHooks.addHook;
+  var _useHooks = (0, _hooks.useHooks)(),
+      hooks = _useHooks.hooks; // Set up the useValidation hook.
 
-  (0, _react.useEffect)(function () {
-    if (_hooks) {
-      Object.keys(_hooks).forEach(function (key) {
-        addHook(key, _hooks[key]);
-      });
-    }
-  }, [_hooks, addHook]); // Set up the useValidation hook.
 
-  var _useValidation = (0, _hooks2.useValidation)(),
+  var _useValidation = (0, _hooks.useValidation)(),
       addErrors = _useValidation.addErrors,
       clearErrors = _useValidation.clearErrors,
       validate = _useValidation.validate; // Setup data.
@@ -423,12 +415,7 @@ FormRenderer.propTypes = InternalFormRenderer.propTypes = {
   hub: _propTypes.default.object,
   cya: _propTypes.default.object,
   data: _propTypes.default.object,
-  hooks: _propTypes.default.shape({
-    onFormLoad: _propTypes.default.func,
-    onPageChange: _propTypes.default.func,
-    onRequest: _propTypes.default.func,
-    onSubmit: _propTypes.default.func
-  }),
+  hooks: _propTypes.default.object,
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   className: _propTypes.default.string,

package/dist/components/FormRenderer/FormRenderer.stories.mdx

@@ -12,12 +12,9 @@ import { useState } from 'react';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
-
-import { addHook } from '../../hooks/useHooks';
 import FormRenderer from './FormRenderer';
 
 <!-- JSON documents -->
-
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import FIRST_FORM from '../../json/firstForm.json';
 import GRADE from '../../json/grade.json';
@@ -82,31 +79,6 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
     {() => {
       const [complete, setComplete] = useState(false);
       const [returnLater, setReturnLater] = useState(false);
-      addHook('onRequest', (req) => {
-        // Do whatever you need to do to the request in here, such as adding an Authorization header.
-        console.log('onRequest hook called');
-        return req;
-      });
-      addHook('onFormLoad', () => {
-        console.log('onFormLoad called');
-      });
-      addHook('onFormComplete', () => {
-        console.log('onFormComplete called');
-        setComplete(true);
-      });
-      addHook('onPageChange', (pageId) => {
-        console.log('onPageChange called', pageId);
-        setReturnLater(!!pageId === false);
-      });
-      addHook('onSubmit', (type, payload, onSuccess, onError) => {
-        console.log(
-          'onSubmit called of type',
-          type,
-          'called, with the payload',
-          payload
-        );
-        onSuccess();
-      });
       const reset = () => {
         setComplete(false);
         setReturnLater(false);
@@ -114,7 +86,37 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
       return (
         <>
           {!complete && !returnLater && (
-            <FormRenderer {...FIRST_FORM} data={{}} />
+            <FormRenderer
+              {...FIRST_FORM}
+              data={{}}
+              hooks={{
+                onRequest: (req) => {
+                  // Do whatever you need to do to the request in here, such as adding an Authorization header.
+                  console.log('onRequest hook called');
+                  return req;
+                },
+                onFormLoad: () => {
+                  console.log('onFormLoad called');
+                },
+                onFormComplete: () => {
+                  console.log('onFormComplete called');
+                  setComplete(true);
+                },
+                onPageChange: (pageId) => {
+                  console.log('onPageChange called', pageId);
+                  setReturnLater(!!pageId === false);
+                },
+                onSubmit: (type, payload, onSuccess, onError) => {
+                  console.log(
+                    'onSubmit called of type',
+                    type,
+                    'called, with the payload',
+                    payload
+                  );
+                  onSuccess();
+                }
+              }}
+            />
           )}
           {complete && (
             <div>

package/dist/context/HooksContext/HooksContext.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HooksContext = exports.ALLOWED_HOOKS = void 0;
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+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 DEFAULT_HOOKS = {
+  onFormComplete: function onFormComplete() {},
+  onFormLoad: function onFormLoad() {},
+  onGetComponent: function onGetComponent(config, wrap) {
+    return null;
+  },
+  onPageChange: function onPageChange(pageId) {
+    return pageId;
+  },
+  onRequest: function onRequest(req) {
+    return req;
+  },
+  onSubmit: function onSubmit(type, payload, onSuccess, onError) {
+    if (typeof onSuccess === 'function') onSuccess();
+  }
+};
+var ALLOWED_HOOKS = Object.keys(DEFAULT_HOOKS);
+exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
+var HooksContext = /*#__PURE__*/(0, _react.createContext)();
+exports.HooksContext = HooksContext;
+
+var HooksContextProvider = function HooksContextProvider(_ref) {
+  var overrides = _ref.overrides,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)({
+    onFormComplete: (overrides === null || overrides === void 0 ? void 0 : overrides.onFormComplete) || DEFAULT_HOOKS.onFormComplete,
+    onFormLoad: (overrides === null || overrides === void 0 ? void 0 : overrides.onFormLoad) || DEFAULT_HOOKS.onFormLoad,
+    onGetComponent: (overrides === null || overrides === void 0 ? void 0 : overrides.onGetComponent) || DEFAULT_HOOKS.onGetComponent,
+    onPageChange: (overrides === null || overrides === void 0 ? void 0 : overrides.onPageChange) || DEFAULT_HOOKS.onPageChange,
+    onRequest: (overrides === null || overrides === void 0 ? void 0 : overrides.onRequest) || DEFAULT_HOOKS.onRequest,
+    onSubmit: (overrides === null || overrides === void 0 ? void 0 : overrides.onSubmit) || DEFAULT_HOOKS.onSubmit
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      hooks = _useState2[0],
+      setHooks = _useState2[1];
+
+  var addHook = function addHook(name, hook) {
+    if (ALLOWED_HOOKS.includes(name)) {
+      setHooks(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, hook || DEFAULT_HOOKS[name]));
+      });
+    }
+  };
+
+  var removeHook = function removeHook(name) {
+    if (ALLOWED_HOOKS.includes(name)) {
+      setHooks(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, DEFAULT_HOOKS[name]));
+      });
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(HooksContext.Provider, {
+    value: {
+      hooks: hooks,
+      addHook: addHook,
+      removeHook: removeHook
+    }
+  }, children);
+};
+
+var _default = HooksContextProvider;
+exports.default = _default;

package/dist/context/HooksContext/HooksContext.test.js

@@ -0,0 +1,60 @@
+"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 _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _hooks = require("../../hooks");
+
+var _HooksContext = _interopRequireWildcard(require("./HooksContext"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var TestComponent = function TestComponent() {
+  var _useHooks = (0, _hooks.useHooks)(),
+      hooks = _useHooks.hooks,
+      addHook = _useHooks.addHook,
+      removeHook = _useHooks.removeHook;
+
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, typeof addHook === 'function' && /*#__PURE__*/_react2.default.createElement("span", null, "addHook is a function"), typeof removeHook === 'function' && /*#__PURE__*/_react2.default.createElement("span", null, "removeHook is a function"), Object.keys(hooks).map(function (key) {
+    return typeof hooks[key] === 'function' && /*#__PURE__*/_react2.default.createElement("span", {
+      key: key
+    }, key, " is a function");
+  }));
+};
+
+describe('context.ValidationContext', function () {
+  it('should appropriately set up the context', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_HooksContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, null))), container = _render.container;
+            expect(container.childNodes.length).toEqual(2 + _HooksContext.ALLOWED_HOOKS.length);
+            expect(container.textContent).toContain('addHook is a function');
+            expect(container.textContent).toContain('removeHook is a function');
+
+            _HooksContext.ALLOWED_HOOKS.forEach(function (hook) {
+              expect(container.textContent).toContain("".concat(hook, " is a function"));
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/dist/context/HooksContext/index.js

@@ -0,0 +1,23 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HooksContext", {
+  enumerable: true,
+  get: function get() {
+    return _HooksContext.HooksContext;
+  }
+});
+exports.default = void 0;
+
+var _HooksContext = _interopRequireWildcard(require("./HooksContext"));
+
+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; }
+
+var _default = _HooksContext.default;
+exports.default = _default;

package/dist/context/ValidationContext/ValidationContext.js

@@ -1,16 +1,22 @@
 "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); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ValidationContext = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = _interopRequireDefault(require("../../utils"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -108,7 +114,7 @@ var ValidationContextProvider = function ValidationContextProvider(_ref) {
       return pagesErrors;
     }
   };
-  return /*#__PURE__*/React.createElement(ValidationContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(ValidationContext.Provider, {
     value: {
       errors: errors,
       addErrors: addErrors,

package/dist/context/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HooksContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _HooksContext.default;
+  }
+});
 Object.defineProperty(exports, "ValidationContextProvider", {
   enumerable: true,
   get: function get() {
@@ -10,6 +16,8 @@ Object.defineProperty(exports, "ValidationContextProvider", {
   }
 });
 
+var _HooksContext = _interopRequireDefault(require("./HooksContext"));
+
 var _ValidationContext = _interopRequireDefault(require("./ValidationContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/useHooks.js

@@ -3,63 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetHooks = exports.removeHook = exports.default = exports.addHook = exports.ALLOWED_HOOKS = void 0;
-var ALLOWED_HOOKS = ['onFormComplete', 'onFormLoad', 'onGetComponent', 'onPageChange', 'onRequest', 'onSubmit'];
-exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
-var DEFAULT_HOOKS = {
-  onFormComplete: function onFormComplete() {},
-  onFormLoad: function onFormLoad() {},
-  onGetComponent: function onGetComponent(config, wrap) {
-    return null;
-  },
-  onPageChange: function onPageChange(pageId) {
-    return pageId;
-  },
-  onRequest: function onRequest(req) {
-    return req;
-  },
-  onSubmit: function onSubmit(type, payload, onSuccess, onError) {
-    if (typeof onSuccess === 'function') onSuccess();
-  }
-};
-var hooks = {
-  onFormComplete: DEFAULT_HOOKS.onFormComplete,
-  onFormLoad: DEFAULT_HOOKS.onFormLoad,
-  onGetComponent: DEFAULT_HOOKS.onGetComponent,
-  onPageChange: DEFAULT_HOOKS.onPageChange,
-  onRequest: DEFAULT_HOOKS.onRequest,
-  onSubmit: DEFAULT_HOOKS.onSubmit
-};
-
-var addHook = function addHook(name, hook) {
-  if (ALLOWED_HOOKS.includes(name)) {
-    hooks[name] = hook || DEFAULT_HOOKS[name]; // Don't allow it to be undefined.
-  }
-};
-
-exports.addHook = addHook;
+exports.default = void 0;
 
-var removeHook = function removeHook(name) {
-  if (ALLOWED_HOOKS.includes(name)) {
-    hooks[name] = DEFAULT_HOOKS[name];
-  }
-};
-
-exports.removeHook = removeHook;
-
-var resetHooks = function resetHooks() {
-  Object.keys(hooks).forEach(removeHook);
-};
+var _react = require("react");
 
-exports.resetHooks = resetHooks;
+var _HooksContext = require("../context/HooksContext");
 
+// Global imports
+// Local imports
 var useHooks = function useHooks() {
-  return {
-    hooks: hooks,
-    addHook: addHook,
-    removeHook: removeHook,
-    resetHooks: resetHooks
-  };
+  return (0, _react.useContext)(_HooksContext.HooksContext);
 };
 
 var _default = useHooks;

package/dist/index.js

@@ -39,14 +39,12 @@ Object.defineProperty(exports, "ValidationContextProvider", {
     return _context.ValidationContextProvider;
   }
 });
-exports.intercepts = exports.default = void 0;
+exports.default = void 0;
 
 var _components = require("./components");
 
 var _context = require("./context");
 
-var _useHooks = require("./hooks/useHooks");
-
 var _models = require("./models");
 
 var _utils = _interopRequireDefault(require("./utils"));
@@ -54,11 +52,5 @@ var _utils = _interopRequireDefault(require("./utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
-var intercepts = {
-  add: _useHooks.addHook,
-  remove: _useHooks.removeHook,
-  reset: _useHooks.resetHooks
-};
-exports.intercepts = intercepts;
 var _default = _components.FormRenderer;
 exports.default = _default;

package/dist/setupTests.js

@@ -3,26 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderWithValidation = exports.renderDomWithValidation = exports.expectObjectLike = void 0;
+exports.renderWithValidation = exports.renderHookWithProvider = exports.renderDomWithValidation = exports.expectObjectLike = void 0;
 
 var _react = require("@testing-library/react");
 
+var _reactHooks = require("@testing-library/react-hooks");
+
 var _reactDom = require("react-dom");
 
 var _context = require("./context");
 
 var renderWithValidation = function renderWithValidation(ui, options) {
-  return (0, _react.render)( /*#__PURE__*/React.createElement(_context.ValidationContextProvider, null, ui), options);
+  return (0, _react.render)( /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+    overrides: options === null || options === void 0 ? void 0 : options.hooks
+  }, /*#__PURE__*/React.createElement(_context.ValidationContextProvider, {
+    key: "vcp"
+  }, ui)), options);
 };
 
 exports.renderWithValidation = renderWithValidation;
 
-var renderDomWithValidation = function renderDomWithValidation(ui, container, callback) {
-  return (0, _reactDom.render)( /*#__PURE__*/React.createElement(_context.ValidationContextProvider, null, ui), container, callback);
+var renderDomWithValidation = function renderDomWithValidation(ui, container, options) {
+  return (0, _reactDom.render)( /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+    overrides: options === null || options === void 0 ? void 0 : options.hooks
+  }, /*#__PURE__*/React.createElement(_context.ValidationContextProvider, {
+    key: "vcp"
+  }, ui)), container);
 };
 
 exports.renderDomWithValidation = renderDomWithValidation;
 
+var renderHookWithProvider = function renderHookWithProvider(hook, options) {
+  var wrapper = function wrapper(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+      overrides: options === null || options === void 0 ? void 0 : options.hooks
+    }, children);
+  };
+
+  return (0, _reactHooks.renderHook)(function () {
+    return hook();
+  }, {
+    wrapper: wrapper
+  });
+};
+
+exports.renderHookWithProvider = renderHookWithProvider;
+
 var expectObjectLike = function expectObjectLike(received, expected) {
   Object.keys(expected).forEach(function (key) {
     expect(received[key]).toEqual(expected[key]);

package/dist/utils/CheckYourAnswers/getCYARowForGroup.test.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _react = require("@testing-library/react");
+var _setupTests = require("../../setupTests");
 
 var _getCYARowForGroup = _interopRequireDefault(require("./getCYARowForGroup"));
 
@@ -8,8 +8,7 @@ var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Global imports
-//local imports 
+// Local imports 
 describe('utils', function () {
   describe('CheckYourAnswers', function () {
     describe('getCYARowsForGroup', function () {
@@ -63,8 +62,8 @@ describe('utils', function () {
           return (0, _getCYARow.default)(PAGE, component, ON_ACTION);
         });
 
-        var _render = (0, _react.render)((0, _getCYARowForGroup.default)(PAGE, PAGE.groups[0], rows, ON_ACTION).row.value),
-            container = _render.container;
+        var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getCYARowForGroup.default)(PAGE, PAGE.groups[0], rows, ON_ACTION).row.value),
+            container = _renderWithValidation.container;
 
         expect(container.childNodes.length).toEqual(4);
         var addressValues = container.childNodes;

package/dist/utils/CheckYourAnswers/getCYARowsForPage.test.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _react = require("@testing-library/react");
-
 var _setupTests = require("../../setupTests");
 
 var _models = require("../../models");
@@ -222,10 +220,10 @@ describe('utils', function () {
 
         var ON_ACTION = function ON_ACTION() {};
 
-        var _render = (0, _react.render)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
+        var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
           return row.value;
         })),
-            container = _render.container;
+            container = _renderWithValidation.container;
 
         expect(container.childNodes.length).toEqual(4);
         var addressValues = container.childNodes;

package/dist/utils/Data/getSourceData.js

@@ -5,6 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = 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 getItemInArray = function getItemInArray(arr, index) {
+  if (Array.isArray(arr)) {
+    return arr[parseInt(index, 10)];
+  }
+
+  return undefined;
+};
+
+var isArrayProp = function isArrayProp(prop) {
+  return prop.includes('[');
+};
+
+var getPropertyAndIndex = function getPropertyAndIndex(prop) {
+  return prop.replace(']', '').split('[');
+};
 /**
  * Gets the value of a field within the top-level JSON form data,
  * based on a dot-separated field identifier.
@@ -20,12 +47,23 @@ exports.default = void 0;
  * @param {string} fieldId The dot-separated path to the field.
  * @returns The value of the field specified.
  */
+
+
 var getSourceData = function getSourceData(data, fieldId) {
   if (!fieldId) {
     return undefined;
   }
 
   return fieldId.split('.').reduce(function (obj, prop) {
+    if (obj && isArrayProp(prop)) {
+      var _getPropertyAndIndex = getPropertyAndIndex(prop),
+          _getPropertyAndIndex2 = _slicedToArray(_getPropertyAndIndex, 2),
+          actualProp = _getPropertyAndIndex2[0],
+          index = _getPropertyAndIndex2[1];
+
+      return getItemInArray(obj[actualProp], index);
+    }
+
     return obj ? obj[prop] : undefined;
   }, data);
 };

package/dist/utils/Data/getSourceData.test.js

@@ -120,6 +120,22 @@ describe('utils', function () {
         var value = (0, _getSourceData.default)(DATA, FIELD_ID);
         expect(value).toBeUndefined();
       });
+      it('should handle a reference to an array item', function () {
+        var FIELD_ID = 'items[1]';
+        var ALPHA = 'alpha';
+        var BETA = 'beta';
+        var DATA = {
+          items: [ALPHA, BETA]
+        };
+        var value = (0, _getSourceData.default)(DATA, FIELD_ID);
+        expect(value).toEqual(BETA);
+      });
+      it('should handle a reference to an array that does not exist', function () {
+        var FIELD_ID = 'items[1]';
+        var DATA = {};
+        var value = (0, _getSourceData.default)(DATA, FIELD_ID);
+        expect(value).toBeUndefined();
+      });
     });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.10.0",
+  "version": "3.0.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -9,7 +9,7 @@
     "lint": "eslint --ext .js,.jsx src",
     "storybook:start": "start-storybook --docs -s src/assets --no-manager-cache -p 6007",
     "storybook:build": "build-storybook --docs -s src/assets",
-    "storybook:deploy": "yarn deploy-storybook",
+    "storybook:deploy": "yarn storybook:build && yarn deploy-storybook",
     "storybook": "yarn storybook:start",
     "deploy-storybook": "storybook-to-ghpages -e storybook-static",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",