@wise/dynamic-flow-client-internal 3.15.2 → 3.15.3-experimental-9ab778d

package/build/stories/visual-tests/layouts.story.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { layouts } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Layouts',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var alert = {
+    name: 'Alert',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.alert }, "alert");
+    }
+};
+export var box = {
+    name: 'Box',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.box }, "box");
+    }
+};
+export var button = {
+    name: 'Button',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.button }, "button");
+    }
+};
+export var columns = {
+    name: 'Columns',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.columns }, "columns");
+    }
+};
+export var decision = {
+    name: 'Decision',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.decision }, "decision");
+    }
+};
+export var divider = {
+    name: 'Divider',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.divider }, "divider");
+    }
+};
+export var form = {
+    name: 'Form',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.form }, "form");
+    }
+};
+export var heading = {
+    name: 'Heading',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.heading }, "heading");
+    }
+};
+export var image = {
+    name: 'Image',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.image }, "image");
+    }
+};
+export var instructions = {
+    name: 'Instructions',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.instructions }, "instructions");
+    }
+};
+export var loadingIndicator = {
+    name: 'Loading Indicator',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.loadingIndicator }, "loadingIndicator");
+    }
+};
+export var margin = {
+    name: 'Margin',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.margin }, "margin");
+    }
+};
+export var markdown = {
+    name: 'Markdown',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.markdown }, "markdown");
+    }
+};
+export var paragraph = {
+    name: 'Paragraph',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.paragraph }, "paragraph");
+    }
+};
+export var review = {
+    name: 'Review',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.review }, "review");
+    }
+};
+export var statusList = {
+    name: 'List',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.statusList }, "statusList");
+    }
+};

package/build/stories/visual-tests/schemas.story.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { schemas } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Schemas',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var allOf = {
+    name: 'AllOf',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.allOf }, "allOf");
+    }
+};
+export var array = {
+    name: 'Array',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.array }, "array");
+    }
+};
+export var arrayUpload = {
+    name: 'Array Upload',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.arrayUpload }, "arrayUpload");
+    }
+};
+export var blob = {
+    name: 'Blob',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.blob }, "blob");
+    }
+};
+export var boolean = {
+    name: 'Boolean',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.boolean }, "boolean");
+    }
+};
+export var hidden = {
+    name: 'Hidden',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.hidden }, "hidden");
+    }
+};
+export var integer = {
+    name: 'Integer',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.integer }, "integer");
+    }
+};
+export var multiSelect = {
+    name: 'Multi Select',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.multiSelect }, "multiSelect");
+    }
+};
+export var number = {
+    name: 'Number',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.number }, "number");
+    }
+};
+export var object = {
+    name: 'Object',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.object }, "object");
+    }
+};
+export var oneOf = {
+    name: 'OneOf',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.oneOf }, "oneOf");
+    }
+};
+export var string = {
+    name: 'String',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.string }, "string");
+    }
+};

package/build/stories/visual-tests/step.story.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { step } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Step',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var basic = {
+    name: 'Basic',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.basic }, "basic");
+    }
+};
+export var globalError = {
+    name: 'Error',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.globalError }, "globalError");
+    }
+};
+export var validationError = {
+    name: 'Validation',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.validationError }, "validationError");
+    }
+};

package/build/test-utils/NeptuneProviders.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider as ComponentProvider, DEFAULT_LANG, DEFAULT_LOCALE, SnackbarProvider, translations as componentTranslations, getLangFromLocale, } from '@transferwise/components';
+import { ThemeProvider } from '@wise/components-theming';
+import { translations } from '@wise/dynamic-flow-client';
+var locale = DEFAULT_LOCALE;
+var lang = getLangFromLocale(locale) || DEFAULT_LANG;
+var messages = __assign(__assign({}, componentTranslations[lang]), translations[lang]);
+function NeptuneProviders(_a) {
+    var children = _a.children;
+    return (_jsx(ThemeProvider, { theme: "personal", screenMode: "light", children: _jsx(SnackbarProvider, { children: _jsx(ComponentProvider, { i18n: { locale: locale, messages: messages }, children: children }) }) }));
+}
+export default NeptuneProviders;

package/build/test-utils/rtl-utils.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import NeptuneProviders from './NeptuneProviders';
+export var renderWithProviders = function (children, options) {
+    var renderedResult = render(_jsx(NeptuneProviders, { children: children }), options);
+    return __assign(__assign({}, renderedResult), { rerender: function (ui, renderOptions) {
+            return renderWithProviders(ui, __assign({ container: renderedResult.container }, renderOptions));
+        } });
+};

package/build/tests/renderers/RadioInputRendererComponent.test.js

@@ -0,0 +1,76 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { RadioInputRendererComponent } from '@wise/dynamic-flow-renderers/src/SelectInputRenderer/RadioInputRendererComponent';
+import { renderWithProviders } from '../../test-utils/rtl-utils';
+describe('RadioInputRendererComponent', function () {
+    var getProps = function () { return ({
+        type: 'input-select',
+        id: 'id',
+        children: [],
+        description: 'description',
+        autoComplete: 'off',
+        required: false,
+        disabled: false,
+        error: 'error',
+        help: 'help',
+        label: 'label',
+        options: [
+            {
+                title: 'Option A',
+                disabled: false,
+            },
+            {
+                title: 'Option B',
+                disabled: false,
+            },
+        ],
+        selectedIndex: null,
+        onSelect: jest.fn(),
+        onFocus: jest.fn(),
+        onBlur: jest.fn(),
+    }); };
+    describe('When the value is updated from outside the UI component', function () {
+        it('should update the selected value', function () {
+            var props = getProps();
+            var rerender = renderWithProviders(_jsx(RadioInputRendererComponent, __assign({}, props))).rerender;
+            expect(screen.getByLabelText('Option A')).not.toBeChecked();
+            expect(screen.getByLabelText('Option B')).not.toBeChecked();
+            rerender(_jsx(RadioInputRendererComponent, __assign({}, props, { selectedIndex: 1 })));
+            expect(screen.getByLabelText('Option B')).toBeChecked();
+        });
+    });
+    describe('When the options are updated (e.g. refresh-on-change)', function () {
+        it('should update the options', function () {
+            var props = __assign(__assign({}, getProps()), { selectedIndex: 1 });
+            var rerender = renderWithProviders(_jsx(RadioInputRendererComponent, __assign({}, props))).rerender;
+            expect(screen.getByLabelText('Option B')).toBeChecked();
+            var updatedProps = __assign(__assign({}, props), { options: [
+                    {
+                        title: 'Option A',
+                        disabled: false,
+                    },
+                    {
+                        title: 'Option NEW',
+                        disabled: false,
+                    },
+                    {
+                        title: 'Option B',
+                        disabled: false,
+                    },
+                ] });
+            rerender(_jsx(RadioInputRendererComponent, __assign({}, updatedProps)));
+            expect(screen.getByLabelText('Option NEW')).toBeChecked();
+        });
+    });
+});

package/build/tests/renderers/value-utils.test.js

@@ -0,0 +1,33 @@
+import { dateStringToDateOrNull, dateToDateString, numericValueOrNull, } from '@wise/dynamic-flow-renderers/src/utils/value-utils';
+describe('numericValueOrNull', function () {
+    it('should return null if the input is not a valid number', function () {
+        expect(numericValueOrNull('abc')).toBeNull();
+        expect(numericValueOrNull('123abc')).toBeNull();
+    });
+    it('should return the input value if it is a valid number', function () {
+        expect(numericValueOrNull('123')).toBe('123');
+    });
+});
+describe('dateStringToDateOrNull', function () {
+    it('should return null if the input is nullish', function () {
+        expect(dateStringToDateOrNull(undefined)).toBeNull();
+        expect(dateStringToDateOrNull('')).toBeNull();
+        expect(dateStringToDateOrNull(null)).toBeNull();
+    });
+    it('should return null if the input is not a valid date', function () {
+        expect(dateStringToDateOrNull('Jan-06-2022')).toBeNull();
+        expect(dateStringToDateOrNull('Jan 06 2022')).toBeNull();
+    });
+    it('should return a Date object if the input is a valid date string', function () {
+        var date = dateStringToDateOrNull('2022-01-31');
+        expect(date === null || date === void 0 ? void 0 : date.getFullYear()).toBe(2022);
+        expect(date === null || date === void 0 ? void 0 : date.getMonth()).toBe(0);
+        expect(date === null || date === void 0 ? void 0 : date.getDate()).toBe(31);
+    });
+});
+describe('dateToDateString', function () {
+    it('should return a formatted date string when passed a date', function () {
+        var date = new Date('2022-01-01');
+        expect(dateToDateString(date)).toBe('2022-01-01');
+    });
+});

package/build/types/stories/visual-tests/generated.story.d.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const alert: Story;
+export declare const align: Story;
+export declare const arraytuple: Story;
+export declare const box: Story;
+export declare const button: Story;
+export declare const checkbox: Story;
+export declare const columns: Story;
+export declare const copyable: Story;
+export declare const date: Story;
+export declare const datelookup: Story;
+export declare const decision: Story;
+export declare const heading: Story;
+export declare const image: Story;
+export declare const instructions: Story;
+export declare const integer: Story;
+export declare const list: Story;
+export declare const margin: Story;
+export declare const markdown: Story;
+export declare const modal: Story;
+export declare const multiselect: Story;
+export declare const number: Story;
+export declare const paragraph: Story;
+export declare const password: Story;
+export declare const phonenumber: Story;
+export declare const radio: Story;
+export declare const repeatable: Story;
+export declare const review: Story;
+export declare const search: Story;
+export declare const segmented: Story;
+export declare const select: Story;
+export declare const tabs: Story;
+export declare const text: Story;
+export declare const textarea: Story;
+export declare const upload: Story;

package/build/types/stories/visual-tests/layouts.story.d.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const alert: Story;
+export declare const box: Story;
+export declare const button: Story;
+export declare const columns: Story;
+export declare const decision: Story;
+export declare const divider: Story;
+export declare const form: Story;
+export declare const heading: Story;
+export declare const image: Story;
+export declare const instructions: Story;
+export declare const loadingIndicator: Story;
+export declare const margin: Story;
+export declare const markdown: Story;
+export declare const paragraph: Story;
+export declare const review: Story;
+export declare const statusList: Story;

package/build/types/stories/visual-tests/schemas.story.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const allOf: Story;
+export declare const array: Story;
+export declare const arrayUpload: Story;
+export declare const blob: Story;
+export declare const boolean: Story;
+export declare const hidden: Story;
+export declare const integer: Story;
+export declare const multiSelect: Story;
+export declare const number: Story;
+export declare const object: Story;
+export declare const oneOf: Story;
+export declare const string: Story;

package/build/types/stories/visual-tests/step.story.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const basic: Story;
+export declare const globalError: Story;
+export declare const validationError: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "3.15.2",
+  "version": "3.15.3-experimental-9ab778d",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -82,7 +82,7 @@
     "webpack": "5.92.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "2.16.0"
+    "@wise/dynamic-flow-types": "2.17.0-experimental-9ab778d"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.31",
@@ -96,8 +96,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "3.15.1",
-    "@wise/dynamic-flow-types": "2.16.0"
+    "@wise/dynamic-flow-client": "3.15.2-experimental-9ab778d",
+    "@wise/dynamic-flow-types": "2.17.0-experimental-9ab778d"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",