@transferwise/components 0.0.0-experimental-85b9dd1 → 0.0.0-experimental-0db2ae7

package/src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js

@@ -0,0 +1,25 @@
+import { isArray } from '@transferwise/neptune-validation';
+/**
+ * Checks if query is contained into object properties.
+ *
+ * @param {object} option - the select option
+ * @param {string} query - the current search query
+ * @returns {boolean}
+ */
+export const isOptionAndFitsQuery = (option, query) =>
+  startsWith(option.iso3, query) ||
+  startsWith(option.iso2, query) ||
+  startsWith(option.name, query) ||
+  startsWith(option.phone, query);
+
+export const startsWith = (property, query) => {
+  if (isArray(property)) {
+    return (
+      property.filter((proper) => normalizeValue(proper).indexOf(normalizeValue(query)) === 0)
+        .length > 0
+    );
+  }
+  return normalizeValue(property).indexOf(normalizeValue(query)) === 0;
+};
+
+const normalizeValue = (value) => value.toLowerCase().replace('+', '');

package/src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.spec.js

@@ -0,0 +1,66 @@
+import { startsWith, isOptionAndFitsQuery } from '.';
+
+const DATA_TEST = [
+  {
+    name: 'test1',
+    iso2: 'TT',
+    iso3: 'TT1',
+    phone: '+93',
+  },
+  {
+    name: 'test1',
+    iso2: ['TT', 'AA'],
+    iso3: 'TT1',
+    phone: '+93',
+  },
+  {
+    name: 'something',
+    iso2: 'ST',
+    iso3: 'SMT',
+    phone: '+33',
+  },
+];
+
+describe('isOptionAndFitsQuery', () => {
+  describe('when option is given', () => {
+    it('should return true if query is relevant', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[0], 'TT')).toBe(true);
+    });
+
+    it('should return true if query is relevant and one of the array values', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[1], 'TT')).toBe(true);
+    });
+
+    it('should return false if query is not relevant and not one of the array values', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[1], 'BB')).toBe(false);
+    });
+
+    it('should return false if query is not relevant', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[0], 'AA')).toBe(false);
+    });
+  });
+});
+
+describe('startWith', () => {
+  describe('when property is given', () => {
+    it('returns true if any of the values starts with the query', () => {
+      expect(startsWith('AA', 'AA')).toBe(true);
+    });
+
+    it(`returns false if value doesn't start with`, () => {
+      expect(startsWith('AABB', 'BB')).toBe(false);
+    });
+
+    it('should return true if query is contained in grouped options', () => {
+      expect(startsWith(['AA', 'BB'], 'BB')).toBe(true);
+    });
+
+    it("returns false if any value in an array doesn't start with", () => {
+      expect(startsWith(['CCAA', 'CCBB'], 'BB')).toBe(false);
+    });
+
+    it('returns false for an empty value', () => {
+      expect(startsWith('', 'BB')).toBe(false);
+    });
+  });
+});

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.js

@@ -0,0 +1 @@
+export const isStringNumeric = (value) => /^\+?[\d-\s]+$/.test(value);

package/src/phoneNumberInput/utils/isStringNumeric/{isStringNumeric.spec.ts → isStringNumeric.spec.js}

@@ -4,6 +4,7 @@ describe('isStringNumeric', () => {
   it('should return true when numeric sting is provided', () => {
     expect(isStringNumeric('+23456')).toBe(true);
     expect(isStringNumeric('23456')).toBe(true);
+    expect(isStringNumeric(23456)).toBe(true);
   });
 
   it('should return false when string is provided', () => {

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param phoneNumber
+ * @returns {boolean} - returns true for number that starts with '+' and contains a mix of digits and spaces with
+ * at least 4 digits.
+ */
+export const isValidPhoneNumber = (phoneNumber) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) &&
+  phoneNumber.match(/\d+/g) &&
+  phoneNumber.match(/\d+/g).join('').length >= 4;

package/src/phoneNumberInput/utils/isValidPhoneNumber/{isValidPhoneNumber.spec.ts → isValidPhoneNumber.spec.js}

@@ -11,7 +11,7 @@ describe('isValidPhoneNumber', () => {
 
   it('should return false for invalid numbers', () => {
     expect(isValidPhoneNumber('+441')).toBe(false);
-    expect(isValidPhoneNumber('44')).toBe(false);
+    expect(isValidPhoneNumber(44)).toBe(false);
     expect(isValidPhoneNumber('44123')).toBe(false);
   });
 });

package/src/phoneNumberInput/utils/longestMatchingPrefix/index.js

@@ -0,0 +1,2 @@
+export const longestMatchingPrefix = (matchingCodes) =>
+  matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

package/src/phoneNumberInput/utils/setDefaultPrefix/index.js

@@ -0,0 +1,25 @@
+import { getCountryFromLocale } from '../../../common/locale';
+import { findCountryByCode } from '../findCountryByCode';
+
+/**
+ * Default phone code, the UK one `+44`
+ */
+const DEFAULT_PHONE_CODE = '+44';
+
+/**
+ * Given a valid locale it returns the correspondent prefix if found or +44 otherwise.
+ *
+ * @param {string} locale - a string that represent the locale ex:'es-ES'
+ * @param countryCode
+ * @returns {string}
+ */
+export const setDefaultPrefix = (locale, countryCode) => {
+  const country =
+    findCountryByCode(countryCode) ||
+    // when `locale` code has explicit region: `en-GB`, `en-US`, `ar-AE`
+    findCountryByCode(getCountryFromLocale(locale)) ||
+    // when `locale` code is only two chars value: `fr`, `es`
+    findCountryByCode(locale);
+
+  return country?.phone || DEFAULT_PHONE_CODE;
+};

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js

@@ -0,0 +1,3 @@
+// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+export const sortArrayByProperty = (arrayToSort, property) =>
+  [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,5 +1,7 @@
 import { shallow } from 'enzyme';
 
+import { TextArea } from '../inputs/TextArea';
+
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
@@ -10,6 +12,6 @@ describe('TextareaWithDisplayFormat', () => {
       .find('WithDisplayFormat')
       .renderProp('render')({ value: 'test' });
 
-    expect(view.find('textarea').props('value')).toStrictEqual({ value: 'test' });
+    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
   });
 });

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react';
+
+import { userEvent, within } from '../test-utils';
+
+import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
+
+export default {
+  component: TextareaWithDisplayFormat,
+  title: 'Forms/TextareaWithDisplayFormat',
+};
+
+type Story = StoryObj<typeof TextareaWithDisplayFormat>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <>
+        <TextareaWithDisplayFormat
+          value="0000"
+          displayPattern="**** - **** - ****"
+          onChange={console.log}
+        />
+      </>
+    );
+  },
+  // intentionally use interactive typing (over init value via `value` prop)
+  // to trigger event handlers in the component
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    userEvent.type(canvas.getByRole('textbox'), '111122223333');
+  },
+};

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx

@@ -0,0 +1,13 @@
+import { TextArea, type TextAreaProps } from '../inputs/TextArea';
+import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
+
+export interface TextareaWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+
+const TextareaWithDisplayFormat = (props: TextareaWithDisplayFormatProps) => (
+  <WithDisplayFormat<TextAreaProps>
+    {...props}
+    render={(renderProps) => <TextArea {...renderProps} />}
+  />
+);
+
+export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TextareaWithDisplayFormat';
+export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -145,7 +145,7 @@ describe('InputWithTextFormat', () => {
   });
 
   describe('set cursor position', () => {
-    const triggerEventA = { ...triggerEvent, target: { setSelectionRange: () => {} } };
+    const triggerEventA = { ...triggerEvent, currentTarget: { setSelectionRange: () => {} } };
     beforeEach(() => {
       component.setState({
         triggerEvent: triggerEventA,

package/src/withDisplayFormat/{WithDisplayFormat.js → WithDisplayFormat.tsx}

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
 
 import { HistoryNavigator } from '../common';
 import {
@@ -10,27 +9,93 @@ import {
   getDistanceToPreviousSymbol,
   getDistanceToNextSymbol,
 } from '../common/textFormat';
+import { InputProps } from '../inputs/Input';
+import { TextAreaProps } from '../inputs/TextArea';
+
+type HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;
+type TypeElementAttrs = InputProps | TextAreaProps;
+
+export type EventType =
+  | 'KeyDown'
+  | 'Paste'
+  | 'Cut'
+  | 'Undo'
+  | 'Redo'
+  | 'Backspace'
+  | 'Delete'
+  | 'Initial';
+
+interface WithDisplayFormatState {
+  value: string;
+  historyNavigator: HistoryNavigator;
+  prevDisplayPattern: string;
+  triggerType: EventType;
+  triggerEvent: KeyboardEvent<HTMLTextElement> | null;
+  pastedLength: number;
+  selectionStart: number;
+  selectionEnd: number;
+}
+
+export interface WithDisplayFormatProps<T extends TypeElementAttrs = TypeElementAttrs>
+  extends Pick<
+    TypeElementAttrs,
+    | 'className'
+    | 'disabled'
+    | 'id'
+    | 'maxLength'
+    | 'minLength'
+    | 'name'
+    | 'placeholder'
+    | 'readOnly'
+    | 'required'
+    | 'inputMode'
+  > {
+  value?: string;
+  displayPattern: string;
+  /**
+   * autocomplete hides our form help so we need to disable it when help text
+   * is present. Chrome ignores autocomplete=off, the only way to disable it is
+   * to provide an 'invalid' value, for which 'disabled' serves.
+   */
+  autoComplete?: TypeElementAttrs['autoComplete'] | 'disabled';
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+  render: (renderProps: T) => JSX.Element;
+}
 
-class WithDisplayFormat extends Component {
-  constructor(props) {
+class WithDisplayFormat<T extends TypeElementAttrs> extends Component<
+  WithDisplayFormatProps<T>,
+  WithDisplayFormatState
+> {
+  declare props: WithDisplayFormatProps<T> &
+    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: '',
+  };
+
+  constructor(props: WithDisplayFormatProps) {
     super(props);
-    const { value, displayPattern } = props;
-    const unformattedValue = unformatWithPattern(value, displayPattern);
+    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern(unformattedValue, displayPattern),
+      value: formatWithPattern(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator(),
       prevDisplayPattern: props.displayPattern,
-      triggerType: null,
+      triggerType: 'Initial',
       triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0,
     };
   }
 
-  static getDerivedStateFromProps(nextProps, previousState) {
-    const { displayPattern } = nextProps;
-    const { prevDisplayPattern } = previousState;
-    if (previousState.prevDisplayPattern !== displayPattern) {
-      const { value, historyNavigator } = previousState;
-
+  static getDerivedStateFromProps(
+    { displayPattern }: WithDisplayFormatProps,
+    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,
+  ) {
+    if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
       historyNavigator.reset();
 
@@ -45,43 +110,48 @@ class WithDisplayFormat extends Component {
     return null;
   }
 
-  getUserAction = (unformattedValue) => {
+  getUserAction = (unformattedValue: string): EventType | string => {
     const { triggerEvent, triggerType, value } = this.state;
     const { displayPattern } = this.props;
 
-    const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
 
-    if (triggerType === 'Paste' || triggerType === 'Cut') {
-      return triggerType;
-    }
+      if (triggerType === 'Paste' || triggerType === 'Cut') {
+        return triggerType;
+      }
 
-    if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
-      return triggerEvent.shiftKey ? 'Redo' : 'Undo';
-    }
-    // Detect mouse event redo
-    if (triggerEvent.ctrlKey && charCode === 'd') {
-      return 'Delete';
-    }
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+      }
+      // Detect mouse event redo
+      if (triggerEvent.ctrlKey && charCode === 'd') {
+        return 'Delete';
+      }
 
-    // Android Fix.
-    if (typeof triggerEvent.key === 'undefined') {
-      if (unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+      // Android Fix.
+      if (
+        typeof triggerEvent.key === 'undefined' &&
+        unformattedValue.length <= unformatWithPattern(value, displayPattern).length
+      ) {
         return 'Backspace';
       }
+      return triggerEvent.key;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-
-    return triggerEvent.key;
   };
 
   resetEvent = () => {
     this.setState({
-      triggerType: null,
+      triggerType: 'Initial',
       triggerEvent: null,
       pastedLength: 0,
     });
   };
 
-  detectUndoRedo = (event) => {
+  detectUndoRedo = (event: KeyboardEvent<HTMLTextElement>) => {
     const charCode = String.fromCharCode(event.which).toLowerCase();
     if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
@@ -89,9 +159,9 @@ class WithDisplayFormat extends Component {
     return null;
   };
 
-  handleOnKeyDown = (event) => {
+  handleOnKeyDown = (event: KeyboardEvent<HTMLTextElement>) => {
     event.persist();
-    const { selectionStart, selectionEnd } = event.target;
+    const { selectionStart, selectionEnd } = event.currentTarget;
     const { historyNavigator } = this.state;
     const { displayPattern } = this.props;
 
@@ -108,13 +178,13 @@ class WithDisplayFormat extends Component {
       this.setState({
         triggerEvent: event,
         triggerType: 'KeyDown',
-        selectionStart,
-        selectionEnd,
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0,
       });
     }
   };
 
-  handleOnPaste = (event) => {
+  handleOnPaste = (event: ClipboardEvent<HTMLTextElement>) => {
     const { displayPattern } = this.props;
     const pastedLength = unformatWithPattern(
       event.clipboardData.getData('Text'),
@@ -128,23 +198,19 @@ class WithDisplayFormat extends Component {
     this.setState({ triggerType: 'Cut' });
   };
 
-  isKeyAllowed = (action) => {
+  isKeyAllowed = (action: EventType | string) => {
     const { displayPattern } = this.props;
     const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');
 
     return !symbolsInPattern.includes(action);
   };
 
-  handleOnChange = (event) => {
-    const { historyNavigator, triggerEvent, triggerType } = this.state;
+  handleOnChange = (event: ChangeEvent<HTMLTextElement>) => {
+    const { historyNavigator, triggerType } = this.state;
     const { displayPattern, onChange } = this.props;
     const { value } = event.target;
     let unformattedValue = unformatWithPattern(value, displayPattern);
-    const action =
-      triggerEvent === null
-        ? // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-          'Paste'
-        : this.getUserAction(unformattedValue);
+    const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -158,19 +224,20 @@ class WithDisplayFormat extends Component {
 
     this.handleCursorPositioning(action);
 
-    const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
-
-    this.setState({ value: newFormattedValue }, this.resetEvent(), onChange(broadcastValue));
+    this.setState({ value: newFormattedValue }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
   };
 
-  handleOnBlur = (event) => {
-    const { displayPattern, onBlur } = this.props;
-    if (onBlur) {
-      onBlur(unformatWithPattern(event.target.value, displayPattern));
-    }
+  handleOnBlur = (event: FocusEvent<HTMLTextElement>) => {
+    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
   };
 
-  handleOnFocus = (event) => {
+  handleOnFocus = (event: FocusEvent<HTMLTextElement>) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
@@ -178,7 +245,7 @@ class WithDisplayFormat extends Component {
     }
   };
 
-  handleDelete = (unformattedValue, action) => {
+  handleDelete = (unformattedValue: string, action: EventType) => {
     const { displayPattern } = this.props;
     const { selectionStart, selectionEnd } = this.state;
     const newStack = [...unformattedValue];
@@ -203,7 +270,7 @@ class WithDisplayFormat extends Component {
     return newStack.join('');
   };
 
-  handleCursorPositioning = (action) => {
+  handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
 
@@ -217,7 +284,7 @@ class WithDisplayFormat extends Component {
 
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
@@ -225,7 +292,6 @@ class WithDisplayFormat extends Component {
 
   render() {
     const {
-      type,
       inputMode,
       className,
       id,
@@ -239,8 +305,7 @@ class WithDisplayFormat extends Component {
       autoComplete,
     } = this.props;
     const { value } = this.state;
-    const renderProps = {
-      type,
+    const renderProps: TypeElementAttrs = {
       inputMode,
       className,
       id,
@@ -260,53 +325,8 @@ class WithDisplayFormat extends Component {
       onChange: this.handleOnChange,
       onCut: this.handleOnCut,
     };
-    return this.props.render(renderProps);
+    return this.props.render(renderProps as T);
   }
 }
 
-WithDisplayFormat.propTypes = {
-  /**
-   * autocomplete hides our form help so we need to disable it when help text
-   * is present. Chrome ignores autocomplete=off, the only way to disable it is
-   * to provide an 'invalid' value, for which 'disabled' serves.
-   */
-  autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  name: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  render: PropTypes.func.isRequired,
-  required: PropTypes.bool,
-  displayPattern: PropTypes.string,
-  type: PropTypes.string,
-  inputMode: PropTypes.string,
-  value: PropTypes.string,
-};
-
-WithDisplayFormat.defaultProps = {
-  autoComplete: 'off',
-  className: null,
-  disabled: false,
-  id: null,
-  maxLength: null,
-  minLength: null,
-  name: null,
-  placeholder: null,
-  readOnly: false,
-  required: false,
-  displayPattern: '',
-  type: 'text',
-  inputMode: null,
-  value: '',
-  onFocus: null,
-  onBlur: null,
-};
-
 export default WithDisplayFormat;

package/src/withDisplayFormat/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WithDisplayFormat';
+export type { WithDisplayFormatProps } from './WithDisplayFormat';