@wise/dynamic-flow-client 0.1.4 → 0.2.1
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/README.md +2 -0
- package/build/flow/DynamicFlow.js +15 -5
- package/build/flow/fixtures/components/alert.d.ts +2 -2
- package/build/flow/fixtures/components/box.d.ts +2 -2
- package/build/flow/fixtures/components/button.d.ts +2 -2
- package/build/flow/fixtures/components/columns.d.ts +2 -2
- package/build/flow/fixtures/components/copyable.d.ts +2 -2
- package/build/flow/fixtures/components/decision.d.ts +2 -2
- package/build/flow/fixtures/components/heading.d.ts +2 -2
- package/build/flow/fixtures/components/image.d.ts +3 -2
- package/build/flow/fixtures/components/image.js +22 -3
- package/build/flow/fixtures/components/info.d.ts +2 -2
- package/build/flow/fixtures/components/list.d.ts +2 -2
- package/build/flow/fixtures/components/loading-indicator.d.ts +2 -2
- package/build/flow/fixtures/components/paragraph.d.ts +2 -2
- package/build/flow/fixtures/components/review.d.ts +2 -2
- package/build/flow/fixtures/examples/camera-capture.d.ts +2 -2
- package/build/flow/fixtures/examples/recipient-update.d.ts +2 -2
- package/build/flow/fixtures/examples/recipient-update.js +2 -2
- package/build/flow/fixtures/examples/recipient.d.ts +2 -2
- package/build/flow/fixtures/examples/single-file-upload.d.ts +2 -2
- package/build/flow/fixtures/examples/single-file-upload.js +32 -30
- package/build/flow/fixtures/examples/step-validation-errors.d.ts +2 -2
- package/build/flow/fixtures/features/action-response.d.ts +2 -2
- package/build/flow/fixtures/features/external.d.ts +2 -2
- package/build/flow/fixtures/features/persist-async.d.ts +2 -2
- package/build/flow/fixtures/features/polling.d.ts +2 -2
- package/build/flow/fixtures/features/validation-async.d.ts +3 -0
- package/build/flow/fixtures/features/validation-async.js +38 -0
- package/build/flow/fixtures/index.d.ts +34 -28
- package/build/flow/fixtures/index.js +8 -1
- package/build/flow/fixtures/responses/action-response-final.d.ts +2 -2
- package/build/flow/fixtures/responses/recipient-update-final.d.ts +2 -2
- package/build/flow/fixtures/schemas/basic-form.d.ts +2 -2
- package/build/flow/fixtures/schemas/number-and-integer.d.ts +2 -2
- package/build/flow/fixtures/schemas/one-of.d.ts +2 -2
- package/build/flow/fixtures/schemas/string-formats.d.ts +2 -2
- package/build/flow/fixtures/schemas/string-formats.js +6 -2
- package/build/flow/stories/DynamicFlow.story.d.ts +1 -0
- package/build/flow/stories/DynamicFlow.story.js +30 -0
- package/build/flow/stories/EditableDynamicFlow.js +2 -1
- package/build/flow/stories/fixtureFetcher.d.ts +2 -0
- package/build/flow/stories/fixtureFetcher.js +114 -0
- package/build/jsonSchemaForm/schemaFormControl/SchemaFormControl.d.ts +1 -1
- package/build/jsonSchemaForm/schemaFormControl/optionMapper.d.ts +6 -11
- package/build/jsonSchemaForm/schemaFormControl/optionMapper.js +12 -6
- package/build/layout/image/index.d.ts +3 -2
- package/build/layout/image/index.js +17 -38
- package/build/main.css +45 -0
- package/package.json +34 -29
- package/build/common/hooks/useDebouncedFunction.test.d.ts +0 -1
- package/build/common/hooks/useDebouncedFunction.test.js +0 -59
- package/build/common/logging/spec.d.ts +0 -1
- package/build/common/logging/spec.js +0 -45
- package/build/common/tracking/spec.d.ts +0 -1
- package/build/common/tracking/spec.js +0 -49
- package/build/common/utils/generate-random-id.test.d.ts +0 -1
- package/build/common/utils/generate-random-id.test.js +0 -12
- package/build/common/validation/rule-validators/spec.d.ts +0 -1
- package/build/common/validation/rule-validators/spec.js +0 -145
- package/build/common/validation/schema-validators/spec.d.ts +0 -1
- package/build/common/validation/schema-validators/spec.js +0 -137
- package/build/common/validation/valid-model/spec.d.ts +0 -1
- package/build/common/validation/valid-model/spec.js +0 -605
- package/build/common/validation/validation-failures/spec.d.ts +0 -1
- package/build/common/validation/validation-failures/spec.js +0 -185
- package/build/flow/response-parsers/spec.d.ts +0 -1
- package/build/flow/response-parsers/spec.js +0 -263
- package/build/layout/loading-indicator/spec.d.ts +0 -1
- package/build/layout/loading-indicator/spec.js +0 -11
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import { action } from '@storybook/addon-actions';
|
|
49
|
+
import { isObject } from '@transferwise/neptune-validation';
|
|
50
|
+
import { fixtures } from '../fixtures';
|
|
51
|
+
import { getObjectKeys } from './DynamicFlow.story';
|
|
52
|
+
export var fixtureFetcher = function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
|
|
53
|
+
var url;
|
|
54
|
+
return __generator(this, function (_a) {
|
|
55
|
+
action('fixtureFetcher')(input, init);
|
|
56
|
+
url = getURL(input);
|
|
57
|
+
if (url.pathname.startsWith('/steps/')) {
|
|
58
|
+
return [2 /*return*/, respondWithFixture(fixtures.steps, url, init)];
|
|
59
|
+
}
|
|
60
|
+
if (url.pathname.startsWith('/responses/')) {
|
|
61
|
+
return [2 /*return*/, respondWithFixture(fixtures.responses, url, init)];
|
|
62
|
+
}
|
|
63
|
+
if (url.pathname.startsWith('/validate')) {
|
|
64
|
+
return [2 /*return*/, new Response(JSON.stringify({ message: 'Validation-async OK' }))];
|
|
65
|
+
}
|
|
66
|
+
return [2 /*return*/, new Response(null, { status: 404 })];
|
|
67
|
+
});
|
|
68
|
+
}); };
|
|
69
|
+
var getURL = function (input) {
|
|
70
|
+
if (input instanceof URL) {
|
|
71
|
+
return input;
|
|
72
|
+
}
|
|
73
|
+
if (input instanceof Request) {
|
|
74
|
+
return new URL(input.url, 'http://foo');
|
|
75
|
+
}
|
|
76
|
+
return new URL(input, 'http://foo');
|
|
77
|
+
};
|
|
78
|
+
var respondWithFixture = function (fixtures, url, init) { return __awaiter(void 0, void 0, void 0, function () {
|
|
79
|
+
var fixtureNames, name, fixture, body;
|
|
80
|
+
var _a;
|
|
81
|
+
return __generator(this, function (_b) {
|
|
82
|
+
switch (_b.label) {
|
|
83
|
+
case 0:
|
|
84
|
+
fixtureNames = getObjectKeys(fixtures);
|
|
85
|
+
name = url.pathname
|
|
86
|
+
.split('/')
|
|
87
|
+
.filter(function (part) { return !!part; })
|
|
88
|
+
.pop();
|
|
89
|
+
if (!fixtureNames.includes(name !== null && name !== void 0 ? name : '')) return [3 /*break*/, 3];
|
|
90
|
+
fixture = fixtures[name];
|
|
91
|
+
if (!url.searchParams.has('delay')) return [3 /*break*/, 2];
|
|
92
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, Number(url.searchParams.get('delay'))); })];
|
|
93
|
+
case 1:
|
|
94
|
+
_b.sent();
|
|
95
|
+
_b.label = 2;
|
|
96
|
+
case 2:
|
|
97
|
+
// by convention if the url contains a "refresh"query parameterm we use the payload as model
|
|
98
|
+
if (url.searchParams.has('refresh') &&
|
|
99
|
+
(init === null || init === void 0 ? void 0 : init.body) &&
|
|
100
|
+
typeof init.body === 'string' &&
|
|
101
|
+
isObject(fixture)) {
|
|
102
|
+
body = JSON.parse(init.body);
|
|
103
|
+
return [2 /*return*/, new Response(JSON.stringify(__assign(__assign({}, fixture), { model: __assign(__assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })))];
|
|
104
|
+
}
|
|
105
|
+
if (url.pathname.includes('exit')) {
|
|
106
|
+
return [2 /*return*/, new Response(JSON.stringify(fixture), { headers: { 'X-DF-Exit': 'true' } })];
|
|
107
|
+
}
|
|
108
|
+
return [2 /*return*/, new Response(JSON.stringify(fixture))];
|
|
109
|
+
case 3:
|
|
110
|
+
action('ERROR 404')(url);
|
|
111
|
+
return [2 /*return*/, new Response(null, { status: 404 })];
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
}); };
|
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Icon, Image, Schema } from '../../dynamic-flow-types';
|
|
3
|
-
export declare const mapConstSchemaToOption: (schema: Schema, controlType?: string) =>
|
|
4
|
-
|
|
3
|
+
export declare const mapConstSchemaToOption: (schema: Schema, controlType?: string) => RadioOption | SelectOption;
|
|
4
|
+
export type RadioOption = {
|
|
5
5
|
disabled?: boolean | undefined;
|
|
6
|
-
|
|
6
|
+
avatar?: JSX.Element | undefined;
|
|
7
7
|
currency?: string | undefined;
|
|
8
8
|
label: string;
|
|
9
9
|
value: string;
|
|
10
|
-
}
|
|
11
|
-
|
|
10
|
+
};
|
|
11
|
+
export type SelectOption = {
|
|
12
|
+
searchStrings?: string[];
|
|
12
13
|
disabled?: boolean | undefined;
|
|
13
14
|
icon?: JSX.Element | undefined;
|
|
14
15
|
currency?: string | undefined;
|
|
15
16
|
label: string;
|
|
16
17
|
value: string;
|
|
17
|
-
} | {
|
|
18
|
-
disabled?: boolean | undefined;
|
|
19
|
-
avatar?: JSX.Element | undefined;
|
|
20
|
-
currency?: string | undefined;
|
|
21
|
-
label: string;
|
|
22
|
-
value: string;
|
|
23
18
|
};
|
|
24
19
|
export declare const mapImage: (image?: Image) => {
|
|
25
20
|
icon: JSX.Element;
|
|
@@ -17,16 +17,22 @@ import { getCurrencyFlag } from './availableCurrencyFlags';
|
|
|
17
17
|
export var mapConstSchemaToOption = function (schema, controlType) {
|
|
18
18
|
switch (controlType) {
|
|
19
19
|
case 'select':
|
|
20
|
-
return
|
|
21
|
-
// TODO: LOW avoid type assertion -- using || '' would fail some tests
|
|
22
|
-
label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIcon(schema.icon)), mapCurrency(schema.icon)), mapImage(schema.image)), getDisabled(schema.disabled)), mapKeywordsToSearchStrings(schema.keywords));
|
|
20
|
+
return mapConstSchemaToSelectOption(schema);
|
|
23
21
|
case 'radio':
|
|
24
22
|
default:
|
|
25
|
-
return
|
|
26
|
-
// TODO: LOW avoid type assertion -- using || '' would fail some tests
|
|
27
|
-
label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIconToAvatar(schema.icon)), mapCurrency(schema.icon)), mapAvatar(schema.image)), getDisabled(schema.disabled));
|
|
23
|
+
return mapConstSchemaToRadioOption(schema);
|
|
28
24
|
}
|
|
29
25
|
};
|
|
26
|
+
var mapConstSchemaToRadioOption = function (schema) {
|
|
27
|
+
return __assign(__assign(__assign(__assign(__assign({
|
|
28
|
+
// TODO: LOW avoid type assertion -- using || '' would fail some tests
|
|
29
|
+
label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIconToAvatar(schema.icon)), mapCurrency(schema.icon)), mapAvatar(schema.image)), getDisabled(schema.disabled));
|
|
30
|
+
};
|
|
31
|
+
var mapConstSchemaToSelectOption = function (schema) {
|
|
32
|
+
return __assign(__assign(__assign(__assign(__assign(__assign({
|
|
33
|
+
// TODO: LOW avoid type assertion -- using || '' would fail some tests
|
|
34
|
+
label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIcon(schema.icon)), mapCurrency(schema.icon)), mapImage(schema.image)), getDisabled(schema.disabled)), mapKeywordsToSearchStrings(schema.keywords));
|
|
35
|
+
};
|
|
30
36
|
// TODO: LOW avoid type assertion below -- icon.name may be undefined
|
|
31
37
|
var mapCurrency = function (icon) { return (icon ? getCurrencyFlag(icon.name) : null); };
|
|
32
38
|
var mapKeywordsToSearchStrings = function (searchStrings) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ImageLayout } from '../../dynamic-flow-types';
|
|
3
|
-
|
|
3
|
+
type DynamicImageProps = {
|
|
4
4
|
component: ImageLayout;
|
|
5
|
-
}
|
|
5
|
+
};
|
|
6
|
+
declare const DynamicImage: ({ component: image }: DynamicImageProps) => JSX.Element | null;
|
|
6
7
|
export default DynamicImage;
|
|
@@ -51,24 +51,24 @@ import { useEffect, useState } from 'react';
|
|
|
51
51
|
import { isRelativePath } from '../../common/api/utils';
|
|
52
52
|
import { useFetcher } from '../../common/contexts/fetcherContext';
|
|
53
53
|
import { getMarginBottom } from '../utils';
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
var DynamicImage = function (_a) {
|
|
55
|
+
var image = _a.component;
|
|
56
|
+
var url = image.url, size = image.size, text = image.text, margin = image.margin;
|
|
57
|
+
var fetcher = useFetcher();
|
|
58
|
+
var _b = useState(''), imageSource = _b[0], setImageSource = _b[1];
|
|
59
|
+
useEffect(function () {
|
|
60
|
+
void getImageSource(fetcher, url).then(setImageSource);
|
|
61
|
+
}, [url, fetcher]);
|
|
62
|
+
var imageProps = {
|
|
63
|
+
alt: text || '',
|
|
64
|
+
src: imageSource,
|
|
65
|
+
stretch: true,
|
|
66
|
+
shrink: true
|
|
67
|
+
};
|
|
68
|
+
if (!imageSource) {
|
|
69
|
+
return null;
|
|
67
70
|
}
|
|
68
|
-
};
|
|
69
|
-
var getImageClasses = function (image) {
|
|
70
|
-
var margin = getMarginBottom(image.margin || 'lg');
|
|
71
|
-
return "img-responsive ".concat(margin);
|
|
71
|
+
return (_jsx("div", __assign({ className: "df-image ".concat(size || 'xl') }, { children: _jsx(Image, __assign({ className: "img-responsive ".concat(getMarginBottom(margin || 'lg')) }, imageProps)) })));
|
|
72
72
|
};
|
|
73
73
|
var readImageBlobAsDataURL = function (imageBlob) {
|
|
74
74
|
// we can safely assume the type of reader.result is string
|
|
@@ -102,25 +102,4 @@ var getImageSource = function (fetcher, imageUrl) { return __awaiter(void 0, voi
|
|
|
102
102
|
return [2 /*return*/];
|
|
103
103
|
});
|
|
104
104
|
}); };
|
|
105
|
-
var DynamicImage = function (props) {
|
|
106
|
-
var image = props.component;
|
|
107
|
-
var fetcher = useFetcher();
|
|
108
|
-
var _a = useState(''), imageSource = _a[0], setImageSource = _a[1];
|
|
109
|
-
useEffect(function () {
|
|
110
|
-
void getImageSource(fetcher, image.url).then(setImageSource);
|
|
111
|
-
}, [image.url, fetcher]);
|
|
112
|
-
var imageProps = {
|
|
113
|
-
alt: image.text || '',
|
|
114
|
-
src: imageSource,
|
|
115
|
-
stretch: true,
|
|
116
|
-
shrink: true
|
|
117
|
-
};
|
|
118
|
-
var getImage = function () {
|
|
119
|
-
return imageSource ? _jsx(Image, __assign({ className: getImageClasses(image) }, imageProps)) : null;
|
|
120
|
-
};
|
|
121
|
-
if (!image.size || image.size === 'xl') {
|
|
122
|
-
return getImage();
|
|
123
|
-
}
|
|
124
|
-
return (_jsx("div", __assign({ className: "row m-b-0" }, { children: _jsx("div", __assign({ className: getWrapperClasses(image) }, { children: getImage() })) })));
|
|
125
|
-
};
|
|
126
105
|
export default DynamicImage;
|
package/build/main.css
CHANGED
|
@@ -141,3 +141,48 @@
|
|
|
141
141
|
width: 100%;
|
|
142
142
|
z-index: 10000;
|
|
143
143
|
}
|
|
144
|
+
.df-image {
|
|
145
|
+
display: flex;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
align-items: center;
|
|
148
|
+
}
|
|
149
|
+
.df-image img {
|
|
150
|
+
height: auto;
|
|
151
|
+
width: 100%;
|
|
152
|
+
}
|
|
153
|
+
/* narrow screens */
|
|
154
|
+
.df-image.xs img {
|
|
155
|
+
width: 50px;
|
|
156
|
+
}
|
|
157
|
+
.df-image.sm img {
|
|
158
|
+
width: 100px;
|
|
159
|
+
}
|
|
160
|
+
.df-image.md img {
|
|
161
|
+
width: 200px;
|
|
162
|
+
}
|
|
163
|
+
.df-image.lg img {
|
|
164
|
+
width: 300px;
|
|
165
|
+
}
|
|
166
|
+
/* wide screens */
|
|
167
|
+
@media (min-width: 576px) {
|
|
168
|
+
.df-image.xs img {
|
|
169
|
+
width: 100px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.df-image.sm img {
|
|
173
|
+
width: 200px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.df-image.md img {
|
|
177
|
+
width: 300px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.df-image.lg img {
|
|
181
|
+
width: 500px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.df-image.xl img {
|
|
185
|
+
max-width: 600px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/dynamic-flow-client",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Wise Dynamic Flow web client",
|
|
5
5
|
"main": "./build/index.js",
|
|
6
6
|
"types": "./build/index.d.ts",
|
|
@@ -18,9 +18,11 @@
|
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@babel/core": "7.20.12",
|
|
21
|
+
"@babel/plugin-syntax-flow": "7.18.6",
|
|
22
|
+
"@babel/plugin-transform-react-jsx": "7.21.0",
|
|
21
23
|
"@babel/preset-env": "7.20.2",
|
|
22
|
-
"@babel/preset-react": "
|
|
23
|
-
"@babel/preset-typescript": "
|
|
24
|
+
"@babel/preset-react": "7.18.6",
|
|
25
|
+
"@babel/preset-typescript": "7.21.0",
|
|
24
26
|
"@formatjs/cli": "^4.8.3",
|
|
25
27
|
"@storybook/addon-a11y": "6.5.16",
|
|
26
28
|
"@storybook/addon-actions": "6.5.16",
|
|
@@ -31,27 +33,27 @@
|
|
|
31
33
|
"@storybook/manager-webpack5": "6.5.16",
|
|
32
34
|
"@storybook/react": "6.5.16",
|
|
33
35
|
"@storybook/testing-library": "0.0.13",
|
|
34
|
-
"@testing-library/dom": "
|
|
35
|
-
"@testing-library/jest-dom": "5.
|
|
36
|
-
"@testing-library/react-hooks": "
|
|
37
|
-
"@testing-library/react": "
|
|
36
|
+
"@testing-library/dom": "9.2.0",
|
|
37
|
+
"@testing-library/jest-dom": "5.16.5",
|
|
38
|
+
"@testing-library/react-hooks": "8.0.1",
|
|
39
|
+
"@testing-library/react": "14.0.0",
|
|
38
40
|
"@testing-library/user-event": "13.2.1",
|
|
39
|
-
"@transferwise/components": "
|
|
40
|
-
"@transferwise/eslint-config": "
|
|
41
|
+
"@transferwise/components": "43.13.49",
|
|
42
|
+
"@transferwise/eslint-config": "8.0.1",
|
|
41
43
|
"@transferwise/formatting": "^2.10.0",
|
|
42
|
-
"@transferwise/icons": "
|
|
43
|
-
"@transferwise/neptune-css": "
|
|
44
|
-
"@transferwise/neptune-tokens": "
|
|
44
|
+
"@transferwise/icons": "3.2.3",
|
|
45
|
+
"@transferwise/neptune-css": "14.3.45",
|
|
46
|
+
"@transferwise/neptune-tokens": "8.4.0",
|
|
45
47
|
"@types/enzyme": "^3.10.12",
|
|
46
48
|
"@types/jest": "29.4.0",
|
|
47
49
|
"@types/lodash.debounce": "^4.0.7",
|
|
48
50
|
"@types/lodash": "^4.14.167",
|
|
49
|
-
"@types/react-dom": "
|
|
50
|
-
"@types/react": "
|
|
51
|
+
"@types/react-dom": "18",
|
|
52
|
+
"@types/react": "18",
|
|
51
53
|
"@types/testing-library__jest-dom": "5.9.5",
|
|
52
54
|
"@wise/art": "2.0.1",
|
|
53
55
|
"@wise/components-theming": "^0.7.4",
|
|
54
|
-
"@
|
|
56
|
+
"@cfaester/enzyme-adapter-react-18": "0.7.0",
|
|
55
57
|
"babel-jest": "29.5.0",
|
|
56
58
|
"cpx": "1.5.0",
|
|
57
59
|
"currency-flags": "4.0.7",
|
|
@@ -59,33 +61,34 @@
|
|
|
59
61
|
"eslint": "8.36.0",
|
|
60
62
|
"jest-environment-jsdom": "29.5.0",
|
|
61
63
|
"jest-fetch-mock": "^3.0.3",
|
|
64
|
+
"jest-watch-typeahead": "^2.2.2",
|
|
62
65
|
"jest": "29.5.0",
|
|
63
66
|
"npm-run-all": "4.1.5",
|
|
64
67
|
"postcss-cli": "^10.1.0",
|
|
65
68
|
"postcss-import": "^15.1.0",
|
|
66
69
|
"postcss": "^8.4.21",
|
|
67
70
|
"prettier": "2.8.4",
|
|
68
|
-
"react-dom": "
|
|
69
|
-
"react-intl": "
|
|
70
|
-
"react": "
|
|
71
|
+
"react-dom": "18.2.0",
|
|
72
|
+
"react-intl": "6.2.1",
|
|
73
|
+
"react": "18.2.0",
|
|
71
74
|
"require-from-string": "2.0.2",
|
|
72
|
-
"stylelint-config-standard": "
|
|
73
|
-
"stylelint-no-unsupported-browser-features": "
|
|
74
|
-
"stylelint-value-no-unknown-custom-properties": "
|
|
75
|
-
"stylelint": "
|
|
75
|
+
"stylelint-config-standard": "25.0.0",
|
|
76
|
+
"stylelint-no-unsupported-browser-features": "5.0.4",
|
|
77
|
+
"stylelint-value-no-unknown-custom-properties": "4.0.0",
|
|
78
|
+
"stylelint": "14.16.1",
|
|
76
79
|
"typescript": "4.9.5",
|
|
77
80
|
"webpack": "5.75.0"
|
|
78
81
|
},
|
|
79
82
|
"peerDependencies": {
|
|
80
83
|
"@transferwise/components": "^43",
|
|
81
|
-
"@transferwise/formatting": "^2
|
|
84
|
+
"@transferwise/formatting": "^2",
|
|
82
85
|
"@transferwise/icons": "^3",
|
|
83
86
|
"@transferwise/neptune-css": "^14",
|
|
84
87
|
"@transferwise/neptune-validation": "^3",
|
|
85
|
-
"prop-types": "^15
|
|
86
|
-
"react-dom": "
|
|
87
|
-
"react-intl": "^
|
|
88
|
-
"react": "
|
|
88
|
+
"prop-types": "^15",
|
|
89
|
+
"react-dom": "^18",
|
|
90
|
+
"react-intl": "^6",
|
|
91
|
+
"react": "^18"
|
|
89
92
|
},
|
|
90
93
|
"peerDependenciesMeta": {
|
|
91
94
|
"prop-types": {
|
|
@@ -93,7 +96,7 @@
|
|
|
93
96
|
}
|
|
94
97
|
},
|
|
95
98
|
"dependencies": {
|
|
96
|
-
"classnames": "
|
|
99
|
+
"classnames": "2.3.2",
|
|
97
100
|
"lodash.debounce": "^4.0.8",
|
|
98
101
|
"lodash.isequal": "^4.5.0",
|
|
99
102
|
"react-use": "^17.4.0",
|
|
@@ -110,10 +113,12 @@
|
|
|
110
113
|
"build:compiled-messages": "cpx 'src/i18n/*.json' build/i18n",
|
|
111
114
|
"test": "npm-run-all test:once test:tz",
|
|
112
115
|
"test:once": "jest --config jest.config.js --env=jsdom",
|
|
116
|
+
"test:coverage": "jest --config jest.config.js --env=jsdom --coverage",
|
|
113
117
|
"test:tz": "TZ=US/Pacific jest ./src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.errors.spec.js ./src/formControl/FormControl.spec.js",
|
|
114
118
|
"test:watch": "pnpm test:once --watch",
|
|
115
119
|
"lint": "npm-run-all lint:ts lint:css",
|
|
116
120
|
"lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
|
|
117
|
-
"lint:css": "stylelint --allow-empty-input './src/**/*.less'"
|
|
121
|
+
"lint:css": "stylelint --allow-empty-input './src/**/*.less'",
|
|
122
|
+
"build-storybook": "build-storybook -c .storybook"
|
|
118
123
|
}
|
|
119
124
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
-
function step(op) {
|
|
15
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
17
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
-
switch (op[0]) {
|
|
20
|
-
case 0: case 1: t = op; break;
|
|
21
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
-
default:
|
|
25
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
-
if (t[2]) _.ops.pop();
|
|
30
|
-
_.trys.pop(); continue;
|
|
31
|
-
}
|
|
32
|
-
op = body.call(thisArg, _);
|
|
33
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
import { waitFor } from '@testing-library/react';
|
|
38
|
-
import { renderHook } from '@testing-library/react-hooks';
|
|
39
|
-
import { useDebouncedFunction } from './useDebouncedFunction';
|
|
40
|
-
describe('useDebouncedFunction hook', function () {
|
|
41
|
-
it('debounces a callback', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
42
|
-
var callback, result;
|
|
43
|
-
return __generator(this, function (_a) {
|
|
44
|
-
switch (_a.label) {
|
|
45
|
-
case 0:
|
|
46
|
-
callback = jest.fn();
|
|
47
|
-
result = renderHook(function () { return useDebouncedFunction(callback, 200); }).result;
|
|
48
|
-
result.current();
|
|
49
|
-
expect(callback).not.toHaveBeenCalled();
|
|
50
|
-
return [4 /*yield*/, waitFor(function () {
|
|
51
|
-
expect(callback).toHaveBeenCalledTimes(1);
|
|
52
|
-
}, { interval: 200 })];
|
|
53
|
-
case 1:
|
|
54
|
-
_a.sent();
|
|
55
|
-
return [2 /*return*/];
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
}); });
|
|
59
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { render } from '@testing-library/react';
|
|
14
|
-
import { useEffect } from 'react';
|
|
15
|
-
import { useLogger, LogProvider } from '.';
|
|
16
|
-
describe('Logging Provider', function () {
|
|
17
|
-
var TestChild = function () {
|
|
18
|
-
var log = useLogger();
|
|
19
|
-
useEffect(function () {
|
|
20
|
-
// eslint-disable-next-line testing-library/no-debugging-utils
|
|
21
|
-
log.debug('Deprecation advanced warning', 'Some description.');
|
|
22
|
-
log.info('Invalid schema or model', 'Some description.');
|
|
23
|
-
log.warning('Action supressed', 'Some description.');
|
|
24
|
-
log.error('Deprecated schema', 'This schema is no longer supported.');
|
|
25
|
-
log.critical('Deprecated schema', 'This schema is no longer supported.');
|
|
26
|
-
}, []);
|
|
27
|
-
return _jsx("span", { children: "info,error" });
|
|
28
|
-
};
|
|
29
|
-
describe('when provider is initialised with flowId and stepId', function () {
|
|
30
|
-
describe('and is called within a component', function () {
|
|
31
|
-
function renderComponent(onLog) {
|
|
32
|
-
render(_jsx(LogProvider, __assign({ flowId: "myFlowId", stepId: "myStepId", onLog: onLog }, { children: _jsx(TestChild, {}) })));
|
|
33
|
-
}
|
|
34
|
-
it('calls the onLog callback', function () {
|
|
35
|
-
var onLog = jest.fn();
|
|
36
|
-
renderComponent(onLog);
|
|
37
|
-
expect(onLog).toHaveBeenCalledWith('debug', 'Dynamic Flow debug - Deprecation advanced warning - Some description.', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId' }));
|
|
38
|
-
expect(onLog).toHaveBeenCalledWith('info', 'Dynamic Flow info - Invalid schema or model - Some description.', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId' }));
|
|
39
|
-
expect(onLog).toHaveBeenCalledWith('warning', 'Dynamic Flow warning - Action supressed - Some description.', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId' }));
|
|
40
|
-
expect(onLog).toHaveBeenCalledWith('error', 'Dynamic Flow error - Deprecated schema - This schema is no longer supported.', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId' }));
|
|
41
|
-
expect(onLog).toHaveBeenCalledWith('critical', 'Dynamic Flow critical - Deprecated schema - This schema is no longer supported.', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId' }));
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { render } from '@testing-library/react';
|
|
14
|
-
import { useEffect } from 'react';
|
|
15
|
-
import { TrackingContextProvider, useTracking } from '.';
|
|
16
|
-
describe('Tracking Provider', function () {
|
|
17
|
-
var TestChild = function (_a) {
|
|
18
|
-
var eventName = _a.eventName, properties = _a.properties;
|
|
19
|
-
var trackEvent = useTracking();
|
|
20
|
-
useEffect(function () {
|
|
21
|
-
trackEvent(eventName, properties);
|
|
22
|
-
}, []);
|
|
23
|
-
return _jsx("span", { children: eventName });
|
|
24
|
-
};
|
|
25
|
-
describe('when provider is initialised with metadata', function () {
|
|
26
|
-
describe('and is called upon mounting', function () {
|
|
27
|
-
function renderComponent(onTrackableEvent) {
|
|
28
|
-
render(_jsx(TrackingContextProvider, __assign({ metadata: { flowId: 'myFlowId', stepId: 'myStepId', custom: 'property' }, onTrackableEvent: onTrackableEvent }, { children: _jsx(TestChild, { eventName: "Dynamic Flow - Flow Started", properties: { custom: 'property' } }) })));
|
|
29
|
-
}
|
|
30
|
-
describe('it calls the onTrackableEvent callback', function () {
|
|
31
|
-
it('with the specified eventName', function () {
|
|
32
|
-
var onTrackableEvent = jest.fn();
|
|
33
|
-
renderComponent(onTrackableEvent);
|
|
34
|
-
expect(onTrackableEvent).toHaveBeenCalledWith('Dynamic Flow - Flow Started', expect.anything());
|
|
35
|
-
});
|
|
36
|
-
it('with the specified custom properties', function () {
|
|
37
|
-
var onTrackableEvent = jest.fn();
|
|
38
|
-
renderComponent(onTrackableEvent);
|
|
39
|
-
expect(onTrackableEvent).toHaveBeenCalledWith('Dynamic Flow - Flow Started', expect.objectContaining({ custom: 'property' }));
|
|
40
|
-
});
|
|
41
|
-
it('with the specified flow and step ids any custom properties', function () {
|
|
42
|
-
var onTrackableEvent = jest.fn();
|
|
43
|
-
renderComponent(onTrackableEvent);
|
|
44
|
-
expect(onTrackableEvent).toHaveBeenCalledWith('Dynamic Flow - Flow Started', expect.objectContaining({ flowId: 'myFlowId', stepId: 'myStepId', custom: 'property' }));
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { generateRandomId } from './generate-random-id';
|
|
2
|
-
jest.spyOn(Math, 'random').mockReturnValue(0.123456789);
|
|
3
|
-
describe('generateRandomId', function () {
|
|
4
|
-
it('should generate a random id', function () {
|
|
5
|
-
var id = generateRandomId();
|
|
6
|
-
expect(id).toBe('12345678');
|
|
7
|
-
});
|
|
8
|
-
it('should generate a random id with a prefix', function () {
|
|
9
|
-
var id = generateRandomId('prefix');
|
|
10
|
-
expect(id).toBe('prefix-12345678');
|
|
11
|
-
});
|
|
12
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|