@transferwise/components 0.0.0-experimental-9442a3d → 0.0.0-experimental-fe42ce4

package/src/moneyInputField/MoneyInputField.css

@@ -0,0 +1,61 @@
+.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-money-input-field {
+  display: flex;
+}
+.wds-money-input-field-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-money-input-field-chevron {
+  transform: translateY(-5%);
+}

package/src/moneyInputField/MoneyInputField.less

@@ -0,0 +1,16 @@
+@import "./AmountInput.less";
+@import "./CurrencySelector.less";
+@import "./Chevron.less";
+
+.wds-money-input-field {
+  display: flex;
+
+  &-currency-selector {
+    flex-shrink: 0;
+    margin-right: var(--size-24);
+  }
+
+  &-chevron {
+    transform: translateY(-5%);
+  }
+}

package/src/moneyInputField/MoneyInputField.messages.ts

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  currencySelectorSearchPlaceholder: {
+    id: 'neptune.MoneyInputField.currency.search.placeholder',
+    defaultMessage: 'Type a currency / country',
+  },
+
+  currencySelectorSelectCurrency: {
+    id: 'neptune.MoneyInputField.currency.select.currency',
+    defaultMessage: 'Select currency',
+  },
+});

package/src/moneyInputField/MoneyInputField.story.tsx

@@ -0,0 +1,193 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, no-console, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import { Meta } from '@storybook/react-webpack5';
+import MoneyInputField, { Props as MoneyInputFieldProps } from './MoneyInputField';
+import { lorem10 } from '../test-utils';
+import { Sentiment } from '../common';
+import Image from '../image';
+import { Field } from '../field/Field';
+import Link from '../link';
+import Money from '../money';
+import React from 'react';
+
+export default {
+  title: 'Forms/MoneyInputField',
+  component: MoneyInputField,
+} as Meta;
+
+const props: MoneyInputFieldProps = {
+  currency: 'GBP',
+  amount: 1234.56,
+  onAmountChange: (amount) => {
+    console.log('Amount changed', amount);
+  },
+  currencySelector: {
+    addons: [
+      { asset: <Image src="../avatar-square-dude.webp" alt="" /> },
+      { profileName: 'Test Test' },
+    ],
+    options: [
+      {
+        title: 'Popular',
+        currencies: [
+          { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
+          { code: 'AUD', label: 'Australia Dollar', keywords: ['dollar', 'us'] },
+        ],
+      },
+      {
+        title: 'Others',
+        currencies: [
+          { code: 'GBP', label: 'Pound', keywords: ['british'] },
+          { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+        ],
+      },
+    ],
+    onOpen: () => {
+      console.log('Currency selector opened');
+    },
+    onSearchChange: (payload) => {
+      console.log('Search changed', payload);
+    },
+    onChange: (currency) => {
+      console.log('Currency changed', currency);
+    },
+  },
+  loading: false,
+  inlinePrompt: { message: lorem10, sentiment: Sentiment.POSITIVE },
+  showChevron: true,
+  autoFocus: true,
+};
+
+export const NullAmount = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => (
+    <Field label="You send" description="Amount is 'null' no dropdown and no addons">
+      <MoneyInputField amount={null} currency="EUR" onAmountChange={args.onAmountChange} />
+    </Field>
+  ),
+};
+
+export const WithInitAmount = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    return (
+      <Field label="You send" description="With init amount">
+        <MoneyInputField
+          amount={availableBalance}
+          currency="EUR"
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const WithLoading = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    return (
+      <Field label="You send" description="With init amount and loading=true">
+        <MoneyInputField
+          amount={availableBalance}
+          currency="EUR"
+          loading
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const WithoutChevron = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    return (
+      <Field label="You send" description="With init amount and showChevron=false">
+        <MoneyInputField
+          amount={availableBalance}
+          currency="EUR"
+          showChevron={false}
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const WithCurrencySelector = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    return (
+      <Field label="You send" description="With init amount, currencySelector setup">
+        <MoneyInputField
+          amount={availableBalance}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const WithInlinePromptNoSentiment = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
+    return (
+      <Field label="You send" description="No sentiment inline prompt">
+        <MoneyInputField
+          amount={sourceAmount}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{
+            message: (
+              <>
+                {`Available balance `}
+                <Link
+                  onClick={() => {
+                    setSourceAmount(availableBalance);
+                  }}
+                >
+                  <Money amount={availableBalance} currency={args.currency} />
+                </Link>
+              </>
+            ),
+          }}
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const WithInlinePromptSentiment = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => {
+    const availableBalance = 1500;
+    return (
+      <Field label="You send" description="Sentiment inline prompt">
+        <MoneyInputField
+          amount={availableBalance}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={args.inlinePrompt}
+          onAmountChange={args.onAmountChange}
+        />
+      </Field>
+    );
+  },
+};
+
+export const Autofocus = {
+  args: props,
+  render: (args: MoneyInputFieldProps) => (
+    <Field label="You send" description="Set autofocus=true and showChevron=true">
+      <MoneyInputField {...args} currency="MXN" inlinePrompt={undefined} />
+    </Field>
+  ),
+};

package/src/moneyInputField/MoneyInputField.tsx

@@ -0,0 +1,118 @@
+import { Body } from '..';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useId } from 'react';
+
+import { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';
+import { CommonProps } from '../common';
+import { AmountInput } from './AmountInput';
+import { Chevron } from './Chevron';
+import { useInputAttributes } from '../inputs/contexts';
+import { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';
+
+type AmountType = number | null;
+export type CurrencyType = string;
+
+export type Props = {
+  currencySelector?: Pick<
+    CurrencySelectorProps,
+    'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'
+  >;
+  amount?: AmountType;
+  currency: CurrencyType;
+  inlinePrompt?: {
+    sentiment?: InlinePromptProps['sentiment'];
+    message: InlinePromptProps['children'];
+  };
+  showChevron?: boolean;
+  autoFocus?: boolean;
+  loading?: boolean;
+  onAmountChange: (amount: AmountType) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+
+export default function MoneyInputField({
+  currency,
+  currencySelector = {},
+  amount,
+  onAmountChange,
+  className,
+  inlinePrompt,
+  showChevron,
+  autoFocus,
+  loading,
+  onFocusChange,
+}: Props) {
+  // get input and label ids from Field component
+  const { id: fieldInputId, 'aria-labelledby': fieldLabelId } = useInputAttributes();
+  // if Field wasn't used fall back to generating ids locally
+  const fieldInputIdFallback = useId();
+  const fieldLabelIdFallback = useId();
+  const inputId = fieldInputId ?? fieldInputIdFallback;
+  const labelId = fieldLabelId ?? fieldLabelIdFallback;
+
+  const customAlertId = useId();
+  const currencyId = useId();
+
+  return (
+    <>
+      <div
+        className={clsx('wds-money-input-field', className)}
+        role="group"
+        aria-labelledby={labelId}
+        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
+      >
+        <div className="wds-money-input-field-currency-selector">
+          <CurrencySelector
+            id={currencyId}
+            currency={currency}
+            options={currencySelector.options ?? []}
+            labelId={labelId}
+            addons={currencySelector.addons}
+            onChange={currencySelector.onChange}
+            onOpen={currencySelector.onOpen}
+            onSearchChange={currencySelector.onSearchChange}
+          />
+        </div>
+        <AmountInput
+          id={inputId}
+          describedById={currencyId}
+          amount={amount}
+          currency={currency}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+          loading={loading}
+          onChange={onAmountChange}
+          onFocusChange={onFocusChange}
+        />
+        <div className={clsx('d-flex align-items-center', 'wds-money-input-field-chevron')}>
+          <Chevron shouldShow={Boolean(showChevron)} />
+        </div>
+      </div>
+      <AnimatePresence initial={false}>
+        {inlinePrompt && (
+          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>
+            <motion.div
+              key={customAlertId}
+              initial={{ opacity: 0, height: 0 }}
+              animate={{
+                opacity: 1,
+                height: 'auto',
+                transition: { delay: 0.75, duration: 0.3 },
+              }}
+              exit={{ opacity: 0, height: 0 }}
+            >
+              {inlinePrompt.sentiment ? (
+                <InlinePrompt id={customAlertId} sentiment={inlinePrompt.sentiment}>
+                  {inlinePrompt.message}
+                </InlinePrompt>
+              ) : (
+                <Body>{inlinePrompt.message}</Body>
+              )}
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/src/moneyInputField/index.ts

@@ -0,0 +1,2 @@
+export type { Props as MoneyInputFieldProps } from './MoneyInputField';
+export { default } from './MoneyInputField';

package/src/moneyInputField/useFocus.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const focusTimeout = 5 * 1000;
+
+export const useFocus = () => {
+  const [focus, setFocus] = useState(false);
+  const [visualFocus, setVisualFocus] = useState(false);
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    if (focus) {
+      const timeout = setTimeout(() => {
+        setVisualFocus(false);
+      }, focusTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [focus, counter]);
+
+  return {
+    focus,
+    setFocus: (value: boolean) => {
+      setFocus(value);
+      if (value) {
+        setVisualFocus(true);
+      }
+      // any call to setFocus should reset the timeout, even if the input was already in focus
+      // updating the counter will trigger the useEffect to reset the timeout
+      setCounter((prev) => prev + 1);
+    },
+    visualFocus,
+    setVisualFocus: (value: boolean) => {
+      setVisualFocus(value);
+    },
+  };
+};

package/src/moneyInputField/useInputStyle.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import { Props as MoneyInputFieldProps } from './MoneyInputField';
+
+type InputStyleObject = {
+  value: string;
+  focus: boolean;
+  inputElement: HTMLInputElement | null;
+} & Pick<MoneyInputFieldProps, '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/moneyInputField/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/moneyInputField/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');
+    });
+  });
+});