@transferwise/components 46.6.0 → 46.8.0

package/src/common/locale/index.js

@@ -1,139 +0,0 @@
-import { Direction } from '..';
-
-/**
- * Default language
- *
- * @type {string}
- */
-export const DEFAULT_LANG = 'en';
-
-/**
- * Default locale
- *
- * @type {string}
- */
-export const DEFAULT_LOCALE = 'en-GB';
-
-/**
- * Array of languages that are written from the right to the left
- *
- * @type {string[]}
- */
-export const RTL_LANGUAGES = ['ar', 'he'];
-
-/**
- * @deprecated The source of truth for supported languages lives in Crab.
- * @type {string[]}
- */
-export const SUPPORTED_LANGUAGES = [
-  DEFAULT_LANG,
-  'de',
-  'es',
-  'fr',
-  'hu',
-  'id',
-  'it',
-  'ja',
-  'pl',
-  'pt',
-  'ro',
-  'ru',
-  'th',
-  'tr',
-  'uk',
-  'zh',
-];
-
-/**
- * Verifies and adjusts locale (replace `_` with `-`)
- * Returns null if locale is unrecognized by {Intl.Locale}
- *
- * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
- */
-export function adjustLocale(locale) {
-  if (!locale || locale.trim().length === 0) {
-    return null;
-  }
-  try {
-    const { baseName } = new Intl.Locale(locale.trim().replace('_', '-'));
-    return baseName;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding lang (iso2) for provided locale
- * if locale is invalid or language is unsupported returns null
- *
- * @deprecated The use of this function almost always breaks language variants
- * e.g. Simplified and Traditional Chinese.
- * There should be no use case for this function.
- * To select the correct translations from a translations object, pass the
- * locale directly into Crab's getLocalisedMessages.
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null} two-letter ISO639-1 language
- */
-export function getLangFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    if (SUPPORTED_LANGUAGES.includes(language)) {
-      return language;
-    }
-    return null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
- * if the value is invalid or missing region it returns null
- *
- * @param {string} locale
- * @returns {string|null}
- */
-export function getCountryFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { region } = new Intl.Locale(adjustedLocale);
-    return region ?? null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides the layout direction for a given locale.
- * If locale is invalid or language is unsupported returns Direction.LTR
- *
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {Direction} The layout direction based on the locale
- */
-export function getDirectionFromLocale(locale) {
-  try {
-    const adjustedLocale = adjustLocale(locale);
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return Direction.LTR;
-  }
-}

package/src/phoneNumberInput/PhoneNumberInput.js

@@ -1,210 +0,0 @@
-import { isArray } from '@transferwise/neptune-validation';
-import PropTypes from 'prop-types';
-import { useState, useEffect } from 'react';
-import { useIntl } from 'react-intl';
-
-import { Size } from '../common';
-import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
-
-import countries from './data/countries';
-import {
-  explodeNumberModel,
-  isValidPhoneNumber,
-  cleanNumber,
-  setDefaultPrefix,
-  sortArrayByProperty,
-  groupCountriesByPrefix,
-  excludeCountries,
-} from './utils';
-
-const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
-
-const PhoneNumberInput = (props) => {
-  const {
-    id,
-    onChange,
-    searchPlaceholder,
-    disabled,
-    required,
-    size,
-    placeholder,
-    onFocus,
-    onBlur,
-    countryCode,
-    selectProps,
-    disabledCountries,
-  } = props;
-  const { locale } = useIntl();
-
-  const getInitialValue = () => {
-    const { initialValue } = props;
-
-    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
-
-    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
-      return {
-        prefix: setDefaultPrefix(locale, countryCode),
-        suffix: '',
-      };
-    }
-
-    return explodeNumberModel(cleanValue);
-  };
-
-  const [internalValue, setInternalValue] = useState(getInitialValue());
-  const [broadcastedValue, setBroadcastedValue] = useState(null);
-
-  const getSelectOptions = () => {
-    const countriesList = excludeCountries(countries, disabledCountries);
-    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
-
-    return listSortedByISO3.map((option) => {
-      const { phone, iso3, iso2, name } = option;
-      let note = '';
-
-      if (iso3) {
-        note = isArray(iso3) ? iso3.join(', ') : iso3;
-      } else if (iso2) {
-        note = isArray(iso2) ? iso2.join(', ') : iso2;
-      }
-
-      return {
-        type: 'option',
-        value: {
-          value: phone,
-          label: phone,
-          note: note,
-        },
-        filterMatchers: [phone, note, name],
-      };
-    });
-  };
-
-  const options = getSelectOptions();
-
-  const onPrefixChange = ({ value }) => {
-    setInternalValue({ prefix: value, suffix: internalValue.suffix });
-  };
-
-  const onSuffixChange = (event) => {
-    const { value = '' } = event.target;
-
-    if (ALLOWED_PHONE_CHARS.test(value)) {
-      setInternalValue({ prefix: internalValue.prefix, suffix: value });
-    }
-  };
-
-  const onPaste = (event) => {
-    if (!event.nativeEvent.clipboardData) {
-      return;
-    }
-
-    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
-      /(\s|-)+/g,
-      '',
-    );
-    const { prefix: pastedPrefix, suffix: pastedSuffix } = explodeNumberModel(pastedValue);
-    const selectedPrefix = options.find(({ value }) => value.value === pastedPrefix);
-
-    if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
-      setInternalValue({ prefix: pastedPrefix, suffix: pastedSuffix });
-    }
-  };
-
-  useEffect(() => {
-    if (broadcastedValue === null) {
-      return setBroadcastedValue(internalValue);
-    }
-
-    const internalPhoneNumber = internalValue.prefix + internalValue.suffix;
-    const broadcastedPhoneNumber = broadcastedValue.prefix + broadcastedValue.suffix;
-
-    if (internalPhoneNumber === broadcastedPhoneNumber) {
-      return;
-    }
-
-    const newValue = isValidPhoneNumber(internalPhoneNumber)
-      ? cleanNumber(internalPhoneNumber)
-      : null;
-
-    onChange(newValue, internalValue.prefix);
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
-
-  return (
-    <div className="tw-telephone">
-      <div className="tw-telephone__country-select">
-        <SelectInput
-          placeholder="Select an option..."
-          items={options}
-          value={options.find((item) => item.value.value === internalValue.prefix)?.value}
-          renderValue={(option, withinTrigger) => (
-            <SelectInputOptionContent
-              title={option.label}
-              note={withinTrigger ? undefined : option.note}
-            />
-          )}
-          filterable
-          filterPlaceholder={searchPlaceholder}
-          disabled={disabled}
-          size={size}
-          onChange={onPrefixChange}
-          {...selectProps}
-        />
-      </div>
-      <div className="tw-telephone__number-input">
-        <div className={`input-group input-group-${size}`}>
-          <input
-            id={id}
-            autoComplete="tel-national"
-            name="phoneNumber"
-            inputMode="numeric"
-            value={internalValue.suffix}
-            className="form-control"
-            disabled={disabled}
-            required={required}
-            placeholder={placeholder}
-            onChange={onSuffixChange}
-            onPaste={onPaste}
-            onFocus={onFocus}
-            onBlur={onBlur}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-PhoneNumberInput.propTypes = {
-  id: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  initialValue: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  countryCode: PropTypes.string,
-  searchPlaceholder: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string,
-  selectProps: PropTypes.object,
-  /** List of iso3 codes of countries to remove from the list */
-  disabledCountries: PropTypes.arrayOf(PropTypes.string),
-};
-
-PhoneNumberInput.defaultProps = {
-  id: null,
-  required: false,
-  disabled: false,
-  initialValue: null,
-  onFocus() {},
-  onBlur() {},
-  countryCode: null,
-  searchPlaceholder: 'Prefix',
-  size: Size.MEDIUM,
-  placeholder: '',
-  selectProps: {},
-  disabledCountries: [],
-};
-
-export default PhoneNumberInput;

package/src/phoneNumberInput/data/countries.spec.js

@@ -1,12 +0,0 @@
-import countries from './countries';
-
-describe('Given a list of countries', () => {
-  countries.forEach((country) => {
-    it('each country should have a valid format', () => {
-      expect(country).toHaveProperty('phone');
-      expect(country).toHaveProperty('name');
-      expect(country).toHaveProperty('iso3');
-      expect(country).toHaveProperty('iso2');
-    });
-  });
-});

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.js

@@ -1,4 +0,0 @@
-const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
-
-export const cleanNumber = (number) =>
-  (number.match(DIGITS_MATCH) && number.match(DIGITS_MATCH).join('')) || '';

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

@@ -1,27 +0,0 @@
-import { findCountryByPrefix } from '../findCountryByPrefix';
-
-/**
- * Given a sting in a valid format ex:'+447573135343' it returns an object of shape
- * {prefix=+44 ,suffix=7573135343}
- *
- * @param {string} number - a string that defines a phone number.
- * @returns {{prefix: (string|*), suffix: string, format: string}}
- */
-export const explodeNumberModel = (number) => {
-  let prefix = '';
-  let suffix = '';
-  let format = '';
-  const country = findCountryByPrefix(number);
-
-  if (country) {
-    prefix = country.phone;
-    suffix = number.slice(country.phone.length);
-    format = country.phoneFormat || '';
-  } else {
-    prefix = '';
-    suffix = number.slice(1);
-    format = '';
-  }
-
-  return { prefix, suffix, format };
-};

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

@@ -1,36 +0,0 @@
-import { filterOptionsForQuery } from '..';
-
-const OPTIONS = [
-  {
-    name: 'test1',
-    iso2: 'TT',
-    iso3: 'TT1',
-    phone: '+93',
-  },
-  {
-    name: 'something',
-    iso2: 'ST',
-    iso3: 'SMT',
-    phone: '+33',
-  },
-];
-
-describe('filterOptionsForQuery', () => {
-  it('filters options based on all properties', () => {
-    const option1 = OPTIONS[0];
-    const option2 = OPTIONS[1];
-
-    expect(filterOptionsForQuery(OPTIONS, option1.name)).toStrictEqual([option1]);
-    expect(filterOptionsForQuery(OPTIONS, option1.iso2)).toStrictEqual([option1]);
-    expect(filterOptionsForQuery(OPTIONS, option1.iso3)).toStrictEqual([option1]);
-    expect(filterOptionsForQuery(OPTIONS, option1.phone)).toStrictEqual([option1]);
-    expect(filterOptionsForQuery(OPTIONS, option2.name)).toStrictEqual([option2]);
-    expect(filterOptionsForQuery(OPTIONS, option2.iso2)).toStrictEqual([option2]);
-    expect(filterOptionsForQuery(OPTIONS, option2.iso3)).toStrictEqual([option2]);
-    expect(filterOptionsForQuery(OPTIONS, option2.phone)).toStrictEqual([option2]);
-  });
-
-  it('should return an emtpy array if option cannot be found', () => {
-    expect(filterOptionsForQuery(OPTIONS, 'AA')).toStrictEqual([]);
-  });
-});

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

@@ -1,11 +0,0 @@
-import { isOptionAndFitsQuery } from '../isOptionAndFitsQuery';
-
-/**
- * Filters a set of options based on search string
- *
- * @param options
- * @param query
- * @returns {*}
- */
-export const filterOptionsForQuery = (options, query) =>
-  options.filter((option) => isOptionAndFitsQuery(option, query));

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

@@ -1,10 +0,0 @@
-import countries from '../../data/countries';
-import { longestMatchingPrefix } from '../longestMatchingPrefix';
-
-export const findCountryByCode = (code) => {
-  let matchingCodes;
-  if (code && code.length === 2) {
-    matchingCodes = countries.filter((country) => code.toUpperCase() === country.iso2);
-  }
-  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
-};

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

@@ -1,11 +0,0 @@
-import countries from '../../data/countries';
-import { longestMatchingPrefix } from '../longestMatchingPrefix';
-
-export const findCountryByPrefix = (number) => {
-  let matchingCodes = null;
-  if (number && number.length > 1) {
-    matchingCodes = countries.filter((country) => number.indexOf(country.phone) === 0);
-  }
-
-  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
-};

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.js

@@ -1,26 +0,0 @@
-import { isArray } from '@transferwise/neptune-validation';
-
-export const groupCountriesByPrefix = (countries) => {
-  const groupedArray = countries.reduce((accumulator, country) => {
-    const { name, iso2, iso3, phone } = country;
-    if (accumulator[phone]) {
-      const previousValue = accumulator[phone];
-      accumulator[phone] = {
-        ...previousValue,
-        name: isArray(previousValue.name)
-          ? [...previousValue.name, name]
-          : [previousValue.name, name],
-        iso2: isArray(previousValue.iso2)
-          ? [...previousValue.iso2, iso2]
-          : [previousValue.iso2, iso2],
-        iso3: isArray(previousValue.iso3)
-          ? [...previousValue.iso3, iso3]
-          : [previousValue.iso3, iso3],
-      };
-    } else {
-      accumulator[phone] = country;
-    }
-    return accumulator;
-  }, {});
-  return Object.values(groupedArray);
-};

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

@@ -1,67 +0,0 @@
-import { groupCountriesByPrefix } from '.';
-
-const countries = [
-  {
-    name: 'Canada',
-    iso2: 'CA',
-    iso3: 'CAN',
-    phone: '+1',
-  },
-  {
-    name: 'United States of America',
-    iso2: 'US',
-    iso3: 'USA',
-    phone: '+1',
-  },
-  {
-    name: 'United States Minor Outlying Islands',
-    iso2: 'UM',
-    iso3: 'UMI',
-    phone: '+1',
-  },
-  {
-    name: 'United Kingdom',
-    iso2: 'GB',
-    iso3: 'GBR',
-    phone: '+44',
-  },
-  {
-    name: 'Guernsey',
-    iso2: 'GG',
-    iso3: 'GGY',
-    phone: '+44',
-  },
-  {
-    name: 'Guinea',
-    iso2: 'GN',
-    iso3: 'GIN',
-    phone: '+224',
-  },
-];
-
-const groupedCountries = [
-  {
-    name: ['Canada', 'United States of America', 'United States Minor Outlying Islands'],
-    iso2: ['CA', 'US', 'UM'],
-    iso3: ['CAN', 'USA', 'UMI'],
-    phone: '+1',
-  },
-  {
-    name: ['United Kingdom', 'Guernsey'],
-    iso2: ['GB', 'GG'],
-    iso3: ['GBR', 'GGY'],
-    phone: '+44',
-  },
-  {
-    name: 'Guinea',
-    iso2: 'GN',
-    iso3: 'GIN',
-    phone: '+224',
-  },
-];
-
-describe('groupCountriesByPrefix', () => {
-  it('groups countries by prefix', () => {
-    expect(groupCountriesByPrefix(countries)).toStrictEqual(groupedCountries);
-  });
-});

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

@@ -1 +0,0 @@
-export { isOptionAndFitsQuery, startsWith } from './isOptionAndFitsQuery';

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

@@ -1,25 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-/**
- *
- * @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/longestMatchingPrefix/index.js

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