@transferwise/components 0.0.0-experimental-d3453cf → 0.0.0-experimental-3f5dc0d

package/src/expressiveMoneyInput/useInputStyle.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+
+type InputStyleObject = {
+  value: string;
+  focus: boolean;
+  inputElement: HTMLInputElement | null;
+} & Pick<ExpressiveMoneyInputProps, 'loading'>;
+
+export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
+  const initialRender = !useTimeout(300);
+  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
+
+  const getStyle = (): CSSProperties => {
+    const fontSize = getFontSize(value, focus, inputWidth);
+
+    return {
+      fontSize,
+      height: fontSize,
+      // aligns the top of the digit with the currency button
+      marginTop: fontSize * -0.19,
+      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
+      transition: initialRender ? 'none' : undefined,
+      color: loading ? 'var(--color-interactive-secondary)' : undefined,
+    };
+  };
+
+  const [style, setStyle] = useState(getStyle());
+
+  useLayoutEffect(() => {
+    setStyle(getStyle());
+  }, [value, focus, loading, inputWidth]);
+
+  return style;
+};
+
+function getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {
+  const defaultFontSize = 52;
+  const focusFontSize = 90;
+  const minimumFontSize = 34;
+
+  let fontSize = isFocused ? focusFontSize : defaultFontSize;
+
+  if (typeof inputWidth === 'undefined') {
+    return fontSize;
+  }
+  const textLength = inputValue.length;
+  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
+
+  if (textLength > maxCharactersWithoutShrinking) {
+    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);
+    fontSize = Math.min(fontSize, adjustedSize);
+  }
+
+  return Math.max(fontSize, minimumFontSize);
+}
+
+const useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {
+  const [value, setValue] = useState<number | undefined>(newValue);
+
+  useLayoutEffect(() => {
+    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      setValue(newValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...dependencies, value]);
+
+  return value;
+};
+
+const useTimeout = (delay: number) => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setReady(true);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  return ready;
+};

package/src/expressiveMoneyInput/useSelectionRange.ts

@@ -0,0 +1,23 @@
+import { type SyntheticEvent, useRef } from 'react';
+
+export const useSelectionRange = () => {
+  const selection = useRef<{
+    selectionStart: number | null;
+    selectionEnd: number | null;
+  }>();
+
+  const handleSelect = (e: SyntheticEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    const { selectionStart, selectionEnd } = input;
+    selection.current = { selectionStart, selectionEnd };
+  };
+  const handleSelectionBlur = () => {
+    selection.current = undefined;
+  };
+
+  return {
+    selection: selection.current,
+    handleSelect,
+    handleSelectionBlur,
+  };
+};

package/src/expressiveMoneyInput/utils.spec.ts

@@ -0,0 +1,114 @@
+import {
+  getDecimalSeparator,
+  getFormattedString,
+  getGroupSeparator,
+  getUnformattedNumber,
+} from './utils';
+
+describe('utils', () => {
+  describe('getDecimalSeparator', () => {
+    it('gets decimal separator for Spanish', () => {
+      expect(getDecimalSeparator('EUR', 'es')).toBe(',');
+    });
+
+    it('gets decimal separator for English', () => {
+      expect(getDecimalSeparator('EUR', 'en')).toBe('.');
+    });
+
+    it('gets decimal separator for Spanish in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'es')).toBe('');
+    });
+
+    it('gets decimal separator for English in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'en')).toBe('');
+    });
+  });
+
+  describe('getGroupSeparator', () => {
+    it('gets group separator for Spanish', () => {
+      expect(getGroupSeparator('EUR', 'es')).toBe('.');
+    });
+
+    it('gets group separator for English', () => {
+      expect(getGroupSeparator('EUR', 'en')).toBe(',');
+    });
+
+    it('gets group separator for French', () => {
+      expect(getGroupSeparator('EUR', 'fr')).toBe(' ');
+    });
+  });
+
+  describe('getUnformattedNumber', () => {
+    it('can turn a Spanish string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123.456,00',
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe(123456);
+    });
+
+    it('can turn a French string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '1 234 567,45',
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe(1234567.45);
+    });
+
+    it('can turn a English string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123,456.78',
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe(123456.78);
+    });
+
+    it('can turn a Magyar string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '11 000 000',
+          currency: 'HUF',
+          locale: 'hu',
+        }),
+      ).toBe(11000000);
+    });
+  });
+
+  describe('getFormattedString', () => {
+    it('can turn a number into a Spanish string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.45,
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe('123.456,45');
+    });
+
+    it('can turn a number into a French string', () => {
+      expect(
+        getFormattedString({
+          value: 1234567.45,
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe('1 234 567,45');
+    });
+
+    it('can turn a number into a English string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.78,
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe('123,456.78');
+    });
+  });
+});

package/src/expressiveMoneyInput/utils.ts

@@ -0,0 +1,116 @@
+import { formatAmount } from '@transferwise/formatting';
+import type { KeyboardEvent } from 'react';
+
+export const getDecimalSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+
+export const getGroupSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+
+export const getDecimalCount = (currency: string, locale: string): number => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+
+export const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+
+export const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale,
+}: {
+  value: string;
+  currency: string;
+  locale: string;
+}): number | null => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator
+    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    : formattedValue;
+
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator
+    ? withoutGroupSeparator.replace(decimalSeparator, '.')
+    : withoutGroupSeparator;
+
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+
+export const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false,
+}: {
+  value: number;
+  currency: string;
+  locale: string;
+  alwaysShowDecimals?: boolean;
+}): string => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+
+  const [integerPart, decimalPart] = decimalSeparator
+    ? unformattedString.split(decimalSeparator)
+    : [unformattedString, undefined];
+
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+
+  return formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals,
+  });
+};
+
+export const isInputPossiblyOverflowing = ({
+  ref,
+  value,
+}: {
+  ref: React.RefObject<HTMLInputElement>;
+  value: string;
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+
+const allowedInputKeys = new Set([
+  'Backspace',
+  'Delete',
+  ',',
+  '.',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  'Tab',
+]);
+
+export const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  const { metaKey, key, ctrlKey } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/index.ts

@@ -62,6 +62,7 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
+export type { ExpressiveMoneyInputProps } from './expressiveMoneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
@@ -188,6 +189,7 @@ export { default as Markdown } from './markdown';
 export { default as Modal } from './modal';
 export { default as Money } from './money';
 export { default as MoneyInput } from './moneyInput';
+export { default as ExpressiveMoneyInput } from './expressiveMoneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';

package/src/main.css

@@ -4447,6 +4447,64 @@ button.np-link {
   box-shadow: inset 0 0 0 1px #c9cbce !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }
+.wds-amount-input-container {
+  width: 100%;
+}
+.wds-amount-input-input-container {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: var(--color-interactive-primary);
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-amount-input-input-container {
+    transition: none;
+  }
+}
+.wds-amount-input-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  text-align: right;
+  background-color: transparent;
+}
+.wds-amount-input-input:focus-visible {
+  outline: none;
+}
+.wds-amount-input-placeholder {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}
+.wds-expressive-money-input-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-expressive-money-input-chevron {
+  transform: translateY(-5%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/src/main.less

@@ -51,6 +51,7 @@
 @import "./logo/Logo.less";
 @import "./modal/Modal.less";
 @import "./moneyInput/MoneyInput.less";
+@import "./expressiveMoneyInput/ExpressiveMoneyInput.less";
 @import "./navigationOption/NavigationOption.less";
 @import "./navigationOptionsList/NavigationOptionsList.less";
 @import "./nudge/Nudge.less";

package/src/ssr.spec.tsx

@@ -92,6 +92,7 @@ describe('Server side rendering', () => {
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
     currencies: [],
+    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],