@wise/dynamic-flow-client 5.25.2 → 5.25.4

package/build/stories/spec/behavior/NativeSubflow.story.js

@@ -1,249 +0,0 @@
-import { getMockHttpClient, respondWith } from '../../../test-utils';
-import { getDummyNativeSubflowHandlers } from '../../../test-utils/dummy-native-subflows-handlers';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-const nativeSubflowHandlers = getDummyNativeSubflowHandlers();
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Behavior/Subflow',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const getNativesubflowBehaviorOrBody = (id) => ({
-    type: 'subflow',
-    referrerId: 'native-flow-referrer',
-    launchConfig: {
-        id,
-        payload: {},
-        type: 'native',
-    },
-    resultKey: 'subflowResult',
-    onCompletion: {
-        action: {
-            url: '/submit-subflow-result',
-            method: 'POST',
-        },
-        type: 'action',
-    },
-    onError: {
-        title: 'Subflow failed',
-        content: [
-            {
-                text: 'OH NO!',
-                type: 'paragraph',
-            },
-            {
-                title: 'Try Again (refresh behavior)',
-                behavior: {
-                    type: 'refresh',
-                },
-                type: 'button',
-            },
-        ],
-        type: 'modal',
-    },
-});
-const delay = async (ms) => new Promise((resolve) => {
-    setTimeout(resolve, ms);
-});
-const httpClient = getMockHttpClient({
-    '/initial': async () => {
-        await delay(500);
-        return respondWith(step);
-    },
-    '/get-form-step': async () => respondWith(formStep),
-    '/submit': async () => {
-        await delay(500);
-        return respondWith(Object.assign(Object.assign({}, step), { title: 'Success, try again!' }));
-    },
-    '/submit-subflow-result': async (input, init) => {
-        const initBodyString = typeof (init === null || init === void 0 ? void 0 : init.body) === 'string' ? init.body : '{}';
-        const { subflowResult } = JSON.parse(initBodyString);
-        await delay(500);
-        return respondWith({
-            id: 'subflow-result',
-            title: 'Native subflow Completed!',
-            schemas: [],
-            layout: [
-                {
-                    type: 'markdown',
-                    content: `  Subflow result:\n\n\`\`\`json\n${JSON.stringify(subflowResult, null, 2)}\n\`\`\``,
-                },
-            ],
-        });
-    },
-    '/get/subflow/response-dummy-push': async () => {
-        await delay(500);
-        return respondWith(getNativesubflowBehaviorOrBody('dummy-push'), {
-            headers: { 'X-DF-Response-Type': 'subflow' },
-        });
-    },
-    '/get/subflow/response-dummy-modal': async () => {
-        await delay(500);
-        return respondWith(getNativesubflowBehaviorOrBody('dummy-modal'), {
-            headers: { 'X-DF-Response-Type': 'subflow' },
-        });
-    },
-    '/get/subflow/response-geolocation': async () => {
-        await delay(500);
-        return respondWith(getNativesubflowBehaviorOrBody('geolocation'), {
-            headers: { 'X-DF-Response-Type': 'subflow' },
-        });
-    },
-    '/get/subflow/response-notification-permission': async () => {
-        await delay(500);
-        return respondWith(getNativesubflowBehaviorOrBody('notification-permission'), {
-            headers: { 'X-DF-Response-Type': 'subflow' },
-        });
-    },
-});
-export function NativeSubflowDummyPush() {
-    return renderWithStepAndOverrides(step, { httpClient, nativeSubflowHandlers });
-}
-const step = {
-    id: 'native-subflow-directory',
-    title: 'Subflow Behavior (native subflow launch config)',
-    description: 'Demonstrates native subflows that step out to platform-specific functionality',
-    refreshUrl: '/initial',
-    schemas: [],
-    layout: [
-        {
-            type: 'box',
-            control: 'bordered',
-            width: 'lg',
-            components: [
-                {
-                    type: 'columns',
-                    left: [
-                        {
-                            type: 'button',
-                            title: 'Dummy Push (from behavior)',
-                            control: 'primary',
-                            behavior: getNativesubflowBehaviorOrBody('dummy-push'),
-                        },
-                    ],
-                    right: [
-                        {
-                            type: 'button',
-                            title: 'Dummy Push (from response)',
-                            control: 'primary',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/get/subflow/response-dummy-push' },
-                            },
-                        },
-                    ],
-                },
-                {
-                    type: 'columns',
-                    left: [
-                        {
-                            type: 'button',
-                            title: 'Dummy Modal (from behavior)',
-                            control: 'primary',
-                            behavior: getNativesubflowBehaviorOrBody('dummy-modal'),
-                        },
-                    ],
-                    right: [
-                        {
-                            type: 'button',
-                            title: 'Dummy Modal (from response)',
-                            control: 'primary',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/get/subflow/response-dummy-modal' },
-                            },
-                        },
-                    ],
-                },
-                {
-                    type: 'columns',
-                    left: [
-                        {
-                            type: 'button',
-                            title: 'Geolocation (from behavior)',
-                            control: 'primary',
-                            behavior: getNativesubflowBehaviorOrBody('geolocation'),
-                        },
-                    ],
-                    right: [
-                        {
-                            type: 'button',
-                            title: 'Geolocation (from response)',
-                            control: 'primary',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/get/subflow/response-geolocation' },
-                            },
-                        },
-                    ],
-                },
-                {
-                    type: 'columns',
-                    left: [
-                        {
-                            type: 'button',
-                            title: 'Notification Permission (from behavior)',
-                            control: 'primary',
-                            behavior: getNativesubflowBehaviorOrBody('notification-permission'),
-                        },
-                    ],
-                    right: [
-                        {
-                            type: 'button',
-                            title: 'Notification Permission (from response)',
-                            control: 'primary',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/get/subflow/response-notification-permission' },
-                            },
-                        },
-                    ],
-                },
-                {
-                    type: 'button',
-                    title: 'Next step instead of subflow',
-                    control: 'secondary',
-                    behavior: {
-                        type: 'action',
-                        action: {
-                            url: '/get-form-step',
-                            method: 'POST',
-                        },
-                    },
-                },
-            ],
-        },
-    ],
-};
-const formStep = {
-    id: 'form-step',
-    title: 'Form Step',
-    schemas: [
-        {
-            $id: '#string',
-            type: 'string',
-            title: 'Required Input',
-            description: 'Enter any text to enable submission',
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#string',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit-form',
-                    method: 'POST',
-                },
-            },
-        },
-    ],
-};

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

@@ -1,107 +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/Layouts/Alert',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-const primaryCallToAction = {
-    title: 'Primary action',
-    behavior: { type: 'link', url: '/primary' },
-};
-const secondaryCallToAction = {
-    title: 'Secondary action',
-    behavior: { type: 'link', url: '/secondary' },
-};
-const promptForkingStep = {
-    id: 'alert-prompt-forking',
-    title: 'Alert prompt forking',
-    schemas: [],
-    layout: [
-        { type: 'heading', text: 'InfoPrompt branches' },
-        {
-            type: 'alert',
-            title: 'No actions',
-            markdown: 'No actions should render an InfoPrompt.',
-        },
-        {
-            type: 'alert',
-            title: 'Primary action only',
-            markdown: 'A primary action without the preference tag should render an InfoPrompt.',
-            callToAction: primaryCallToAction,
-        },
-        {
-            type: 'alert',
-            title: 'Secondary action only',
-            markdown: 'A secondary action should still render an InfoPrompt and be ignored.',
-            secondaryCallToAction,
-            tags: ['prefers-action-prompt'],
-        },
-        { type: 'heading', text: 'ActionPrompt branches' },
-        {
-            type: 'alert',
-            title: 'Primary and secondary actions',
-            markdown: 'Two actions should render an ActionPrompt.',
-            callToAction: primaryCallToAction,
-            secondaryCallToAction,
-        },
-        {
-            type: 'alert',
-            title: 'Preferred ActionPrompt',
-            markdown: 'A primary action with the preference tag should render an ActionPrompt.',
-            callToAction: primaryCallToAction,
-            tags: ['prefers-action-prompt'],
-        },
-    ],
-};
-const ignoredInfoPromptMediaStep = {
-    id: 'alert-info-prompt-media',
-    title: 'InfoPrompt ignores non-icon media',
-    schemas: [],
-    layout: [
-        {
-            type: 'alert',
-            title: 'Image media',
-            markdown: 'An InfoPrompt should ignore image media and use its default icon.',
-            media: {
-                type: 'image',
-                uri: 'https://example.com/prompt.png',
-                accessibilityDescription: 'Ignored prompt image',
-            },
-        },
-        {
-            type: 'alert',
-            title: 'Avatar media',
-            markdown: 'An InfoPrompt should ignore avatar media and use its default icon.',
-            media: {
-                type: 'avatar',
-                content: [
-                    {
-                        type: 'uri',
-                        uri: 'urn:wise:currencies:eur:image',
-                    },
-                ],
-                accessibilityDescription: 'Ignored prompt avatar',
-            },
-        },
-    ],
-};
-export const PromptForking = {
-    render: () => renderWithStep(promptForkingStep),
-    play: async ({ canvas }) => {
-        await expect(canvas.getAllByRole('status')).toHaveLength(3);
-        await expect(canvas.getAllByRole('region')).toHaveLength(2);
-        await expect(canvas.getAllByRole('link', { name: 'Secondary action' })).toHaveLength(1);
-    },
-};
-export const InfoPromptIgnoresNonIconMedia = {
-    render: () => renderWithStep(ignoredInfoPromptMediaStep),
-    play: async ({ canvas }) => {
-        await expect(canvas.queryByLabelText('Ignored prompt image')).not.toBeInTheDocument();
-        await expect(canvas.queryByLabelText('Ignored prompt avatar')).not.toBeInTheDocument();
-        await expect(canvas.getAllByTestId('status-icon')).toHaveLength(2);
-    },
-};

package/build/stories/spec/layouts/Box.Container-Widths.3-sizes.story.js

@@ -1,59 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Box/Container Widths (grouped)',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {},
-};
-const containerWidths = [420, 533, 768];
-const makeStep = (width, control) => {
-    const boxContent = Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
-            {
-                type: 'heading',
-                text: 'Lorem Ipsum Dolor!',
-            },
-            {
-                type: 'paragraph',
-                text: 'Lorem ipsum dolor sitamet.',
-            },
-            Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
-                    {
-                        type: 'button',
-                        title: 'Button inside box',
-                        behavior: {
-                            type: 'action',
-                            action: { url: '/button-action' },
-                        },
-                    },
-                ] }),
-        ] });
-    return {
-        id: 'box-container-widths',
-        title: `Box: width="${width}"`,
-        description: `This step demonstrates a box layout with width="${width}" and control="${control !== null && control !== void 0 ? control : 'plain'}".`,
-        layout: [boxContent],
-        schemas: [],
-    };
-};
-const makeStory = (name, width, control) => {
-    return {
-        name,
-        render: () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: containerWidths.map((containerPxWidth) => {
-                return (_jsxs("div", { children: [_jsxs("div", { style: {
-                                marginBottom: '8px',
-                                fontSize: '12px',
-                                fontWeight: 'bold',
-                                color: '#666',
-                            }, children: ["Container: ", containerPxWidth, "px"] }), _jsx("div", { style: { width: `${containerPxWidth}px`, border: '1px solid #ccc' }, children: renderWithStepAndOverrides(makeStep(width, control), {}) })] }, containerPxWidth));
-            }) })),
-    };
-};
-export const XS = makeStory('xs', 'xs', undefined);
-export const SM = makeStory('sm', 'sm', undefined);
-export const MD = makeStory('md', 'md', undefined);
-export const LG = makeStory('lg', 'lg', undefined);
-export const XL = makeStory('xl', 'xl', undefined);

package/build/stories/spec/layouts/Box.Container-Widths.story.js

@@ -1,57 +0,0 @@
-import { 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/Box/Container Widths (md)',
-    parameters: {
-        layout: 'fullscreen',
-        chromatic: { disableSnapshot: false },
-    },
-    globals: { viewport: { value: 'desktop1' } },
-    argTypes: {},
-};
-const makeStep = (containerPxWidth) => {
-    const boxContent = {
-        type: 'box',
-        width: 'md',
-        components: [
-            {
-                type: 'heading',
-                text: 'Lorem Ipsum Dolor!',
-            },
-            {
-                type: 'paragraph',
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-            },
-            {
-                type: 'box',
-                width: 'md',
-                components: [
-                    {
-                        type: 'button',
-                        title: 'Button inside box',
-                        behavior: {
-                            type: 'action',
-                            action: { url: '/button-action' },
-                        },
-                    },
-                ],
-            },
-        ],
-    };
-    return {
-        id: 'box-container-widths',
-        title: `Box: width="md" (${containerPxWidth}px)`,
-        description: `This step demonstrates a box layout with width="md" inside a container with a width of ${containerPxWidth}px.`,
-        layout: [boxContent],
-        schemas: [],
-    };
-};
-const makeStory = (name, containerPxWidth) => ({
-    name,
-    render: () => (_jsx("div", { style: { width: `${containerPxWidth}px`, border: '1px solid #ccc' }, children: renderWithStepAndOverrides(makeStep(containerPxWidth), {}) })),
-});
-export const _420px = makeStory('420px', 420);
-export const _533px = makeStory('533px', 533);
-export const _768px = makeStory('768px', 768);

package/build/stories/spec/layouts/Box.Viewport-Widths.story.js

@@ -1,64 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Box/Viewport Widths',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-    argTypes: {},
-};
-const makeStep = (width, control) => {
-    const boxContent = Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
-            {
-                type: 'heading',
-                text: 'Lorem Ipsum Dolor!',
-            },
-            {
-                type: 'paragraph',
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-            },
-            Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
-                    {
-                        type: 'button',
-                        title: 'Button inside box',
-                        behavior: {
-                            type: 'action',
-                            action: { url: '/button-action' },
-                        },
-                    },
-                ] }),
-        ] });
-    return {
-        id: 'box-widths',
-        title: `Box: width="${width}"`,
-        description: `This step demonstrates a box layout with width="${width}" and control="${control !== null && control !== void 0 ? control : 'plain'}".`,
-        layout: [boxContent],
-        schemas: [],
-    };
-};
-const makeStory = (name, width, viewport, control) => {
-    return {
-        name,
-        globals: { viewport: { value: viewport } },
-        render: () => renderWithStepAndOverrides(makeStep(width, control), {}),
-    };
-};
-// mobile2 (narrow, <768px)
-export const _414pxXS = makeStory('xs-mobile2-Plain', 'xs', 'mobile2', undefined);
-export const _414pxSM = makeStory('sm-mobile2-Plain', 'sm', 'mobile2', undefined);
-export const _414pxMD = makeStory('md-mobile2-Plain', 'md', 'mobile2', undefined);
-export const _414pxLG = makeStory('lg-mobile2-Plain', 'lg', 'mobile2', undefined);
-export const _414pxXL = makeStory('xl-mobile2-Plain', 'xl', 'mobile2', undefined);
-// ipad (768px - 989px)
-export const _768pxXS = makeStory('xs-ipad-Plain', 'xs', 'ipad', undefined);
-export const _768pxSM = makeStory('sm-ipad-Plain', 'sm', 'ipad', undefined);
-export const _768pxMD = makeStory('md-ipad-Plain', 'md', 'ipad', undefined);
-export const _768pxLG = makeStory('lg-ipad-Plain', 'lg', 'ipad', undefined);
-export const _768pxXL = makeStory('xl-ipad-Plain', 'xl', 'ipad', undefined);
-// desktop1 (wide, >=990px)
-export const _1366pxXS = makeStory('xs-desktop1-Plain', 'xs', 'desktop1', undefined);
-export const _1366pxSM = makeStory('sm-desktop1-Plain', 'sm', 'desktop1', undefined);
-export const _1366pxMD = makeStory('md-desktop1-Plain', 'md', 'desktop1', undefined);
-export const _1366pxLG = makeStory('lg-desktop1-Plain', 'lg', 'desktop1', undefined);
-export const _1366pxXL = makeStory('xl-desktop1-Plain', 'xl', 'desktop1', undefined);