@wise/dynamic-flow-client 3.5.0-experimental-6654c72 → 3.5.0-experimental-63c768d

package/build/revamp/stories/dev-tools/ErrorHandling.story.js

@@ -0,0 +1,149 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import DynamicFlowWise from '../../DynamicFlowWise';
+import { fixtureHttpClient } from '../utils/fixtureHttpClient';
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/Error Handling',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function ExampleStep() {
+    var step = getBasicStep();
+    return renderWithStep(step, getHttpClient());
+}
+export function StepValidationErrorsStep() {
+    var step = getGlobalErrorStep();
+    return renderWithStep(step);
+}
+var getHttpClient = function () {
+    return getMockHttpClient({
+        '/submit': function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, respondWith({
+                        error: 'Server-side Global Error',
+                        validation: {
+                            name: "I don't like your name",
+                            age: 'You are too young',
+                            date: 'You are too old',
+                            money: 'You are too poor'
+                        }
+                    }, { status: 422 })];
+            });
+        }); }
+    });
+};
+var renderWithStep = function (step, httpClient) {
+    if (httpClient === void 0) { httpClient = fixtureHttpClient; }
+    return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: function (error) {
+            action('onError');
+            console.error(error);
+        } }));
+};
+var getBasicStep = function () { return ({
+    id: 'new-df-initial-step',
+    title: 'Error Handling in Dynamic Flow',
+    schemas: [
+        {
+            $id: '#personal-details',
+            type: 'object',
+            title: 'Personal details object',
+            description: 'Personal details schema description',
+            displayOrder: ['name', 'date', 'age', 'money'],
+            properties: {
+                name: {
+                    title: 'Full name',
+                    type: 'string'
+                },
+                date: {
+                    title: 'Date',
+                    type: 'string',
+                    format: 'date',
+                    control: 'date-lookup'
+                },
+                age: {
+                    title: 'Age',
+                    type: 'integer'
+                },
+                money: {
+                    title: 'How much money would you like?',
+                    type: 'number'
+                }
+            }
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#personal-details'
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+                method: 'POST'
+            }
+        },
+    ]
+}); };
+var getGlobalErrorStep = function () { return (__assign(__assign({}, getBasicStep()), { errors: {
+        error: 'This is a global error',
+        validation: {
+            name: "I don't like your name",
+            age: 'You are too young',
+            date: 'You are too old',
+            money: 'You are too poor'
+        }
+    } })); };

package/build/revamp/stories/dev-tools/External.story.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import DynamicFlowWise from '../../DynamicFlowWise';
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/External',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function External() {
+    return renderWithStep(initialStep);
+}
+var renderWithStep = function (step) { return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+            return [2 /*return*/, fetch(input, init)];
+        });
+    }); }, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: function (error) {
+        action('onError');
+        console.error(error);
+    } })); };
+var initialStep = {
+    id: 'step-id',
+    title: 'Step Title',
+    external: { url: 'https://www.google.com' },
+    schemas: [],
+    layout: [
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'Your bank is opening in another window.'
+        },
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'Please, follow their instructions. Keep this window open.'
+        },
+        { type: 'loading-indicator', margin: 'xl' },
+        {
+            type: 'info',
+            align: 'center',
+            markdown: "If it didn't work, you can [reopen](http://google.com/) the tab"
+        },
+    ]
+};

package/build/revamp/stories/dev-tools/OneOf.Inititalisation.story.js

@@ -0,0 +1,123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import DynamicFlowWise from '../../DynamicFlowWise';
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/OneOf Initialisation',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function RefreshOnChangeWithOneOf() {
+    return renderWithStep(initialStep);
+}
+var renderWithStep = function (step) { return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+            return [2 /*return*/, fetch(input, init)];
+        });
+    }); }, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: function (error) {
+        action('onError');
+        console.error(error);
+    } })); };
+var initialStep = {
+    id: 'step-id',
+    title: 'Step Title',
+    schemas: [
+        {
+            $id: '#root',
+            title: 'Root Option',
+            oneOf: [
+                {
+                    title: 'Bank Details Option (AllOf)',
+                    allOf: [
+                        {
+                            type: 'object',
+                            title: 'Bananas (with const type: "BANANAS")',
+                            displayOrder: ['bananas', 'type'],
+                            properties: {
+                                bananas: { type: 'string', title: 'BANANAS' },
+                                type: { "const": 'BANANAS' }
+                            }
+                        },
+                        {
+                            title: 'Bank Details Option',
+                            oneOf: [
+                                {
+                                    type: 'object',
+                                    title: 'Iban Option',
+                                    alert: { type: 'alert', markdown: 'This is an info alert' },
+                                    displayOrder: ['iban', 'type'],
+                                    properties: {
+                                        iban: { type: 'string', title: 'IBAN' },
+                                        type: { "const": 'IBAN' }
+                                    }
+                                },
+                                {
+                                    type: 'object',
+                                    title: 'Bic Option',
+                                    required: ['bic'],
+                                    displayOrder: ['bic', 'type'],
+                                    properties: { bic: { type: 'string', title: 'BIC' }, type: { "const": 'BIC' } }
+                                },
+                            ]
+                        },
+                    ]
+                },
+                {
+                    type: 'object',
+                    title: 'Name Option',
+                    displayOrder: ['name', 'type'],
+                    properties: {
+                        name: { type: 'string', title: 'NAME' },
+                        type: { "const": 'NAME' }
+                    }
+                },
+            ]
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#root'
+        },
+    ],
+    model: { type: 'BIC', bananas: 'bananas from step model' }
+};

package/build/revamp/stories/dev-tools/PersistAsync.story.js

@@ -0,0 +1,168 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import DynamicFlowWise from '../../DynamicFlowWise';
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import { respondWithDelay } from '../../../test-utils/fetch-utils';
+var httpClient = getMockHttpClient({
+    '/submit': function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, respondWith({
+                    id: 'new-df-flow-id',
+                    title: 'Success',
+                    layout: [],
+                    schemas: []
+                })];
+        });
+    }); },
+    '/persist-async': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWith({ token: '123' })];
+    }); }); },
+    '/persist-async-delayed-2s': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWithDelay({ token: '123' }, 2000)];
+    }); }); },
+    '/persist-async-delayed-5s': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWithDelay({ token: '345' }, 5000)];
+    }); }); },
+    '/persist-async-generic-failure': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, Promise.reject(new Error('Failed to persist'))];
+    }); }); },
+    '/persist-async-validation-failure': function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, Promise.resolve(new Response(JSON.stringify({ validation: { param: 'Invalid field' } }), { status: 422 }))];
+        });
+    }); }
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/Persist Async',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function BasicPersistAsync() {
+    var step = getBasicStep('/persist-async');
+    return renderWithStep(step);
+}
+export function PersistAsyncWithDelay() {
+    var step = getBasicStep('/persist-async-delayed-2s');
+    return renderWithStep(step);
+}
+export function MultiplePersistAsyncWithDelay() {
+    return renderWithStep(getComplexStepWithDelay());
+}
+export function PersistAsyncGenericFailure() {
+    var step = getBasicStep('/persist-async-generic-failure');
+    return renderWithStep(step);
+}
+export function PersistAsyncValidationFailure() {
+    var step = getBasicStep('/persist-async-validation-failure');
+    return renderWithStep(step);
+}
+var renderWithStep = function (step) { return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: function (error) {
+        action('onError');
+        console.error(error);
+    } })); };
+var getBasicStep = function (url) { return ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'string',
+            persistAsync: {
+                method: 'POST',
+                url: url,
+                param: 'param',
+                idProperty: 'token',
+                schema: { title: 'Card number', type: 'number' }
+            }
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' }
+        },
+    ],
+    model: 'the-token'
+}); };
+var getComplexStepWithDelay = function () { return ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['name', 'number'],
+            properties: {
+                name: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-5s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Name on card', type: 'string' }
+                    }
+                },
+                number: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-2s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Card number', type: 'string' }
+                    }
+                }
+            }
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' }
+        },
+    ]
+}); };