@wise/dynamic-flow-client 5.8.1 → 5.9.0

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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,258 @@
+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',
+};