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

package/build/stories/spec/layouts/List.story.js

@@ -1,60 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-const meta = {
-    component: DynamicFlowWise,
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export default meta;
-export const Spotlight = {
-    args: {
-        previewCTA: 'unset',
-        description: 'Manage your account settings.',
-    },
-    argTypes: {
-        previewCTA: {
-            name: 'Preview with callToAction',
-            control: 'select',
-            options: ['unset', 'default', 'secondary'],
-        },
-        description: {
-            control: 'text',
-            description: 'Description applied to every list item.',
-        },
-    },
-    render: (args) => renderWithStep(getSpotlightStep(args)),
-};
-function getSpotlightStep({ previewCTA, description }) {
-    const hasCTA = previewCTA !== 'unset';
-    return {
-        id: 'spotlight',
-        title: '',
-        schemas: [],
-        layout: [
-            {
-                type: 'list',
-                control: 'spotlight',
-                tags: hasCTA ? ['fully-interactive'] : undefined,
-                items: [
-                    {
-                        title: 'Active Spotlight',
-                        tags: ['spotlight-active'],
-                    },
-                    {
-                        title: 'Inactive Spotlight',
-                        tags: ['spotlight-inactive'],
-                    },
-                    {
-                        title: 'No Spotlight Tag - Renders Inactive',
-                    },
-                ].map((item) => { var _a; return (Object.assign(Object.assign({}, item), { description, tags: [...((_a = item.tags) !== null && _a !== void 0 ? _a : []), ...(previewCTA === 'secondary' ? ['cta-secondary'] : [])], callToAction: hasCTA
-                        ? {
-                            title: 'Manage',
-                            behavior: { type: 'dismiss' },
-                        }
-                        : undefined })); }),
-            },
-        ],
-    };
-}

package/build/stories/spec/layouts/Modal.story.js

@@ -1,81 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Modal',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function Modal() {
-    return renderWithStep(initialStep);
-}
-const initialStep = {
-    id: 'Features/Modal',
-    title: 'Modal Layout',
-    schemas: [
-        {
-            $id: '#main-schema',
-            type: 'object',
-            required: ['country'],
-            displayOrder: ['country'],
-            properties: {
-                country: {
-                    title: 'Some very important question',
-                    type: 'string',
-                },
-            },
-        },
-        {
-            $id: '#modal-schema',
-            type: 'object',
-            displayOrder: ['name'],
-            properties: {
-                name: {
-                    title: 'Name',
-                    type: 'string',
-                },
-            },
-        },
-    ],
-    layout: [
-        {
-            type: 'box',
-            width: 'lg',
-            components: [
-                {
-                    type: 'modal',
-                    trigger: { title: 'Open the modal' },
-                    content: {
-                        components: [
-                            {
-                                type: 'form',
-                                schemaId: '#main-schema',
-                            },
-                            {
-                                type: 'paragraph',
-                                text: 'Welcome to our application. If you continue to browse and use this application, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern our relationship with you in relation to this application.',
-                            },
-                            {
-                                type: 'button',
-                                title: 'Submit in Modal',
-                                action: {
-                                    url: '/submit',
-                                    method: 'POST',
-                                },
-                            },
-                        ],
-                    },
-                },
-            ],
-        },
-        {
-            type: 'button',
-            title: 'Submit out of Modal',
-            action: {
-                url: '/submit',
-                method: 'POST',
-            },
-        },
-    ],
-};

package/build/stories/spec/layouts/Search.story.js

@@ -1,325 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import { abortableDelay } from '../../../test-utils/fetch-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { expect, userEvent, waitFor } from 'storybook/test';
-import { renderWithStep } from '../../utils/render-utils';
-const user = userEvent.setup();
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Search',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    decorators: [
-        (Story) => (_jsxs(_Fragment, { children: [_jsx("div", { 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("li", { children: "If your search term contains the word \"layout\", then the response will take 1 second and be a layout response" })] }) }), _jsx(Story, {})] })),
-    ],
-};
-const getSearchLayout = (overrides) => (Object.assign({ type: 'search', title: 'Search for something', hint: 'Try searching by star sign', url: '/search', method: 'GET', param: 'query', emptyMessage: 'No results found' }, overrides));
-const step = (searchLayout) => ({
-    id: 'search',
-    title: 'Search Layout',
-    schemas: [],
-    layout: [
-        {
-            type: 'box',
-            width: 'md',
-            margin: 'md',
-            components: [
-                {
-                    type: 'heading',
-                    text: 'Search',
-                },
-                searchLayout,
-            ],
-        },
-    ],
-});
-export const Search = {
-    render: () => renderWithStep(step(getSearchLayout()), httpClient),
-};
-export const SearchInline = {
-    render: () => renderWithStep(step(getSearchLayout({ control: 'inline' })), httpClient),
-};
-export const SearchInteraction = {
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-    render: () => renderWithStep(step(getSearchLayout()), httpClient),
-    play: async ({ canvas }) => {
-        await waitFor(async () => {
-            await expect(canvas.getByLabelText('Search for something')).toBeInTheDocument();
-        });
-        await user.type(canvas.getByLabelText('Search for something'), 'Baker');
-    },
-};
-export const SearchInlineInteraction = {
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-    render: () => renderWithStep(step(getSearchLayout({ control: 'inline' })), httpClient),
-    play: async ({ canvas }) => {
-        await waitFor(async () => {
-            await expect(canvas.getByRole('combobox')).toBeInTheDocument();
-        });
-        await user.click(canvas.getByRole('combobox'));
-        await user.keyboard('Baker');
-        await waitFor(async () => {
-            await expect(canvas.getAllByText(/Street/)[0]).toBeInTheDocument();
-        }, { timeout: 2000 });
-    },
-};
-export const SearchWithInitialLayout = {
-    render: () => renderWithStep(step(getSearchLayout({
-        emptyMessage: 'No results found (this should only show if there is a search query)',
-        initialState: {
-            type: 'layout',
-            content: [
-                { type: 'alert', markdown: 'This is the initial state', context: 'info' },
-                {
-                    type: 'image',
-                    content: {
-                        uri: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
-                    },
-                },
-            ],
-        },
-    })), httpClient),
-};
-export const SearchWithInitialResults = {
-    render: () => renderWithStep(step(getSearchLayout({
-        emptyMessage: 'No results found (this should only show if there is a search query)',
-        initialState: {
-            type: 'results',
-            results: [
-                {
-                    type: 'action',
-                    title: 'Initial Result 1',
-                    description: 'This is the first initial result',
-                    icon: { name: 'building' },
-                    value: {
-                        url: '/next-step?result=initial-1',
-                        method: 'GET',
-                    },
-                },
-                {
-                    type: 'action',
-                    title: 'Initial Result 2',
-                    description: 'This is the second initial result',
-                    icon: { name: 'building' },
-                    value: {
-                        url: '/next-step?result=initial-2',
-                        method: 'GET',
-                    },
-                },
-            ],
-        },
-    })), httpClient),
-};
-const httpClient = async (input, init) => {
-    var _a;
-    action('httpClient')(input, init);
-    if (typeof input !== 'string') {
-        return fetch(input, init);
-    }
-    const query = (init === null || init === void 0 ? void 0 : init.method) === 'POST'
-        ? Object.values(JSON.parse(init.body))[0]
-        : input.split('=')[1];
-    const signal = (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null;
-    if (query === 'nothing') {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(JSON.stringify({ results: [] })));
-    }
-    if (query === 'error') {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(null, { status: 500 }));
-    }
-    if (query.includes('layout')) {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(JSON.stringify({ type: 'layout', content: getLayoutResponse(query) })));
-    }
-    if (input.startsWith('/search')) {
-        const delay = query.length <= 3 ? 2000 : 1000;
-        await abortableDelay(delay, signal);
-        return Promise.resolve(new Response(JSON.stringify({ results: getFakeSearchResults(query) })));
-    }
-    if (input.startsWith('/more-search')) {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(JSON.stringify({ results: getMoreFakeSearchResults(query) })));
-    }
-    if (input.startsWith('/next-step')) {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(JSON.stringify(filledStep(decodeURIComponent(query)))));
-    }
-    if (input.startsWith('/initial')) {
-        await abortableDelay(1000, signal);
-        return Promise.resolve(new Response(JSON.stringify(step)));
-    }
-    return fetch(input, init);
-};
-const filledStep = (address) => ({
-    id: 'result-step',
-    title: 'Search Layout',
-    layout: [
-        {
-            type: 'box',
-            width: 'md',
-            margin: 'md',
-            components: [
-                {
-                    type: 'heading',
-                    text: 'Search',
-                },
-                {
-                    type: 'search',
-                    control: 'inline',
-                    title: 'Search for something',
-                    url: '/search',
-                    method: 'GET',
-                    param: 'query',
-                    emptyMessage: 'No results found',
-                },
-                {
-                    type: 'form',
-                    schemaId: '#address',
-                },
-                {
-                    type: 'button',
-                    action: {},
-                    title: 'Submit',
-                },
-            ],
-        },
-    ],
-    schemas: [
-        {
-            $id: '#address',
-            type: 'object',
-            displayOrder: ['line1'],
-            properties: {
-                line1: {
-                    type: 'string',
-                    title: 'Adress Line 1',
-                },
-                city: {
-                    type: 'string',
-                    title: 'City',
-                },
-                state: {
-                    type: 'string',
-                    title: 'State',
-                },
-            },
-        },
-    ],
-    model: {
-        line1: address,
-        city: 'London',
-    },
-});
-const getFakeSearchResults = (query) => {
-    const street = decodeURIComponent(query).split(' ')[0];
-    return [
-        ...Array(3)
-            .fill(null)
-            .map((_, index) => ({
-            type: 'action',
-            title: `${index + 1} ${street} Street`,
-            description: `This is a search result for ${street} Street, London. The type is "action".`,
-            icon: { name: 'building' },
-            value: {
-                url: `/next-step?result=${index + 1} ${street} Street`,
-                method: 'GET',
-            },
-        })),
-        {
-            type: 'search',
-            title: `${street} Road`,
-            description: `Search for "${street} Road, London". This is a search result using GET method.`,
-            icon: { name: 'search' },
-            value: {
-                url: '/more-search',
-                method: 'GET',
-                param: 'query',
-                query: `${street} Road`,
-            },
-        },
-        {
-            type: 'search',
-            title: `${street} Avenue`,
-            description: `Search for "${street} Avenue, London". This is a search result using POST method.`,
-            icon: { name: 'search' },
-            value: {
-                url: '/more-search',
-                method: 'POST',
-                param: 'query',
-                query: `${street} Avenue`,
-            },
-        },
-        {
-            type: 'search',
-            title: `${street} Boulevard`,
-            description: `Search for "${street} Avenue, London". This has no media.`,
-            value: {
-                url: '/more-search',
-                method: 'POST',
-                param: 'query',
-                query: `${street} Boulevard`,
-            },
-        },
-    ];
-};
-const getMoreFakeSearchResults = (query) => Array(3)
-    .fill(null)
-    .map((_, index) => ({
-    type: 'action',
-    title: `${index + 1} ${decodeURIComponent(query).replace('+', ' ')}`,
-    description: `Description for this thing.`,
-    icon: { name: 'cog' },
-    value: {
-        url: `/next-step?result=${index + 1} ${decodeURIComponent(query).replace('+', ' ')}`,
-        method: 'GET',
-    },
-}));
-const getLayoutResponse = (query) => [
-    {
-        type: 'markdown',
-        content: `You searched for ${query}, but we couldn't find anything, so here's some layouts`,
-    },
-    {
-        type: 'image',
-        content: {
-            uri: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
-        },
-    },
-    {
-        type: 'decision',
-        title: 'Here is some other ideas',
-        options: [
-            {
-                title: 'Go outside',
-                media: {
-                    content: [
-                        {
-                            uri: 'urn:wise:icons:beach',
-                            type: 'uri',
-                        },
-                    ],
-                    type: 'avatar',
-                },
-            },
-            {
-                title: 'Read a book',
-                media: {
-                    content: [
-                        {
-                            uri: 'urn:wise:icons:book',
-                            type: 'uri',
-                        },
-                    ],
-                    type: 'avatar',
-                },
-            },
-        ],
-    },
-];

package/build/stories/spec/layouts/Updatable.story.js

@@ -1,135 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Updatable',
-};
-export const Updatable = {
-    render: () => renderWithStepAndOverrides(initialStep, { httpClient }),
-};
-const initialStep = {
-    id: 'Updatable Layout',
-    title: 'Updatable Layout',
-    schemas: [
-        {
-            properties: {
-                name: {
-                    title: 'Name',
-                    type: 'string',
-                    default: 'blah blah blah',
-                    onChange: {
-                        eventName: 'refresh-updatable-layout',
-                        type: 'dispatch-event',
-                    },
-                },
-                sortCode: {
-                    title: 'Sort code',
-                    type: 'string',
-                    minLength: 6,
-                    onChange: {
-                        eventName: 'refresh-updatable-layout',
-                        type: 'dispatch-event',
-                    },
-                },
-                accountNumber: {
-                    title: 'Account number',
-                    type: 'string',
-                    minLength: 8,
-                    onChange: {
-                        eventName: 'refresh-updatable-layout',
-                        type: 'dispatch-event',
-                    },
-                },
-            },
-            displayOrder: ['name', 'sortCode', 'accountNumber'],
-            required: ['name', 'sortCode', 'accountNumber'],
-            $id: '#accountDetails',
-            type: 'object',
-        },
-    ],
-    layout: [
-        {
-            schemaId: '#accountDetails',
-            type: 'form',
-        },
-        {
-            baseRequest: {
-                url: 'updatableLayout/update',
-                method: 'POST',
-            },
-            trigger: {
-                eventName: 'refresh-updatable-layout',
-                type: 'on-event',
-            },
-            initialState: {
-                components: [],
-            },
-            onError: {
-                fallbackLayout: [
-                    {
-                        markdown: 'Unable to refresh the updatable container.',
-                        context: 'negative',
-                        type: 'alert',
-                    },
-                ],
-            },
-            type: 'updatable',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            behavior: { type: 'action', action: { url: '/' } },
-        },
-    ],
-    description: 'Type values in the form fields to trigger event-based updates in the updatable container.',
-};
-const getUpdateResponse = (body) => {
-    const { name, sortCode, accountNumber } = body;
-    if (!name || !sortCode || !accountNumber) {
-        return {
-            components: [],
-        };
-    }
-    return {
-        components: [
-            {
-                type: 'alert',
-                title: 'Warning!',
-                context: 'warning',
-                markdown: `Did you mean Bob Loblaw?`,
-                callToAction: {
-                    title: 'Yes',
-                    behavior: { type: 'action', action: { url: '/yes' } },
-                },
-                secondaryCallToAction: {
-                    title: 'No',
-                    behavior: { type: 'action', action: { url: '/no' } },
-                },
-            },
-        ],
-    };
-};
-const httpClient = async (input, init) => {
-    const url = input instanceof Request ? input.url : String(input);
-    const requestBody = ((init === null || init === void 0 ? void 0 : init.body) ? JSON.parse(init.body.toString()) : {});
-    if (url.includes('updatableLayout/update')) {
-        return new Response(JSON.stringify(getUpdateResponse(requestBody)), {
-            status: 200,
-            headers: {
-                'Content-Type': 'application/json',
-            },
-        });
-    }
-    if (url.includes('/yes')) {
-        return new Response(JSON.stringify(Object.assign(Object.assign({}, initialStep), { navigation: { stackBehavior: 'replace-current' }, model: Object.assign(Object.assign({}, requestBody), { name: 'Bob Loblaw' }) })), {
-            status: 200,
-        });
-    }
-    if (url.includes('/no')) {
-        return new Response(JSON.stringify(Object.assign(Object.assign({}, initialStep), { navigation: { stackBehavior: 'replace-current' }, model: Object.assign(Object.assign({}, requestBody), { name: 'blah blah blah' }) })), {
-            status: 200,
-        });
-    }
-    return new Response(null, { status: 404 });
-};

package/build/stories/spec/layouts/Upsell.story.js

@@ -1,55 +0,0 @@
-import { supportedMediaNames } from '@wise/dynamic-flow-renderers/src/UpsellRenderer';
-import { getMockHttpClient, respondWith } from '../../../test-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Upsell',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-const httpClient = getMockHttpClient({
-    '/submit': async () => respondWith({ error: 'Server-side global error', validation: 'Server-side error' }, { status: 400 }),
-    '/upsell-dismissed': async () => respondWith(null, { status: 200 }),
-});
-export function Interactive() {
-    return renderWithStep(getStep(['urn:wise:illustrations:globe', 'urn:wise:illustrations:backpack'], true), httpClient);
-}
-export function SupportedMediaNames() {
-    return renderWithStep(getStep(supportedMediaNames.map((name) => `urn:wise:illustrations:${name}`), false), httpClient);
-}
-const getStep = (urns, dismissable) => ({
-    id: 'step',
-    title: 'Upsell',
-    description: 'This step contains multiple upsells, but we should not have more than one on each step.',
-    layout: [
-        ...urns.map((urn) => ({
-            type: 'upsell',
-            text: `This is an upsell with a CTA with media uri:"${urn}".`,
-            media: {
-                type: 'image',
-                uri: urn,
-            },
-            callToAction: {
-                title: 'Do the thing!',
-                behavior: { type: 'link', url: 'https://google.com' },
-            },
-            onDismiss: dismissable ? { url: '/upsell-dismissed', method: 'POST' } : undefined,
-            margin: 'lg',
-        })),
-        {
-            type: 'paragraph',
-            text: 'When submitting and receiving a global error (or validation errors) we should NOT see dismissed upsells again.',
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'button',
-            title: 'Submit (causes global error)',
-            control: 'primary',
-            behavior: { type: 'action', action: { url: '/submit' } },
-        },
-    ],
-    schemas: [],
-});