@transferwise/components 0.0.0-experimental-eaf43c2 → 0.0.0-experimental-6730b89

package/src/moneyInputField/MoneyInputField.css

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

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

package/src/moneyInputField/MoneyInputField.messages.ts

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

@@ -1,188 +0,0 @@
-/* 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 Link from '../link';
-import Money from '../money';
-import React from 'react';
-
-export default {
-  title: 'Forms/MoneyInputField',
-  component: MoneyInputField,
-} as Meta;
-
-const props: MoneyInputFieldProps = {
-  label: 'You send',
-  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) => (
-    <MoneyInputField
-      label={args.label}
-      amount={null}
-      currency="EUR"
-      onAmountChange={args.onAmountChange}
-    />
-  ),
-};
-
-export const WithInitAmount = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    return (
-      <MoneyInputField
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithLoading = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    return (
-      <MoneyInputField
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        loading
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithoutChevron = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    return (
-      <MoneyInputField
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        showChevron={false}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithCurrencySelector = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    return (
-      <MoneyInputField
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        currencySelector={args.currencySelector}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithInlinePromptNoSentiment = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
-    return (
-      <MoneyInputField
-        label={args.label}
-        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}
-      />
-    );
-  },
-};
-
-export const WithInlinePromptSentiment = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => {
-    const availableBalance = 1500;
-    return (
-      <MoneyInputField
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        currencySelector={args.currencySelector}
-        inlinePrompt={args.inlinePrompt}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const Autofocus = {
-  args: props,
-  render: (args: MoneyInputFieldProps) => (
-    <MoneyInputField {...args} currency="MXN" inlinePrompt={undefined} />
-  ),
-};

package/src/moneyInputField/MoneyInputField.tsx

@@ -1,123 +0,0 @@
-import { Body, Label } from '..';
-import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useId, type ReactNode } from 'react';
-
-import { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';
-import { CommonProps } from '../common';
-import { AmountInput } from './AmountInput';
-import { Chevron } from './Chevron';
-import { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';
-
-type AmountType = number | null;
-export type CurrencyType = string;
-
-type DefaultCurrencySelectorInstanceType = Pick<
-  CurrencySelectorProps,
-  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'
->;
-type CustomCurrencySelectorInstanceType = (props: { id: string; labelId: string }) => ReactNode;
-type CurrencySelectorType =
-  | DefaultCurrencySelectorInstanceType
-  | CustomCurrencySelectorInstanceType;
-
-export type Props = {
-  label?: ReactNode;
-  currencySelector?: CurrencySelectorType;
-  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({
-  label,
-  currency,
-  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,
-  amount,
-  onAmountChange,
-  className,
-  inlinePrompt,
-  showChevron,
-  autoFocus,
-  loading,
-  onFocusChange,
-}: Props) {
-  const inputId = useId();
-  const labelId = useId();
-  const customAlertId = useId();
-  const currencyId = useId();
-
-  const selector =
-    typeof currencySelector === 'function' ? (
-      currencySelector({ id: currencyId, labelId })
-    ) : (
-      <CurrencySelector
-        id={currencyId}
-        labelId={labelId}
-        currency={currency}
-        {...currencySelector}
-      />
-    );
-
-  return (
-    <div className={clsx('wds-money-input-field', className)}>
-      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>
-        {label}
-      </Label>
-      <div
-        className={clsx('d-flex')}
-        role="group"
-        aria-labelledby={labelId}
-        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
-      >
-        <div className="wds-money-input-field-currency-selector">{selector}</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>
-    </div>
-  );
-}

package/src/moneyInputField/index.ts

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

package/src/moneyInputField/useFocus.ts

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

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

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

@@ -1,114 +0,0 @@
-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');
-    });
-  });
-});