@wise/dynamic-flow-client 0.2.0 → 0.2.1

package/build/flow/DynamicFlow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DynamicFlowProps } from './types';
 declare const DynamicFlow: (props: DynamicFlowProps) => JSX.Element;
 export default DynamicFlow;

package/build/flow/DynamicFlow.js

@@ -320,16 +320,26 @@ var DynamicFlowComponent = function (_a) {
                             : "onAction was supressed because action is disabled", extraLoggingProps);
                         return [2 /*return*/];
                     }
-                    if (!exit) return [3 /*break*/, 3];
-                    if (!url) return [3 /*break*/, 2];
+                    if (!exit) return [3 /*break*/, 7];
+                    if (!url) return [3 /*break*/, 6];
+                    if (!isSubmissionMethod(method)) return [3 /*break*/, 3];
+                    setFormErrors(null);
+                    setSubmitted(true);
+                    if (!modelIsValid) return [3 /*break*/, 2];
                     return [4 /*yield*/, fetchExitResult(action, submissionData)];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/];
-                case 2:
+                    _a.label = 2;
+                case 2: return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, fetchExitResult(action)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+                case 6:
                     onCloseWithTracking(result);
                     return [2 /*return*/];
-                case 3:
+                case 7:
                     if (isSubmissionMethod(method)) {
                         setFormErrors(null);
                         setSubmitted(true);

package/build/flow/DynamicFlowStep.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GlobalError, Step } from '../dynamic-flow-types';
 import { LayoutStepProps } from '../step/layoutStep/LayoutStep';
 type DynamicFlowStepProps = Omit<LayoutStepProps, 'stepSpecification'> & {

package/build/flow/errorBoundary/ErrorBoundaryAlert.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onDismiss: () => void;
 };

package/build/flow/fixtures/components/alert.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/box.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/button.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/columns.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/copyable.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/decision.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/heading.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/image.d.ts

@@ -1,3 +1,4 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { Size, FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;
+export declare const getImageStep: (size: Size) => FormStep;

package/build/flow/fixtures/components/image.js

@@ -1,3 +1,4 @@
+var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 var step = {
     type: 'form',
     key: 'Components/Image',
@@ -5,7 +6,7 @@ var step = {
     description: 'Images can have different sizes: "xs", "sm", "md", "lg", "xl".',
     actions: [],
     schemas: [],
-    layout: ['xs', 'sm', 'md', 'lg', 'xl'].flatMap(function (size) { return [
+    layout: sizes.flatMap(function (size) { return [
         {
             type: 'paragraph',
             text: "This is an image with size: \"".concat(size, "\""),
@@ -13,10 +14,28 @@ var step = {
         },
         {
             type: 'image',
-            url: 'https://bootstrap.transferwise.com/assets/img/css2-bg.jpg',
-            text: "This is heading with size: \"".concat(size, "\""),
+            url: 'http://placekitten.com/g/400/400',
+            text: "This is an image with size: \"".concat(size, "\""),
             size: size
         },
     ]; })
 };
 export default step;
+export var getImageStep = function (size) {
+    return {
+        type: 'form',
+        key: "Components/Image-".concat(size),
+        title: "Image Component - ".concat(size),
+        description: "This is an image with size: \"".concat(size, "\""),
+        actions: [],
+        schemas: [],
+        layout: [
+            {
+                type: 'image',
+                url: 'http://placekitten.com/g/400/400',
+                text: "This is an image with size: \"".concat(size, "\""),
+                size: size
+            },
+        ]
+    };
+};

package/build/flow/fixtures/components/info.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/list.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/loading-indicator.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/paragraph.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/components/review.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/examples/camera-capture.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/examples/recipient-update.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/examples/recipient-update.js

@@ -13,6 +13,7 @@ var step = {
     ],
     schemas: [
         {
+            $id: 'form',
             allOf: [
                 {
                     type: 'object',
@@ -190,8 +191,7 @@ var step = {
                     },
                     required: ['address']
                 },
-            ],
-            $id: 'form'
+            ]
         },
     ],
     errors: {

package/build/flow/fixtures/examples/recipient.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/examples/single-file-upload.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/examples/single-file-upload.js

@@ -5,7 +5,7 @@ var step = {
     actions: [],
     schemas: [
         {
-            $id: 'the-schema',
+            $id: '#schema-1',
             type: 'object',
             displayOrder: ['frontSide'],
             properties: {
@@ -33,6 +33,35 @@ var step = {
             },
             required: ['frontSide']
         },
+        {
+            $id: '#schema-2',
+            type: 'object',
+            displayOrder: ['frontSide'],
+            properties: {
+                frontSide: {
+                    refreshFormOnChange: false,
+                    $id: 'backSide',
+                    persistAsync: {
+                        url: '/single-file-upload-url-fail',
+                        param: 'file',
+                        idProperty: 'backSide',
+                        schema: {
+                            accepts: ['image/jpeg', 'image/png'],
+                            maxSize: 41943040,
+                            source: 'file',
+                            description: 'JPEG or PNG less than 10MB',
+                            $id: 'cb22a588-c404-43fd-b3fa-754afb3729f4',
+                            title: 'Upload file',
+                            type: 'blob'
+                        },
+                        method: 'POST'
+                    },
+                    title: 'Single File Upload',
+                    type: 'integer'
+                }
+            },
+            required: ['backSide']
+        },
     ],
     layout: [
         {
@@ -41,7 +70,7 @@ var step = {
         },
         {
             type: 'form',
-            schema: { $ref: 'the-schema' }
+            schema: { $ref: '#schema-1' }
         },
         {
             type: 'paragraph',
@@ -49,34 +78,7 @@ var step = {
         },
         {
             type: 'form',
-            schema: {
-                type: 'object',
-                displayOrder: ['frontSide'],
-                properties: {
-                    frontSide: {
-                        refreshFormOnChange: false,
-                        $id: 'backSide',
-                        persistAsync: {
-                            url: '/single-file-upload-url-fail',
-                            param: 'file',
-                            idProperty: 'backSide',
-                            schema: {
-                                accepts: ['image/jpeg', 'image/png'],
-                                maxSize: 41943040,
-                                source: 'file',
-                                description: 'JPEG or PNG less than 10MB',
-                                $id: 'cb22a588-c404-43fd-b3fa-754afb3729f4',
-                                title: 'Upload file',
-                                type: 'blob'
-                            },
-                            method: 'POST'
-                        },
-                        title: 'Single File Upload',
-                        type: 'integer'
-                    }
-                },
-                required: ['backSide']
-            }
+            schema: { $ref: '#schema-2' }
         },
         {
             type: 'button',

package/build/flow/fixtures/examples/step-validation-errors.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/features/action-response.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/features/external.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/features/persist-async.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/features/polling.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/features/validation-async.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../../dynamic-flow-types';
+declare const step: Step;
+export default step;

package/build/flow/fixtures/features/validation-async.js

@@ -0,0 +1,38 @@
+var step = {
+    type: 'form',
+    key: 'Features/Validation Async',
+    title: 'Validation Async Feature',
+    schemas: [
+        {
+            $id: '#the-schema',
+            type: 'object',
+            displayOrder: ['account-number'],
+            properties: {
+                'account-number': {
+                    $id: '#the-string-schema',
+                    type: 'string',
+                    maxLength: 6,
+                    title: 'Account number (max 6 digits)',
+                    validationAsync: {
+                        method: 'POST',
+                        url: '/validate',
+                        param: 'myParameter'
+                    }
+                }
+            }
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schema: {
+                $ref: '#the-schema'
+            }
+        },
+    ],
+    actions: [],
+    model: {
+    // name: 'Colin Robinson',
+    }
+};
+export default step;

package/build/flow/fixtures/index.d.ts

@@ -1,38 +1,44 @@
 export declare const fixtures: {
     readonly steps: {
-        readonly simpleForm: import("../..").Step;
-        readonly stringFormats: import("../..").Step;
-        readonly numberAndInteger: import("../..").Step;
-        readonly oneOf: import("../..").Step;
-        readonly alert: import("../..").Step;
-        readonly box: import("../..").Step;
-        readonly button: import("../..").Step;
-        readonly columns: import("../..").Step;
-        readonly decision: import("../..").Step;
-        readonly heading: import("../..").Step;
-        readonly image: import("../..").Step;
-        readonly info: import("../..").Step;
-        readonly list: import("../..").Step;
-        readonly loadingIndicator: import("../..").Step;
-        readonly paragraph: import("../..").Step;
-        readonly review: import("../..").Step;
-        readonly copyable: import("../..").Step;
-        readonly actionResponse: import("../..").Step;
-        readonly polling: import("../..").Step;
-        readonly external: import("../..").Step;
-        readonly recipient: import("../..").Step;
-        readonly recipientUpdate: import("../..").Step;
-        readonly persistAsync: import("../..").Step;
-        readonly singleFileUpload: import("../..").Step;
-        readonly stepValidationErrors: import("../..").Step;
-        readonly cameraCapture: import("../..").Step;
+        readonly simpleForm: import("../../dynamic-flow-types").FormStep;
+        readonly stringFormats: import("../../dynamic-flow-types").FormStep;
+        readonly numberAndInteger: import("../../dynamic-flow-types").FormStep;
+        readonly oneOf: import("../../dynamic-flow-types").FormStep;
+        readonly alert: import("../../dynamic-flow-types").FormStep;
+        readonly box: import("../../dynamic-flow-types").FormStep;
+        readonly button: import("../../dynamic-flow-types").FormStep;
+        readonly columns: import("../../dynamic-flow-types").FormStep;
+        readonly decision: import("../../dynamic-flow-types").FormStep;
+        readonly heading: import("../../dynamic-flow-types").FormStep;
+        readonly image: import("../../dynamic-flow-types").FormStep;
+        readonly 'image-xs': import("../../dynamic-flow-types").FormStep;
+        readonly 'image-sm': import("../../dynamic-flow-types").FormStep;
+        readonly 'image-md': import("../../dynamic-flow-types").FormStep;
+        readonly 'image-lg': import("../../dynamic-flow-types").FormStep;
+        readonly 'image-xl': import("../../dynamic-flow-types").FormStep;
+        readonly info: import("../../dynamic-flow-types").FormStep;
+        readonly list: import("../../dynamic-flow-types").FormStep;
+        readonly loadingIndicator: import("../../dynamic-flow-types").FormStep;
+        readonly paragraph: import("../../dynamic-flow-types").FormStep;
+        readonly review: import("../../dynamic-flow-types").FormStep;
+        readonly copyable: import("../../dynamic-flow-types").FormStep;
+        readonly actionResponse: import("../../dynamic-flow-types").FormStep;
+        readonly polling: import("../../dynamic-flow-types").FormStep;
+        readonly external: import("../../dynamic-flow-types").FormStep;
+        readonly recipient: import("../../dynamic-flow-types").FormStep;
+        readonly recipientUpdate: import("../../dynamic-flow-types").FormStep;
+        readonly persistAsync: import("../../dynamic-flow-types").FormStep;
+        readonly validationAsync: import("../..").Step;
+        readonly singleFileUpload: import("../../dynamic-flow-types").FormStep;
+        readonly stepValidationErrors: import("../../dynamic-flow-types").FormStep;
+        readonly cameraCapture: import("../../dynamic-flow-types").FormStep;
     };
     readonly responses: {
         readonly action: {
             action: import("../../dynamic-flow-types").Action;
         };
-        readonly success: import("../..").Step;
-        readonly recipientUpdate: import("../..").Step;
+        readonly success: import("../../dynamic-flow-types").FormStep;
+        readonly recipientUpdate: import("../../dynamic-flow-types").FormStep;
         readonly exit: {
             id: string;
             name: string;

package/build/flow/fixtures/index.js

@@ -5,7 +5,7 @@ import columns from './components/columns';
 import copyable from './components/copyable';
 import decision from './components/decision';
 import heading from './components/heading';
-import image from './components/image';
+import image, { getImageStep } from './components/image';
 import info from './components/info';
 import list from './components/list';
 import loadingIndicator from './components/loading-indicator';
@@ -20,6 +20,7 @@ import actionResponse from './features/action-response';
 import external from './features/external';
 import persistAsync from './features/persist-async';
 import polling from './features/polling';
+import validationAsync from './features/validation-async';
 import action from './responses/action';
 import actionResponseFinal from './responses/action-response-final';
 import exit from './responses/exit';
@@ -41,6 +42,11 @@ export var fixtures = {
         decision: decision,
         heading: heading,
         image: image,
+        'image-xs': getImageStep('xs'),
+        'image-sm': getImageStep('sm'),
+        'image-md': getImageStep('md'),
+        'image-lg': getImageStep('lg'),
+        'image-xl': getImageStep('xl'),
         info: info,
         list: list,
         loadingIndicator: loadingIndicator,
@@ -53,6 +59,7 @@ export var fixtures = {
         recipient: recipient,
         recipientUpdate: recipientUpdate,
         persistAsync: persistAsync,
+        validationAsync: validationAsync,
         singleFileUpload: singleFileUpload,
         stepValidationErrors: stepValidationErrors,
         cameraCapture: cameraCapture

package/build/flow/fixtures/responses/action-response-final.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/responses/recipient-update-final.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/schemas/basic-form.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/schemas/number-and-integer.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/schemas/one-of.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/schemas/string-formats.d.ts

@@ -1,3 +1,3 @@
-import { Step } from '../../../dynamic-flow-types';
-declare const step: Step;
+import { FormStep } from '../../../dynamic-flow-types';
+declare const step: FormStep;
 export default step;

package/build/flow/fixtures/schemas/string-formats.js

@@ -30,7 +30,8 @@ var step = {
                     format: 'date',
                     control: 'date-lookup',
                     minimum: '2023-01-01',
-                    maximum: '2023-12-31'
+                    maximum: '2023-12-31',
+                    placeholder: 'Select a date'
                 },
                 telephone: {
                     title: 'Phone number (string schema with format: "phone-number")',
@@ -53,6 +54,9 @@ var step = {
                 type: 'primary'
             }
         },
-    ]
+    ],
+    model: {
+        'date-lookup': '2023-01-01'
+    }
 };
 export default step;

package/build/flow/stories/DynamicFlow.story.d.ts

@@ -0,0 +1 @@
+export declare const getObjectKeys: <T>(object: T) => (keyof T)[];

package/build/flow/stories/DynamicFlow.story.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import DynamicFlow from '../DynamicFlow';
+import { fixtures } from '../fixtures';
+import EditableDynamicFlow from './EditableDynamicFlow';
+import { fixtureFetcher } from './fixtureFetcher';
+export var getObjectKeys = Object.keys;
+var storyMap = {};
+var allStepNames = getObjectKeys(fixtures.steps);
+allStepNames.forEach(function (stepName) {
+    var _a;
+    var label = (_a = fixtures.steps[stepName].key) !== null && _a !== void 0 ? _a : stepName;
+    var _b = label.split('/'), group = _b[0], name = _b[1];
+    if (!storyMap[group]) {
+        storyMap[group] = storiesOf("Dynamic Flow/".concat(group), module);
+    }
+    storyMap[group].add(name, function () { return (_jsx(DynamicFlow, { id: "storybook", initialAction: { method: 'GET', url: "/steps/".concat(stepName) }, fetcher: fixtureFetcher, loaderConfig: { size: 'xl', initial: true, submission: false }, onClose: action('onClose'), onStepChange: action('onStepChange'), onError: action('onError'), onTrackableEvent: action('onTrackableEvent'), onLog: action('onLog') }, stepName)); });
+});
+var editable = storiesOf("Dynamic Flow/Editable", module);
+editable.add('Dynamic Flow', EditableDynamicFlow, {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures.steps)
+        }
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] }
+});

package/build/flow/stories/EditableDynamicFlow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const EditableDynamicFlow: ({ initialStepName }: {
     initialStepName?: string | undefined;
 }) => JSX.Element;