@ukhomeoffice/cop-react-form-renderer 0.1.0-gamma → 1.0.0-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CheckYourAnswers/Answer.test.js +94 -0
- package/dist/components/CheckYourAnswers/CheckYourAnswers.js +79 -27
- package/dist/components/CheckYourAnswers/CheckYourAnswers.scss +0 -7
- package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx +78 -1
- package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js +332 -0
- package/dist/components/FormPage/FormPage.test.js +3 -1
- package/dist/components/FormRenderer/FormRenderer.js +75 -54
- package/dist/components/FormRenderer/FormRenderer.stories.mdx +35 -7
- package/dist/components/FormRenderer/FormRenderer.test.js +471 -0
- package/dist/components/FormRenderer/handlers/cyaAction.js +28 -0
- package/dist/components/FormRenderer/handlers/getPageId.js +28 -0
- package/dist/components/FormRenderer/handlers/getPageId.test.js +61 -0
- package/dist/components/FormRenderer/handlers/handlers.test.js +97 -0
- package/dist/components/FormRenderer/handlers/index.js +23 -0
- package/dist/components/FormRenderer/handlers/navigate.js +28 -0
- package/dist/components/FormRenderer/handlers/submissionError.js +20 -0
- package/dist/components/FormRenderer/helpers/canCYASubmit.js +42 -0
- package/dist/components/FormRenderer/helpers/canCYASubmit.test.js +155 -0
- package/dist/components/FormRenderer/helpers/getCYA.js +2 -2
- package/dist/components/FormRenderer/helpers/getCYA.test.js +5 -5
- package/dist/components/FormRenderer/helpers/getFormState.test.js +7 -7
- package/dist/components/FormRenderer/helpers/getNextPageId.js +65 -0
- package/dist/components/FormRenderer/helpers/getNextPageId.test.js +90 -0
- package/dist/components/FormRenderer/helpers/getPage.js +1 -1
- package/dist/components/FormRenderer/helpers/getPage.test.js +3 -3
- package/dist/components/FormRenderer/helpers/index.js +17 -13
- package/dist/components/PageActions/ActionButton.js +5 -9
- package/dist/components/PageActions/ActionButton.test.js +3 -1
- package/dist/components/PageActions/PageActions.test.js +4 -2
- package/dist/components/SummaryList/RowAction.js +1 -1
- package/dist/components/SummaryList/RowAction.test.js +8 -18
- package/dist/components/SummaryList/SummaryList.js +4 -4
- package/dist/components/SummaryList/SummaryList.scss +7 -0
- package/dist/components/SummaryList/SummaryList.stories.mdx +36 -0
- package/dist/components/SummaryList/SummaryList.test.js +197 -0
- package/dist/hooks/useHooks.js +12 -15
- package/dist/index.js +3 -1
- package/dist/index.test.js +18 -0
- package/dist/models/EventTypes.js +14 -0
- package/dist/models/FormPages.js +14 -0
- package/dist/models/PageAction.js +40 -0
- package/dist/models/index.js +24 -0
- package/dist/utils/CheckYourAnswers/getCYAAction.js +9 -0
- package/dist/utils/CheckYourAnswers/getCYARow.js +10 -0
- package/dist/utils/CheckYourAnswers/getCYARowsForPage.js +9 -0
- package/dist/utils/CheckYourAnswers/showComponentCYA.js +6 -5
- package/dist/utils/Component/getComponent.test.js +1 -1
- package/dist/utils/Format/formatData.js +32 -0
- package/dist/utils/Format/formatData.test.js +46 -0
- package/dist/utils/Format/formatDataForComponent.js +41 -0
- package/dist/utils/Format/formatDataForComponent.test.js +161 -0
- package/dist/utils/Format/formatDataForForm.js +33 -0
- package/dist/utils/Format/formatDataForForm.test.js +78 -0
- package/dist/utils/Format/formatDataForPage.js +37 -0
- package/dist/utils/Format/formatDataForPage.test.js +96 -0
- package/dist/utils/Format/index.js +26 -0
- package/dist/utils/Hub/getFormHub.js +14 -0
- package/dist/utils/Validate/validatePage.test.js +1 -1
- package/dist/utils/index.js +3 -0
- package/package.json +6 -3
- package/dist/components/FormRenderer/helpers.js +0 -66
- package/dist/components/FormRenderer/helpers.test.js +0 -158
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Formats a string according to a format configuration object.
|
|
10
|
+
* @param {object} format The format configuration object.
|
|
11
|
+
* @param {string} value The string value to be formatted.
|
|
12
|
+
* @returns A formatted version of the value.
|
|
13
|
+
*/
|
|
14
|
+
var formatData = function formatData(format, value) {
|
|
15
|
+
if (format && value) {
|
|
16
|
+
switch (format.type) {
|
|
17
|
+
case 'lowercase':
|
|
18
|
+
return value.toLowerCase();
|
|
19
|
+
|
|
20
|
+
case 'uppercase':
|
|
21
|
+
return value.toUpperCase();
|
|
22
|
+
|
|
23
|
+
default:
|
|
24
|
+
return value;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return value;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
var _default = formatData;
|
|
32
|
+
exports.default = _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _formatData = _interopRequireDefault(require("./formatData"));
|
|
4
|
+
|
|
5
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
6
|
+
|
|
7
|
+
// Local imports
|
|
8
|
+
describe('utils', function () {
|
|
9
|
+
describe('Format', function () {
|
|
10
|
+
describe('formatData', function () {
|
|
11
|
+
it('should handle no format', function () {
|
|
12
|
+
var FORMAT = null;
|
|
13
|
+
var VALUE = 'AlPhA';
|
|
14
|
+
expect((0, _formatData.default)(FORMAT, VALUE)).toEqual(VALUE);
|
|
15
|
+
});
|
|
16
|
+
it('should handle no value', function () {
|
|
17
|
+
var FORMAT = {
|
|
18
|
+
type: 'lowercase'
|
|
19
|
+
};
|
|
20
|
+
var VALUE = null;
|
|
21
|
+
expect((0, _formatData.default)(FORMAT, VALUE)).toBeNull();
|
|
22
|
+
});
|
|
23
|
+
it('should format a string as lowercase', function () {
|
|
24
|
+
var FORMAT = {
|
|
25
|
+
type: 'lowercase'
|
|
26
|
+
};
|
|
27
|
+
var VALUE = 'AlPhA';
|
|
28
|
+
expect((0, _formatData.default)(FORMAT, VALUE)).toEqual('alpha');
|
|
29
|
+
});
|
|
30
|
+
it('should format a string as uppercase', function () {
|
|
31
|
+
var FORMAT = {
|
|
32
|
+
type: 'uppercase'
|
|
33
|
+
};
|
|
34
|
+
var VALUE = 'AlPhA';
|
|
35
|
+
expect((0, _formatData.default)(FORMAT, VALUE)).toEqual('ALPHA');
|
|
36
|
+
});
|
|
37
|
+
it('should leave an unknown format type alone', function () {
|
|
38
|
+
var FORMAT = {
|
|
39
|
+
type: 'not-a-real-type'
|
|
40
|
+
};
|
|
41
|
+
var VALUE = 'AlPhA';
|
|
42
|
+
expect((0, _formatData.default)(FORMAT, VALUE)).toEqual(VALUE);
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
});
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.formatDataForComponents = exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _formatData = _interopRequireDefault(require("./formatData"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
// Local imports
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Formats the data for a given component, according to the component's format configuration.
|
|
16
|
+
* @param {object} component The component to format.
|
|
17
|
+
* @param {object} data The top-level form data.
|
|
18
|
+
* @param {string} eventType What type of event initiated this call.
|
|
19
|
+
*/
|
|
20
|
+
var formatDataForComponent = function formatDataForComponent(component, data, eventType) {
|
|
21
|
+
if (component.format && component.format.on === eventType) {
|
|
22
|
+
data[component.fieldId] = (0, _formatData.default)(component.format, data[component.fieldId]);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Formats the data for an array of components, according to each component's format configuration.
|
|
27
|
+
* @param {Array} components The array of components to format.
|
|
28
|
+
* @param {object} data The top-level form data.
|
|
29
|
+
* @param {string} eventType What type of event initiated this call.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
var formatDataForComponents = function formatDataForComponents(components, data, eventType) {
|
|
34
|
+
components.forEach(function (component) {
|
|
35
|
+
return formatDataForComponent(component, data, eventType);
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
exports.formatDataForComponents = formatDataForComponents;
|
|
40
|
+
var _default = formatDataForComponent;
|
|
41
|
+
exports.default = _default;
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
|
|
5
|
+
var _models = require("../../models");
|
|
6
|
+
|
|
7
|
+
var _formatDataForComponent = _interopRequireWildcard(require("./formatDataForComponent"));
|
|
8
|
+
|
|
9
|
+
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); }
|
|
10
|
+
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
+
|
|
15
|
+
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."); }
|
|
16
|
+
|
|
17
|
+
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); }
|
|
18
|
+
|
|
19
|
+
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; }
|
|
20
|
+
|
|
21
|
+
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; }
|
|
22
|
+
|
|
23
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
24
|
+
|
|
25
|
+
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; }
|
|
26
|
+
|
|
27
|
+
describe('utils', function () {
|
|
28
|
+
describe('Format', function () {
|
|
29
|
+
var setupField = function setupField(fieldId, format) {
|
|
30
|
+
return {
|
|
31
|
+
fieldId: fieldId,
|
|
32
|
+
format: format
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var setupData = function setupData(fieldId, value) {
|
|
37
|
+
return _defineProperty({}, fieldId, value);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var setupFieldAndData = function setupFieldAndData(fieldId, format, value) {
|
|
41
|
+
return [setupField(fieldId, format), setupData(fieldId, value)];
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
describe('formatDataForComponent', function () {
|
|
45
|
+
it('should handle no format', function () {
|
|
46
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
47
|
+
var FIELD_ID = 'field';
|
|
48
|
+
var FORMAT = null;
|
|
49
|
+
var VALUE = 'AlPhA';
|
|
50
|
+
|
|
51
|
+
var _setupFieldAndData = setupFieldAndData(FIELD_ID, FORMAT, VALUE),
|
|
52
|
+
_setupFieldAndData2 = _slicedToArray(_setupFieldAndData, 2),
|
|
53
|
+
COMPONENT = _setupFieldAndData2[0],
|
|
54
|
+
DATA = _setupFieldAndData2[1];
|
|
55
|
+
|
|
56
|
+
(0, _formatDataForComponent.default)(COMPONENT, DATA, EVENT_TYPE);
|
|
57
|
+
expect(DATA[FIELD_ID]).toEqual(VALUE);
|
|
58
|
+
});
|
|
59
|
+
it('should handle no value', function () {
|
|
60
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
61
|
+
var FIELD_ID = 'field';
|
|
62
|
+
var FORMAT = {
|
|
63
|
+
type: 'lowercase',
|
|
64
|
+
on: EVENT_TYPE
|
|
65
|
+
};
|
|
66
|
+
var VALUE = null;
|
|
67
|
+
|
|
68
|
+
var _setupFieldAndData3 = setupFieldAndData(FIELD_ID, FORMAT, VALUE),
|
|
69
|
+
_setupFieldAndData4 = _slicedToArray(_setupFieldAndData3, 2),
|
|
70
|
+
COMPONENT = _setupFieldAndData4[0],
|
|
71
|
+
DATA = _setupFieldAndData4[1];
|
|
72
|
+
|
|
73
|
+
(0, _formatDataForComponent.default)(COMPONENT, DATA, EVENT_TYPE);
|
|
74
|
+
expect(DATA[FIELD_ID]).toBeNull();
|
|
75
|
+
});
|
|
76
|
+
it('should remain unchanged if the wrong event type', function () {
|
|
77
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
78
|
+
var FIELD_ID = 'field';
|
|
79
|
+
var FORMAT = {
|
|
80
|
+
type: 'lowercase',
|
|
81
|
+
on: _models.EventTypes.BLUR
|
|
82
|
+
};
|
|
83
|
+
var VALUE = 'AlPhA';
|
|
84
|
+
|
|
85
|
+
var _setupFieldAndData5 = setupFieldAndData(FIELD_ID, FORMAT, VALUE),
|
|
86
|
+
_setupFieldAndData6 = _slicedToArray(_setupFieldAndData5, 2),
|
|
87
|
+
COMPONENT = _setupFieldAndData6[0],
|
|
88
|
+
DATA = _setupFieldAndData6[1];
|
|
89
|
+
|
|
90
|
+
(0, _formatDataForComponent.default)(COMPONENT, DATA, EVENT_TYPE);
|
|
91
|
+
expect(DATA[FIELD_ID]).toEqual(VALUE);
|
|
92
|
+
});
|
|
93
|
+
it('should format a string as lowercase', function () {
|
|
94
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
95
|
+
var FIELD_ID = 'field';
|
|
96
|
+
var FORMAT = {
|
|
97
|
+
type: 'lowercase',
|
|
98
|
+
on: EVENT_TYPE
|
|
99
|
+
};
|
|
100
|
+
var VALUE = 'AlPhA';
|
|
101
|
+
|
|
102
|
+
var _setupFieldAndData7 = setupFieldAndData(FIELD_ID, FORMAT, VALUE),
|
|
103
|
+
_setupFieldAndData8 = _slicedToArray(_setupFieldAndData7, 2),
|
|
104
|
+
COMPONENT = _setupFieldAndData8[0],
|
|
105
|
+
DATA = _setupFieldAndData8[1];
|
|
106
|
+
|
|
107
|
+
(0, _formatDataForComponent.default)(COMPONENT, DATA, EVENT_TYPE);
|
|
108
|
+
expect(DATA[FIELD_ID]).toEqual('alpha');
|
|
109
|
+
});
|
|
110
|
+
it('should format a string as uppercase', function () {
|
|
111
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
112
|
+
var FIELD_ID = 'field';
|
|
113
|
+
var FORMAT = {
|
|
114
|
+
type: 'uppercase',
|
|
115
|
+
on: EVENT_TYPE
|
|
116
|
+
};
|
|
117
|
+
var VALUE = 'AlPhA';
|
|
118
|
+
|
|
119
|
+
var _setupFieldAndData9 = setupFieldAndData(FIELD_ID, FORMAT, VALUE),
|
|
120
|
+
_setupFieldAndData10 = _slicedToArray(_setupFieldAndData9, 2),
|
|
121
|
+
COMPONENT = _setupFieldAndData10[0],
|
|
122
|
+
DATA = _setupFieldAndData10[1];
|
|
123
|
+
|
|
124
|
+
(0, _formatDataForComponent.default)(COMPONENT, DATA, EVENT_TYPE);
|
|
125
|
+
expect(DATA[FIELD_ID]).toEqual('ALPHA');
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
describe('formatDataForComponents', function () {
|
|
129
|
+
it('should appropriately format multiple components', function () {
|
|
130
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
131
|
+
var COMPONENTS = [setupField('alpha', {
|
|
132
|
+
type: 'lowercase',
|
|
133
|
+
on: _models.EventTypes.SUBMIT
|
|
134
|
+
}), // Should be formatted
|
|
135
|
+
setupField('bravo', null), // Nothing to format
|
|
136
|
+
setupField('charlie', {
|
|
137
|
+
type: 'uppercase',
|
|
138
|
+
on: _models.EventTypes.SUBMIT
|
|
139
|
+
}), // Should be formatted
|
|
140
|
+
setupField('delta', {
|
|
141
|
+
type: 'uppercase',
|
|
142
|
+
on: _models.EventTypes.BLUR
|
|
143
|
+
}) // Should not be formatted because of event type
|
|
144
|
+
];
|
|
145
|
+
var DATA = {
|
|
146
|
+
alpha: 'AlPhA',
|
|
147
|
+
bravo: 'bRaVo',
|
|
148
|
+
charlie: 'CHArlie',
|
|
149
|
+
delta: 'deLTA'
|
|
150
|
+
};
|
|
151
|
+
(0, _formatDataForComponent.formatDataForComponents)(COMPONENTS, DATA, EVENT_TYPE);
|
|
152
|
+
expect(DATA).toEqual({
|
|
153
|
+
alpha: 'alpha',
|
|
154
|
+
bravo: 'bRaVo',
|
|
155
|
+
charlie: 'CHARLIE',
|
|
156
|
+
delta: 'deLTA'
|
|
157
|
+
});
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _formatDataForComponent = require("./formatDataForComponent");
|
|
9
|
+
|
|
10
|
+
var _formatDataForPage = require("./formatDataForPage");
|
|
11
|
+
|
|
12
|
+
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; }
|
|
13
|
+
|
|
14
|
+
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; }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Formats the data for all components on a form, according to each component's format configuration.
|
|
20
|
+
* @param {object} form The form to format the components for.
|
|
21
|
+
* @param {object} data The top-level form data.
|
|
22
|
+
* @param {string} eventType What type of event initiated this call.
|
|
23
|
+
*/
|
|
24
|
+
var formatDataForForm = function formatDataForForm(form, baseData, eventType) {
|
|
25
|
+
var data = _objectSpread({}, baseData);
|
|
26
|
+
|
|
27
|
+
(0, _formatDataForComponent.formatDataForComponents)(form.components, data, eventType);
|
|
28
|
+
(0, _formatDataForPage.formatDataForPages)(form.pages, data, eventType);
|
|
29
|
+
return data;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
var _default = formatDataForForm;
|
|
33
|
+
exports.default = _default;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _models = require("../../models");
|
|
4
|
+
|
|
5
|
+
var _formatDataForForm = _interopRequireDefault(require("./formatDataForForm"));
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
+
|
|
9
|
+
// Local imports
|
|
10
|
+
describe('utils', function () {
|
|
11
|
+
describe('Format', function () {
|
|
12
|
+
var setupField = function setupField(fieldId, format) {
|
|
13
|
+
return {
|
|
14
|
+
fieldId: fieldId,
|
|
15
|
+
format: format
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
describe('formatDataForForm', function () {
|
|
20
|
+
it('should appropriately format entire form', function () {
|
|
21
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
22
|
+
var COMPONENTS = [setupField('alpha', {
|
|
23
|
+
type: 'lowercase',
|
|
24
|
+
on: _models.EventTypes.SUBMIT
|
|
25
|
+
}), // Should be formatted
|
|
26
|
+
setupField('bravo', null), // Nothing to format
|
|
27
|
+
setupField('charlie', {
|
|
28
|
+
type: 'uppercase',
|
|
29
|
+
on: _models.EventTypes.SUBMIT
|
|
30
|
+
}), // Should be formatted
|
|
31
|
+
setupField('delta', {
|
|
32
|
+
type: 'uppercase',
|
|
33
|
+
on: _models.EventTypes.BLUR
|
|
34
|
+
}), // Should not be formatted because of event type
|
|
35
|
+
setupField('echo', {
|
|
36
|
+
type: 'uppercase',
|
|
37
|
+
on: _models.EventTypes.SUBMIT
|
|
38
|
+
}), // Should not be formatted because of event type
|
|
39
|
+
setupField('foxtrot', {
|
|
40
|
+
type: 'lowercase',
|
|
41
|
+
on: _models.EventTypes.SUBMIT
|
|
42
|
+
}) // Should not be formatted because of event type
|
|
43
|
+
];
|
|
44
|
+
var DATA = {
|
|
45
|
+
alpha: 'AlPhA',
|
|
46
|
+
bravo: 'bRaVo',
|
|
47
|
+
charlie: 'CHArlie',
|
|
48
|
+
delta: 'deLTA',
|
|
49
|
+
foxtrot: 'FOXTROT'
|
|
50
|
+
};
|
|
51
|
+
var FORM = {
|
|
52
|
+
components: COMPONENTS.slice(0, 1),
|
|
53
|
+
pages: [{
|
|
54
|
+
components: COMPONENTS.slice(2, 3)
|
|
55
|
+
}, {
|
|
56
|
+
components: COMPONENTS.slice(4)
|
|
57
|
+
}]
|
|
58
|
+
};
|
|
59
|
+
var FORMATTED_DATA = (0, _formatDataForForm.default)(FORM, DATA, EVENT_TYPE);
|
|
60
|
+
expect(FORMATTED_DATA).toEqual({
|
|
61
|
+
alpha: 'alpha',
|
|
62
|
+
bravo: 'bRaVo',
|
|
63
|
+
charlie: 'CHARLIE',
|
|
64
|
+
delta: 'deLTA',
|
|
65
|
+
foxtrot: 'foxtrot'
|
|
66
|
+
}); // The original DATA, meanwhile, should remain untouched.
|
|
67
|
+
|
|
68
|
+
expect(DATA).toEqual({
|
|
69
|
+
alpha: 'AlPhA',
|
|
70
|
+
bravo: 'bRaVo',
|
|
71
|
+
charlie: 'CHArlie',
|
|
72
|
+
delta: 'deLTA',
|
|
73
|
+
foxtrot: 'FOXTROT'
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
});
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.formatDataForPages = exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _formatDataForComponent = require("./formatDataForComponent");
|
|
9
|
+
|
|
10
|
+
// Local imports
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Formats the data for all components on a page, according to each component's format configuration.
|
|
14
|
+
* @param {object} page The page to format the components for.
|
|
15
|
+
* @param {object} data The top-level form data.
|
|
16
|
+
* @param {string} eventType What type of event initiated this call.
|
|
17
|
+
*/
|
|
18
|
+
var formatDataForPage = function formatDataForPage(page, data, eventType) {
|
|
19
|
+
(0, _formatDataForComponent.formatDataForComponents)(page.components, data, eventType);
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Formats the data for all components on a page, according to each component's format configuration.
|
|
23
|
+
* @param {Array} pages The pages to format the components for.
|
|
24
|
+
* @param {object} data The top-level form data.
|
|
25
|
+
* @param {string} eventType What type of event initiated this call.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
var formatDataForPages = function formatDataForPages(pages, data, eventType) {
|
|
30
|
+
pages.forEach(function (page) {
|
|
31
|
+
return formatDataForPage(page, data, eventType);
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
exports.formatDataForPages = formatDataForPages;
|
|
36
|
+
var _default = formatDataForPage;
|
|
37
|
+
exports.default = _default;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
|
|
5
|
+
var _models = require("../../models");
|
|
6
|
+
|
|
7
|
+
var _formatDataForPage = _interopRequireWildcard(require("./formatDataForPage"));
|
|
8
|
+
|
|
9
|
+
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); }
|
|
10
|
+
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
// Local imports
|
|
14
|
+
describe('utils', function () {
|
|
15
|
+
describe('Format', function () {
|
|
16
|
+
var setupField = function setupField(fieldId, format) {
|
|
17
|
+
return {
|
|
18
|
+
fieldId: fieldId,
|
|
19
|
+
format: format
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
describe('formatDataForPage', function () {
|
|
24
|
+
it('should appropriately format a page of components', function () {
|
|
25
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
26
|
+
var COMPONENTS = [setupField('alpha', {
|
|
27
|
+
type: 'lowercase',
|
|
28
|
+
on: _models.EventTypes.SUBMIT
|
|
29
|
+
}), // Should be formatted
|
|
30
|
+
setupField('bravo', null), // Nothing to format
|
|
31
|
+
setupField('charlie', {
|
|
32
|
+
type: 'uppercase',
|
|
33
|
+
on: _models.EventTypes.SUBMIT
|
|
34
|
+
}), // Should be formatted
|
|
35
|
+
setupField('delta', {
|
|
36
|
+
type: 'uppercase',
|
|
37
|
+
on: _models.EventTypes.BLUR
|
|
38
|
+
}) // Should not be formatted because of event type
|
|
39
|
+
];
|
|
40
|
+
var DATA = {
|
|
41
|
+
alpha: 'AlPhA',
|
|
42
|
+
bravo: 'bRaVo',
|
|
43
|
+
charlie: 'CHArlie',
|
|
44
|
+
delta: 'deLTA'
|
|
45
|
+
};
|
|
46
|
+
var PAGE = {
|
|
47
|
+
components: COMPONENTS
|
|
48
|
+
};
|
|
49
|
+
(0, _formatDataForPage.default)(PAGE, DATA, EVENT_TYPE);
|
|
50
|
+
expect(DATA).toEqual({
|
|
51
|
+
alpha: 'alpha',
|
|
52
|
+
bravo: 'bRaVo',
|
|
53
|
+
charlie: 'CHARLIE',
|
|
54
|
+
delta: 'deLTA'
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
describe('formatDataForPages', function () {
|
|
59
|
+
it('should appropriately format multiple pages', function () {
|
|
60
|
+
var EVENT_TYPE = _models.EventTypes.SUBMIT;
|
|
61
|
+
var COMPONENTS = [setupField('alpha', {
|
|
62
|
+
type: 'lowercase',
|
|
63
|
+
on: _models.EventTypes.SUBMIT
|
|
64
|
+
}), // Should be formatted
|
|
65
|
+
setupField('bravo', null), // Nothing to format
|
|
66
|
+
setupField('charlie', {
|
|
67
|
+
type: 'uppercase',
|
|
68
|
+
on: _models.EventTypes.SUBMIT
|
|
69
|
+
}), // Should be formatted
|
|
70
|
+
setupField('delta', {
|
|
71
|
+
type: 'uppercase',
|
|
72
|
+
on: _models.EventTypes.BLUR
|
|
73
|
+
}) // Should not be formatted because of event type
|
|
74
|
+
];
|
|
75
|
+
var DATA = {
|
|
76
|
+
alpha: 'AlPhA',
|
|
77
|
+
bravo: 'bRaVo',
|
|
78
|
+
charlie: 'CHArlie',
|
|
79
|
+
delta: 'deLTA'
|
|
80
|
+
};
|
|
81
|
+
var PAGES = [{
|
|
82
|
+
components: COMPONENTS.slice(0, 1)
|
|
83
|
+
}, {
|
|
84
|
+
components: COMPONENTS.slice(2)
|
|
85
|
+
}];
|
|
86
|
+
(0, _formatDataForPage.formatDataForPages)(PAGES, DATA, EVENT_TYPE);
|
|
87
|
+
expect(DATA).toEqual({
|
|
88
|
+
alpha: 'alpha',
|
|
89
|
+
bravo: 'bRaVo',
|
|
90
|
+
charlie: 'CHARLIE',
|
|
91
|
+
delta: 'deLTA'
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
});
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _formatData = _interopRequireDefault(require("./formatData"));
|
|
9
|
+
|
|
10
|
+
var _formatDataForComponent = _interopRequireDefault(require("./formatDataForComponent"));
|
|
11
|
+
|
|
12
|
+
var _formatDataForForm = _interopRequireDefault(require("./formatDataForForm"));
|
|
13
|
+
|
|
14
|
+
var _formatDataForPage = _interopRequireDefault(require("./formatDataForPage"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
// Local imports
|
|
19
|
+
var Format = {
|
|
20
|
+
component: _formatDataForComponent.default,
|
|
21
|
+
data: _formatData.default,
|
|
22
|
+
form: _formatDataForForm.default,
|
|
23
|
+
page: _formatDataForPage.default
|
|
24
|
+
};
|
|
25
|
+
var _default = Format;
|
|
26
|
+
exports.default = _default;
|
|
@@ -12,6 +12,20 @@ var _FormPage = _interopRequireDefault(require("../FormPage"));
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
14
|
// Local imports
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Gets a configuration object (or a string) for the hub.
|
|
18
|
+
*
|
|
19
|
+
* @param {string} type The type of the form.
|
|
20
|
+
* @param {object} hub The configuration direct from the JSON.
|
|
21
|
+
* @param {Array} components The top-level form components.
|
|
22
|
+
* @param {object} formData The top-level form data.
|
|
23
|
+
*
|
|
24
|
+
* @returns:
|
|
25
|
+
* undefined if the form type is not "hub-and-spoke", or;
|
|
26
|
+
* The string "CYA" if the CYA screen should be used, or;
|
|
27
|
+
* A page configuration object if the CYA screen should not be used and components are defined.
|
|
28
|
+
*/
|
|
15
29
|
var getFormHub = function getFormHub(type, hub, components, formData) {
|
|
16
30
|
if (type === _models.FormTypes.HUB && hub) {
|
|
17
31
|
if (hub.format === _models.HubFormats.CYA) {
|
|
@@ -27,7 +27,7 @@ describe('utils', function () {
|
|
|
27
27
|
expect((0, _validatePage.default)([], {}).length).toEqual(0);
|
|
28
28
|
});
|
|
29
29
|
describe('when there is no form data', function () {
|
|
30
|
-
it('should return
|
|
30
|
+
it('should return no errors when no components are required', function () {
|
|
31
31
|
var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', false), setup('b', _models.ComponentTypes.TEXT, 'Bravo', false)];
|
|
32
32
|
expect((0, _validatePage.default)(COMPONENTS, null).length).toEqual(0);
|
|
33
33
|
});
|
package/dist/utils/index.js
CHANGED
|
@@ -13,6 +13,8 @@ var _Component = _interopRequireDefault(require("./Component"));
|
|
|
13
13
|
|
|
14
14
|
var _Data = _interopRequireDefault(require("./Data"));
|
|
15
15
|
|
|
16
|
+
var _Format = _interopRequireDefault(require("./Format"));
|
|
17
|
+
|
|
16
18
|
var _FormPage = _interopRequireDefault(require("./FormPage"));
|
|
17
19
|
|
|
18
20
|
var _Hub = _interopRequireDefault(require("./Hub"));
|
|
@@ -33,6 +35,7 @@ var Utils = _objectSpread({
|
|
|
33
35
|
CheckYourAnswers: _CheckYourAnswers.default,
|
|
34
36
|
Component: _Component.default,
|
|
35
37
|
Data: _Data.default,
|
|
38
|
+
Format: _Format.default,
|
|
36
39
|
FormPage: _FormPage.default,
|
|
37
40
|
Hub: _Hub.default,
|
|
38
41
|
meetsCondition: _meetsCondition.default,
|
package/package.json
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukhomeoffice/cop-react-form-renderer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0-alpha",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"clean": "rimraf dist",
|
|
7
7
|
"test": "react-scripts test",
|
|
8
8
|
"lint": "eslint --ext .js,.jsx src",
|
|
9
9
|
"storybook:start": "start-storybook --docs --no-manager-cache -p 6007",
|
|
10
|
-
"storybook:build": "build-storybook --docs",
|
|
10
|
+
"storybook:build": "build-storybook --docs -s src/assets",
|
|
11
|
+
"storybook:deploy": "yarn deploy-storybook",
|
|
11
12
|
"storybook": "yarn storybook:start",
|
|
13
|
+
"deploy-storybook": "storybook-to-ghpages -e storybook-static",
|
|
12
14
|
"compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
|
|
13
15
|
"post-compile": "rimraf dist/**/*.test.* dist/**/*.stories.* dist/json dist/assets"
|
|
14
16
|
},
|
|
15
17
|
"dependencies": {
|
|
16
|
-
"@ukhomeoffice/cop-react-components": "^0.
|
|
18
|
+
"@ukhomeoffice/cop-react-components": "^0.6.0",
|
|
17
19
|
"axios": "^0.21.1",
|
|
18
20
|
"govuk-frontend": "^3.13.0",
|
|
19
21
|
"web-vitals": "^1.0.1"
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
"@babel/cli": "^7.15.4",
|
|
23
25
|
"@babel/preset-env": "^7.15.6",
|
|
24
26
|
"@babel/preset-react": "^7.14.5",
|
|
27
|
+
"@monaco-editor/react": "^4.3.1",
|
|
25
28
|
"@storybook/addon-a11y": "^6.3.8",
|
|
26
29
|
"@storybook/addon-actions": "^6.3.8",
|
|
27
30
|
"@storybook/addon-docs": "^6.3.8",
|