@wise/dynamic-flow-client 0.4.0-beta-0489d0.8 → 0.4.0

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

@@ -0,0 +1,47 @@
+"use strict";
+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 __());
+    };
+})();
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ErrorBoundaryAlert_1 = require("./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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasError && (0, jsx_runtime_1.jsx)(ErrorBoundaryAlert_1.ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }), !isFatalError && children] }));
+    };
+    return ErrorBoundary;
+}(react_1.Component));
+exports["default"] = ErrorBoundary;

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

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+var react_intl_1 = require("react-intl");
+exports["default"] = (0, react_intl_1.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.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.ErrorBoundaryAlert = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@transferwise/components");
+var react_intl_1 = require("react-intl");
+var ErrorBoundary_messages_1 = __importDefault(require("./ErrorBoundary.messages"));
+var ErrorBoundaryAlert = function (_a) {
+    var onDismiss = _a.onDismiss;
+    var formatMessage = (0, react_intl_1.useIntl)().formatMessage;
+    return ((0, jsx_runtime_1.jsx)(components_1.Alert, { action: {
+            text: formatMessage(ErrorBoundary_messages_1["default"].retry),
+            href: window.location.href
+        }, message: formatMessage(ErrorBoundary_messages_1["default"].errorAlert), type: components_1.Sentiment.NEGATIVE, className: "m-b-3", onDismiss: onDismiss }));
+};
+exports.ErrorBoundaryAlert = ErrorBoundaryAlert;

package/build/dynamicFlow/utils/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+exports.__esModule = true;
+exports.ErrorBoundary = void 0;
+__exportStar(require("./useDebouncedRefresh/useDebouncedRefresh"), exports);
+__exportStar(require("./useDynamicFlowState"), exports);
+__exportStar(require("./useLoader"), exports);
+var ErrorBoundary_1 = require("./errorBoundary/ErrorBoundary");
+__createBinding(exports, ErrorBoundary_1, "default", "ErrorBoundary");
+__exportStar(require("./responseParsers/response-parsers"), exports);

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

@@ -0,0 +1,131 @@
+"use strict";
+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 };
+    }
+};
+exports.__esModule = true;
+exports.parseExitResponse = exports.parseErrorResponse = exports.parseFetchResponse = void 0;
+var validators_1 = require("../../../common/validators");
+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*/, (0, exports.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 (!(0, validators_1.isObject)(jsonBody)) {
+                    throw new Error('Incorrect response body in response. Expected an object.');
+                }
+                if (jsonBody.action) {
+                    if (!(0, validators_1.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 && (0, validators_1.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 }];
+        }
+    });
+}); };
+exports.parseFetchResponse = parseFetchResponse;
+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 (!(0, validators_1.isObject)(jsonBody)) {
+                    throw new Error('Incorrect response body in error response. Expected an object.');
+                }
+                return [2 /*return*/, jsonBody];
+        }
+    });
+}); };
+exports.parseErrorResponse = parseErrorResponse;
+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 ((0, validators_1.isObject)(result) || result === null) {
+                    return [2 /*return*/, result];
+                }
+                return [2 /*return*/, null];
+        }
+    });
+}); };
+exports.parseExitResponse = parseExitResponse;
+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.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+exports.useDebouncedRefresh = void 0;
+var react_1 = require("react");
+var utils_1 = require("../../../common/utils");
+var DEBOUNCE_DELAY = 1000; // milliseconds
+function useDebouncedRefresh(fetchRefresh) {
+    var map = (0, react_1.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 = (0, utils_1.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 || !(0, utils_1.shouldDebounceSchema)(schema)) {
+            void debouncedFetchRefresh.flush();
+        }
+    };
+}
+exports.useDebouncedRefresh = useDebouncedRefresh;

package/build/dynamicFlow/utils/useDynamicFlowState.js

@@ -0,0 +1,114 @@
+"use strict";
+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));
+};
+exports.__esModule = true;
+exports.useDynamicFlowState = void 0;
+var react_1 = require("react");
+var validators_1 = require("../../common/validators");
+var DynamicFlowTypes_1 = require("../DynamicFlowTypes");
+var useDynamicFlowState = function (initialStep) {
+    var _a, _b;
+    var _c = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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
+    };
+};
+exports.useDynamicFlowState = useDynamicFlowState;
+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 || ''] = (0, validators_1.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 (0, DynamicFlowTypes_1.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 !(0, validators_1.isValidSchema)(formModels[schema.$id || ''] || {}, schema);
+    }));
+};

package/build/dynamicFlow/utils/useLoader.js

@@ -0,0 +1,26 @@
+"use strict";
+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);
+};
+exports.__esModule = true;
+exports.useLoader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@transferwise/components");
+var react_1 = require("react");
+function useLoader(loaderConfig, initialState) {
+    var config = __assign({ size: components_1.Size.EXTRA_LARGE, initial: true, submission: false }, loaderConfig);
+    var _a = (0, react_1.useState)(initialState), loadingState = _a[0], setLoadingState = _a[1];
+    var shouldDisplayLoader = (config.initial && loadingState === 'initial') ||
+        (config.submission && loadingState === 'submission');
+    var loader = shouldDisplayLoader ? ((0, jsx_runtime_1.jsx)(components_1.Loader, { size: config.size, classNames: { 'tw-loader': 'tw-loader m-x-auto' }, "data-testid": "loader" })) : null;
+    return { loadingState: loadingState, setLoadingState: setLoadingState, loader: loader };
+}
+exports.useLoader = useLoader;

package/build/fixtures/components/alert.js

@@ -0,0 +1,33 @@
+"use strict";
+exports.__esModule = true;
+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'
+        },
+    ]
+};
+exports["default"] = step;

package/build/fixtures/components/box.js

@@ -0,0 +1,22 @@
+"use strict";
+exports.__esModule = true;
+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, "\".")
+            },
+        ]
+    }); })
+};
+exports["default"] = step;

package/build/fixtures/components/button.js

@@ -0,0 +1,67 @@
+"use strict";
+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));
+};
+exports.__esModule = true;
+var buttons = ['primary', 'secondary', 'negative', 'link'].map(function (type, i) {
+    return ({
+        type: 'button',
+        action: {
+            url: '/action-url',
+            method: 'POST',
+            title: "Button ".concat(i + 1, ", type: \"").concat(type, "\""),
+            type: type,
+            data: { 'button-number': i + 1 }
+        }
+    });
+});
+var step = {
+    type: 'form',
+    key: 'Components/Button',
+    title: 'Button Component',
+    description: 'Buttons typically trigger actions.',
+    actions: [],
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: [],
+            properties: {
+                'form-field': {
+                    type: 'string',
+                    "default": 'Some text',
+                    title: 'Enter any text. It will be submitted under "form-field".'
+                }
+            }
+        },
+    ],
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            components: __spreadArray(__spreadArray([
+                {
+                    type: 'paragraph',
+                    text: 'Action buttons merge the form data with their own action.data before submitting it to the specified URL.'
+                },
+                {
+                    type: 'form',
+                    schema: { $ref: '#schema' }
+                }
+            ], buttons, true), [
+                {
+                    type: 'paragraph',
+                    text: 'Press any buttons and see the fetcher calls below.',
+                    align: 'center'
+                },
+            ], false)
+        },
+    ]
+};
+exports["default"] = step;

package/build/fixtures/components/columns.js

@@ -0,0 +1,38 @@
+"use strict";
+exports.__esModule = true;
+var step = {
+    type: 'form',
+    key: 'Components/Columns',
+    title: 'Columns Component',
+    description: "Arrange components in two columns (when there's enough space)",
+    actions: [],
+    schemas: [],
+    layout: [
+        {
+            type: 'columns',
+            left: [
+                {
+                    type: 'button',
+                    action: {
+                        title: 'Save',
+                        type: 'primary',
+                        exit: true,
+                        result: { side: 'left' }
+                    }
+                },
+            ],
+            right: [
+                {
+                    type: 'button',
+                    action: {
+                        title: 'Delete',
+                        type: 'negative',
+                        exit: true,
+                        result: { side: 'right' }
+                    }
+                },
+            ]
+        },
+    ]
+};
+exports["default"] = step;

package/build/fixtures/components/copyable.js

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+var step = {
+    key: 'Components/Copyable',
+    type: 'form',
+    title: 'Copyable Text',
+    description: 'Copyable Text Component.',
+    actions: [],
+    layout: [
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'Please copy the code below and use it in that other thing.'
+        },
+        {
+            type: 'paragraph',
+            text: '7Xtiq6fnX9aEVF7yZAmb2qyqS857ro8S',
+            align: 'center',
+            control: 'copyable'
+        },
+    ],
+    schemas: []
+};
+exports["default"] = step;

package/build/fixtures/components/decision.js

@@ -0,0 +1,56 @@
+"use strict";
+exports.__esModule = true;
+var step = {
+    type: 'form',
+    key: 'Components/Decision',
+    title: 'Decision Component',
+    description: 'A step with a decision Component.',
+    actions: [],
+    schemas: [],
+    layout: [
+        {
+            type: 'heading',
+            size: 'sm',
+            text: 'Please continue using one of the following options:'
+        },
+        {
+            type: 'decision',
+            options: [
+                {
+                    title: 'Create a new recipient',
+                    description: 'You will need their bank details to hand',
+                    icon: {
+                        name: 'plus'
+                    },
+                    action: {
+                        title: '',
+                        url: 'recipient'
+                    }
+                },
+                {
+                    title: 'Choose an existing recipient',
+                    disabled: false,
+                    icon: {
+                        name: 'bank'
+                    },
+                    action: {
+                        title: '',
+                        url: 'review'
+                    }
+                },
+                {
+                    title: 'Show me the external step',
+                    disabled: false,
+                    icon: {
+                        name: 'bulb'
+                    },
+                    action: {
+                        title: '',
+                        url: 'external'
+                    }
+                },
+            ]
+        },
+    ]
+};
+exports["default"] = step;