@transferwise/components 0.0.0-experimental-112d47a → 0.0.0-experimental-30a5fa7

package/src/common/requirements.js

@@ -0,0 +1,440 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+
+const prepRequirements = (alternatives) => {
+  if (!alternatives || alternatives.length === 0) {
+    return [];
+  }
+
+  const preppedAlternatives = copyOf(alternatives);
+
+  preppedAlternatives.forEach((alternative) => {
+    if (alternative.prepared) {
+      return;
+    }
+
+    prepLegacyAlternatives(alternative);
+
+    alternative.properties = prepFields(alternative.properties || alternative.fields);
+
+    // If we're still treating type as a special case, move it to a hidden value
+    if (alternative.type && alternative.type !== 'object' && !alternative.types) {
+      alternative.properties.type = {
+        type: 'string',
+        enum: [alternative.type],
+        required: true,
+        hidden: true,
+      };
+
+      alternative.type = 'object';
+    }
+
+    alternative.prepared = true;
+  });
+
+  return preppedAlternatives;
+};
+
+const prepFields = (fields, model, validationMessages) => {
+  if (!fields) {
+    return {};
+  }
+
+  let preparedFields = copyOf(fields);
+
+  preparedFields = flattenFieldsWithGroups(preparedFields);
+  preparedFields = transformFieldArrayToMap(preparedFields);
+  preparedFields = transformNestedKeysToNestedSpecs(preparedFields);
+
+  Object.keys(preparedFields).forEach((key) => {
+    preparedFields[key] = prepField(preparedFields[key], model, validationMessages);
+  });
+
+  return preparedFields;
+};
+
+const prepField = (field, model, validationMessages) => {
+  const preparedField = copyOf(field);
+
+  prepLegacyProps(preparedField);
+  prepType(preparedField);
+  prepPattern(preparedField);
+  prepValidationMessages(preparedField, validationMessages);
+
+  return preparedField;
+};
+
+/**
+ * In an older format we had an extra fieldGroup level, here we flatten that out
+ * So the inner arrays of fields within the different field groups are flattened
+ * to a single array, which is returned.
+ *
+ * @param fields
+ */
+const flattenFieldsWithGroups = (fields) => {
+  if (Array.isArray(fields)) {
+    let flattenedFields = [];
+    fields.forEach((field) => {
+      // If we've been given a group with nested fields, break them out.
+      if (field.fields) {
+        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.fields));
+      } else if (field.group) {
+        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.group));
+      } else {
+        // Otherwise it's a regular field, just add it.
+        flattenedFields.push(field);
+      }
+    });
+    return flattenedFields;
+  }
+  return fields;
+};
+
+const flattenFieldWithGroup = (field, subFields) => {
+  // If first field doesn't have a label, use the one from the group
+  if (field.name && subFields.length > 0 && !subFields[0].name) {
+    subFields[0].name = field.name;
+  }
+
+  if (field.width && subFields.length > 0 && !subFields[0].width) {
+    subFields[0].width = field.width;
+  }
+
+  // If there was a tooltip at fieldGroup level move it to first field.
+  if (field.tooltip && subFields.length > 0 && !subFields[0].help) {
+    subFields[0].help = { message: field.tooltip };
+  }
+
+  if (field.info && subFields.length > 0 && !subFields[0].help) {
+    subFields[0].help = { message: field.info };
+  }
+
+  // If there are two parts of this group, render them side by side
+  if (subFields.length === 2) {
+    subFields.forEach((nestedField) => {
+      nestedField.width = 'md';
+    });
+  }
+
+  // If there are three parts, render the first two side by side
+  if (subFields.length === 3) {
+    subFields[0].width = 'md';
+    subFields[1].width = 'md';
+  }
+
+  return subFields;
+};
+
+/*
+ * Some older requirements return an array of fields, where it should be a map
+ * from the property name to the spec.  This converts arrays to maps.
+ */
+const transformFieldArrayToMap = (fields) => {
+  if (Array.isArray(fields)) {
+    const fieldMap = {};
+    fields.forEach((field) => {
+      const key = field.key || field.name;
+      delete field.key;
+
+      fieldMap[key] = copyOf(field);
+    });
+    return fieldMap;
+  }
+  return fields;
+};
+
+/*
+ * Some older format return keys like 'address.city', expecting the value of
+ * city to be nested inside an address object.  This function creates a spec of
+ * type 'object', and nests such fields inside of it.  When we render we pass
+ * this object spec to a nested fieldset.
+ */
+const transformNestedKeysToNestedSpecs = (fieldMap) => {
+  if (Array.isArray(fieldMap)) {
+    throw new TypeError('Expecting a map of fields, not an array');
+  }
+
+  const nestedFields = {};
+  Object.keys(fieldMap).forEach((key) => {
+    if (key.indexOf('.') > 0) {
+      // If the key contains a period we need to nest the fields in another object
+      const pathSections = key.split('.');
+      const nestedKey = pathSections[0];
+
+      // If this sub object doesn't exist yet, create it
+      if (!nestedFields[nestedKey]) {
+        nestedFields[nestedKey] = {
+          type: 'object',
+          properties: {},
+        };
+      }
+      nestedFields[nestedKey].properties[pathSections[1]] = fieldMap[key];
+    } else {
+      nestedFields[key] = fieldMap[key];
+    }
+  });
+  return nestedFields;
+};
+
+const prepType = (field) => {
+  const type = field.type && field.type.toLowerCase && field.type.toLowerCase();
+
+  switch (type) {
+    case 'text':
+      field.type = 'string';
+      break;
+    case 'date':
+      field.type = 'string';
+      field.format = 'date';
+      break;
+    case 'password':
+      field.type = 'string';
+      field.control = 'password';
+      break;
+    case 'checkbox':
+      field.type = 'boolean';
+      break;
+    case 'select':
+      if (!field.control) {
+        field.control = 'select';
+      }
+      delete field.type;
+      break;
+    case 'radio':
+      field.control = 'radio';
+      delete field.type;
+      break;
+    case 'upload':
+      field.type = 'string';
+      field.format = 'base64url';
+      break;
+    case 'tel':
+      field.type = 'string';
+      field.format = 'phone';
+      break;
+    case 'textarea':
+      field.type = 'string';
+      field.control = 'textarea';
+      break;
+    default:
+  }
+
+  if (!field.control && field.type !== 'object') {
+    field.control = getControlType(field);
+  }
+};
+
+const prepLegacyAlternatives = (alternative) => {
+  if (!alternative.title && alternative.label) {
+    alternative.title = alternative.label;
+  }
+  if (!alternative.title) {
+    alternative.title = getNameFromType(alternative.type);
+  }
+  if (!alternative.type && alternative.name) {
+    alternative.type = alternative.name;
+  }
+  if (!alternative.description && alternative.tooltip) {
+    alternative.description = alternative.tooltip;
+  }
+  if (alternative.fieldGroups && !alternative.fields) {
+    alternative.fields = flattenFieldsWithGroups(alternative.fieldGroups);
+    delete alternative.fieldGroups;
+  }
+};
+
+const prepLegacyProps = (field) => {
+  if (field.name && !field.title) {
+    field.title = field.name;
+    delete field.name;
+  }
+
+  if (field.validationRegexp) {
+    field.pattern = field.validationRegexp;
+    delete field.validationRegexp;
+  }
+
+  if (field.min) {
+    field.minimum = field.min;
+    delete field.min;
+  }
+
+  if (field.max) {
+    field.maximum = field.max;
+    delete field.max;
+  }
+
+  if (field.example && !field.placeholder) {
+    field.placeholder = field.example;
+    delete field.example;
+  }
+
+  if (field.tooltip && !field.help) {
+    field.help = { message: field.tooltip };
+    delete field.tooltip;
+  }
+
+  if (field.valuesAllowed && !field.values) {
+    field.values = field.valuesAllowed;
+    delete field.valuesAllowed;
+  }
+
+  if (field.values && field.values.map) {
+    field.values = prepLegacyValues(field.values);
+  }
+
+  if (field.value && !field.default) {
+    field.default = field.value;
+    delete field.value;
+  }
+
+  if (field.values) {
+    // In some legacy arrays the first value is a placeholder, extract it.
+    if (
+      field.values &&
+      field.values.length > 0 &&
+      field.values[0] &&
+      !field.values[0].value &&
+      field.values[0].label &&
+      !field.placeholder
+    ) {
+      field.placeholder = field.values[0].label;
+      field.values = field.values.slice(1);
+    }
+  }
+};
+
+const prepLegacyValues = (values) => values.map(prepLegacyValue);
+
+const prepLegacyValue = (value) => {
+  if (!value.label && value.title) {
+    value.label = value.title;
+    delete value.title;
+  }
+  if (!value.label && value.name) {
+    value.label = value.name;
+    delete value.name;
+  }
+
+  if (!value.value && value.code) {
+    value.value = value.code;
+    delete value.code;
+  }
+  if (!value.value && value.key) {
+    value.value = value.key;
+    delete value.key;
+  }
+
+  return value;
+};
+
+const prepPattern = (field) => {
+  if (field.pattern) {
+    try {
+      new RegExp(field.pattern);
+    } catch {
+      // eslint-disable-next-line no-console
+      console.warn('API regexp is invalid');
+      delete field.pattern;
+    }
+  } else {
+    delete field.pattern;
+  }
+};
+
+const prepValidationMessages = (field, validationMessages) => {
+  field.validationMessages = field.validationMessages
+    ? field.validationMessages
+    : validationMessages;
+
+  if (!field.validationMessages) {
+    delete field.validationMessages;
+    return;
+  }
+
+  if (field.validationMessages.minimum) {
+    field.validationMessages.min = field.validationMessages.minimum;
+    delete field.validationMessages.minimum;
+  }
+  if (field.validationMessages.maximum) {
+    field.validationMessages.max = field.validationMessages.maximum;
+    delete field.validationMessages.maximum;
+  }
+};
+
+const getControlType = (field) => {
+  if (field.control) {
+    return field.control.toLowerCase();
+  }
+  if (field.hidden) {
+    return 'hidden';
+  }
+  if (field.values && field.values.length > 0) {
+    return getSelectionType(field);
+  }
+
+  switch (field.type) {
+    case 'string':
+      return getControlForStringFormat(field.format);
+    case 'number':
+    case 'integer':
+      return 'number';
+    case 'boolean':
+      return 'checkbox';
+    default:
+      return 'text';
+  }
+};
+
+const getControlForStringFormat = (format) => {
+  switch (format) {
+    case 'date':
+      return 'date';
+    case 'base64url':
+      return 'file';
+    case 'password':
+      return 'password';
+    case 'uri':
+      return 'text'; // 'url'; - not implemented
+    case 'email':
+      return 'text'; // 'email'; - not implemented
+    case 'phone':
+      return 'tel';
+    default:
+      return 'text';
+  }
+};
+
+const getSelectionType = (field) => {
+  if (field.control) {
+    return field.control;
+  }
+  if (field.type === 'select') {
+    return 'select';
+  }
+  if (field.type === 'radio') {
+    return 'radio';
+  }
+
+  if (field.values) {
+    return field.values.length > 3 ? 'select' : 'radio';
+  }
+  return 'select';
+};
+
+const copyOf = (object) => JSON.parse(JSON.stringify(object));
+
+/**
+ * Some older requirments formats do not include a label for alternatives
+ *
+ * @param tabType
+ */
+const getNameFromType = (tabType) => {
+  if (tabType && tabType.length > 0) {
+    const tabNameWithSpaces = tabType.toLowerCase().split('_').join(' '); // String.replace method only replaces first instance
+    return tabNameWithSpaces.charAt(0).toUpperCase() + tabNameWithSpaces.slice(1);
+  }
+  return '';
+};
+
+export { prepFields, getControlType };

package/src/index.ts

@@ -59,7 +59,6 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
-export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
 export type { PanelProps } from './common/panel';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -0,0 +1,78 @@
+import { userEvent, within, fn } from '@storybook/test';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+import { Meta, type StoryObj } from '@storybook/react';
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+const meta = {
+  title: 'Forms/InputWithDisplayFormat',
+  component: InputWithDisplayFormat,
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+  args: {
+    onFocus: fn(),
+    onBlur: fn(),
+    onChange: fn(),
+  },
+} satisfies Meta<typeof InputWithDisplayFormat>;
+export default meta;
+
+export const Basic: Story = {
+  args: {
+    label: 'Sort Code',
+    placeholder: '**-**-**',
+    displayPattern: '**-**-**',
+  },
+};
+
+export const CardNumber: Story = {
+  args: {
+    label: 'Card Number',
+    placeholder: '**** **** **** **** ***',
+    displayPattern: '**** **** **** **** ***',
+  },
+};
+
+export const CVC: Story = {
+  args: {
+    label: 'CVC',
+    placeholder: '***',
+    displayPattern: '***',
+    value: '',
+  },
+};
+
+export const ExpiryDate: Story = {
+  args: {
+    label: 'Expiry Date',
+    placeholder: '** / **',
+    displayPattern: '** / **',
+  },
+};
+
+export const SecurityPin: Story = {
+  args: {
+    label: 'Security Pin',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+};
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};

package/src/navigationOption/{NavigationOption.story.tsx → NavigationOption.story.js}

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import {
@@ -20,22 +19,8 @@ export default {
   tags: ['autodocs'],
 };
 
-type TemplateTypes = {
-  href?: string;
-  title?: string;
-  content?: string;
-  complex?: boolean;
-  disabled?: boolean;
-  showMediaAtAllSizes?: boolean;
-  showMediaCircle?: boolean;
-  isContainerAligned?: boolean;
-  className?: string;
-  hasTitleOnly?: boolean;
-  media?: ReactNode;
-};
-
-const Template = (props: TemplateTypes) => {
-  const href = text('href', props.href ?? '');
+const Template = (props) => {
+  const href = text('href', props.href);
   const title = text('title', props.title ?? 'Navigation option');
   const content = text('content', props.content ?? 'Button and icon are vertically centered.');
   const complex = boolean('complex', props.complex ?? false);
@@ -43,7 +28,7 @@ const Template = (props: TemplateTypes) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
   const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className ?? '');
+  const className = text('className', props.className);
 
   return (
     <NavigationOption
@@ -155,10 +140,7 @@ export const Multiple = () => (
 
 export const WithIllustration = () => {
   return (
-    <Template
-      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
-      showMediaCircle={false}
-    />
+    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} showMediaCircle={false} />
   );
 };
 
@@ -184,7 +166,7 @@ export const WithContainerContent = () => (
   </>
 );
 
-const NavigationOptionTemplate = (props: TemplateTypes) => {
+const NavigationOptionTemplate = (props) => {
   const {
     href,
     title,

package/src/navigationOption/NavigationOption.tsx

@@ -6,7 +6,7 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
-export type NavigationOptionProps = OptionProps;
+type NavigationOptionProps = OptionProps;
 
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,