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

package/build/legacy/dynamicFlow/stories/dev-tools/DynamicFlow.story.js

@@ -0,0 +1,78 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/forbid-dom-props */
+import { action } from '@storybook/addon-actions';
+import { layouts, schemas, examples } from '@wise/dynamic-flow-fixtures';
+import { useCallback, useMemo, useState } from 'react';
+import DynamicFlow from '../../DynamicFlow';
+import { fixtureHttpClient } from '../fixtureHttpClient';
+var fixtures = __assign(__assign(__assign({}, schemas), layouts), examples);
+function EditableDynamicFlow(_a) {
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = fixtures[initialStepName] || {};
+    var selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+var initialAction = { url: '/initial' };
+function InteractiveDemo(_a) {
+    var selectedInitialStep = _a.selectedInitialStep;
+    var _b = useState(200), initialStatusCode = _b[0], setInitialStatusCode = _b[1];
+    var _c = useState(selectedInitialStep), initialStep = _c[0], setInitialStep = _c[1];
+    var onTextAreaChange = function (event) {
+        setInitialStep(event.target.value);
+    };
+    var httpClient = useCallback(function (input, init) {
+        action('httpClient')(input, init);
+        if (String(input) === '/initial') {
+            return Promise.resolve(new Response(initialStep, { status: initialStatusCode }));
+        }
+        return fixtureHttpClient(input, init);
+    }, [initialStep, initialStatusCode]);
+    return (_jsxs("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [_jsxs("div", __assign({ style: { flexBasis: '50%' } }, { children: [_jsx("h3", { children: "Editable Demo" }), _jsxs("p", { children: ["You can specify a response status code and body, and DF will load your step.", _jsx("br", {}), "(for ideas, you can select an initial step from the drop down in the controls panel)"] }), _jsxs("fieldset", { children: [_jsx("label", __assign({ htmlFor: "status-code" }, { children: "Response Status code: " })), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", __assign({ htmlFor: "textarea" }, { children: "Response Body:" })), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })] })), _jsx("div", __assign({ style: { flexBasis: '50%' } }, { children: _jsx(DynamicFlow, { flowId: "the-flow-id", initialAction: initialAction, httpClient: httpClient, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "".concat(initialStep, "-").concat(initialStatusCode)) }))] })));
+}
+function InvalidJsonWarning(_a) {
+    var initialStep = _a.initialStep;
+    var validJson = useMemo(function () { return isValidJson(initialStep); }, [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+var isValidJson = function (value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect(_a) {
+    var id = _a.id, _b = _a.state, value = _b[0], setValue = _b[1];
+    return (_jsxs("select", __assign({ id: id, value: value, onChange: function (event) { return setValue(Number.parseInt(event.target.value, 10)); } }, { children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] })));
+}
+var meta = {
+    title: 'Dev Tools/Dynamic Flow',
+    component: EditableDynamicFlow
+};
+export var EditableStep = {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures)
+        }
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export default meta;

package/build/legacy/dynamicFlow/stories/dev-tools/ErrorResponses.story.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import DynamicFlow from '../../DynamicFlow';
+var cases = {
+    '/422-global-error': {
+        btnText: 'Status 422 with a global error',
+        paragraph: 'It should display a global error on screen. This is valid, expected behaviour.',
+        btnType: 'primary',
+        status: 422,
+        body: "{\"error\": \"Global Error\"}"
+    },
+    '/422-non-json-parseable': {
+        btnText: 'Error 422 with non-json-parseable response body',
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 422,
+        body: "Any string that CANNOT be parsed as JSON."
+    },
+    '/422-json-parseable': {
+        btnText: 'Error 422 with json-parseable response body',
+        btnType: 'negative',
+        paragraph: "It should trigger onError and onLog. This is not expected behaviour.",
+        status: 422,
+        body: "{ \"valid\": \"JSON\" }"
+    },
+    '/200-json-parseable': {
+        btnText: "Status 200 with json-parseable response body",
+        btnType: 'negative',
+        paragraph: "This is not expected behaviour because the response does not cointain the DF-X-Exit header. It should trigger onError and onLog, but it doesn't!.",
+        status: 200,
+        body: "{ \"valid\": \"JSON\" }"
+    },
+    '/200-bad-action': {
+        btnText: "Status 200 with bad action body",
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 200,
+        body: "{ \"action\": {\"bad\": \"action\"} }"
+    },
+    '/422-json-parseable-non-object': {
+        btnText: 'Error 422 with json-parseable response body, but not an object',
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 422,
+        body: "\"A string literal can be parsed as JSON.\""
+    }
+};
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    var testCase = cases[String(input)];
+    var response = testCase
+        ? new Response(testCase.body, { status: testCase.status })
+        : new Response(null, { status: 404 });
+    return Promise.resolve(response);
+};
+var initialStep = getInitialStep();
+function ErrorResponsesStory() {
+    return (_jsx(DynamicFlow, { flowId: "simulate-errors", initialStep: initialStep, httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }));
+}
+function getTestCaseBoxLayout(url, testCase, index) {
+    var btnText = testCase.btnText, paragraph = testCase.paragraph, btnType = testCase.btnType, status = testCase.status, body = testCase.body;
+    return {
+        type: 'box',
+        border: true,
+        margin: 'xl',
+        components: [
+            {
+                type: 'button',
+                action: {
+                    title: btnText,
+                    type: btnType,
+                    url: url,
+                    data: { 'button-id': index }
+                }
+            },
+            {
+                type: 'paragraph',
+                text: "Response status: ".concat(status, " - body: ").concat(body, "."),
+                align: 'center',
+                margin: 'xs'
+            },
+            {
+                type: 'paragraph',
+                text: paragraph,
+                align: 'center',
+                margin: 'md'
+            },
+        ]
+    };
+}
+function getInitialStep() {
+    return {
+        type: 'form',
+        id: 'Examples/Simulate Errors',
+        title: 'Simulate Errors',
+        description: 'Click any of the buttons to simulate an error as described below.',
+        schemas: [],
+        layout: [
+            {
+                type: 'paragraph',
+                text: 'Press any buttons and see the httpClient requests and responses in the Actions panel.',
+                align: 'center'
+            },
+            {
+                type: 'box',
+                width: 'md',
+                components: Object.keys(cases).map(function (url, index) {
+                    return getTestCaseBoxLayout(url, cases[url], index);
+                })
+            },
+        ]
+    };
+}
+var meta = {
+    title: 'Dev Tools/Responses',
+    component: ErrorResponsesStory
+};
+export var ErrorResponses = {
+    render: function () { return _jsx(ErrorResponsesStory, {}); },
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export default meta;

package/build/legacy/dynamicFlow/stories/dev-tools/Examples.story.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { examples } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../../DynamicFlow';
+import { getObjectKeys } from '../fixtureHttpClient';
+var storyMap = {};
+var allStepNames = getObjectKeys(examples);
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    return fetch(input, init);
+};
+allStepNames.forEach(function (stepName) {
+    // eslint-disable-next-line import/namespace
+    var label = examples[stepName].id;
+    if (label) {
+        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
+        storyMap[group] || (storyMap[group] = storiesOf("Dev Tools/".concat(group), module).addParameters({
+            chromatic: { disableSnapshot: true }
+        }));
+        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
+            // eslint-disable-next-line import/namespace
+            initialStep: examples[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
+    }
+});

package/build/legacy/dynamicFlow/stories/dev-tools/Features.story.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { features } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../../DynamicFlow';
+var storyMap = {};
+var selectedStepNames = [
+    'actionResponse',
+    'arrayUploadBase64',
+    'external',
+    'multiSelect',
+    'persistAsync',
+    'polling',
+    'search',
+    'modal',
+];
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    return fetch(input, init);
+};
+selectedStepNames.forEach(function (stepName) {
+    // eslint-disable-next-line import/namespace
+    var label = features[stepName].id;
+    if (label) {
+        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
+        storyMap[group] || (storyMap[group] = storiesOf("Dev Tools/".concat(group), module).addParameters({
+            chromatic: { disableSnapshot: true }
+        }));
+        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
+            // eslint-disable-next-line import/namespace
+            initialStep: features[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
+    }
+});

package/build/legacy/dynamicFlow/stories/dev-tools/JsonSchemaForm.story.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { schemas } from '@wise/dynamic-flow-fixtures';
+import JsonSchemaForm from '../../../jsonSchemaForm/JsonSchemaForm';
+// eslint-disable-next-line import/namespace
+var getStepByName = function (name) { return schemas[name]; };
+var validStepNames = Object.keys(schemas).filter(function (stepName) { var _a; return (_a = getStepByName(stepName).schemas) === null || _a === void 0 ? void 0 : _a.length; });
+function JsonSchemaFormStory(_a) {
+    var _b;
+    var _c = _a.stepName, stepName = _c === void 0 ? '' : _c;
+    var schema = (_b = getStepByName(stepName).schemas) === null || _b === void 0 ? void 0 : _b[0];
+    return (_jsx(JsonSchemaForm, { schema: schema !== null && schema !== void 0 ? schema : {}, submitted: false, disabled: false, onPersistAsync: action('onPersistAsync'), onChange: action('onChange'), onEvent: action('onEvent'), onLog: action('onLog') }, JSON.stringify(schema)));
+}
+var meta = {
+    title: 'Dev Tools/JsonSchemaForm',
+    component: JsonSchemaFormStory
+};
+export var Default = {
+    argTypes: {
+        stepName: {
+            label: 'Initial Schema from step',
+            control: 'select',
+            options: validStepNames
+        }
+    },
+    args: { stepName: validStepNames[validStepNames.length - 1] },
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export default meta;

package/build/legacy/dynamicFlow/stories/dev-tools/RefreshOnChange.story.js

@@ -0,0 +1,194 @@
+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";
+import { action } from '@storybook/addon-actions';
+import DynamicFlow from '../../DynamicFlow';
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import { abortableDelay } from '../../../../test-utils/fetch-utils';
+var getRespondWithDelay = function (delayMs) { return function (_, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var customStep;
+    var _a, _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0:
+                customStep = __assign(__assign({}, refreshedStep), { model: JSON.parse((_b = (_a = init === null || init === void 0 ? void 0 : init.body) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '{}') });
+                return [4 /*yield*/, abortableDelay(delayMs, (_c = init === null || init === void 0 ? void 0 : init.signal) !== null && _c !== void 0 ? _c : null)];
+            case 1:
+                _d.sent();
+                return [2 /*return*/, respondWith(customStep)];
+        }
+    });
+}); }; };
+var httpClient = getMockHttpClient({
+    '/submit': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWith(initialStep)];
+    }); }); },
+    '/refresh': getRespondWithDelay(0),
+    '/refresh-with-delay': getRespondWithDelay(2000),
+    '/persist': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWith({ token: '123' })];
+    }); }); }
+});
+export default {
+    component: DynamicFlow,
+    title: 'Dev Tools/Features/Refresh On Change',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function RefreshOnChange() {
+    return renderWithStep(initialStep);
+}
+var renderWithStep = function (step) { return (_jsx(DynamicFlow, { 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*/, httpClient(input, init)];
+        });
+    }); }, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: action('onEvent'), onLog: action('onLog') })); };
+var objectSchemaProps = {
+    name: {
+        title: 'Full name',
+        type: 'string',
+        refreshStepOnChange: true
+    },
+    colour: {
+        title: 'Favourite colour',
+        oneOf: [
+            { title: 'Red', "const": 'red' },
+            { title: 'Blue', "const": 'blue' },
+            { title: 'Yellow', "const": 'yellow' },
+            { title: 'Green', "const": 'green' },
+        ],
+        refreshStepOnChange: true
+    },
+    age: {
+        title: 'Age',
+        type: 'integer',
+        refreshFormUrl: '/refresh-with-delay',
+        description: 'This field has a delayed refresh',
+        refreshStepOnChange: true
+    },
+    tnc: {
+        title: 'Terms and conditions',
+        type: 'boolean',
+        refreshStepOnChange: true
+    },
+    'credit-card-number': {
+        title: 'Credit card number',
+        type: 'string',
+        persistAsync: {
+            url: '/persist',
+            method: 'POST',
+            param: 'credit-card-number',
+            idProperty: 'token',
+            schema: {
+                description: 'This field will trigger persist async but not refresh on change',
+                title: 'Credit Card Number',
+                type: 'string',
+                control: 'numeric'
+            }
+        }
+    }
+};
+var initialStep = {
+    id: 'Features/Refresh on Change',
+    title: 'Refresh on Change Feature',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['name', 'colour', 'age', 'float', 'tnc', 'credit-card-number'],
+            properties: __assign(__assign({}, objectSchemaProps), { float: {
+                    title: 'Float',
+                    description: 'This field will disappear after refresh on change',
+                    type: 'number',
+                    refreshStepOnChange: true
+                } })
+        },
+    ],
+    layout: [
+        { type: 'paragraph', text: 'This step will refresh when any of the fields are changed' },
+        {
+            type: 'form',
+            schemaId: '#schema'
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: { url: '/submit' }
+        },
+    ],
+    refreshUrl: '/refresh'
+};
+var refreshedStep = {
+    id: 'Features/Refresh on Change',
+    title: 'Step refreshed!',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['name', 'colour', 'age', 'tnc', 'credit-card-number'],
+            properties: objectSchemaProps
+        },
+    ],
+    layout: [
+        { type: 'paragraph', text: 'This step will refresh when any of the fields are changed' },
+        {
+            type: 'form',
+            schemaId: '#schema'
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: { url: '/submit' }
+        },
+    ],
+    refreshUrl: '/refresh'
+};

package/build/legacy/dynamicFlow/stories/dev-tools/SearchFeature.story.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 __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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable react/forbid-dom-props */
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { features } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../../DynamicFlow';
+import { abortableDelay } from '../../../../test-utils/fetch-utils';
+var storyMap = {};
+var group = 'Dev Tools';
+storyMap[group] || (storyMap[group] = storiesOf("".concat(group, "/Features/Search"), module).addParameters({
+    chromatic: { disableSnapshot: true }
+}));
+storyMap[group].add('Search', function () { return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ style: { display: 'flex', justifyContent: 'center' } }, { children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." })] }) })), _jsx(DynamicFlow, { flowId: "storybook", initialStep: features.search, httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "search")] })); });
+var httpClient = function (input, init) {
+    var _a;
+    action('httpClient')(input, init);
+    var query = (init === null || init === void 0 ? void 0 : init.method) === 'POST'
+        ? Object.values(JSON.parse(init.body))[0]
+        : String(input).split('=')[1];
+    var signal = (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null;
+    if (query === 'nothing') {
+        return abortableDelay(1000, signal).then(function () {
+            return Promise.resolve(new Response(JSON.stringify({ results: [] })));
+        });
+    }
+    if (query === 'error') {
+        return abortableDelay(1000, signal).then(function () {
+            return Promise.resolve(new Response(null, { status: 500 }));
+        });
+    }
+    if (String(input).startsWith('/search')) {
+        var delay = query.length <= 3 ? 2000 : 1000;
+        return abortableDelay(delay, signal).then(function () {
+            return Promise.resolve(new Response(JSON.stringify({ results: getFakeSearchResults(query) })));
+        });
+    }
+    if (String(input).startsWith('/more-search')) {
+        return abortableDelay(1000, signal).then(function () {
+            return Promise.resolve(new Response(JSON.stringify({ results: getMoreFakeSearchResults(query) })));
+        });
+    }
+    return fetch(input, init);
+};
+var getFakeSearchResults = function (query) { return __spreadArray(__spreadArray([], Array(3)
+    .fill(null)
+    .map(function (_, index) { return ({
+    type: 'action',
+    title: "Result #".concat(index + 1, " for ").concat(decodeURIComponent(query)),
+    description: "This is a search result for ".concat(decodeURIComponent(query), ". The type is \"action\"."),
+    icon: { name: 'building' },
+    value: {
+        url: "/next-step?result=".concat(index + 1),
+        method: 'GET'
+    }
+}); }), true), [
+    {
+        type: 'search',
+        title: "Search for \"more ".concat(decodeURIComponent(query), "\""),
+        description: "Search for \"get more ".concat(decodeURIComponent(query), "\" description. This is a search result using GET method."),
+        icon: { name: 'search' },
+        value: {
+            url: '/more-search',
+            method: 'GET',
+            param: 'query',
+            query: "get more ".concat(decodeURIComponent(query))
+        }
+    },
+    {
+        type: 'search',
+        title: "Search for \"more ".concat(decodeURIComponent(query), "\""),
+        description: "Search for \"post more ".concat(decodeURIComponent(query), "\" description. This is a search result using POST method."),
+        icon: { name: 'search' },
+        value: {
+            url: '/more-search',
+            method: 'POST',
+            param: 'query',
+            query: "post more ".concat(decodeURIComponent(query))
+        }
+    },
+], false); };
+var getMoreFakeSearchResults = function (query) {
+    return Array(3)
+        .fill(null)
+        .map(function (_, index) { return ({
+        type: 'action',
+        title: "Another result for \"".concat(decodeURIComponent(query), "\" - ").concat(index + 1),
+        description: "Description for this thing.",
+        icon: { name: 'cog' },
+        value: {
+            url: "/next-step?result=".concat(index + 1),
+            method: 'GET'
+        }
+    }); });
+};

package/build/legacy/dynamicFlow/stories/dev-tools/ServerTest.story.js

@@ -0,0 +1,44 @@
+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 { makeHttpClient } from '../../../../common/makeHttpClient';
+import DynamicFlow from '../..';
+var customFetch = makeHttpClient('http://localhost:8888/');
+var httpClient = function (input, init) {
+    console.log('customFetch', input, init);
+    // Add the no-cors header before making the request
+    return customFetch(input, __assign({}, init));
+};
+export default {
+    component: DynamicFlow,
+    title: 'Dev Tools/Examples/Server Test',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    },
+    argTypes: {
+        persistAsync: {
+            options: ['succeed', 'failGenerically', 'failValidation'],
+            type: 'select',
+            defaultValue: 'succeed'
+        }
+    }
+};
+export function Basic() {
+    var initialAction = { method: 'GET', url: 'http://localhost:8888' };
+    return (_jsx(DynamicFlow, { flowId: "demo-app-flow", initialAction: initialAction, httpClient: httpClient, onCompletion: function (result) {
+            console.log('Flow exited with', result);
+        }, onEvent: function (name, props) {
+            console.log('🔈 ', name, " with ".concat(JSON.stringify(props)));
+        }, onError: function (error, statusCode) {
+            console.error('Flow Error:', error, 'status code', statusCode);
+        } }));
+}