@wise/dynamic-flow-client-internal 3.16.2 → 3.16.3-experimental-c0e84f1
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/build/dynamicFlow/DynamicFlow.js +104 -0
- package/build/dynamicFlow/DynamicFlow.test.js +116 -0
- package/build/i18n/index.js +62 -0
- package/build/index.js +5 -0
- package/build/main.js +6 -12
- package/build/main.mjs +6 -12
- package/build/stories/DynamicFlow.story.js +52 -0
- package/build/stories/DynamicFragment.story.js +131 -0
- package/build/stories/Editable.story.js +70 -0
- package/build/stories/Examples.story.js +29 -0
- package/build/stories/Features.story.js +33 -0
- package/build/stories/utils/DynamicFlowSideBySide.js +30 -0
- package/build/stories/utils/fixtureHttpClient.js +119 -0
- package/build/stories/visual-tests/generated.story.js +216 -0
- package/build/stories/visual-tests/layouts.story.js +108 -0
- package/build/stories/visual-tests/schemas.story.js +84 -0
- package/build/stories/visual-tests/step.story.js +30 -0
- package/build/test-utils/NeptuneProviders.js +23 -0
- package/build/test-utils/rtl-utils.js +20 -0
- package/build/tests/renderers/RadioInputRendererComponent.test.js +76 -0
- package/build/tests/renderers/value-utils.test.js +33 -0
- package/build/types/stories/visual-tests/generated.story.d.ts +39 -0
- package/build/types/stories/visual-tests/layouts.story.d.ts +21 -0
- package/build/types/stories/visual-tests/schemas.story.d.ts +17 -0
- package/build/types/stories/visual-tests/step.story.d.ts +8 -0
- package/package.json +6 -6
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { features } from '@wise/dynamic-flow-fixtures';
|
|
3
|
+
import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
|
|
4
|
+
var meta = {
|
|
5
|
+
component: DynamicFlowSideBySide,
|
|
6
|
+
title: 'Dev Tools/Features',
|
|
7
|
+
parameters: {
|
|
8
|
+
chromatic: { disableSnapshot: true },
|
|
9
|
+
},
|
|
10
|
+
argTypes: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export var ActionResponse = {
|
|
14
|
+
render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: features.actionResponse }, "actionResponse")); },
|
|
15
|
+
};
|
|
16
|
+
export var ArrayUploadBase64 = {
|
|
17
|
+
render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: features.arrayUploadBase64 }, "arrayUploadBase64")); },
|
|
18
|
+
};
|
|
19
|
+
export var External = {
|
|
20
|
+
render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.external }, "external"); },
|
|
21
|
+
};
|
|
22
|
+
export var PersistAsync = {
|
|
23
|
+
render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.persistAsync }, "persistAsync"); },
|
|
24
|
+
};
|
|
25
|
+
export var Polling = {
|
|
26
|
+
render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.polling }, "polling"); },
|
|
27
|
+
};
|
|
28
|
+
export var Search = {
|
|
29
|
+
render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.search }, "search"); },
|
|
30
|
+
};
|
|
31
|
+
export var Modal = {
|
|
32
|
+
render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.modal }, "modal"); },
|
|
33
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
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, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { action } from '@storybook/addon-actions';
|
|
14
|
+
import { DynamicFlowRevamp } from '../../dynamicFlow/DynamicFlow';
|
|
15
|
+
import { fixtureHttpClient } from './fixtureHttpClient';
|
|
16
|
+
import { DynamicFlowLegacy } from '../..';
|
|
17
|
+
function DynamicFlowSideBySide(_a) {
|
|
18
|
+
var key = _a.key, initialStep = _a.initialStep;
|
|
19
|
+
var props = {
|
|
20
|
+
flowId: 'storybook',
|
|
21
|
+
customFetch: fixtureHttpClient,
|
|
22
|
+
features: [],
|
|
23
|
+
onCompletion: action('onCompletion'),
|
|
24
|
+
onError: action('onError'),
|
|
25
|
+
onEvent: action('onEvent'),
|
|
26
|
+
onLog: action('onLog'),
|
|
27
|
+
};
|
|
28
|
+
return (_jsxs("div", { className: "df-side-by-side-container", children: [_jsx("div", { className: "df-side-by-side-column", children: _jsx(DynamicFlowLegacy, __assign({}, props, { loaderConfig: { size: 'xl', initial: true, submission: false }, initialStep: initialStep }), "".concat(key, "-original")) }), _jsx("div", { className: "df-side-by-side-column", children: _jsx(DynamicFlowRevamp, __assign({}, props, { initialStep: initialStep }), "".concat(key, "-revamp")) })] }));
|
|
29
|
+
}
|
|
30
|
+
export default DynamicFlowSideBySide;
|
|
@@ -0,0 +1,119 @@
|
|
|
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 { layouts, features, examples, schemas, responses } from '@wise/dynamic-flow-fixtures';
|
|
50
|
+
export var getObjectKeys = Object.keys;
|
|
51
|
+
var fixtures = __assign(__assign(__assign(__assign({}, examples), schemas), layouts), features);
|
|
52
|
+
var isObject = function (val) {
|
|
53
|
+
return typeof val === 'object' && val !== null;
|
|
54
|
+
};
|
|
55
|
+
export var fixtureHttpClient = function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
|
|
56
|
+
var url;
|
|
57
|
+
return __generator(this, function (_a) {
|
|
58
|
+
action('httpClient')(input, init);
|
|
59
|
+
url = getURL(input);
|
|
60
|
+
if (url.pathname.startsWith('/steps/')) {
|
|
61
|
+
return [2 /*return*/, respondWithFixture(fixtures, url, init)];
|
|
62
|
+
}
|
|
63
|
+
if (url.pathname.startsWith('/responses/')) {
|
|
64
|
+
return [2 /*return*/, respondWithFixture(responses, url, init)];
|
|
65
|
+
}
|
|
66
|
+
if (url.pathname.startsWith('/validate')) {
|
|
67
|
+
return [2 /*return*/, new Response(JSON.stringify({ message: 'Validation-async OK' }))];
|
|
68
|
+
}
|
|
69
|
+
return [2 /*return*/, new Response(null, { status: 404 })];
|
|
70
|
+
});
|
|
71
|
+
}); };
|
|
72
|
+
var getURL = function (input) {
|
|
73
|
+
if (input instanceof URL) {
|
|
74
|
+
return input;
|
|
75
|
+
}
|
|
76
|
+
if (input instanceof Request) {
|
|
77
|
+
return new URL(input.url, 'http://foo');
|
|
78
|
+
}
|
|
79
|
+
return new URL(input, 'http://foo');
|
|
80
|
+
};
|
|
81
|
+
var respondWithFixture = function (fixtureList, url, init) { return __awaiter(void 0, void 0, void 0, function () {
|
|
82
|
+
var fixtureNames, name, fixture, body;
|
|
83
|
+
var _a;
|
|
84
|
+
return __generator(this, function (_b) {
|
|
85
|
+
switch (_b.label) {
|
|
86
|
+
case 0:
|
|
87
|
+
fixtureNames = getObjectKeys(fixtureList);
|
|
88
|
+
name = url.pathname
|
|
89
|
+
.split('/')
|
|
90
|
+
.filter(function (part) { return Boolean(part); })
|
|
91
|
+
.pop();
|
|
92
|
+
if (!fixtureNames.includes(name !== null && name !== void 0 ? name : '')) return [3 /*break*/, 3];
|
|
93
|
+
fixture = fixtureList[name];
|
|
94
|
+
if (!url.searchParams.has('delay')) return [3 /*break*/, 2];
|
|
95
|
+
return [4 /*yield*/, new Promise(function (resolve) {
|
|
96
|
+
setTimeout(resolve, Number(url.searchParams.get('delay')));
|
|
97
|
+
})];
|
|
98
|
+
case 1:
|
|
99
|
+
_b.sent();
|
|
100
|
+
_b.label = 2;
|
|
101
|
+
case 2:
|
|
102
|
+
// by convention if the url contains a "refresh"query parameterm we use the payload as model
|
|
103
|
+
if (url.searchParams.has('refresh') &&
|
|
104
|
+
(init === null || init === void 0 ? void 0 : init.body) &&
|
|
105
|
+
typeof init.body === 'string' &&
|
|
106
|
+
isObject(fixture)) {
|
|
107
|
+
body = JSON.parse(init.body);
|
|
108
|
+
return [2 /*return*/, new Response(JSON.stringify(__assign(__assign({}, fixture), { model: __assign(__assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })))];
|
|
109
|
+
}
|
|
110
|
+
if (url.pathname.includes('exit')) {
|
|
111
|
+
return [2 /*return*/, new Response(JSON.stringify(fixture), { headers: { 'X-DF-Exit': 'true' } })];
|
|
112
|
+
}
|
|
113
|
+
return [2 /*return*/, new Response(JSON.stringify(fixture))];
|
|
114
|
+
case 3:
|
|
115
|
+
action('ERROR 404')(url);
|
|
116
|
+
return [2 /*return*/, new Response(null, { status: 404 })];
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}); };
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { generated } from '@wise/dynamic-flow-fixtures';
|
|
3
|
+
import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
|
|
4
|
+
var meta = {
|
|
5
|
+
component: DynamicFlowSideBySide,
|
|
6
|
+
title: 'Visual Tests/Generated',
|
|
7
|
+
parameters: {
|
|
8
|
+
chromatic: { disableSnapshot: false },
|
|
9
|
+
},
|
|
10
|
+
argTypes: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export var alert = {
|
|
14
|
+
name: 'Alert',
|
|
15
|
+
render: function () {
|
|
16
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.alert) }, "alert");
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export var align = {
|
|
20
|
+
name: 'Align',
|
|
21
|
+
render: function () {
|
|
22
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.align) }, "align");
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
export var arraytuple = {
|
|
26
|
+
name: 'Array Tuple',
|
|
27
|
+
render: function () {
|
|
28
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.arraytuple) }, "arraytuple");
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
export var box = {
|
|
32
|
+
name: 'Box',
|
|
33
|
+
render: function () {
|
|
34
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.box) }, "box");
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export var button = {
|
|
38
|
+
name: 'Button',
|
|
39
|
+
render: function () {
|
|
40
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.button) }, "button");
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export var checkbox = {
|
|
44
|
+
name: 'Checkbox',
|
|
45
|
+
render: function () {
|
|
46
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.checkbox) }, "checkbox");
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
export var columns = {
|
|
50
|
+
name: 'Columns',
|
|
51
|
+
render: function () {
|
|
52
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.columns) }, "columns");
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
export var copyable = {
|
|
56
|
+
name: 'Copyable',
|
|
57
|
+
render: function () {
|
|
58
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.copyable) }, "copyable");
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
export var date = {
|
|
62
|
+
name: 'Date',
|
|
63
|
+
render: function () {
|
|
64
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.date) }, "date");
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
export var datelookup = {
|
|
68
|
+
name: 'Date Lookup',
|
|
69
|
+
render: function () {
|
|
70
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.datelookup) }, "datelookup");
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
export var decision = {
|
|
74
|
+
name: 'Decision',
|
|
75
|
+
render: function () {
|
|
76
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.decision) }, "decision");
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
export var heading = {
|
|
80
|
+
name: 'Heading',
|
|
81
|
+
render: function () {
|
|
82
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.heading) }, "heading");
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
export var image = {
|
|
86
|
+
name: 'Image',
|
|
87
|
+
render: function () {
|
|
88
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.image) }, "image");
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
export var instructions = {
|
|
92
|
+
name: 'Instructions',
|
|
93
|
+
render: function () {
|
|
94
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.instructions) }, "instructions");
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
export var integer = {
|
|
98
|
+
name: 'Integer',
|
|
99
|
+
render: function () {
|
|
100
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.integer) }, "integer");
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
export var list = {
|
|
104
|
+
name: 'List',
|
|
105
|
+
render: function () {
|
|
106
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.list) }, "list");
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
export var margin = {
|
|
110
|
+
name: 'Margin',
|
|
111
|
+
render: function () {
|
|
112
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.margin) }, "margin");
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
export var markdown = {
|
|
116
|
+
name: 'Markdown',
|
|
117
|
+
render: function () {
|
|
118
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.markdown) }, "markdown");
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
export var modal = {
|
|
122
|
+
name: 'Modal',
|
|
123
|
+
render: function () {
|
|
124
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.modal) }, "modal");
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
export var multiselect = {
|
|
128
|
+
name: 'Multi Select',
|
|
129
|
+
render: function () {
|
|
130
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.multiselect) }, "multiselect");
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
export var number = {
|
|
134
|
+
name: 'Number',
|
|
135
|
+
render: function () {
|
|
136
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.number) }, "number");
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
export var paragraph = {
|
|
140
|
+
name: 'Paragraph',
|
|
141
|
+
render: function () {
|
|
142
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.paragraph) }, "paragraph");
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
export var password = {
|
|
146
|
+
name: 'Password',
|
|
147
|
+
render: function () {
|
|
148
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.password) }, "password");
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
export var phonenumber = {
|
|
152
|
+
name: 'Phone Number',
|
|
153
|
+
render: function () {
|
|
154
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.phonenumber) }, "phonenumber");
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
export var radio = {
|
|
158
|
+
name: 'Radio',
|
|
159
|
+
render: function () {
|
|
160
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.radio) }, "radio");
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
export var repeatable = {
|
|
164
|
+
name: 'Repeatable',
|
|
165
|
+
render: function () {
|
|
166
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.repeatable) }, "repeatable");
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
export var review = {
|
|
170
|
+
name: 'Review',
|
|
171
|
+
render: function () {
|
|
172
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.review) }, "review");
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
export var search = {
|
|
176
|
+
name: 'Search',
|
|
177
|
+
render: function () {
|
|
178
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.search) }, "search");
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
export var segmented = {
|
|
182
|
+
name: 'Segmented',
|
|
183
|
+
render: function () {
|
|
184
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.segmented) }, "segmented");
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
export var select = {
|
|
188
|
+
name: 'Select',
|
|
189
|
+
render: function () {
|
|
190
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.select) }, "select");
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
export var tabs = {
|
|
194
|
+
name: 'Tabs',
|
|
195
|
+
render: function () {
|
|
196
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.tabs) }, "tabs");
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
export var text = {
|
|
200
|
+
name: 'Text',
|
|
201
|
+
render: function () {
|
|
202
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.text) }, "text");
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
export var textarea = {
|
|
206
|
+
name: 'Text Area',
|
|
207
|
+
render: function () {
|
|
208
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.textarea) }, "textarea");
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
export var upload = {
|
|
212
|
+
name: 'Upload',
|
|
213
|
+
render: function () {
|
|
214
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.upload) }, "upload");
|
|
215
|
+
}
|
|
216
|
+
};
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { layouts } from '@wise/dynamic-flow-fixtures';
|
|
3
|
+
import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
|
|
4
|
+
var meta = {
|
|
5
|
+
component: DynamicFlowSideBySide,
|
|
6
|
+
title: 'Visual Tests/Layouts',
|
|
7
|
+
parameters: {
|
|
8
|
+
chromatic: { disableSnapshot: false },
|
|
9
|
+
},
|
|
10
|
+
argTypes: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export var alert = {
|
|
14
|
+
name: 'Alert',
|
|
15
|
+
render: function () {
|
|
16
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.alert }, "alert");
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export var box = {
|
|
20
|
+
name: 'Box',
|
|
21
|
+
render: function () {
|
|
22
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.box }, "box");
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
export var button = {
|
|
26
|
+
name: 'Button',
|
|
27
|
+
render: function () {
|
|
28
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.button }, "button");
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
export var columns = {
|
|
32
|
+
name: 'Columns',
|
|
33
|
+
render: function () {
|
|
34
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.columns }, "columns");
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export var decision = {
|
|
38
|
+
name: 'Decision',
|
|
39
|
+
render: function () {
|
|
40
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.decision }, "decision");
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export var divider = {
|
|
44
|
+
name: 'Divider',
|
|
45
|
+
render: function () {
|
|
46
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.divider }, "divider");
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
export var form = {
|
|
50
|
+
name: 'Form',
|
|
51
|
+
render: function () {
|
|
52
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.form }, "form");
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
export var heading = {
|
|
56
|
+
name: 'Heading',
|
|
57
|
+
render: function () {
|
|
58
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.heading }, "heading");
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
export var image = {
|
|
62
|
+
name: 'Image',
|
|
63
|
+
render: function () {
|
|
64
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.image }, "image");
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
export var instructions = {
|
|
68
|
+
name: 'Instructions',
|
|
69
|
+
render: function () {
|
|
70
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.instructions }, "instructions");
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
export var loadingIndicator = {
|
|
74
|
+
name: 'Loading Indicator',
|
|
75
|
+
render: function () {
|
|
76
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.loadingIndicator }, "loadingIndicator");
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
export var margin = {
|
|
80
|
+
name: 'Margin',
|
|
81
|
+
render: function () {
|
|
82
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.margin }, "margin");
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
export var markdown = {
|
|
86
|
+
name: 'Markdown',
|
|
87
|
+
render: function () {
|
|
88
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.markdown }, "markdown");
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
export var paragraph = {
|
|
92
|
+
name: 'Paragraph',
|
|
93
|
+
render: function () {
|
|
94
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.paragraph }, "paragraph");
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
export var review = {
|
|
98
|
+
name: 'Review',
|
|
99
|
+
render: function () {
|
|
100
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.review }, "review");
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
export var statusList = {
|
|
104
|
+
name: 'List',
|
|
105
|
+
render: function () {
|
|
106
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: layouts.statusList }, "statusList");
|
|
107
|
+
}
|
|
108
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { schemas } from '@wise/dynamic-flow-fixtures';
|
|
3
|
+
import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
|
|
4
|
+
var meta = {
|
|
5
|
+
component: DynamicFlowSideBySide,
|
|
6
|
+
title: 'Visual Tests/Schemas',
|
|
7
|
+
parameters: {
|
|
8
|
+
chromatic: { disableSnapshot: false },
|
|
9
|
+
},
|
|
10
|
+
argTypes: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export var allOf = {
|
|
14
|
+
name: 'AllOf',
|
|
15
|
+
render: function () {
|
|
16
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.allOf }, "allOf");
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export var array = {
|
|
20
|
+
name: 'Array',
|
|
21
|
+
render: function () {
|
|
22
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.array }, "array");
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
export var arrayUpload = {
|
|
26
|
+
name: 'Array Upload',
|
|
27
|
+
render: function () {
|
|
28
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.arrayUpload }, "arrayUpload");
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
export var blob = {
|
|
32
|
+
name: 'Blob',
|
|
33
|
+
render: function () {
|
|
34
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.blob }, "blob");
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export var boolean = {
|
|
38
|
+
name: 'Boolean',
|
|
39
|
+
render: function () {
|
|
40
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.boolean }, "boolean");
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export var hidden = {
|
|
44
|
+
name: 'Hidden',
|
|
45
|
+
render: function () {
|
|
46
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.hidden }, "hidden");
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
export var integer = {
|
|
50
|
+
name: 'Integer',
|
|
51
|
+
render: function () {
|
|
52
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.integer }, "integer");
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
export var multiSelect = {
|
|
56
|
+
name: 'Multi Select',
|
|
57
|
+
render: function () {
|
|
58
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.multiSelect }, "multiSelect");
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
export var number = {
|
|
62
|
+
name: 'Number',
|
|
63
|
+
render: function () {
|
|
64
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.number }, "number");
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
export var object = {
|
|
68
|
+
name: 'Object',
|
|
69
|
+
render: function () {
|
|
70
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.object }, "object");
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
export var oneOf = {
|
|
74
|
+
name: 'OneOf',
|
|
75
|
+
render: function () {
|
|
76
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.oneOf }, "oneOf");
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
export var string = {
|
|
80
|
+
name: 'String',
|
|
81
|
+
render: function () {
|
|
82
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: schemas.string }, "string");
|
|
83
|
+
}
|
|
84
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { step } from '@wise/dynamic-flow-fixtures';
|
|
3
|
+
import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
|
|
4
|
+
var meta = {
|
|
5
|
+
component: DynamicFlowSideBySide,
|
|
6
|
+
title: 'Visual Tests/Step',
|
|
7
|
+
parameters: {
|
|
8
|
+
chromatic: { disableSnapshot: false },
|
|
9
|
+
},
|
|
10
|
+
argTypes: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export var basic = {
|
|
14
|
+
name: 'Basic',
|
|
15
|
+
render: function () {
|
|
16
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: step.basic }, "basic");
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export var globalError = {
|
|
20
|
+
name: 'Error',
|
|
21
|
+
render: function () {
|
|
22
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: step.globalError }, "globalError");
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
export var validationError = {
|
|
26
|
+
name: 'Validation',
|
|
27
|
+
render: function () {
|
|
28
|
+
return _jsx(DynamicFlowSideBySide, { initialStep: step.validationError }, "validationError");
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
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 { Provider as ComponentProvider, DEFAULT_LANG, DEFAULT_LOCALE, SnackbarProvider, translations as componentTranslations, getLangFromLocale, } from '@transferwise/components';
|
|
14
|
+
import { ThemeProvider } from '@wise/components-theming';
|
|
15
|
+
import { translations } from '@wise/dynamic-flow-client';
|
|
16
|
+
var locale = DEFAULT_LOCALE;
|
|
17
|
+
var lang = getLangFromLocale(locale) || DEFAULT_LANG;
|
|
18
|
+
var messages = __assign(__assign({}, componentTranslations[lang]), translations[lang]);
|
|
19
|
+
function NeptuneProviders(_a) {
|
|
20
|
+
var children = _a.children;
|
|
21
|
+
return (_jsx(ThemeProvider, { theme: "personal", screenMode: "light", children: _jsx(SnackbarProvider, { children: _jsx(ComponentProvider, { i18n: { locale: locale, messages: messages }, children: children }) }) }));
|
|
22
|
+
}
|
|
23
|
+
export default NeptuneProviders;
|
|
@@ -0,0 +1,20 @@
|
|
|
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 NeptuneProviders from './NeptuneProviders';
|
|
15
|
+
export var renderWithProviders = function (children, options) {
|
|
16
|
+
var renderedResult = render(_jsx(NeptuneProviders, { children: children }), options);
|
|
17
|
+
return __assign(__assign({}, renderedResult), { rerender: function (ui, renderOptions) {
|
|
18
|
+
return renderWithProviders(ui, __assign({ container: renderedResult.container }, renderOptions));
|
|
19
|
+
} });
|
|
20
|
+
};
|