@ukhomeoffice/cop-react-form-renderer 4.18.0 → 5.0.0-alpha

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.18.0",
+  "version": "5.0.0-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
-    "test": "react-scripts test",
-    "test:coverage": "yarn test --coverage --watchAll=false",
+    "test": "jest test",
+    "test:coverage": "jest test --coverage --watchAll=false",
     "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",
@@ -13,52 +13,68 @@
     "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",
-    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
+    "post-compile": "yarn remove-tests && yarn remove-stories && yarn remove-assets",
+    "remove-tests": "rimraf dist/*.test.* dist/**/*.test.* dist/**/**/*.test.* dist/setupTests.js",
+    "remove-stories": "rimraf dist/*.stories.* dist/**/*.stories.* dist/**/**/*.stories.*",
+    "remove-assets": "rimraf dist/json dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "2.3.0",
+    "@ukhomeoffice/cop-react-components": "3.0.0-charlie",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/cli": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
     "@monaco-editor/react": "^4.3.1",
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.8",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/theming": "^6.3.8",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^12.1.10",
+    "@storybook/theming": "^6.5.13",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.5.0",
     "axios-mock-adapter": "^1.18.1",
+    "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
+    "eslint": "^7.18.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "html-react-parser": "^0.10.5",
-    "node-sass": "^6.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "4.0.3",
-    "storybook-addon-mock": "^2.0.1"
+    "jest": "^27.3.1",
+    "sass": "^1.32.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^5.0.1",
+    "react-test-renderer": "^17.0.2",
+    "storybook-addon-mock": "^2.0.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
   "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"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
   },
   "main": "dist/index.js",
   "files": [

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

@@ -1,95 +0,0 @@
-"use strict";
-
-var _Readonly = require("@ukhomeoffice/cop-react-components/dist/Readonly");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _setupTests = require("../../setupTests");
-
-var _Answer = _interopRequireDefault(require("./Answer"));
-
-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); }); }; }
-
-describe('components', function () {
-  describe('CheckYourAnswers.Answer', function () {
-    it('should handle a null value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var VALUE, COMPONENT, _renderWithValidation, container;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              VALUE = null;
-              COMPONENT = null;
-              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
-                value: VALUE,
-                component: COMPONENT
-              })), container = _renderWithValidation.container;
-              expect(container.childNodes.length).toEqual(1);
-              expect(container.childNodes[0].textContent).toEqual('No answer');
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    it('should handle a null component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var VALUE, COMPONENT, _renderWithValidation2, container;
-
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              VALUE = 'Alpha';
-              COMPONENT = null;
-              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
-                value: VALUE,
-                component: COMPONENT
-              })), container = _renderWithValidation2.container;
-              expect(container.textContent).toEqual(VALUE);
-
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-    it('should handle a component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var VALUE, COMPONENT, _renderWithValidation3, container, answer;
-
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              VALUE = 'Bravo';
-              COMPONENT = {
-                id: 'alpha',
-                fieldId: 'alpha',
-                type: 'text',
-                label: 'Alpha'
-              };
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
-                value: VALUE,
-                component: COMPONENT
-              })), container = _renderWithValidation3.container;
-              answer = container.childNodes[0];
-              expect(answer.tagName).toEqual('DIV');
-              expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);
-              expect(answer.textContent).toEqual(VALUE);
-
-            case 7:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-  });
-});

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -1,410 +0,0 @@
-<!-- Global imports -->
-
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Details, Heading, Link, Tag } from '@ukhomeoffice/cop-react-components';
-import withMock from 'storybook-addon-mock';
-
-<!-- Local imports -->
-import { HooksContextProvider, ValidationContextProvider } from '../../context';
-import Utils from '../../utils';
-import CheckYourAnswers from './CheckYourAnswers';
-
-<!-- JSON documents -->
-import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
-import GRADE from '../../json/grade.json';
-import TEAMS from '../../json/team.json';
-import USER_PROFILE_DATA from '../../json/userProfile.data.json';
-import USER_PROFILE from '../../json/userProfile.json';
-import FIRST_FORM from '../../json/firstForm.json';
-import GROUP_OF_ROW from '../../json/groupOfRow.json';
-import GROUP_OF_ROW_DATA from '../../json/groupOfRowData.json';
-import GROUP from'../../json/group.json';
-import GROUP_DATA from '../../json/group.data.json';
-
-<Meta
-  title='Components/Check your answers'
-  id='D-CheckYourAnswers'
-  component={CheckYourAnswers}
-  decorators={[withMock]}
-/>
-
-<Heading size='xl' caption='Components'>
-  Check your answers
-</Heading>
-
-Renders the **Check your answers** screen for a form.
-
-<Canvas withToolbar>
-  <Story
-    name='Default'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-<Details summary='Properties' className='no-indent'>
-  <ArgsTable of={CheckYourAnswers} />
-</Details>
-
-## Variant
-
-### Without page titles
-
-<Canvas>
-  <Story
-    name='No page titles'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              hide_page_titles={true}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### With actions
-
-<Canvas>
-  <Story
-    name='With actions'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = { firstName: 'John', surname: 'Smith', age: 41 };
-      const PAGES = Utils.FormPage.getAll(
-        FIRST_FORM.pages,
-        FIRST_FORM.components,
-        { ...DATA }
-      );
-      const ACTIONS = FIRST_FORM.cya.actions;
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              hide_page_titles={true}
-              actions={ACTIONS}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Read-only style
-
-<Canvas>
-  <Story
-    name='Read-only style'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              hide_page_titles={true}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-              hide_title={true}
-              summaryListClassModifiers='no-border'
-              noChangeAction={true}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-
-### Group of rows
-
-<Canvas>
-  <Story
-    name='Group of rows'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        GROUP_OF_ROW.pages,
-        GROUP_OF_ROW.components,
-        GROUP_OF_ROW_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        GROUP_OF_ROW.pages,
-        GROUP_OF_ROW.components,
-        { ...DATA }
-      );
-      const CYA = GROUP_OF_ROW.cya;
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              hide_page_titles={false}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-              groups={CYA.groups}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-
-### Group of address rows
-<Canvas>
-  <Story name='Group of address rows'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}>
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        GROUP.pages,
-        GROUP.components,
-        GROUP_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        GROUP.pages,
-        GROUP.components,
-        { ...DATA }
-      );
-      const ACTIONS = GROUP.cya.actions;
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <CheckYourAnswers
-              pages={PAGES}
-              hide_page_titles={true}
-              actions={ACTIONS}
-              onAction={ON_ACTION}
-              onRowAction={ON_ROW_ACTION}
-            />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-