@transferwise/components 0.0.0-experimental-b3df26d → 0.0.0-experimental-050f154

package/src/expressiveMoneyInput/AmountInput.less

@@ -0,0 +1,43 @@
+.wds-amount-input {
+  &-container {
+    width: 100%;
+  }
+
+  &-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) {
+    &-input-container {
+      transition: none;
+    }
+  }
+
+  &-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    text-align: right;
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &-placeholder {
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+  }
+}

package/src/expressiveMoneyInput/AmountInput.tsx

@@ -0,0 +1,353 @@
+import { formatAmount } from '@transferwise/formatting';
+import { clsx } from 'clsx';
+import { AnimatePresence } from 'framer-motion';
+import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import { AnimatedNumber } from './AnimatedNumber';
+import { useFocus } from './useFocus';
+import { useInputStyle } from './useInputStyle';
+import {
+  getDecimalCount,
+  getDecimalSeparator,
+  getEnteredDecimalsCount,
+  getFormattedString,
+  getGroupSeparator,
+  getUnformattedNumber,
+  isAllowedInputKey,
+  isInputPossiblyOverflowing,
+} from './utils';
+
+type Props = {
+  id: string;
+  describedById?: string;
+  amount?: number | null;
+  currency: string;
+  autoFocus?: boolean;
+  onChange: (amount: number | null) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & Pick<ExpressiveMoneyInputProps, 'loading'>;
+
+export const AmountInput = ({
+  id,
+  describedById,
+  amount,
+  currency,
+  autoFocus,
+  onChange,
+  onFocusChange,
+  loading,
+}: Props) => {
+  const intl = useIntl();
+  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
+
+  const [value, setValue] = useState<string>(
+    amount
+      ? getFormattedString({
+          value: amount,
+          currency,
+          locale: intl.locale,
+        })
+      : '',
+  );
+  const numericValue = useMemo(() => {
+    return getUnformattedNumber({
+      value,
+      currency,
+      locale: intl.locale,
+    });
+  }, [value, currency, intl.locale]);
+
+  const valueWithFullDecimals = useMemo(() => {
+    return getFormattedString({
+      value: numericValue ?? 0,
+      currency,
+      locale: intl.locale,
+      alwaysShowDecimals: true,
+    });
+  }, [numericValue, currency, intl.locale]);
+
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, []);
+
+  const placeholder = getPlaceholder(currency, intl.locale);
+  const groupSeparator = getGroupSeparator(currency, intl.locale);
+  const decimalSeparator = getDecimalSeparator(currency, intl.locale);
+  const maxDecimalCount = getDecimalCount(currency, intl.locale);
+
+  const decimalPart = getDecimalPart(value, decimalSeparator);
+  const decimalMode = decimalSeparator && value.includes(decimalSeparator);
+
+  useEffect(() => {
+    if (!focus) {
+      setValue(
+        amount
+          ? getFormattedString({
+              value: amount,
+              currency,
+              locale: intl.locale,
+            })
+          : '',
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [amount]);
+
+  useEffect(() => {
+    onFocusChange?.(visualFocus);
+  }, [visualFocus]);
+
+  const shouldReformatAfterUserInput = (newValue: string) => {
+    // don't reformat if formatting would wipe out user's input
+    if (reformatValue(newValue) === '') {
+      return false;
+    }
+
+    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);
+    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);
+
+    // if the user has entered a seperator to the end, formatting would delete it
+    if (endsWithDecimalSeparator || endsWithGroupSeparator) {
+      return false;
+    }
+
+    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);
+
+    if (containsDecimalSeparator) {
+      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);
+      // don't reformat until user has entered all the allowed decimals
+      // for example, we don't want 1.1 to be reformatted to 1.10 immediately
+      if (enteredDecimalsCount < maxDecimalCount) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const reformatValue = (newValue: string) => {
+    const unformattedValue = getUnformattedNumber({
+      value: newValue,
+      currency,
+      locale: intl.locale,
+    });
+    const formattedValue = unformattedValue
+      ? getFormattedString({
+          value: unformattedValue,
+          currency,
+          locale: intl.locale,
+        })
+      : '';
+    return formattedValue;
+  };
+
+  const handleChange = (newValue: string) => {
+    const oldCursorPosition = ref.current?.selectionStart ?? 0;
+
+    const newFormattedString = shouldReformatAfterUserInput(newValue)
+      ? reformatValue(newValue)
+      : newValue;
+    setValue(newFormattedString);
+
+    const newNumber = getUnformattedNumber({
+      value: newFormattedString,
+      currency,
+      locale: intl.locale,
+    });
+
+    if (newNumber !== numericValue) {
+      if (numericValue || newNumber) {
+        onChange(newNumber);
+      }
+    }
+
+    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);
+    requestAnimationFrame(() => {
+      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);
+    });
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+
+    const clipboardData = e.clipboardData?.getData('text/plain');
+    if (!clipboardData) {
+      return;
+    }
+
+    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely
+    const sanitisedValue = reformatValue(clipboardData);
+
+    handleChange(sanitisedValue);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+    setValue(reformatValue(value));
+  };
+
+  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state
+    const { value: currentValue, selectionStart, selectionEnd } = input;
+
+    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {
+      const charBeforeCursor = currentValue[selectionStart - 1];
+
+      // if the user deletes a thousands separator, remove the digit before it as well
+      if (charBeforeCursor === groupSeparator) {
+        e.preventDefault();
+        const beforeCursor = currentValue.slice(0, selectionStart - 2);
+        const afterCursor = currentValue.slice(selectionStart);
+        const newValue = `${beforeCursor}${afterCursor}`;
+        input.setSelectionRange(beforeCursor.length, beforeCursor.length);
+        handleChange(newValue);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    setFocus(true);
+    if (!isAllowedInputKey(e)) {
+      e.preventDefault();
+    }
+
+    if (e.key === 'Backspace') {
+      handleBackspace(e);
+    }
+  };
+
+  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const hasMultipleDecimalSeparators =
+      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;
+    if (hasMultipleDecimalSeparators) {
+      return false;
+    }
+
+    const newNumericValue = getUnformattedNumber({
+      value: e.target.value,
+      currency,
+      locale: intl.locale,
+    });
+    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;
+    if (String(newNumericValue).length > maxLength) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const addonContent = useMemo((): string | null | undefined => {
+    // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
+    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
+    if (isInputPossiblyOverflowing({ ref, value })) {
+      return null;
+    }
+    if (!decimalSeparator || !value) {
+      return null;
+    }
+
+    // if the user has typed a decimal separator, show the full decimal part as a placeholder
+    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation
+    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence
+    if (focus && decimalMode) {
+      // reuse getDecimalPart
+      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);
+      // show only the characters that are not already displayed by the input
+      return fullDecimalPart?.slice(decimalPart?.length);
+    }
+
+    // in unfocused state, always show the full decimal part unless the user has already entered decimals
+    if (!focus && !decimalMode) {
+      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);
+      return decimalSeparator + decimalPlaceholder;
+    }
+
+    return null;
+  }, [
+    decimalMode,
+    decimalPart?.length,
+    decimalSeparator,
+    focus,
+    placeholder,
+    value,
+    valueWithFullDecimals,
+  ]);
+
+  const style = useInputStyle({
+    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
+    value: addonContent ? valueWithFullDecimals : value,
+    focus: visualFocus,
+    inputElement: ref.current,
+    loading,
+  });
+
+  return (
+    <div className="wds-amount-input-container">
+      <div
+        className={clsx('wds-amount-input-input-container', 'np-text-display-large')}
+        style={style}
+      >
+        <input
+          ref={ref}
+          className="wds-amount-input-input"
+          id={id}
+          autoComplete="off"
+          inputMode="decimal"
+          value={value}
+          type="text"
+          placeholder={placeholder}
+          aria-describedby={describedById}
+          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */
+          size={1}
+          onChange={(e) => {
+            if (isAllowedInput(e)) {
+              handleChange(e.target.value);
+            }
+          }}
+          onBlurCapture={() => handleBlur()}
+          onPaste={(e) => handlePaste(e)}
+          onFocus={() => {
+            setFocus(true);
+          }}
+          onBlur={() => {
+            setTimeout(() => setVisualFocus(false), 30);
+          }}
+          onKeyDown={(e) => handleKeyDown(e)}
+        />
+        <AnimatePresence initial={false}>
+          {addonContent !== null && (
+            <AnimatedNumber
+              className={clsx(
+                'wds-amount-input-placeholder',
+                visualFocus && 'wds-amount-input-placeholder-focus',
+              )}
+              onClick={() => ref.current?.focus()}
+            >
+              {addonContent}
+            </AnimatedNumber>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+const getPlaceholder = (currency: string, locale: string) => {
+  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });
+};
+
+const getDecimalPart = (value: string, decimalSeparator: string | null) => {
+  if (!value || !decimalSeparator) {
+    return undefined;
+  }
+
+  const [_, decimalPart] = value.split(decimalSeparator);
+  return decimalPart ?? undefined;
+};

package/src/expressiveMoneyInput/AnimatedNumber.tsx

@@ -0,0 +1,40 @@
+import { motion, useReducedMotion } from 'framer-motion';
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const AnimatedNumber = ({ children, onClick, className }: Props) => {
+  const reducedMotion = useReducedMotion();
+
+  return (
+    <motion.span
+      className={className}
+      aria-hidden
+      initial={{ zoom: 0.01 }}
+      animate={{ zoom: 1 }}
+      exit={{ zoom: 0.01 }}
+      transition={{
+        duration: reducedMotion ? 0 : 0.3,
+        type: 'tween',
+        ease: [0.3, 0, 0.1, 1],
+      }}
+      onClick={() => onClick?.()}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: [0, 0, 1] }}
+        exit={{ opacity: [1, 0, 0] }}
+        transition={{
+          duration: reducedMotion ? 0 : 0.3,
+          times: [0, 0.5, 1],
+        }}
+      >
+        {children}
+      </motion.span>
+    </motion.span>
+  );
+};

package/src/expressiveMoneyInput/Chevron.css

@@ -0,0 +1,12 @@
+.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;
+}

package/src/expressiveMoneyInput/Chevron.less

@@ -0,0 +1,13 @@
+.wds-chevron {
+  &-container {
+    width: var(--size-32);
+    overflow: hidden;
+    color: var(--color-interactive-primary);
+    margin-left: var(--size-8);
+    transition: width 0.3s ease;
+  }
+
+  &-hidden {
+    width: 0;
+  }
+}

package/src/expressiveMoneyInput/Chevron.tsx

@@ -0,0 +1,35 @@
+import { ChevronLeft } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { motion } from 'framer-motion';
+
+interface Props {
+  shouldShow: boolean;
+}
+
+export const Chevron = ({ shouldShow = true }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'd-flex align-items-center',
+        'wds-chevron-container',
+        !shouldShow && 'wds-chevron-hidden',
+      )}
+    >
+      <motion.div
+        animate={{
+          x: [12, 0, 0, -12],
+          opacity: [0, 1, 1, 0],
+        }}
+        transition={{
+          duration: 3,
+          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
+          times: [0, 0.1, 0.9, 1],
+          repeat: Infinity,
+          repeatType: 'loop',
+        }}
+      >
+        <ChevronLeft size={24} />
+      </motion.div>
+    </div>
+  );
+};

package/src/expressiveMoneyInput/CurrencySelector.css

@@ -0,0 +1,6 @@
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}

package/src/expressiveMoneyInput/CurrencySelector.less

@@ -0,0 +1,7 @@
+.wds-currency-selector {
+  &:disabled {
+    opacity: 1 !important;
+    cursor: initial !important;
+    mix-blend-mode: initial !important;
+  }
+}