npm - @transferwise/components - Versions diffs - 0.0.0-experimental-4ed3f9f → 0.0.0-experimental-643f4d2 - Mend

@transferwise/components 0.0.0-experimental-4ed3f9f → 0.0.0-experimental-643f4d2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx DELETED Viewed

@@ -1,118 +0,0 @@
-import Body from '../body';
-import { Label } from '../label/Label';
-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 = {
-  customRender?: (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'];
-    media?: InlinePromptProps['media'];
-  };
-  showChevron?: boolean;
-  autoFocus?: boolean;
-  loading?: boolean;
-  onAmountChange: (amount: AmountType) => void;
-  onFocusChange?: (focused: boolean) => void;
-} & CommonProps;
-export default function ExpressiveMoneyInput({
-  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 = currencySelector.customRender?.({ id: currencyId, labelId }) ?? (
-    <CurrencySelector id={currencyId} labelId={labelId} currency={currency} {...currencySelector} />
-  );
-  return (
-    <div className={clsx('wds-expressive-money-input', 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-expressive-money-input-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-expressive-money-input-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} media={inlinePrompt.media} sentiment={inlinePrompt.sentiment}>
-                  {inlinePrompt.message}
-                </InlinePrompt>
-              ) : (
-                <Body>{inlinePrompt.message}</Body>
-              )}
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

package/src/expressiveMoneyInput/index.ts DELETED Viewed

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

package/src/expressiveMoneyInput/useFocus.ts DELETED Viewed

@@ -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/expressiveMoneyInput/useInputStyle.ts DELETED Viewed

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

@@ -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/expressiveMoneyInput/utils.spec.ts DELETED Viewed

@@ -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');
-    });
-  });
-});

package/src/expressiveMoneyInput/utils.ts DELETED Viewed

@@ -1,116 +0,0 @@
-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/prompt/InlinePrompt/InlinePrompt.story.tsx DELETED Viewed

@@ -1,57 +0,0 @@
-import { lorem10, lorem5 } from '../../test-utils';
-import { InlinePrompt } from './InlinePrompt';
-import { CardWise, Rewards } from '@transferwise/icons';
-export default {
-  title: 'Internal/InlinePrompt',
-  component: InlinePrompt,
-};
-export const AllVariants = () => {
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridAutoFlow: 'row',
-        rowGap: 'var(--size-12)',
-        justifyItems: 'start',
-        width: 'fit-content',
-      }}
-    >
-      <InlinePrompt sentiment="positive">
-        {lorem5}
-      </InlinePrompt>
-      <InlinePrompt media={<Rewards />} sentiment="positive">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="negative">
-        {lorem5}
-      </InlinePrompt>
-      <InlinePrompt sentiment="negative">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="neutral">
-        {lorem5}
-      </InlinePrompt>
-      <InlinePrompt sentiment="neutral">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="warning">
-        {lorem5}
-      </InlinePrompt>
-      <InlinePrompt sentiment="warning">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="proposition">
-        {lorem5}
-      </InlinePrompt>
-      <InlinePrompt sentiment="proposition">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="proposition" media={<CardWise />}>
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt>{lorem5}</InlinePrompt>
-    </div>
-  );
-};