@wise/dynamic-flow-client 5.25.1 → 5.25.2

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

@@ -0,0 +1,286 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+import { abortableDelay, respondWith } from '../../../test-utils/fetch-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Collection',
+};
+const flags = ['gb', 'eu', 'fr', 'de', 'us', 'au', 'nz'];
+const item = (index, query, filter) => ({
+    entityId: `older-item-${index}`,
+    title: `${query !== null && query !== void 0 ? query : 'Item'} ${index}`,
+    description: `Description for item ${filter ? `filters: ${filter}` : ''}`,
+    primaryBehavior: {
+        type: 'modal',
+        content: [
+            {
+                type: 'paragraph',
+                text: `Content for item ${index}`,
+            },
+        ],
+    },
+    supportingValues: {
+        value: '100 GBP',
+        subvalue: '123 EUR',
+    },
+    additionalInfo: index % 5 === 0 ? { text: 'This has some extra info' } : undefined,
+    inlineAlert: index % 7 === 0
+        ? {
+            content: 'This one is different for some reason',
+            context: 'positive',
+        }
+        : undefined,
+    media: {
+        type: 'avatar',
+        content: [
+            {
+                type: 'uri',
+                uri: `urn:wise:countries:${flags[index % flags.length]}:image`,
+            },
+        ],
+    },
+});
+const sections = [
+    {
+        type: 'box',
+        components: [
+            {
+                type: 'paragraph',
+                text: 'Some child text',
+            },
+        ],
+    },
+];
+const collectionLayout = {
+    type: 'collection',
+    baseRequest: {
+        url: '/collection',
+        method: 'POST',
+    },
+    search: {
+        param: 'query',
+        title: 'Search',
+        hint: 'Search items...',
+    },
+    initialState: {
+        beforeSections: sections,
+        nextCursor: '10',
+        filters: [
+            {
+                param: 'filter1',
+                type: 'select',
+                options: [
+                    {
+                        title: 'Popular',
+                        value: 'popular',
+                    },
+                    {
+                        title: 'Recent',
+                        value: 'recent',
+                    },
+                ],
+            },
+        ],
+        sections: [
+            {
+                id: 'section-1',
+                title: 'Recent',
+                items: [
+                    {
+                        entityId: 'item-one',
+                        title: 'Item One',
+                        description: 'Description for item one',
+                        callToAction: {
+                            title: 'Edit',
+                            behavior: {
+                                type: 'modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: `Content for item one`,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        entityId: 'item-two',
+                        title: 'Item Two',
+                        description: 'Description for item two',
+                        callToAction: {
+                            title: 'Edit',
+                            behavior: {
+                                type: 'modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: `Content for item one`,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        entityId: 'item-three',
+                        title: 'Item Three',
+                        description: 'Description for item two',
+                        callToAction: {
+                            title: 'Edit',
+                            behavior: {
+                                type: 'modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: `Content for item one`,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        entityId: 'item-four',
+                        title: 'Item Four',
+                        description: 'Description for item two',
+                        callToAction: {
+                            title: 'Edit',
+                            behavior: {
+                                type: 'modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: `Content for item one`,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        entityId: 'item-five',
+                        title: 'Item Five',
+                        description: 'Description for item two',
+                        callToAction: {
+                            title: 'Edit',
+                            behavior: {
+                                type: 'modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: `Content for item one`,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            },
+            {
+                id: 'section-2',
+                title: 'Older',
+                items: [
+                    ...Array(10)
+                        .keys()
+                        .map((i) => {
+                        return item(i);
+                    }),
+                ],
+            },
+        ],
+    },
+};
+const step = {
+    id: 'collection-step',
+    title: 'Collection Layout',
+    schemas: [],
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            margin: 'md',
+            components: [
+                {
+                    type: 'heading',
+                    text: 'Collection',
+                },
+                collectionLayout,
+            ],
+        },
+    ],
+};
+export const Default = {
+    render: () => renderWithStepAndOverrides(step, { httpClient }),
+};
+let requestCount = 0;
+const httpClient = async (input, init) => {
+    var _a;
+    requestCount += 1;
+    const { cursor, filter1, query } = JSON.parse((_a = init === null || init === void 0 ? void 0 : init.body) !== null && _a !== void 0 ? _a : '');
+    // if (requestCount % 3 === 0) {
+    //   return respondWithDelay({}, 1000, { status: 400 });
+    // }
+    if (cursor) {
+        await abortableDelay(1000, init === null || init === void 0 ? void 0 : init.signal);
+        const response = respondWith({
+            type: 'collection-content',
+            beforeSections: [
+                {
+                    type: 'markdown',
+                    content: `There are some more results for **${query}** and filters: ${filter1}`,
+                },
+            ],
+            afterSections: [],
+            sections: [
+                {
+                    id: 'section-2',
+                    items: [
+                        ...Array(10)
+                            .keys()
+                            .map((i) => item(Number(cursor) + i, query, filter1)),
+                    ],
+                },
+            ],
+            nextCursor: String(Number(cursor) + 10),
+        });
+        return response;
+    }
+    await abortableDelay(1000, init === null || init === void 0 ? void 0 : init.signal);
+    const response = respondWith({
+        type: 'collection-content',
+        beforeSections: [
+            {
+                type: 'markdown',
+                content: `There are some results for **${query}** and filters: ${filter1}`,
+            },
+        ],
+        afterSections: sections,
+        filters: query === 'filter'
+            ? [
+                {
+                    param: 'filter1',
+                    type: 'select',
+                    options: [
+                        {
+                            title: 'Unpopular',
+                            value: 'unpopular',
+                        },
+                        {
+                            title: 'Old',
+                            value: 'old',
+                        },
+                    ],
+                },
+            ]
+            : undefined,
+        sections: [
+            {
+                id: 'section-2',
+                items: [
+                    ...Array(10)
+                        .keys()
+                        .map((i) => item(Number(cursor !== null && cursor !== void 0 ? cursor : 0) + i, query, filter1)),
+                ],
+            },
+        ],
+        nextCursor: String(10),
+    });
+    return response;
+};

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

@@ -0,0 +1,241 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Decision',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        groupTag: {
+            control: {
+                type: 'select',
+            },
+            options: ['popular', 'recent', 'currencies-with-account-details'],
+            description: 'Group tag for decision options',
+        },
+    },
+    args: {
+        groupTag: 'popular',
+    },
+};
+export const Basic = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: () => renderWithStep(getDecisionStep()),
+};
+export const Filtered = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: () => renderWithStep(getDecisionStep('filtered')),
+};
+export const Grouped = {
+    args: {
+        groupTag: 'popular',
+    },
+    render: ({ groupTag }) => renderWithStep(getDecisionStep(undefined, groupTag)),
+};
+export const FilteredAndGrouped = {
+    args: {
+        groupTag: 'popular',
+    },
+    render: ({ groupTag }) => renderWithStep(getDecisionStep('filtered', groupTag)),
+};
+const getDecisionStep = (decisionControl, groupTag) => ({
+    id: `bank-country${decisionControl}${groupTag}`,
+    title: 'Choose the country of your bank',
+    schemas: [],
+    layout: [
+        {
+            type: 'decision',
+            control: decisionControl,
+            options: [
+                {
+                    title: 'France',
+                    description: "Caisse d'Epargne, Crédit Agricole, Crédit Mutuel, Société Générale",
+                    additionalText: 'France is a lovely country to cycle in',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Paris',
+                    },
+                    keywords: ['euro', 'francais', 'french'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'FR',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-fr',
+                    },
+                    tag: groupTag,
+                },
+                {
+                    title: 'Germany',
+                    description: 'Commerzbank, Deutsche Bank, Hypotheke, Landesbank, Sparkasse, Volksbank',
+                    additionalText: 'Germany has lots of impressive castles',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Berlin',
+                    },
+                    keywords: ['euro', 'german', 'berlin'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'DE',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-de',
+                    },
+                },
+                {
+                    title: 'Ireland',
+                    description: 'Bank of Ireland, Irish Nationwide Building Society',
+                    additionalText: 'Ireland has some beautiful countryside',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Dublin',
+                    },
+                    keywords: ['euro', 'ireland', 'dublin'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'IE',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-ie',
+                    },
+                },
+                {
+                    title: 'Italy',
+                    description: 'Banco BPM, BPER',
+                    additionalText: 'Italy has lots of beautiful beaches',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Rome',
+                    },
+                    keywords: ['euro', 'italian', 'rome'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'IT',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-it',
+                    },
+                },
+                {
+                    title: 'New Zealand',
+                    description: 'ASB, Kiwibank, Westpac, ANZ',
+                    additionalText: 'But New Zealand is pretty much the best',
+                    supportingValues: {
+                        value: 'NZD',
+                        subvalue: 'Wellington',
+                    },
+                    keywords: ['dollar', 'new zealand', 'wellington'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'NZ',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-nz',
+                    },
+                },
+                {
+                    title: 'Netherlands',
+                    description: 'ABN AMRO, ING, Rabobank, Triodos Bank',
+                    additionalText: 'The Netherlands is full of very nice Dutch people',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Amsterdam',
+                    },
+                    keywords: ['euro', 'dutch', 'amsterdam'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'NL',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-nl',
+                    },
+                },
+                {
+                    title: 'Portugal',
+                    description: 'Banco BPM, BPER',
+                    additionalText: 'Portugal is home to the delicious Pastéis de Nata',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Lisbon',
+                    },
+                    keywords: ['euro', 'portuguese', 'lisbon'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'PT',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-pt',
+                    },
+                },
+                {
+                    title: 'Spain',
+                    description: 'Bankia, Bankinter, Bank of Spain',
+                    additionalText: 'Spain has centuries of history',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Madrid',
+                    },
+                    keywords: ['euro', 'spanish', 'madrid'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'ES',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-es',
+                    },
+                    tag: groupTag,
+                },
+                {
+                    title: 'United Kingdom',
+                    description: 'HSBC, Lloyds, Monzo, NatWest, Santander',
+                    additionalText: 'The UK has a lot of hedgerows',
+                    supportingValues: {
+                        value: 'GBP',
+                        subvalue: 'London',
+                    },
+                    keywords: ['pound', 'great british pound', 'sterling', 'english', 'london'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'GB',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-gb',
+                    },
+                    tag: groupTag,
+                },
+            ],
+        },
+    ],
+});

package/build/stories/spec/layouts/Image.Illustrations.Animated.story.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Image/Illustrations',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+const step = (urn) => ({
+    id: 'illustration',
+    title: 'Illustrations',
+    layout: [
+        {
+            type: 'heading',
+            text: `An ImageLayout with urn: ${urn}`,
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'image',
+            content: {
+                accessibilityDescription: 'plane',
+                uri: urn,
+            },
+        },
+    ],
+    schemas: [],
+});
+export function Static() {
+    return (_jsx("div", { style: { border: '1px solid black' }, children: renderWithStep(step('urn:wise:illustrations:confetti')) }));
+}
+export function Animated() {
+    return (_jsx("div", { style: { border: '1px solid black' }, children: renderWithStep(step('urn:wise:illustrations:globe?+type=animated')) }));
+}

package/build/stories/spec/layouts/Image.Sizes.story.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Image/Sizes',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+const makeStep = (urn, size) => ({
+    id: 'image-sizes',
+    title: `size: "${size}"`,
+    layout: [
+        {
+            type: 'image',
+            size,
+            content: {
+                accessibilityDescription: 'image description',
+                uri: urn,
+            },
+        },
+    ],
+    schemas: [],
+});
+const BlackBox = ({ children }) => (_jsx("div", { style: { border: '1px dashed #999999', marginBottom: '16px' }, children: children }));
+const NarrowContainer = ({ children }) => (_jsx("div", { style: { width: '500px', border: '1px dashed #3399ff', marginBottom: '16px' }, children: children }));
+const makeStory = (name, uri, viewport, preferContainerQueries) => {
+    const Wrapper = preferContainerQueries ? NarrowContainer : BlackBox;
+    const className = preferContainerQueries ? 'df-prefer-container-queries' : '';
+    return {
+        name,
+        globals: { viewport: { value: viewport } },
+        render: () => (_jsx(_Fragment, { children: sizes.map((size) => (_jsx(Wrapper, { children: renderWithStepAndOverrides(makeStep(uri, size), { className }) }, size))) })),
+    };
+};
+const portraitImageUri = 'https://images.unsplash.com/photo-1516108317508-6788f6a160e4?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+export const ImageWide = makeStory('ImageWide', portraitImageUri, 'wide', false);
+export const ImageContainerQueries = makeStory('ImageContainerQueries', portraitImageUri, 'wide', true);
+export const ImageNarrow = makeStory('ImageNarrow', portraitImageUri, 'narrow', false);
+export const ImageExtraNarrow = makeStory('ImageExtraNarrow', portraitImageUri, 'extraNarrow', false);
+const landscapeImageUri = 'https://images.unsplash.com/photo-1744909229894-883bb19b552f?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+export const ImageWideLandscape = makeStory('ImageWideLandscape', landscapeImageUri, 'wide', false);
+export const ImageContainerQueriesLandscape = makeStory('ImageContainerQueriesLandscape', landscapeImageUri, 'wide', true);
+export const ImageNarrowLandscape = makeStory('ImageNarrowLandscape', landscapeImageUri, 'narrow', false);
+export const ImageExtraNarrowLandscape = makeStory('ImageExtraNarrowLandscape', landscapeImageUri, 'extraNarrow', false);
+const illustrationUrn = 'urn:wise:illustrations:confetti';
+export const IllustrationWide = makeStory('IllustrationWide', illustrationUrn, 'wide', false);
+export const IllustrationContainerQueries = makeStory('IllustrationContainerQueries', illustrationUrn, 'wide', true);
+export const IllustrationNarrow = makeStory('IllustrationNarrow', illustrationUrn, 'narrow', false);
+export const IllustrationExtraNarrow = makeStory('IllustrationExtraNarrow', illustrationUrn, 'extraNarrow', false);
+const eurFlagUrn = 'urn:wise:currencies:eur:image';
+export const CurrencyIllustrationWide = makeStory('CurrencyIllustrationWide', eurFlagUrn, 'wide', false);
+export const CurrencyIllustrationContainerQueries = makeStory('CurrencyIllustrationContainerQueries', eurFlagUrn, 'wide', true);
+export const CurrencyIllustrationNarrow = makeStory('CurrencyIllustrationNarrow', eurFlagUrn, 'narrow', false);
+export const CurrencyIllustrationExtraNarrow = makeStory('CurrencyIllustrationExtraNarrow', eurFlagUrn, 'extraNarrow', false);