@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/jsonSchemaForm/schemaFormControl/SchemaFormControl.js

@@ -0,0 +1,106 @@
+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 { isNull, isUndefined } from '@transferwise/neptune-validation';
+import { FormControlType } from '../../common';
+import { useLogger } from '../../common/logging';
+import { getValidBasicModelOrNull } from '../../common/validation/valid-model';
+import { isOneOfSchema, } from '../../dynamic-flow-types';
+import FormControl from '../../formControl';
+import schema from '../schemas/allOf.json';
+import { mapConstSchemaToOption, mapSchemaToUploadOptions } from './optionMapper';
+var isNativeInput = function (propsSchemaType) {
+    return propsSchemaType === 'string' || propsSchemaType === 'number';
+};
+export var getControlType = function (schema) {
+    if ('control' in schema && schema.control) {
+        if (isOneOfSchema(schema) && schema.oneOf.length > 3) {
+            return FormControlType.SELECT;
+        }
+        return schema.control;
+    }
+    if (schema.oneOf) {
+        return schema.oneOf.length === 1 || schema.oneOf.length >= 3 ? 'select' : 'radio';
+    }
+    if (schema.type === 'string') {
+        switch (schema.format) {
+            case 'date':
+                return 'date';
+            case 'password':
+                return 'password';
+            case 'phone-number':
+                return 'tel';
+            case 'base64url':
+                return 'file';
+            default:
+                return 'text';
+        }
+    }
+    if (schema.type === 'boolean') {
+        return 'checkbox';
+    }
+    if (schema.type === 'integer') {
+        return 'number';
+    }
+    return schema.type;
+};
+var getOptions = function (schema, controlType) {
+    if (schema.oneOf) {
+        return schema.oneOf.map(function (childSchema) { return mapConstSchemaToOption(childSchema, controlType); });
+    }
+    return null;
+};
+var SchemaFormControl = function (props) {
+    var log = useLogger();
+    var getSanitisedValue = function (value) {
+        return isNativeInput(props.schema.type) && (isNull(value) || isUndefined(value)) ? '' : value;
+    };
+    var onChange = function (value, type) {
+        props.onChange(getValidBasicModelOrNull(value, props.schema), type);
+    };
+    var controlType = getControlType(props.schema);
+    if (controlType === 'file') {
+        log.warning('Deprecation advanced warning', 'Please use a persist-async blob schema instead of string with base64url for file uploads. The base64url does not perform well on low end devices. Support for this schema will be removed in a later release.');
+    }
+    if (props.schema.values) {
+        log.error('Deprecated schema', 'Schema.values is a legacy approach. Please use oneOf.');
+    }
+    var options = schema.values || getOptions(props.schema, controlType);
+    var events = {
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onSearchChange: props.onSearchChange,
+        onChange: onChange
+    };
+    var safeValue = getSanitisedValue(props.value);
+    var controlProps = {
+        id: props.id,
+        name: props.id,
+        label: props.schema.title,
+        options: options || [],
+        placeholder: props.schema.placeholder,
+        autoComplete: !props.schema.help,
+        disabled: props.disabled || props.schema.disabled,
+        displayPattern: props.schema.displayFormat,
+        // TODO: LOW avoid type assertion below
+        uploadProps: mapSchemaToUploadOptions(props.schema)
+    };
+    return _jsx(FormControl, __assign({ type: controlType, value: safeValue }, events, controlProps));
+};
+SchemaFormControl.defaultProps = {
+    value: null,
+    onFocus: null,
+    onBlur: null,
+    onSearchChange: null,
+    disabled: false
+};
+export default SchemaFormControl;

package/build/jsonSchemaForm/schemaFormControl/availableCurrencyFlags.d.ts

@@ -0,0 +1,3 @@
+export declare function getCurrencyFlag(iconName?: string): {
+    currency: string;
+} | null;

package/build/jsonSchemaForm/schemaFormControl/availableCurrencyFlags.js

@@ -0,0 +1,73 @@
+export function getCurrencyFlag(iconName) {
+    if (iconName) {
+        var index = availablePrefixedCurrencyFlags.indexOf(iconName);
+        if (index >= 0) {
+            return {
+                currency: availableCurrencyFlags[index]
+            };
+        }
+    }
+    return null;
+}
+var availableCurrencyFlags = [
+    'eur',
+    'gbp',
+    'inr',
+    'usd',
+    'aed',
+    'ars',
+    'aud',
+    'bdt',
+    'bgn',
+    'brl',
+    'bwp',
+    'cad',
+    'chf',
+    'clp',
+    'cny',
+    'cop',
+    'crc',
+    'czk',
+    'dkk',
+    'egp',
+    'fjd',
+    'gel',
+    'ghs',
+    'hkd',
+    'hrk',
+    'huf',
+    'idr',
+    'ils',
+    'jpy',
+    'kes',
+    'krw',
+    'lkr',
+    'mad',
+    'mxn',
+    'myr',
+    'mzn',
+    'nad',
+    'ngn',
+    'nok',
+    'npr',
+    'nzd',
+    'pen',
+    'php',
+    'pkr',
+    'pln',
+    'ron',
+    'rub',
+    'sek',
+    'sgd',
+    'thb',
+    'try',
+    'tzs',
+    'uah',
+    'ugx',
+    'uyu',
+    'vnd',
+    'xof',
+    'zar',
+    'zmw',
+];
+var availablePrefixedCurrencyFlags = availableCurrencyFlags.map(function (code) { return "flag-".concat(code); });

package/build/jsonSchemaForm/schemaFormControl/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SchemaFormControl';

package/build/jsonSchemaForm/schemaFormControl/index.js

@@ -0,0 +1 @@
+export { default } from './SchemaFormControl';

package/build/jsonSchemaForm/schemaFormControl/optionMapper.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { Icon, Image, Schema } from '../../dynamic-flow-types';
+export declare const mapConstSchemaToOption: (schema: Schema, controlType?: string) => {
+    searchStrings: string[];
+    disabled?: boolean | undefined;
+    icon?: JSX.Element | undefined;
+    currency?: string | undefined;
+    label: string;
+    value: string;
+} | {
+    searchStrings?: undefined;
+    disabled?: boolean | undefined;
+    icon?: JSX.Element | undefined;
+    currency?: string | undefined;
+    label: string;
+    value: string;
+} | {
+    disabled?: boolean | undefined;
+    avatar?: JSX.Element | undefined;
+    currency?: string | undefined;
+    label: string;
+    value: string;
+};
+export declare const mapImage: (image?: Image) => {
+    icon: JSX.Element;
+} | null;
+export declare const mapIcon: (icon?: Icon) => {
+    icon: JSX.Element;
+} | null;
+export declare const mapIconToAvatar: (icon?: Icon) => {
+    avatar: JSX.Element;
+} | null;
+export declare const mapAvatar: (image?: Image) => {
+    avatar: JSX.Element;
+} | null;
+export declare const mapSchemaToUploadOptions: ({ accepts }: {
+    accepts?: string[] | undefined;
+}) => {
+    usAccept?: string | undefined;
+};

package/build/jsonSchemaForm/schemaFormControl/optionMapper.js

@@ -0,0 +1,89 @@
+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 { Avatar, AvatarType } from '@transferwise/components';
+import { isArray, isNull, isUndefined } from '@transferwise/neptune-validation';
+import DynamicIcon, { isValidIconName } from '../../layout/icon';
+import { getCurrencyFlag } from './availableCurrencyFlags';
+export var mapConstSchemaToOption = function (schema, controlType) {
+    switch (controlType) {
+        case 'select':
+            return __assign(__assign(__assign(__assign(__assign(__assign({ 
+                // TODO: LOW avoid type assertion -- using || '' would fail some tests
+                label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIcon(schema.icon)), mapCurrency(schema.icon)), mapImage(schema.image)), getDisabled(schema.disabled)), mapKeywordsToSearchStrings(schema.keywords));
+        case 'radio':
+        default:
+            return __assign(__assign(__assign(__assign(__assign({ 
+                // TODO: LOW avoid type assertion -- using || '' would fail some tests
+                label: schema.title, value: schema["const"] }, getOptionDescription(schema.title, schema.description)), mapIconToAvatar(schema.icon)), mapCurrency(schema.icon)), mapAvatar(schema.image)), getDisabled(schema.disabled));
+    }
+};
+// TODO: LOW avoid type assertion below -- icon.name may be undefined
+var mapCurrency = function (icon) { return (icon ? getCurrencyFlag(icon.name) : null); };
+var mapKeywordsToSearchStrings = function (searchStrings) {
+    return isArray(searchStrings) ? { searchStrings: searchStrings } : {};
+};
+export var mapImage = function (image) {
+    if (image === null || image === void 0 ? void 0 : image.url) {
+        return {
+            icon: (_jsx("div", __assign({ className: "media" }, { children: _jsx("div", __assign({ className: "np-option__no-media-circle" }, { children: _jsx("img", { src: image.url, alt: image.name || '' }) })) })))
+        };
+    }
+    return null;
+};
+export var mapIcon = function (icon) {
+    if ((icon === null || icon === void 0 ? void 0 : icon.name) && isValidIconName(icon.name)) {
+        return { icon: _jsx(DynamicIcon, { type: icon.name }) };
+    }
+    if (icon === null || icon === void 0 ? void 0 : icon.text) {
+        return { icon: _jsx("span", { children: icon.text }) };
+    }
+    return null;
+};
+export var mapIconToAvatar = function (icon) {
+    if ((icon === null || icon === void 0 ? void 0 : icon.name) && isValidIconName(icon.name)) {
+        return {
+            avatar: (_jsx(Avatar, __assign({ type: AvatarType.ICON }, { children: _jsx(DynamicIcon, { type: icon.name }) })))
+        };
+    }
+    if (icon === null || icon === void 0 ? void 0 : icon.text) {
+        return {
+            avatar: _jsx(Avatar, __assign({ type: AvatarType.INITIALS }, { children: icon.text }))
+        };
+    }
+    return null;
+};
+export var mapAvatar = function (image) {
+    return image && image.url
+        ? {
+            avatar: (_jsx(Avatar, __assign({ type: AvatarType.THUMBNAIL }, { children: _jsx("img", { src: image.url, alt: "User avatar" }) })))
+        }
+        : null;
+};
+export var mapSchemaToUploadOptions = function (_a) {
+    var accepts = _a.accepts;
+    return (__assign({}, (isArray(accepts) && { usAccept: accepts.join(',') })));
+};
+var getOptionDescription = function (title, description) {
+    var _a;
+    if (title && description) {
+        var keyForDescription = (title + description).length > 50 ? 'secondary' : 'note';
+        return _a = {}, _a[keyForDescription] = description, _a;
+    }
+    return undefined;
+};
+var getDisabled = function (disabled) {
+    if (!isUndefined(disabled) && !isNull(disabled)) {
+        return { disabled: disabled };
+    }
+    return undefined;
+};

package/build/jsonSchemaForm/schemas/allOf.json.d.ts

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

package/build/jsonSchemaForm/schemas/allOf.json.js

@@ -0,0 +1,119 @@
+var schema = {
+    allOf: [
+        {
+            title: 'Number schemas',
+            type: 'object',
+            displayOrder: ['number'],
+            properties: {
+                number: {
+                    type: 'number',
+                    title: 'Number input',
+                    minimum: 2,
+                    maximum: 200,
+                    "default": 1,
+                    help: { markdown: '2 or more' },
+                    validationMessages: {
+                        min: 'Too low buddy!',
+                        max: 'Crazy high!'
+                    }
+                }
+            },
+            required: ['number']
+        },
+        {
+            title: 'String schemas',
+            type: 'object',
+            displayOrder: ['string', 'date', 'phone', 'file'],
+            properties: {
+                string: {
+                    type: 'string',
+                    title: 'Text input',
+                    minLength: 2,
+                    maxLength: 8,
+                    pattern: '^[a-z]+$',
+                    "default": 'abc',
+                    help: {
+                        markdown: 'Keep it secret, Keep it safe'
+                    }
+                },
+                date: {
+                    type: 'string',
+                    format: 'date',
+                    title: 'Date input',
+                    minimum: '2000-02-01',
+                    maximum: '2010-01-01',
+                    validationMessages: {
+                        min: 'Must be after Feb 2000',
+                        max: 'Must be before Jan 2010'
+                    }
+                },
+                phone: {
+                    type: 'string',
+                    format: 'phone',
+                    title: 'Phone input',
+                    minLength: 10,
+                    maxLength: 12
+                },
+                file: {
+                    type: 'string',
+                    format: 'base64url',
+                    title: 'File input'
+                }
+            },
+            required: ['string']
+        },
+        {
+            title: 'Boolean schemas',
+            type: 'object',
+            displayOrder: ['boolean'],
+            properties: {
+                boolean: {
+                    type: 'boolean',
+                    title: 'Boolean input',
+                    width: 'md'
+                }
+            }
+        },
+        {
+            title: 'OneOf Const schema',
+            type: 'object',
+            displayOrder: ['select', 'radio'],
+            properties: {
+                select: {
+                    title: 'Select',
+                    placeholder: 'Please choose',
+                    oneOf: [
+                        {
+                            title: 'One',
+                            "const": 'one'
+                        },
+                        {
+                            title: 'Two',
+                            "const": 'two'
+                        },
+                        {
+                            title: 'Three',
+                            "const": 'three'
+                        },
+                    ]
+                },
+                radio: {
+                    title: 'Radio',
+                    placeholder: 'Please choose',
+                    oneOf: [
+                        {
+                            title: 'One',
+                            "const": 'one'
+                        },
+                        {
+                            title: 'Two',
+                            "const": 'two'
+                        },
+                    ]
+                }
+            },
+            required: ['select', 'radio']
+        },
+    ]
+};
+export default schema;

package/build/jsonSchemaForm/schemas/audRecipient.json.d.ts

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