@transferwise/components 0.0.0-experimental-4b7aba1 → 0.0.0-experimental-16e2eec

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));

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

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

@@ -1,3 +0,0 @@
-// 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/segmentedControl/SegmentedControl.css

@@ -1,98 +0,0 @@
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  width: 100%;
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-.segmented-control__segments::after {
-  content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
-  position: absolute;
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  margin: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: font-weight 300ms, background 300ms;
-}
-.segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-background-overlay);
-}
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-.segmented-control__button {
-  background: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  font: inherit;
-  padding: none;
-  outline: 2px solid transparent;
-}
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-.segmented-control__selected-segment {
-  font-weight: 800;
-  font-weight: var(--font-weight-bold);
-}
-.segmented-control__label-text {
-  word-wrap: break-word;
-  color: var(--color-interactive-primary);
-}