@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/renderers/mappers/reviewComponentToProps.js

@@ -0,0 +1,2 @@
+import { pick } from './utils/pick';
+export const reviewComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'callToAction', 'control', 'fields', 'margin', 'title', 'tags')), rendererMapperProps));

package/build/renderers/mappers/rootComponentToProps.js

@@ -0,0 +1,21 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { stepComponentToProps } from '../stepComponentToProps';
+export const rootComponentToProps = (rootComponent, rendererMapperProps) => {
+    const childrenProps = [
+        Object.assign({ type: 'loading-state', uid: 'loading-state' }, rendererMapperProps),
+        ...rootComponent.getChildren().map((child) => {
+            if (child.type === 'step') {
+                return stepComponentToProps(child, Object.assign(Object.assign({}, rendererMapperProps), { showBack: rootComponent.canPerformBack() }));
+            }
+            return componentToRendererProps(child, rendererMapperProps);
+        }),
+    ];
+    const subflow = rootComponent.subflow
+        ? {
+            presentation: rootComponent.subflow.presentation,
+            children: rendererMapperProps.render(componentToRendererProps(rootComponent.subflow, rendererMapperProps)),
+        }
+        : undefined;
+    return Object.assign({ type: 'root', uid: rootComponent.uid, children: childrenProps.map(rendererMapperProps.render), childrenProps,
+        subflow }, rendererMapperProps);
+};

package/build/renderers/mappers/searchComponentToProps.js

@@ -0,0 +1,57 @@
+import { mapSpecImage } from '../../domain/mappers/utils/image';
+import { getDomainLayerMedia } from '../../domain/mappers/utils/media-utils';
+import { componentToRendererProps } from './componentToRendererProps';
+export const searchComponentToProps = (component, rendererMapperProps) => {
+    const { uid, control, emptyMessage, error, hint, isLoading, margin, query, title, tags } = component;
+    const onChange = component.onChange.bind(component);
+    const onSelect = component.onSelect.bind(component);
+    const state = getSearchState({
+        emptyMessage,
+        error,
+        isLoading,
+        query,
+        state: component.state,
+        rendererMapperProps,
+        onChange,
+        onSelect,
+    });
+    return Object.assign({ uid, type: 'search', id: uid, control,
+        hint,
+        isLoading,
+        margin,
+        query,
+        state,
+        title,
+        tags,
+        onChange }, rendererMapperProps);
+};
+const getSearchState = ({ emptyMessage, error, isLoading, query, state, rendererMapperProps, onChange, onSelect, }) => {
+    if (isLoading) {
+        return { type: 'pending' };
+    }
+    if (error) {
+        return { type: 'error', onRetry: () => onChange(query) };
+    }
+    if (!state) {
+        return { type: 'noResults', message: emptyMessage };
+    }
+    if (state.type === 'layout') {
+        const { content } = state;
+        const layoutProps = content.map((component) => componentToRendererProps(component, rendererMapperProps));
+        return {
+            type: 'layout',
+            layout: layoutProps.map((props) => rendererMapperProps.render(props)),
+            layoutProps,
+        };
+    }
+    if (query && state.results.length === 0) {
+        return { type: 'noResults', message: emptyMessage };
+    }
+    return {
+        type: 'results',
+        results: state.results.map((result) => {
+            var _a;
+            return (Object.assign(Object.assign({}, result), { id: result.type === 'action' ? ((_a = result.value.id) !== null && _a !== void 0 ? _a : result.value.$id) : undefined, image: mapSpecImage(result.image), media: getDomainLayerMedia(result), onClick: () => onSelect(result) }));
+        }),
+    };
+};

package/build/renderers/mappers/sectionComponentToProps.js

@@ -0,0 +1,6 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const sectionComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'title', 'margin', 'control', 'callToAction', 'tags')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/selectInputComponentToProps.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { componentToRendererProps } from './componentToRendererProps';
+import { inputComponentToProps } from './utils/inputComponentToProps';
+import { selectInputOptionsToProps } from './utils/selectInputOptionsToProps';
+export const selectInputComponentToProps = (component, rendererMapperProps) => {
+    const { autoComplete, selectedIndex, onSelect } = component;
+    const selectedChild = component.getSelectedChild();
+    const childrenProps = selectedChild
+        ? componentToRendererProps(selectedChild, rendererMapperProps)
+        : null;
+    const _a = inputComponentToProps(component, 'input-select'), { value } = _a, props = __rest(_a, ["value"]);
+    const options = selectInputOptionsToProps(component.options, component.getChildren(), rendererMapperProps);
+    return Object.assign(Object.assign(Object.assign({}, props), rendererMapperProps), { autoComplete,
+        options,
+        selectedIndex, onSelect: onSelect.bind(component), children: rendererMapperProps.render(childrenProps), childrenProps });
+};

package/build/renderers/mappers/statusListComponentToProps.js

@@ -0,0 +1,2 @@
+import { pick } from './utils/pick';
+export const statusListComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'items', 'margin', 'title', 'tags')), rendererMapperProps));

package/build/renderers/mappers/subflowComponentToRendererProps.js

@@ -0,0 +1,4 @@
+import { pick } from './utils/pick';
+export const subflowComponentToRendererProps = (component, rendererMapperProps) => {
+    return Object.assign(Object.assign(Object.assign({ uid: 'subflow', type: 'subflow' }, pick(component, 'requestCache', 'presentation', 'initialRequest')), { onCancellation: component.onCancellation.bind(component), onCompletion: component.onCompletion.bind(component), onError: component.onError.bind(component), onEvent: component.onEvent.bind(component) }), rendererMapperProps);
+};

package/build/renderers/mappers/tabsComponentToProps.js

@@ -0,0 +1,14 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const tabsComponentToProps = (component, rendererMapperProps) => {
+    const tabs = component.tabs.map(({ components, title, tags }) => {
+        const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+        return {
+            title,
+            tags,
+            childrenProps,
+            children: childrenProps.map(rendererMapperProps.render),
+        };
+    });
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'margin', 'tags')), rendererMapperProps), { tabs });
+};

package/build/renderers/mappers/textInputComponentToProps.js

@@ -0,0 +1,2 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export const textInputComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-text')), rendererMapperProps), { autoComplete: component.autoComplete, autoCapitalize: component === null || component === void 0 ? void 0 : component.autocapitalization, displayFormat: component.displayFormat, maxLength: component.maxLength, minLength: component.minLength, suggestions: component.suggestions, onChange: component.onChange.bind(component) }));

package/build/renderers/mappers/tupleComponentToProps.js

@@ -0,0 +1,8 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const tupleComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component
+        .getChildren()
+        .map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({ type: 'form-section' }, pick(component, 'uid', 'analyticsId', 'control', 'description', 'help', 'media', 'tags', 'title')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/uploadInputComponentToProps.js

@@ -0,0 +1,8 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export const uploadInputComponentToProps = (component, rendererMapperProps) => {
+    const { accepts, cameraConfig, maxSize, source } = component;
+    return Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-upload')), rendererMapperProps), { cameraConfig,
+        source,
+        accepts,
+        maxSize, onUpload: component.onUpload.bind(component) });
+};

package/build/renderers/mappers/upsellComponentToProps.js

@@ -0,0 +1,2 @@
+import { pick } from './utils/pick';
+export const upsellComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'callToAction', 'control', 'margin', 'media', 'tags', 'text')), { onDismiss: component.onDismiss ? component.onDismiss.bind(component) : undefined }), rendererMapperProps));

package/build/renderers/mappers/utils/getValidationState.js

@@ -0,0 +1,12 @@
+import { mapErrorsToValidationState } from './mapErrorsToValidationState';
+export const getValidationState = (errors, validationAsyncState) => {
+    if (validationAsyncState) {
+        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error) {
+            return { status: 'invalid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error };
+        }
+        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success) {
+            return { status: 'valid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success };
+        }
+    }
+    return mapErrorsToValidationState(errors);
+};

package/build/renderers/mappers/utils/inputComponentToProps.js

@@ -0,0 +1,26 @@
+import { getValidationState } from './getValidationState';
+export const inputComponentToProps = (component, type) => {
+    var _a;
+    const { uid, analyticsId, control, description, disabled, errors, help, id, media, placeholder, required, title, tags, validationAsyncState, onBlur, onFocus, } = component;
+    const { messages } = validationAsyncState !== null && validationAsyncState !== void 0 ? validationAsyncState : {};
+    return {
+        uid,
+        analyticsId,
+        type,
+        control,
+        description,
+        disabled,
+        error: (_a = messages === null || messages === void 0 ? void 0 : messages.error) !== null && _a !== void 0 ? _a : errors === null || errors === void 0 ? void 0 : errors[0],
+        help,
+        id,
+        media,
+        placeholder,
+        required,
+        title,
+        tags,
+        validationState: getValidationState(errors, validationAsyncState),
+        value: component.getLocalValue(),
+        onBlur: onBlur.bind(component),
+        onFocus: onFocus.bind(component),
+    };
+};

package/build/renderers/mappers/utils/mapErrorsToValidationState.js

@@ -0,0 +1,9 @@
+export const mapErrorsToValidationState = (errors) => {
+    if (errors) {
+        if (errors.length > 0) {
+            return { status: 'invalid', message: errors[0] };
+        }
+        return { status: 'valid' };
+    }
+    return undefined;
+};

package/build/renderers/mappers/utils/pick.js

@@ -0,0 +1,8 @@
+export function pick(obj, ...keys) {
+    const result = {};
+    keys.forEach((key) => {
+        // eslint-disable-next-line functional/immutable-data
+        result[key] = obj[key];
+    });
+    return result;
+}

package/build/renderers/mappers/utils/selectInputOptionsToProps.js

@@ -0,0 +1,11 @@
+import { componentToRendererProps } from '../componentToRendererProps';
+export const selectInputOptionsToProps = (options, children, rendererMapperProps) => {
+    return options.map((option, index) => {
+        const child = children[index];
+        const optionChildrenProps = child ? componentToRendererProps(child, rendererMapperProps) : null;
+        const optionChildren = optionChildrenProps
+            ? rendererMapperProps.render(optionChildrenProps)
+            : null;
+        return Object.assign(Object.assign({}, option), { children: optionChildren, childrenProps: optionChildrenProps });
+    });
+};

package/build/renderers/stepComponentToProps.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { componentToRendererProps, } from './mappers/componentToRendererProps';
+import { pick } from './mappers/utils/pick';
+export const stepComponentToProps = (component, rendererMapperProps) => {
+    const { uid, analyticsId, back, control, description, error, step, title, tags, onBehavior } = component;
+    const { showBack } = rendererMapperProps, restMapperProps = __rest(rendererMapperProps, ["showBack"]);
+    const childrenProps = component
+        .getChildren()
+        .map((c) => componentToRendererProps(c, restMapperProps));
+    const footerProps = component.footerComponents.map((c) => componentToRendererProps(c, restMapperProps));
+    return Object.assign({ type: 'step', id: step.id, analyticsId,
+        uid, back: showBack ? back : undefined, control,
+        description, toolbar: getToolbarProps(component.toolbar, restMapperProps), error, __rawStep: step, title: restMapperProps.features.isEnabled('hideStepTitle') ? '' : title, tags, children: childrenProps.map(rendererMapperProps.render), childrenProps, footer: footerProps.map(rendererMapperProps.render), footerProps, __onAction: (action) => {
+            void onBehavior({ type: 'action', action });
+        } }, restMapperProps);
+};
+const getToolbarProps = (toolbar, rendererMapperProps) => {
+    if (!toolbar) {
+        return undefined;
+    }
+    return Object.assign(Object.assign(Object.assign({}, pick(toolbar, 'uid', 'control', 'type', 'tags')), { type: 'toolbar', items: toolbar.items.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.disabled || rendererMapperProps.stepLoadingState !== 'idle' }))) }), rendererMapperProps);
+};

package/build/renderers/utils.js

@@ -0,0 +1,69 @@
+import { isArray } from '../utils/type-validators';
+/**
+ * @experimental
+ */
+export function findRendererPropsByType(root, type, predicate = () => true) {
+    if (isArray(root)) {
+        return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+    }
+    return [
+        ...(isType(root, type) && predicate(root) ? [root] : []),
+        ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate)),
+    ];
+}
+const isType = (node, type) => node.type === type;
+const getChildren = (node) => {
+    switch (node.type) {
+        case 'root':
+        case 'box':
+        case 'container':
+        case 'form':
+        case 'form-section':
+        case 'step':
+        case 'modal':
+        case 'section':
+            return node.childrenProps;
+        case 'columns':
+            return [...node.startChildrenProps, ...node.endChildrenProps];
+        case 'modal-layout':
+            return node.content.childrenProps;
+        case 'repeatable':
+            return node.editableItemProps ? [node.editableItemProps] : [];
+        case 'input-select':
+            return node.childrenProps ? [node.childrenProps] : [];
+        case 'tabs':
+            return node.tabs.flatMap((c) => c.childrenProps);
+        case 'alert':
+        case 'button':
+        case 'input-checkbox':
+        case 'input-date':
+        case 'decision':
+        case 'divider':
+        case 'formatted-value':
+        case 'heading':
+        case 'hidden':
+        case 'image':
+        case 'loading-state':
+        case 'instructions':
+        case 'input-integer':
+        case 'list':
+        case 'loading-indicator':
+        case 'markdown':
+        case 'media':
+        case 'input-multi-select':
+        case 'input-upload-multi':
+        case 'input-number':
+        case 'money-input':
+        case 'paragraph':
+        case 'progress':
+        case 'review':
+        case 'search':
+        case 'status-list':
+        case 'input-text':
+        case 'input-upload':
+        case 'external-confirmation':
+        case 'subflow':
+        case 'upsell':
+            return [];
+    }
+};

package/build/renderers/utils.test.js

@@ -0,0 +1,70 @@
+import { mapStepToComponent } from '../domain/mappers/mapStepToComponent';
+import { getMockRendererMapperProps, getStepMapperProps, } from '../domain/mappers/schema/tests/test-utils';
+import { findRendererPropsByType } from './utils';
+import { stepComponentToProps } from './stepComponentToProps';
+const step = {
+    id: '123',
+    title: 'Hello',
+    schemas: [
+        {
+            $id: '#form-1',
+            type: 'object',
+            displayOrder: ['name', 'surname', 'age'],
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'first name',
+                },
+                surname: {
+                    type: 'string',
+                    title: 'last name',
+                },
+                age: {
+                    type: 'number',
+                    title: 'age',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'box',
+            components: [
+                {
+                    type: 'paragraph',
+                    text: 'Please fill in some details',
+                },
+                {
+                    type: 'form',
+                    schemaId: '#form-1',
+                },
+                {
+                    type: 'button',
+                    title: 'submit',
+                    action: {},
+                },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'back',
+            action: {},
+        },
+    ],
+};
+const component = mapStepToComponent(Object.assign(Object.assign({}, getStepMapperProps()), { step }));
+const stepProps = stepComponentToProps(component, Object.assign(Object.assign({}, getMockRendererMapperProps()), { showBack: false }));
+describe('given a renderer props tree', () => {
+    describe('the findRendererPropsByType function', () => {
+        it('returns all elements that match a type', () => {
+            const textResults = findRendererPropsByType(stepProps, 'input-text');
+            expect(textResults).toHaveLength(2);
+            const buttonResults = findRendererPropsByType(stepProps, 'button');
+            expect(buttonResults).toHaveLength(2);
+        });
+        it('returns all elements that match a type and a predicate', () => {
+            const results = findRendererPropsByType(stepProps, 'input-text', (props) => props.title === 'first name');
+            expect(results).toHaveLength(1);
+        });
+    });
+});

package/build/stories/dev-tools/ContainerQueries.story.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react/jsx-runtime';
+import { renderWithStep } from '../utils/render-utils';
+export default {
+    component: ContainerQueries,
+    title: 'Dev Tools',
+    argTypes: {
+        width: {
+            options: ['100%', '900px', '600px', '575px', '400px'],
+            control: { type: 'select' },
+            description: 'Width of the div containing the DynamicFlow component',
+        },
+    },
+    args: {
+        width: '575px',
+    },
+};
+export function ContainerQueries({ width }) {
+    return _jsx(Fragment, { children: render(imageLayoutStep, width) }, width);
+}
+function render(step, width) {
+    return (_jsxs("div", { className: "d-flex", children: [_jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " }), _jsx("div", { style: { width, backgroundColor: 'white' }, children: renderWithStep(step) }), _jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " })] }));
+}
+const imageLayoutStep = {
+    id: 'step-id',
+    title: 'Dynamic Flow Step',
+    description: 'This is a step in the dynamic flow.',
+    schemas: [],
+    layout: [
+        {
+            type: 'image',
+            size: 'xs',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'sm',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'md',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'lg',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'xl',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+    ],
+};

package/build/stories/dev-tools/Debugger.story.js

@@ -0,0 +1,38 @@
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { getMockHttpClient, respondWith } from '../../test-utils';
+import { renderWithStep } from '../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Dev Tools/Debugger',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWith(Object.assign(Object.assign({}, step), { title: 'Success, try again!' })),
+});
+export function Debugger() {
+    return renderWithStep(step, httpClient);
+}
+const step = {
+    id: 'step',
+    title: 'Debugger',
+    description: 'This is here to help you debug steps.',
+    layout: [
+        {
+            type: 'paragraph',
+            text: 'Open Debugger.story.tsx and update the step object, then have fun debugging!',
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+            },
+        },
+    ],
+    schemas: [],
+};

package/build/stories/dev-tools/FixtureSelect.story.js

@@ -0,0 +1,23 @@
+import { layouts, schemas, misc, step } from '@wise/dynamic-flow-fixtures';
+import { renderWithStep } from '../utils/render-utils';
+const fixtures = Object.assign(Object.assign(Object.assign(Object.assign({}, schemas), step), layouts), misc);
+export default {
+    component: FixtureSelect,
+    title: 'Dev Tools/Fixture Select',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+};
+export function FixtureSelect({ initialStepName = '' }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const parsedStep = typeof selectedStep === 'string' ? JSON.parse(selectedStep) : selectedStep;
+    return renderWithStep(parsedStep);
+}

package/build/stories/dev-tools/TestServer.story.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { makeHttpClient } from '../../common/makeHttpClient';
+import { renderWithAction } from '../utils/render-utils';
+import { Layout } from '@transferwise/navigation-ui';
+const customFetch = makeHttpClient('http://localhost:8888/');
+const httpClient = async (input, init) => {
+    action('customFetch')(input, init);
+    const response = await customFetch(input, Object.assign({}, init));
+    try {
+        action('response body')(await response.clone().json());
+    }
+    catch (_a) {
+        action('response body')('parsing response as JSON failed');
+    }
+    return response;
+};
+export default {
+    component: TestServer,
+    title: 'Dev Tools',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function TestServer() {
+    const initialAction = { method: 'GET', url: 'http://localhost:8888' };
+    return renderWithAction(initialAction, httpClient, { features: { nativeBack: true } });
+}
+export function TestServerWithNav() {
+    const initialAction = { method: 'GET', url: 'http://localhost:8888' };
+    return _jsx(Layout, { children: renderWithAction(initialAction, httpClient) });
+}