@wise/dynamic-flow-client 0.3.0-beta-d45b31.38 → 0.3.0

package/build/dynamicFlow/stories/fixtureFetcher.js

@@ -0,0 +1,114 @@
+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 { action } from '@storybook/addon-actions';
+import { isObject } from '../../common/validators';
+import { fixtures } from '../../fixtures';
+import { getObjectKeys } from './DynamicFlow.story';
+export var fixtureFetcher = function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var url;
+    return __generator(this, function (_a) {
+        action('fixtureFetcher')(input, init);
+        url = getURL(input);
+        if (url.pathname.startsWith('/steps/')) {
+            return [2 /*return*/, respondWithFixture(fixtures.steps, url, init)];
+        }
+        if (url.pathname.startsWith('/responses/')) {
+            return [2 /*return*/, respondWithFixture(fixtures.responses, url, init)];
+        }
+        if (url.pathname.startsWith('/validate')) {
+            return [2 /*return*/, new Response(JSON.stringify({ message: 'Validation-async OK' }))];
+        }
+        return [2 /*return*/, new Response(null, { status: 404 })];
+    });
+}); };
+var getURL = function (input) {
+    if (input instanceof URL) {
+        return input;
+    }
+    if (input instanceof Request) {
+        return new URL(input.url, 'http://foo');
+    }
+    return new URL(input, 'http://foo');
+};
+var respondWithFixture = function (fixtures, url, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var fixtureNames, name, fixture, body;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                fixtureNames = getObjectKeys(fixtures);
+                name = url.pathname
+                    .split('/')
+                    .filter(function (part) { return !!part; })
+                    .pop();
+                if (!fixtureNames.includes(name !== null && name !== void 0 ? name : '')) return [3 /*break*/, 3];
+                fixture = fixtures[name];
+                if (!url.searchParams.has('delay')) return [3 /*break*/, 2];
+                return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, Number(url.searchParams.get('delay'))); })];
+            case 1:
+                _b.sent();
+                _b.label = 2;
+            case 2:
+                // by convention if the url contains a "refresh"query parameterm we use the payload as model
+                if (url.searchParams.has('refresh') &&
+                    (init === null || init === void 0 ? void 0 : init.body) &&
+                    typeof init.body === 'string' &&
+                    isObject(fixture)) {
+                    body = JSON.parse(init.body);
+                    return [2 /*return*/, new Response(JSON.stringify(__assign(__assign({}, fixture), { model: __assign(__assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })))];
+                }
+                if (url.pathname.includes('exit')) {
+                    return [2 /*return*/, new Response(JSON.stringify(fixture), { headers: { 'X-DF-Exit': 'true' } })];
+                }
+                return [2 /*return*/, new Response(JSON.stringify(fixture))];
+            case 3:
+                action('ERROR 404')(url);
+                return [2 /*return*/, new Response(null, { status: 404 })];
+        }
+    });
+}); };

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+type Props = {
+    onError?: (error: Error) => void;
+    children: React.ReactNode;
+};
+type State = {
+    hasError: boolean;
+    isFatalError: boolean;
+};
+declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+        isFatalError: boolean;
+    };
+    componentDidCatch(error: Error): void;
+    handleErrorReset: () => void;
+    render(): JSX.Element;
+}
+export default ErrorBoundary;

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,45 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { ErrorBoundaryAlert } from './ErrorBoundaryAlert';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop = function () { };
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleErrorReset = function () {
+            _this.setState({ hasError: false, isFatalError: false });
+        };
+        _this.state = { hasError: false, isFatalError: false };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true, isFatalError: true };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        var _a = this.props.onError, onError = _a === void 0 ? noop : _a;
+        onError(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        var children = this.props.children;
+        var _a = this.state, hasError = _a.hasError, isFatalError = _a.isFatalError;
+        return (_jsxs(_Fragment, { children: [hasError && _jsx(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }), !isFatalError && children] }));
+    };
+    return ErrorBoundary;
+}(Component));
+export default ErrorBoundary;

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundary.messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    errorAlert: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    retry: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundary.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    errorAlert: {
+        id: 'dynamicFlows.ErrorBoundary.errorAlert',
+        defaultMessage: 'Oops. Something went wrong...',
+        description: 'Generic error message for when something has gone wrong'
+    },
+    retry: {
+        id: 'dynamicFlows.ErrorBoundary.retry',
+        defaultMessage: 'Retry',
+        description: 'Retry'
+    }
+});

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    onDismiss: () => void;
+};
+export declare const ErrorBoundaryAlert: ({ onDismiss }: Props) => JSX.Element;
+export {};

package/build/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Sentiment } from '@transferwise/components';
+import { useIntl } from 'react-intl';
+import messages from './ErrorBoundary.messages';
+export var ErrorBoundaryAlert = function (_a) {
+    var onDismiss = _a.onDismiss;
+    var formatMessage = useIntl().formatMessage;
+    return (_jsx(Alert, { action: {
+            text: formatMessage(messages.retry),
+            href: window.location.href
+        }, message: formatMessage(messages.errorAlert), type: Sentiment.NEGATIVE, className: "m-b-3", onDismiss: onDismiss }));
+};

package/build/dynamicFlow/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useDebouncedRefresh/useDebouncedRefresh';
+export * from './useDynamicFlowState';
+export * from './useLoader';
+export { default as ErrorBoundary } from './errorBoundary/ErrorBoundary';
+export * from './responseParsers/response-parsers';

package/build/dynamicFlow/utils/index.js

@@ -0,0 +1,5 @@
+export * from './useDebouncedRefresh/useDebouncedRefresh';
+export * from './useDynamicFlowState';
+export * from './useLoader';
+export { default as ErrorBoundary } from './errorBoundary/ErrorBoundary';
+export * from './responseParsers/response-parsers';

package/build/dynamicFlow/utils/responseParsers/response-parsers.d.ts

@@ -0,0 +1,17 @@
+import { ActionResponseBody, ErrorResponseBody, Step } from '../../../types';
+import { DynamicFlowProps } from '../../DynamicFlowTypes';
+type ParsedBody = {
+    type: 'exit';
+    result: Parameters<DynamicFlowProps['onComplete']>[0];
+} | {
+    type: 'action';
+    action: ActionResponseBody['action'];
+} | {
+    type: 'step';
+    step: Step;
+    etag?: string;
+};
+export declare const parseFetchResponse: (response: Response) => Promise<ParsedBody>;
+export declare const parseErrorResponse: (response: Response) => Promise<ErrorResponseBody>;
+export declare const parseExitResponse: (response: Response) => Promise<Parameters<DynamicFlowProps['onComplete']>[0]>;
+export {};

package/build/dynamicFlow/utils/responseParsers/response-parsers.js

@@ -0,0 +1,125 @@
+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 { isObject } from '../../../common/validators';
+export var parseFetchResponse = function (response) { return __awaiter(void 0, void 0, void 0, function () {
+    var jsonBody, action, etag;
+    var _a;
+    var _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                assertResponseIsValid(response);
+                if (!((_b = response.headers) === null || _b === void 0 ? void 0 : _b.has('X-Df-Exit'))) return [3 /*break*/, 2];
+                _a = { type: 'exit' };
+                return [4 /*yield*/, parseExitResponse(response)];
+            case 1: return [2 /*return*/, (_a.result = _c.sent(), _a)];
+            case 2: return [4 /*yield*/, parseResponseJson(response)];
+            case 3:
+                jsonBody = _c.sent();
+                if (!isObject(jsonBody)) {
+                    throw new Error('Incorrect response body in response. Expected an object.');
+                }
+                if (jsonBody.action) {
+                    if (!isObject(jsonBody.action)) {
+                        throw new Error('Incorrect response body in action response. Expected an object satisfying the type { action: Action }.');
+                    }
+                    action = jsonBody.action;
+                    if (action.exit === true && isObject(action.result)) {
+                        return [2 /*return*/, { type: 'exit', result: action.result }];
+                    }
+                    return [2 /*return*/, { type: 'action', action: jsonBody.action }];
+                }
+                etag = response.headers.get('etag') || undefined;
+                return [2 /*return*/, { type: 'step', step: jsonBody, etag: etag }];
+        }
+    });
+}); };
+export var parseErrorResponse = function (response) { return __awaiter(void 0, void 0, void 0, function () {
+    var jsonBody;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                assertResponseIsValid(response);
+                return [4 /*yield*/, parseResponseJson(response)];
+            case 1:
+                jsonBody = _a.sent();
+                if (!isObject(jsonBody)) {
+                    throw new Error('Incorrect response body in error response. Expected an object.');
+                }
+                return [2 /*return*/, jsonBody];
+        }
+    });
+}); };
+export var parseExitResponse = function (response) { return __awaiter(void 0, void 0, void 0, function () {
+    var result;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                assertResponseIsValid(response);
+                return [4 /*yield*/, parseResponseJson(response)];
+            case 1:
+                result = _a.sent();
+                if (isObject(result) || result === null) {
+                    return [2 /*return*/, result];
+                }
+                return [2 /*return*/, null];
+        }
+    });
+}); };
+var parseResponseJson = function (response) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                _b.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, response.json()];
+            case 1: return [2 /*return*/, (_b.sent())];
+            case 2:
+                _a = _b.sent();
+                return [2 /*return*/, null];
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
+var assertResponseIsValid = function (response) {
+    if (!(response instanceof Response)) {
+        throw new Error('Incorrect type of response from fetch. Expected object of type Response.');
+    }
+    if (response.bodyUsed) {
+        throw new Error('The body of the provided Response object has already been used. Every request must respond with a new Response object.');
+    }
+};

package/build/dynamicFlow/utils/useDebouncedRefresh/useDebouncedRefresh.d.ts

@@ -0,0 +1,5 @@
+import { Action, Schema } from '../../../types';
+import { ETag } from '../../DynamicFlowTypes';
+type FetchRefresh = (action: Action, data: unknown, etag: ETag | undefined) => Promise<void | null>;
+export declare function useDebouncedRefresh(fetchRefresh: FetchRefresh): (action: Action, data: unknown, etag: ETag | undefined, schema: Schema) => void;
+export {};

package/build/dynamicFlow/utils/useDebouncedRefresh/useDebouncedRefresh.js

@@ -0,0 +1,23 @@
+import { useRef } from 'react';
+import { debounce, shouldDebounceSchema } from '../../../common/utils';
+var DEBOUNCE_DELAY = 1000; // milliseconds
+export function useDebouncedRefresh(fetchRefresh) {
+    var map = useRef(new Map());
+    var retrieveOrCreate = function (key) {
+        if (map.current.has(key)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return map.current.get(key);
+        }
+        var debouncedFetchRefresh = debounce(function (action, data, etag) { return fetchRefresh(action, data, etag); }, DEBOUNCE_DELAY);
+        map.current.set(key, debouncedFetchRefresh);
+        return debouncedFetchRefresh;
+    };
+    return function (action, data, etag, schema) {
+        var key = action.url || '';
+        var debouncedFetchRefresh = retrieveOrCreate(key);
+        void debouncedFetchRefresh(action, data, etag);
+        if (!schema || !shouldDebounceSchema(schema)) {
+            void debouncedFetchRefresh.flush();
+        }
+    };
+}

package/build/dynamicFlow/utils/useDynamicFlowState.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FormErrors, GlobalError, ObjectModel, Step } from '../../types';
+type ModelsMap = {
+    [key: string]: ObjectModel;
+};
+export declare const useDynamicFlowState: (initialStep?: Step) => {
+    formErrors: FormErrors;
+    globalError: GlobalError;
+    step: Step | undefined;
+    models: ModelsMap;
+    etag: string | undefined;
+    modelIsValid: boolean;
+    setFormErrors: import("react").Dispatch<import("react").SetStateAction<FormErrors>>;
+    setGlobalError: import("react").Dispatch<import("react").SetStateAction<GlobalError>>;
+    setStepAndEtag: (step: Step, etag?: string) => void;
+    setSchemaModel: (schemaId: string, objectModel: ObjectModel, onModelsUpdated: (models: ModelsMap) => void) => void;
+};
+export {};

package/build/dynamicFlow/utils/useDynamicFlowState.js

@@ -0,0 +1,110 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useMemo, useState } from 'react';
+import { isValidSchema, getValidObjectModelParts } from '../../common/validators';
+import { isSchema } from '../DynamicFlowTypes';
+export var useDynamicFlowState = function (initialStep) {
+    var _a, _b;
+    var _c = useState((_a = initialStep === null || initialStep === void 0 ? void 0 : initialStep.errors) === null || _a === void 0 ? void 0 : _a.validation), formErrors = _c[0], setFormErrors = _c[1];
+    var _d = useState((_b = initialStep === null || initialStep === void 0 ? void 0 : initialStep.errors) === null || _b === void 0 ? void 0 : _b.error), globalError = _d[0], setGlobalError = _d[1];
+    var _e = useState({
+        step: initialStep || undefined,
+        models: (initialStep === null || initialStep === void 0 ? void 0 : initialStep.model)
+            ? buildInitialModels(initialStep.model, getAllSchemas(initialStep))
+            : {},
+        etag: undefined
+    }), stepAndModels = _e[0], setStepAndModels = _e[1];
+    var step = stepAndModels.step, models = stepAndModels.models, etag = stepAndModels.etag;
+    var setStepAndEtag = function (step, etag) {
+        var _a, _b, _c, _d;
+        setStepAndModels(function (previous) { return ({
+            step: step,
+            models: step.model ? buildInitialModels(step.model, getAllSchemas(step)) : previous.models,
+            etag: etag
+        }); });
+        setFormErrors((_b = (_a = step === null || step === void 0 ? void 0 : step.errors) === null || _a === void 0 ? void 0 : _a.validation) !== null && _b !== void 0 ? _b : null);
+        setGlobalError((_d = (_c = step === null || step === void 0 ? void 0 : step.errors) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : null);
+    };
+    var setSchemaModel = function (schemaId, objectModel, onModelsUpdated) {
+        setStepAndModels(function (previous) {
+            var _a;
+            var updatedModels = __assign(__assign({}, previous.models), (_a = {}, _a[schemaId] = objectModel, _a));
+            var updatedState = {
+                step: previous.step,
+                models: updatedModels,
+                etag: previous.etag
+            };
+            onModelsUpdated(updatedModels);
+            return updatedState;
+        });
+    };
+    var modelIsValid = useMemo(function () { return areModelsValid(models, getAllSchemas(step)); }, [models, step]);
+    return {
+        formErrors: formErrors,
+        globalError: globalError,
+        step: step,
+        models: models,
+        etag: etag,
+        modelIsValid: modelIsValid,
+        setFormErrors: setFormErrors,
+        setGlobalError: setGlobalError,
+        setStepAndEtag: setStepAndEtag,
+        setSchemaModel: setSchemaModel
+    };
+};
+var buildInitialModels = function (model, schemas) {
+    if (schemas === void 0) { schemas = []; }
+    return schemas.reduce(function (acc, schema) {
+        var _a;
+        if (!schema.$id) {
+            // TODO: MC-3224
+            // eslint-disable-next-line no-console
+            console.warn('Schema without $id property found.');
+        }
+        return __assign(__assign({}, acc), (_a = {}, _a[schema.$id || ''] = getValidObjectModelParts(model, schema) || {}, _a));
+    }, {});
+};
+var getAllSchemas = function (step) { return __spreadArray(__spreadArray([], getAllSchemasInLayout((step === null || step === void 0 ? void 0 : step.layout) || []), true), ((step === null || step === void 0 ? void 0 : step.schemas) || []), true); };
+var getAllSchemasInLayout = function (components) {
+    return components.flatMap(function (component) {
+        switch (component.type) {
+            case 'columns':
+                return __spreadArray([], getAllSchemasInLayout(__spreadArray(__spreadArray([], component.left, true), component.right, true)), true);
+            case 'box':
+                return getAllSchemasInLayout(component.components);
+            case 'form':
+                return isSchema(component.schema) ? [component.schema] : [];
+            default:
+                return [];
+        }
+    });
+};
+var areModelsValid = function (formModels, schemas) {
+    if (schemas === void 0) { schemas = []; }
+    return !(schemas === null || schemas === void 0 ? void 0 : schemas.some(function (schema) {
+        if (!schema.$id) {
+            // TODO: MC-3224
+            // eslint-disable-next-line no-console
+            console.warn('Schema without $id property found.');
+        }
+        return !isValidSchema(formModels[schema.$id || ''] || {}, schema);
+    }));
+};

package/build/dynamicFlow/utils/useLoader.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DynamicFlowProps } from '../DynamicFlowTypes';
+type LoadingState = 'idle' | 'initial' | 'refresh' | 'submission';
+export declare function useLoader(loaderConfig: DynamicFlowProps['loaderConfig'], initialState: LoadingState): {
+    loadingState: "initial" | "idle" | "refresh" | "submission";
+    setLoadingState: import("react").Dispatch<import("react").SetStateAction<"initial" | "idle" | "refresh" | "submission">>;
+    loader: JSX.Element | null;
+};
+export {};

package/build/dynamicFlow/utils/useLoader.js

@@ -0,0 +1,22 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader, Size } from '@transferwise/components';
+import { useState } from 'react';
+export function useLoader(loaderConfig, initialState) {
+    var config = __assign({ size: Size.EXTRA_LARGE, initial: true, submission: false }, loaderConfig);
+    var _a = useState(initialState), loadingState = _a[0], setLoadingState = _a[1];
+    var shouldDisplayLoader = (config.initial && loadingState === 'initial') ||
+        (config.submission && loadingState === 'submission');
+    var loader = shouldDisplayLoader ? (_jsx(Loader, { size: config.size, classNames: { 'tw-loader': 'tw-loader m-x-auto' }, "data-testid": "loader" })) : null;
+    return { loadingState: loadingState, setLoadingState: setLoadingState, loader: loader };
+}

package/build/fixtures/components/alert.d.ts

@@ -0,0 +1,3 @@
+import { FormStep } from '../../types';
+declare const step: FormStep;
+export default step;

package/build/fixtures/components/alert.js

@@ -0,0 +1,31 @@
+var step = {
+    type: 'form',
+    key: 'Components/Alert',
+    title: 'Alert Component',
+    description: 'Alerts can have different contexts.',
+    actions: [],
+    schemas: [],
+    layout: [
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "neutral" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'neutral'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "warning" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'warning'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "positive" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'positive'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "negative" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'negative'
+        },
+    ]
+};
+export default step;

package/build/fixtures/components/box.d.ts

@@ -0,0 +1,3 @@
+import { FormStep } from '../../types';
+declare const step: FormStep;
+export default step;

package/build/fixtures/components/box.js

@@ -0,0 +1,20 @@
+var step = {
+    type: 'form',
+    key: 'Components/Box',
+    title: 'Box Component',
+    description: 'Box is a container for other layour components. It can have a border!',
+    actions: [],
+    schemas: [],
+    layout: ['xs', 'sm', 'md', 'lg', 'xl'].map(function (size) { return ({
+        type: 'box',
+        width: size,
+        border: true,
+        components: [
+            {
+                type: 'paragraph',
+                text: "This paragraph is inside a box with border: \"true\" and width: \"".concat(size, "\".")
+            },
+        ]
+    }); })
+};
+export default step;

package/build/fixtures/components/button.d.ts

@@ -0,0 +1,3 @@
+import { FormStep } from '../../types';
+declare const step: FormStep;
+export default step;