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

package/src/common/locale/index.ts

@@ -1,96 +0,0 @@
-import { Direction } from '..';
-
-export const DEFAULT_LANG = 'en';
-export const DEFAULT_LOCALE = 'en-GB';
-
-/**
- * Languages written right-to-left.
- */
-export const RTL_LANGUAGES = ['ar', 'he'];
-
-/**
- * @deprecated The source of truth for supported languages lives in Crab.
- */
-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, replacing `_` with `-`.
- *
- * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @returns `null` if locale is unrecognized by `Intl.Locale`.
- */
-export function adjustLocale(locale: string) {
-  const localeTrimmed = locale?.trim();
-  if (localeTrimmed) {
-    try {
-      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  }
-  return null;
-}
-
-/**
- * Provides corresponding lang (iso2) for provided locale.
- *
- * @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 locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.
- */
-export function getLangFromLocale(locale: string) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale != null) {
-    const { language } = new Intl.Locale(adjustedLocale);
-    if (SUPPORTED_LANGUAGES.includes(language)) {
-      return language;
-    }
-  }
-  return null;
-}
-
-/**
- * Provides corresponding country code (iso2) for locales code with explicit region value.
- *
- * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.
- * @returns `null` if the locale is invalid or the region can‘t be identified.
- */
-export function getCountryFromLocale(locale: string) {
-  const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
-}
-
-/**
- * Provides the layout direction for a given locale.
- *
- * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.
- */
-export function getDirectionFromLocale(locale: string) {
-  const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)
-    ? Direction.RTL
-    : Direction.LTR;
-}

package/src/inputWithDisplayFormat/InputWithDisplayFormat.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-import WithDisplayFormat from '../withDisplayFormat';
-
-const InputWithDisplayFormat = (props) => (
-  <WithDisplayFormat {...props} render={(renderProps) => <input {...renderProps} />} />
-);
-
-InputWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.js

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

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -1,193 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
-import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
-
-import countries from './data/countries';
-import {
-  explodeNumberModel,
-  isValidPhoneNumber,
-  cleanNumber,
-  setDefaultPrefix,
-  sortArrayByProperty,
-  groupCountriesByPrefix,
-  excludeCountries,
-  findCountryByPrefix,
-} from './utils';
-import { PhoneNumber } from './utils/explodeNumberModel';
-
-const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
-
-export interface PhoneNumberInputProps {
-  id?: string;
-  required?: boolean;
-  disabled?: boolean;
-  initialValue?: string;
-  onChange: (value: string | null, prefix: string) => void;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  countryCode?: string;
-  searchPlaceholder?: string;
-  size?: SizeSmall | SizeMedium | SizeLarge;
-  placeholder?: string;
-  selectProps?: Partial<SelectInputProps<string | null>>;
-  /** List of iso3 codes of countries to remove from the list */
-  disabledCountries?: string[];
-}
-
-const defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];
-const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];
-
-const PhoneNumberInput = ({
-  id,
-  required,
-  disabled,
-  initialValue,
-  onChange,
-  onFocus,
-  onBlur,
-  countryCode,
-  searchPlaceholder = 'Prefix',
-  size = Size.MEDIUM,
-  placeholder,
-  selectProps = defaultSelectProps,
-  disabledCountries = defaultDisabledCountries,
-}: PhoneNumberInputProps) => {
-  const { locale } = useIntl();
-
-  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
-    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
-
-    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
-      return {
-        prefix: setDefaultPrefix(locale, countryCode),
-        suffix: '',
-      };
-    }
-
-    return explodeNumberModel(cleanValue);
-  });
-  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
-
-  const countriesByPrefix = useMemo(
-    () =>
-      groupCountriesByPrefix(
-        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),
-      ),
-    [disabledCountries],
-  );
-
-  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    const suffix = event.target.value;
-    if (ALLOWED_PHONE_CHARS.test(suffix)) {
-      setInternalValue((prev) => ({ ...prev, suffix }));
-    }
-  };
-
-  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
-    if (!event.nativeEvent.clipboardData) {
-      return;
-    }
-
-    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
-      /(\s|-)+/g,
-      '',
-    );
-    const pastedNumber = explodeNumberModel(pastedValue);
-
-    if (
-      pastedNumber.prefix != null &&
-      countriesByPrefix.has(pastedNumber.prefix) &&
-      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)
-    ) {
-      setInternalValue(pastedNumber);
-    }
-  };
-
-  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 ?? '', // TODO: Allow `null` in public API
-    );
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
-
-  return (
-    <div className="tw-telephone">
-      <div className="tw-telephone__country-select">
-        <SelectInput
-          placeholder="Select an option…"
-          items={[...countriesByPrefix].map(([prefix, countries]) => ({
-            type: 'option',
-            value: prefix,
-            filterMatchers: [
-              prefix,
-              ...countries.map((country) => country.name),
-              ...countries.map((country) => country.iso3),
-            ],
-          }))}
-          value={internalValue.prefix}
-          renderValue={(prefix, withinTrigger) => (
-            <SelectInputOptionContent
-              title={prefix}
-              note={
-                withinTrigger
-                  ? undefined
-                  : countriesByPrefix
-                      .get(prefix)
-                      ?.map((country) => country.iso3)
-                      .join(', ')
-              }
-            />
-          )}
-          filterable
-          filterPlaceholder={searchPlaceholder}
-          disabled={disabled}
-          size={size}
-          onChange={(prefix) => {
-            const country = prefix != null ? findCountryByPrefix(prefix) : null;
-            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
-          }}
-          {...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>
-  );
-};
-
-export default PhoneNumberInput;

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts

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

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

@@ -1,24 +0,0 @@
-import { findCountryByPrefix } from '../findCountryByPrefix';
-
-export interface PhoneNumber {
-  prefix: string | null;
-  suffix: string;
-  format?: string;
-}
-
-/**
- * @param number Phone number in a format like "+447573135343"
- */
-export const explodeNumberModel = (number: string): PhoneNumber => {
-  const country = findCountryByPrefix(number);
-  return country
-    ? {
-        prefix: country.phone,
-        suffix: number.slice(country.phone.length),
-        format: country.phoneFormat,
-      }
-    : {
-        prefix: null,
-        suffix: number.slice(1),
-      };
-};

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

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

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

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

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

@@ -1,102 +0,0 @@
-import { Country } from '../../data/countries';
-
-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 = new Map<string, Country[]>([
-  [
-    '+1',
-    [
-      {
-        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',
-      },
-    ],
-  ],
-  [
-    '+44',
-    [
-      {
-        name: 'United Kingdom',
-        iso2: 'GB',
-        iso3: 'GBR',
-        phone: '+44',
-      },
-      {
-        name: 'Guernsey',
-        iso2: 'GG',
-        iso3: 'GGY',
-        phone: '+44',
-      },
-    ],
-  ],
-  [
-    '+224',
-    [
-      {
-        name: 'Guinea',
-        iso2: 'GN',
-        iso3: 'GIN',
-        phone: '+224',
-      },
-    ],
-  ],
-]);
-
-describe('groupCountriesByPrefix', () => {
-  it('groups countries by prefix', () => {
-    expect(groupCountriesByPrefix(countries)).toStrictEqual(groupedCountries);
-  });
-});

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.ts

@@ -1,12 +0,0 @@
-import { Country } from '../../data/countries';
-
-export const groupCountriesByPrefix = (countries: Country[]) => {
-  const countriesByPrefix = new Map<string, Country[]>();
-  countries.forEach((country) => {
-    countriesByPrefix.set(country.phone, [
-      ...(countriesByPrefix.get(country.phone) ?? []),
-      country,
-    ]);
-  });
-  return countriesByPrefix;
-};

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.ts

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

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts

@@ -1,7 +0,0 @@
-/**
- *
- * @param phoneNumber
- * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
- */
-export const isValidPhoneNumber = (phoneNumber: string) =>
-  /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;

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

@@ -1,4 +0,0 @@
-import { Country } from '../../data/countries';
-
-export const longestMatchingPrefix = (matchingCodes: Country[]) =>
-  matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

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

@@ -1,20 +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 locale BCP 47 language tag of locale, e.g. `"es-ES"`.
- * @param countryCode Two-letter country code (ISO 3166-1 alpha-2).
- */
-export const setDefaultPrefix = (locale: string, countryCode?: string) => {
-  const country =
-    (countryCode != null ? findCountryByCode(countryCode) : null) ??
-    findCountryByCode(getCountryFromLocale(locale) ?? locale);
-  return country?.phone ?? DEFAULT_PHONE_CODE;
-};

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts

@@ -1,6 +0,0 @@
-export function sortArrayByProperty<T extends Record<PropertyKey, string>>(
-  arrayToSort: T[],
-  property: keyof T,
-) {
-  return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
-}

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-import WithDisplayFormat from '../withDisplayFormat';
-
-const TextareaWithDisplayFormat = (props) => (
-  <WithDisplayFormat {...props} render={(renderProps) => <textarea {...renderProps} />} />
-);
-
-TextareaWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/index.js

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

package/src/withDisplayFormat/index.js

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