@wise/dynamic-flow-client 5.12.1 → 5.13.0-experimental-13d828c

package/build/stories/spec/step/features/ErrorHandling.story.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { fixtureHttpClient } from '../../../utils/fixtureHttpClient';
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Features/Error Handling',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function ErrorOnSubmission() {
-    const step = getBasicStep();
-    return renderWithStep(step, getHttpClient());
-}
-export function StepWithErrors() {
-    const step = getGlobalErrorStep();
-    return renderWithStep(step);
-}
-const getHttpClient = () => getMockHttpClient({
-    '/submit': async () => 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 }),
-});
-const renderWithStep = (step, httpClient = fixtureHttpClient) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
-        action('onError');
-        console.error(error);
-    } }));
-const getBasicStep = () => ({
-    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',
-            },
-        },
-    ],
-});
-const getGlobalErrorStep = () => (Object.assign(Object.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/stories/spec/step/features/External.story.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { respondWith } from '../../../../test-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Features/External',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function ExternalInInitialStep() {
-    return renderWithStep(stepWithExternal);
-}
-export function ExternalInSecondStep() {
-    return renderWithStep(stepWithSubmission);
-}
-const httpClient = async (input, init) => {
-    action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
-    switch (input.toString()) {
-        case '/external':
-            return respondWith(stepWithExternal);
-        case '/skip':
-            return respondWith(stepWithSkipMessage);
-        default:
-            return fetch(input, init);
-    }
-};
-const renderWithStep = (step) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, features: { nativeBack: true }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
-        action('onError');
-        console.error(error);
-    } }));
-const stepWithSubmission = {
-    id: 'step-id-0',
-    title: 'Initial Step',
-    schemas: [],
-    layout: [
-        {
-            type: 'paragraph',
-            align: 'center',
-            text: 'The next step will open an external link.',
-        },
-        {
-            type: 'button',
-            title: 'Go to next step',
-            behavior: { type: 'action', action: { url: '/external' } },
-        },
-    ],
-};
-const stepWithExternal = {
-    id: 'step-id-1',
-    title: 'Step with External',
-    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`,
-        },
-        {
-            type: 'button',
-            control: 'tertiary',
-            title: 'Skip',
-            behavior: { type: 'action', action: { url: '/skip' } },
-        },
-    ],
-};
-const stepWithSkipMessage = {
-    id: 'step-id-2',
-    title: 'Step with Skip Message',
-    schemas: [],
-    layout: [
-        {
-            type: 'paragraph',
-            align: 'center',
-            text: 'You have skipped. You can go back to open the external link, but manually.',
-        },
-    ],
-};

package/build/stories/spec/step/features/Polling.story.js

@@ -1,108 +0,0 @@
-import { action } from 'storybook/actions';
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Features/Polling',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {},
-};
-export function PollingSuccess() {
-    let attempts = 0;
-    const httpClient = getMockHttpClient({
-        '/polling/1234': async () => {
-            action('attempts!')(attempts);
-            if (attempts <= 2) {
-                attempts += 1;
-                return respondWith({}, { status: 200 });
-            }
-            action('attempts!')(attempts, 'going to respond with step');
-            return respondWith({
-                id: 'hello',
-                title: 'Direct Success',
-                description: 'Direct success after polling. Response is a step.',
-                layout: [],
-                schemas: [],
-            }, { status: 200, headers: { 'X-Df-Response-Type': 'step' } });
-        },
-    });
-    return renderWithStep(step, httpClient);
-}
-export function PollingActionResponse() {
-    let attempts = 0;
-    const httpClient = getMockHttpClient({
-        '/polling/1234': async () => {
-            if (attempts <= 2) {
-                attempts += 1;
-                return respondWith({}, { status: 200 });
-            }
-            return respondWith({ action: { id: 'polling-action-response', url: '/success' } }, { status: 200 });
-        },
-        '/success': async () => respondWith({
-            id: 'hello',
-            title: 'Success after polling',
-            description: 'ActionResponse submitted to /success which returned this step.',
-            layout: [],
-            schemas: [],
-        }),
-    });
-    return renderWithStep(step, httpClient);
-}
-export function PollingFails() {
-    let attempts = 0;
-    const httpClient = getMockHttpClient({
-        '/polling/1234': async () => {
-            if (attempts <= 5) {
-                attempts += 1;
-                return respondWith({}, { status: 200 });
-            }
-            return respondWith({ action: { url: '/success' } }, { status: 200 });
-        },
-        '/success': async () => respondWith({
-            id: 'hello',
-            title: 'success',
-            layout: [],
-            schemas: [],
-        }),
-    });
-    return renderWithStep(step, httpClient);
-}
-const step = {
-    id: 'Features/Polling',
-    title: 'Polling Feature',
-    polling: {
-        url: '/polling/1234',
-        delay: 2,
-        maxAttempts: 5,
-        onError: {
-            action: { url: '/failure', data: { error: 'Polling failed' } },
-        },
-    },
-    layout: [
-        {
-            type: 'paragraph',
-            align: 'center',
-            text: 'We are waiting for something to happen.',
-        },
-        { type: 'loading-indicator', margin: 'xl' },
-        {
-            type: 'button',
-            title: 'Back',
-            action: {
-                type: 'link',
-                url: '/back',
-            },
-        },
-    ],
-    schemas: [
-        {
-            $id: '#unreferenced-schema',
-            const: {
-                unreferencedKey: 'unreferenced value',
-            },
-        },
-    ],
-};

package/build/stories/spec/step/features/RefreshAfter.story.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import { respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Features/Refresh After',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function RefreshAfter() {
-    return renderWithStep(getMenuStep());
-}
-const mockHttpClient = async (input, init) => {
-    action('httpClient')(input, init);
-    switch (input) {
-        case '/menu':
-            return respondWith(getMenuStep());
-        case '/future-5':
-            return respondWith(getRefreshAfterStep('This step will refresh in 5 seconds', '/menu', getISO8601DateString(5000)));
-        case '/past-40':
-            return respondWith(getRefreshAfterStep('This step will refresh immediately (well, in 1 second)', '/menu', getISO8601DateString(-40000)));
-        case '/banana':
-            return respondWith(getRefreshAfterStep('This should throw', '/menu', 'banana'));
-        case '/undefined':
-        default:
-            return respondWith(getRefreshAfterStep('This step should not refresh. Now you have to restart the story.', '/menu', undefined));
-    }
-};
-const renderWithStep = (step) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: mockHttpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
-        action('onError');
-        console.error(error);
-    } }));
-const getMenuStep = () => ({
-    id: 'refresh-after-menu',
-    title: 'Refresh After Menu',
-    description: 'This is the menu step',
-    schemas: [],
-    layout: [
-        {
-            type: 'decision',
-            options: [
-                {
-                    title: 'Future 5',
-                    description: 'This step will refresh in 5 seconds',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/future-5' },
-                    },
-                },
-                {
-                    title: 'Past 40',
-                    description: 'This step will refresh immediately',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/past-40' },
-                    },
-                },
-                {
-                    title: 'Invalid date string',
-                    description: 'This step should throw',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/banana' },
-                    },
-                },
-                {
-                    title: 'Undefined',
-                    description: 'This step will not refresh.',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/undefined' },
-                    },
-                },
-            ],
-        },
-    ],
-});
-const getRefreshAfterStep = (description, refreshUrl, refreshAfter) => ({
-    id: 'refresh-after-step',
-    title: 'Refresh After Step',
-    description,
-    schemas: [],
-    layout: [],
-    refreshUrl,
-    refreshAfter,
-});
-const getISO8601DateString = (ms) => {
-    const date = new Date(Date.now() + ms);
-    return date.toISOString();
-};

package/build/stories/spec/step/features/refresh/Refresh.story.js

@@ -1,258 +0,0 @@
-import { abortableDelay, getMockHttpClient, respondWith, } from '../../../../../test-utils/fetch-utils';
-import DynamicFlowWise from '../../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../../utils/render-utils';
-const getRespondWithDelay = (delayMs) => async (_, init) => {
-    var _a, _b, _c;
-    const customStep = Object.assign(Object.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 : '{}') });
-    await abortableDelay(delayMs, (_c = init === null || init === void 0 ? void 0 : init.signal) !== null && _c !== void 0 ? _c : null);
-    return respondWith(customStep);
-};
-const httpClient = getMockHttpClient({
-    '/submit': async () => respondWith(Object.assign(Object.assign({}, initialStep), { id: String(Math.random()) })),
-    '/refresh': getRespondWithDelay(0),
-    '/refresh-with-delay': getRespondWithDelay(2000),
-    '/refresh-multi': async (_, init) => {
-        var _a, _b;
-        await abortableDelay(100, init === null || init === void 0 ? void 0 : init.signal);
-        return respondWith(Object.assign(Object.assign({}, refreshedMultiStep), { 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 : '{}') }));
-    },
-    '/submit-multi': async () => respondWith(Object.assign(Object.assign({}, initialMultiStep), { id: String(Math.random()) })),
-    '/persist': async () => respondWith({ token: '123' }),
-});
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Features/Refresh On Change',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function Refresh() {
-    return renderWithStep(initialStep, httpClient);
-}
-export function RefreshWithMultiFileUpload() {
-    return renderWithStep(initialMultiStep, httpClient);
-}
-const objectSchemaProps = {
-    name: {
-        title: 'Full name',
-        type: 'string',
-        refreshFormUrl: '/refresh-with-delay',
-        description: 'This field has a delayed refresh',
-        refreshStepOnChange: true,
-    },
-    email: {
-        title: 'Email (with pattern validation)',
-        type: 'string',
-        pattern: "\\s*[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+\\s*",
-        description: 'This field has a delayed refresh',
-        refreshStepOnChange: true,
-    },
-    sortCode: {
-        title: 'Sort code',
-        type: 'string',
-        displayFormat: '**-**-**',
-        placeholder: '12-34-56',
-        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',
-        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',
-            },
-        },
-    },
-};
-const initialStep = {
-    id: 'Features/Refresh on Change',
-    title: 'Refresh on Change Feature',
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: [
-                'name',
-                'email',
-                'colour',
-                'age',
-                'float',
-                'tnc',
-                'sortCode',
-                'credit-card-number',
-            ],
-            properties: Object.assign(Object.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',
-};
-const refreshedStep = {
-    id: 'Features/Refresh on Change',
-    title: 'Step refreshed!',
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['name', 'email', 'colour', 'age', 'tnc', 'sortCode', '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: 'alert',
-            context: 'warning',
-            markdown: 'This is a refreshed step',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            action: { url: '/submit' },
-        },
-    ],
-    refreshUrl: '/refresh',
-};
-const arraySchema = {
-    type: 'array',
-    title: 'This field has persist async but no refresh on change',
-    maxItems: 5,
-    addItemTitle: 'Add',
-    editItemTitle: 'Edit',
-    items: {
-        $id: '#id',
-        type: 'string',
-        persistAsync: {
-            method: 'POST',
-            url: '/persist',
-            param: 'param',
-            idProperty: 'token',
-            schema: {
-                type: 'blob',
-                source: 'file',
-                title: 'Upload label',
-                description: 'PNG, JPG, or PDF, less than 5mb',
-                accepts: ['image/png', 'image/jpg', 'application/pdf'],
-                maxSize: 5242000,
-                validationMessages: {
-                    maxSize: 'Your file is too large',
-                },
-            },
-        },
-    },
-};
-const refreshedMultiStep = {
-    id: 'multi-step',
-    title: 'Step refreshed!',
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['array'],
-            properties: {
-                array: arraySchema,
-            },
-        },
-    ],
-    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-multi' },
-        },
-    ],
-    refreshUrl: '/refresh-multi',
-};
-const initialMultiStep = {
-    id: 'multi-step',
-    title: 'Refresh on Change with MultiFileUpload',
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['otherField', 'array', 'anotherField'],
-            properties: {
-                array: arraySchema,
-                otherField: {
-                    type: 'string',
-                    title: 'A field that will disappear after refresh on change',
-                    refreshStepOnChange: true,
-                },
-                anotherField: {
-                    type: 'string',
-                    title: 'A second field that will disappear after refresh on change',
-                    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-multi' },
-        },
-    ],
-    refreshUrl: '/refresh-multi',
-};