@wise/dynamic-flow-client 5.30.1 → 5.30.2-experimental-949e5e5

package/build/stories/spec/layouts/button/Button.story.js

@@ -1,111 +0,0 @@
-import { action } from 'storybook/actions';
-import { respondWithDelay } from '../../../../test-utils/fetch-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep, renderWithStepAndOverrides } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Button',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const step = {
-    id: 'Buttons',
-    title: 'Buttons with Loader',
-    schemas: [],
-    layout: [
-        {
-            type: 'paragraph',
-            text: 'If we click a button, and it takes a while for the server to respond, we should see a spinner on to indicate the loading state on the button that was clicked. All buttons should be disabled anyway.',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-        {
-            type: 'button',
-            control: 'address-validation',
-            title: 'Other',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-        {
-            type: 'button',
-            title: 'Exit',
-            behavior: {
-                type: 'action',
-                action: {
-                    exit: true,
-                },
-            },
-        },
-    ],
-};
-const stepWithValidation = {
-    id: 'Buttons',
-    title: 'Buttons with Loader',
-    schemas: [
-        {
-            $id: '#form',
-            type: 'string',
-            title: 'Enter text here to continue',
-            minLength: 1,
-        },
-    ],
-    layout: [
-        {
-            type: 'paragraph',
-            text: 'If we click a button, and it takes a while for the server to respond, we should see a spinner on to indicate the loading state on the button that was clicked. All buttons should be disabled anyway.',
-        },
-        {
-            type: 'form',
-            schemaId: '#form',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-        {
-            type: 'button',
-            title: 'Other',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-        {
-            type: 'button',
-            title: 'Modal 1',
-            behavior: {
-                type: 'modal',
-                title: 'Modal Title',
-                content: [{ type: 'paragraph', text: 'This is the modal content.' }],
-            },
-        },
-    ],
-};
-export const Buttons = () => renderWithStep(step, httpClient);
-export const ButtonsWithLoader = () => renderWithStep(stepWithValidation, httpClient);
-export const ButtonsWithFlowContinuation = () => renderWithStepAndOverrides(step, { features: { continueAfterCompletion: true } });
-const httpClient = async (input, init) => {
-    action('httpClient')(input, init);
-    return respondWithDelay({ error: 'Generic error message' }, 5000, { status: 500 });
-};

package/build/stories/spec/layouts/button/PinnedButton.story.js

@@ -1,81 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { Modal, Button } from '@transferwise/components';
-import { useState } from 'react';
-import { renderWithStepAndOverrides } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Button',
-    parameters: {
-        chromatic: {
-            delay: 2000,
-        },
-    },
-};
-const features = {
-    pinnedButtons: true,
-};
-export function PinnedButtons() {
-    return renderWithStepAndOverrides(getStep(20), { features });
-}
-export const PinnedButtonsMobileWeb = {
-    globals: { viewport: { value: 'mobile2' } },
-    render: () => renderWithStepAndOverrides(getStep(20), { features }),
-};
-export function PinnedButtonsInAModal() {
-    const [open, setOpen] = useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal" }), _jsx(Modal, { title: "Modal Title", open: open, body: renderWithStepAndOverrides(getStep(10), { features }), onClose: () => setOpen(false) })] }));
-}
-export const PinnedButtonsInAModalMobileWeb = {
-    globals: { viewport: { value: 'mobile2' } },
-    render: () => {
-        const [open, setOpen] = useState(true);
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal (large phone)" }), _jsx(Modal, { title: "Modal Title", open: open, body: renderWithStepAndOverrides(getStep(10), { features }), onClose: () => setOpen(false) })] }));
-    },
-};
-export function PinnedButtonsInAModalInAModal() {
-    const [openFirst, setOpenFirst] = useState(true);
-    const [openSecond, setOpenSecond] = useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpenFirst(true), children: "Open First Modal" }), _jsx(Modal, { title: "First Modal", open: openFirst, body: _jsx(Button, { onClick: () => setOpenSecond(true), children: "Open Second Modal" }), scroll: "content", onClose: () => setOpenFirst(false) }), _jsx(Modal, { title: "Second Modal", open: openSecond, body: renderWithStepAndOverrides(getStep(10), { features }), scroll: "content", onClose: () => setOpenSecond(false) })] }));
-}
-const getStep = (numberOfParagraphs) => ({
-    id: 'id',
-    title: 'Heading',
-    schemas: [],
-    layout: [
-        ...Array.from({ length: numberOfParagraphs }, () => ({
-            text: 'Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem.',
-            type: 'paragraph',
-        })),
-        {
-            type: 'button',
-            title: 'I am the first pinned button',
-            control: 'primary',
-            action: {
-                url: '/v2/accounts',
-                method: 'POST',
-            },
-            pinOrder: 0,
-        },
-        {
-            type: 'button',
-            title: 'I am the second',
-            context: 'negative',
-            control: 'secondary',
-            action: {
-                url: '/v2/accounts',
-                method: 'POST',
-            },
-            pinOrder: 1,
-        },
-        {
-            type: 'button',
-            title: 'I am not pinned',
-            control: 'tertiary',
-            action: {
-                url: '/v2/accounts',
-                method: 'POST',
-            },
-        },
-    ],
-});

package/build/stories/spec/response/ActionResponse.story.js

@@ -1,66 +0,0 @@
-import { getMockHttpClient, respondWith } from '../../../test-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Response',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {},
-};
-export function ActionResponse() {
-    const httpClient = getMockHttpClient({
-        '/action/1234': async () => respondWith({ action: { url: '/success', data: { actionResponse: 'Action response action.data' } } }, { status: 200 }),
-        '/success': async () => respondWith(Object.assign(Object.assign({}, initialStep), { title: 'Success, try again!' })),
-    });
-    return renderWithStep(initialStep, httpClient);
-}
-const initialStep = {
-    id: 'action-response',
-    title: 'Action Response',
-    layout: [
-        {
-            type: 'box',
-            width: 'md',
-            border: true,
-            components: [
-                {
-                    type: 'form',
-                    schemaId: '#referenced-schema',
-                },
-                {
-                    type: 'button',
-                    title: 'Direct Success ("/success")',
-                    control: 'primary',
-                    action: { url: '/success', data: { direct: 'direct success button action data' } },
-                },
-                {
-                    type: 'button',
-                    title: 'Action Response ("/action/1234")',
-                    control: 'primary',
-                    action: { url: '/action/1234' },
-                },
-                { type: 'divider' },
-                {
-                    type: 'markdown',
-                    content: 'You can inspect the payload of every request using the Storybook "Actions" panel.\n\nWe expect the schema values to be part of the payload when triggering an action from a button.\n\nBut when the action is triggered as a result of an action response, only the `action.data` should be in the payload.',
-                },
-            ],
-        },
-    ],
-    schemas: [
-        {
-            $id: '#unreferenced-schema',
-            const: { unreferenced: 'schema-value' },
-        },
-        {
-            $id: '#referenced-schema',
-            type: 'object',
-            displayOrder: ['name'],
-            properties: {
-                name: { type: 'string', title: 'Name', default: 'John Doe' },
-            },
-        },
-    ],
-};

package/build/stories/spec/schemas/InlineAlert.story.js

@@ -1,134 +0,0 @@
-import { expect } from 'storybook/test';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/InlineAlert',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-const inlineAlertMediaStep = {
-    id: 'inline-alert-media',
-    title: 'Inline alert media',
-    schemas: [
-        {
-            $id: '#currency',
-            type: 'string',
-            title: 'Choose a currency',
-            control: 'radio-item',
-            oneOf: [
-                {
-                    title: 'EUR',
-                    const: 'EUR',
-                    inlineAlert: {
-                        content: 'You are all set to travel!',
-                        context: 'positive',
-                        media: {
-                            type: 'avatar',
-                            content: [
-                                { type: 'uri', uri: 'urn:wise:icons:suitcase' },
-                                { type: 'uri', uri: 'urn:wise:icons:bank' },
-                            ],
-                            accessibilityDescription: 'Travel ready',
-                        },
-                    },
-                },
-                {
-                    title: 'GBP',
-                    const: 'GBP',
-                    inlineAlert: {
-                        content: 'Icon image media uses the provided icon.',
-                        context: 'neutral',
-                        media: {
-                            type: 'image',
-                            uri: 'urn:wise:icons:bank',
-                            accessibilityDescription: 'Bank details ready',
-                        },
-                    },
-                },
-                {
-                    title: 'USD',
-                    const: 'USD',
-                    inlineAlert: {
-                        content: 'An unsupported first avatar entry falls back to the default icon.',
-                        context: 'warning',
-                        media: {
-                            type: 'avatar',
-                            content: [
-                                { type: 'text', text: 'USD' },
-                                { type: 'uri', uri: 'urn:wise:icons:bank' },
-                            ],
-                            accessibilityDescription: 'Unsupported text avatar',
-                        },
-                    },
-                },
-                {
-                    title: 'AUD',
-                    const: 'AUD',
-                    inlineAlert: {
-                        content: 'Alerts without media keep their default icon.',
-                        context: 'negative',
-                    },
-                },
-                {
-                    title: 'JPY',
-                    const: 'JPY',
-                    inlineAlert: {
-                        content: 'Non-icon image media falls back to the default icon.',
-                        context: 'proposition',
-                        media: {
-                            type: 'image',
-                            uri: 'https://example.com/inline-alert.png',
-                            accessibilityDescription: 'Unsupported illustration',
-                        },
-                    },
-                },
-            ],
-        },
-    ],
-    layout: [{ type: 'form', schemaId: '#currency' }],
-};
-const checkboxMediaStep = {
-    id: 'checkbox-inline-alert-media',
-    title: 'Checkbox inline alert media',
-    schemas: [
-        {
-            $id: '#confirmation',
-            type: 'boolean',
-            control: 'checkbox-item',
-            title: 'Confirm payment details',
-            description: 'This inline alert is rendered through a checkbox ListItem.',
-            inlineAlert: {
-                content: 'Your payment details are ready to confirm.',
-                context: 'positive',
-                media: {
-                    type: 'image',
-                    uri: 'urn:wise:icons:bank',
-                    accessibilityDescription: 'Bank icon',
-                },
-            },
-        },
-    ],
-    layout: [{ type: 'form', schemaId: '#confirmation' }],
-};
-export const MediaAndFallbacks = {
-    render: () => renderWithStep(inlineAlertMediaStep),
-    play: async ({ canvas }) => {
-        await expect(canvas.getByTestId('suitcase-icon')).toBeInTheDocument();
-        await expect(canvas.getByLabelText('Travel ready')).toBeInTheDocument();
-        await expect(canvas.getByTestId('bank-icon')).toBeInTheDocument();
-        await expect(canvas.getByLabelText('Bank details ready')).toBeInTheDocument();
-        await expect(canvas.queryByLabelText('Unsupported illustration')).not.toBeInTheDocument();
-        await expect(canvas.queryByLabelText('Unsupported text avatar')).not.toBeInTheDocument();
-        await expect(canvas.getAllByTestId('status-icon')).toHaveLength(2);
-    },
-};
-export const CheckboxWithCustomMedia = {
-    render: () => renderWithStep(checkboxMediaStep),
-    play: async ({ canvas }) => {
-        await expect(canvas.getByText('Your payment details are ready to confirm.')).toBeInTheDocument();
-        await expect(canvas.getByTestId('bank-icon')).toBeInTheDocument();
-        await expect(canvas.queryByTestId('status-icon')).not.toBeInTheDocument();
-    },
-};

package/build/stories/spec/schemas/MultiSelect.story.js

@@ -1,206 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/MultiSelect',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-export function MultiSelect() {
-    return renderWithStep(getStep(undefined));
-}
-export function InlineMultiSelect() {
-    return renderWithStep(getStep('inline'));
-}
-export function InlineCheckboxMultiSelect() {
-    return renderWithStep(getStep('inline-checkbox-group'));
-}
-export function InlineCheckboxMultiSelect2() {
-    return renderWithStep({
-        id: 'multi-select',
-        title: 'Select the statements that apply',
-        layout: [
-            {
-                type: 'form',
-                schemaId: '#schema',
-                margin: 'sm',
-            },
-            { type: 'button', action: { url: '/cancel' }, title: 'Cancel transfer', control: 'primary' },
-            {
-                type: 'button',
-                action: { url: '/continue' },
-                title: 'Continue',
-                control: 'secondary-neutral',
-            },
-        ],
-        schemas: [
-            {
-                $id: '#schema',
-                type: 'array',
-                control: 'inline-checkbox-group',
-                validationMessages: {
-                    required: 'Please select at least one option. (required)',
-                },
-                addItemTitle: '',
-                editItemTitle: '',
-                items: {
-                    title: 'Select the statements that apply', // not visible
-                    oneOf: [
-                        {
-                            title: "I haven't seen the property in person",
-                            const: 'not-seen',
-                        },
-                        {
-                            title: 'I have to pay quickly to take the property off the market',
-                            const: 'pay-quickly',
-                        },
-                        {
-                            title: 'The property is a good deal compared with others in the area',
-                            const: 'good-deal',
-                        },
-                        {
-                            title: 'None of the above',
-                            const: 'none',
-                        },
-                    ],
-                },
-            },
-        ],
-        model: {},
-    });
-}
-const getStep = (arraySchemaControl) => ({
-    id: 'multi-select',
-    title: 'A multiselect example',
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#schema',
-        },
-        { type: 'button', action: { url: '/submit' }, title: 'Submit' },
-    ],
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['arrayField'],
-            required: ['arrayField'],
-            properties: {
-                arrayField: {
-                    validationMessages: {
-                        required: 'Please select at least two options. (required)',
-                    },
-                    type: 'array',
-                    control: arraySchemaControl,
-                    title: 'Select between two and four options',
-                    minItems: 2,
-                    maxItems: 4,
-                    description: 'This is an example of an array schema with const options.',
-                    addItemTitle: '',
-                    editItemTitle: '',
-                    tags: ['filtered'],
-                    validationAsync: {
-                        url: '/validate',
-                        method: 'POST',
-                        param: 'value',
-                    },
-                    items: {
-                        title: 'Select with few options',
-                        description: 'A description of the select.',
-                        oneOf: [
-                            {
-                                title: 'EUR',
-                                description: 'Euro',
-                                icon: { name: 'flag-eur' },
-                                const: 'EUR',
-                                inlineAlert: {
-                                    context: 'info',
-                                    content: 'This is an inline alert',
-                                },
-                                supportingValues: {
-                                    value: '0.05%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                            {
-                                title: 'GBP',
-                                description: 'British pound',
-                                icon: { name: 'flag-gbp' },
-                                const: 'GBP',
-                                disabled: true,
-                                supportingValues: {
-                                    value: '0.00%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                            {
-                                title: 'USD',
-                                description: 'US dollar',
-                                icon: { name: 'flag-usd' },
-                                const: 'USD',
-                                supportingValues: {
-                                    value: '0.08%',
-                                    subvalue: 'Fee',
-                                },
-                                inlineAlert: {
-                                    context: 'warning',
-                                    content: 'This is a warning inline alert',
-                                },
-                            },
-                            {
-                                title: 'AUD',
-                                description: 'Australian dollar',
-                                icon: { name: 'flag-aud' },
-                                const: 'AUD',
-                                additionalText: 'Additional text can be long in Australia.',
-                                supportingValues: {
-                                    value: '0.08%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                            {
-                                title: 'NZD',
-                                description: 'New Zealand dollar',
-                                icon: { name: 'flag-nzd' },
-                                const: 'NZD',
-                                supportingValues: {
-                                    value: '0.08%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                            {
-                                title: 'CNY',
-                                description: 'Chinese yuan',
-                                icon: { name: 'flag-cny' },
-                                const: 'CNY',
-                                supportingValues: {
-                                    value: '0.08%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                            {
-                                title: 'JPY',
-                                description: 'Japanese yen',
-                                icon: { name: 'flag-jpy' },
-                                const: 'JPY',
-                            },
-                            {
-                                title: 'HUF',
-                                description: 'Hungarian Forint',
-                                icon: { name: 'flag-huf' },
-                                const: 'HUF',
-                                supportingValues: {
-                                    value: '0.08%',
-                                    subvalue: 'Fee',
-                                },
-                            },
-                        ],
-                    },
-                },
-            },
-        },
-    ],
-    model: { arrayField: ['USD'] },
-    errors: { validation: { arrayField: 'This is an error message from the step' } },
-});