@transferwise/components 0.0.0-experimental-77845f6 → 0.0.0-experimental-e556371

package/src/expressiveMoneyInput/chevron/Chevron.tsx

@@ -1,35 +0,0 @@
-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 />
-      </motion.div>
-    </div>
-  );
-};

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css

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

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.less

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

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -1,218 +0,0 @@
-import type { AvatarLayoutProps } from '../../avatarLayout';
-import Button from '../../button';
-import {
-  SelectInput,
-  SelectInputOptionContent,
-  SelectInputTriggerButton,
-} from '../../inputs/SelectInput';
-import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
-import { ChevronDown } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import {
-  type ButtonHTMLAttributes,
-  forwardRef,
-  type MouseEventHandler,
-  useMemo,
-  useState,
-} from 'react';
-import { useIntl } from 'react-intl';
-
-import messages from '../ExpressiveMoneyInput.messages';
-
-export interface CurrencyOption {
-  label?: string;
-  code: string;
-  keywords: string[] | undefined;
-}
-
-export interface CurrencySection {
-  title: string;
-  currencies: CurrencyOption[];
-}
-
-export type CurrencyOptions = CurrencySection[];
-
-export type Props = {
-  id: string;
-  labelId: string;
-  options?: CurrencyOptions;
-  onChange?: (currency: CurrencyType) => void;
-  onOpen?: () => void;
-  addons?: AvatarLayoutProps['avatars'];
-  onSearchChange?: (payload: { query: string; resultCount: number }) => void;
-} & Pick<ExpressiveMoneyInputProps, 'currency'>;
-
-export const CurrencySelector = ({
-  id,
-  currency,
-  options = [],
-  labelId,
-  onChange,
-  addons,
-  onOpen,
-  onSearchChange,
-}: Props) => {
-  const intl = useIntl();
-
-  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);
-
-  const activeCurrencyOption = useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return allCurrencyOptions.find((option) => option.code === currency)!;
-  }, [currency, allCurrencyOptions]);
-
-  const disabled =
-    !onChange ||
-    options.length === 0 ||
-    (options.length === 1 && options[0].currencies.length <= 1);
-
-  const [searchQuery, setSearchQuery] = useState<string>('');
-
-  const handleTriggerClick: MouseEventHandler = (event) => {
-    const triggerEl = event.currentTarget;
-    if (triggerEl?.getAttribute('aria-expanded') === 'false') {
-      onOpen?.();
-    }
-  };
-
-  const items = searchQuery
-    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)
-    : options.map(getCurrencyGroup);
-
-  return (
-    <SelectInput
-      compareValues="code"
-      disabled={disabled}
-      id={id}
-      value={activeCurrencyOption}
-      filterable
-      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}
-      UNSAFE_triggerButtonProps={{
-        id: undefined,
-        'aria-labelledby': undefined,
-        'aria-describedby': labelId,
-        'aria-invalid': undefined,
-        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),
-      }}
-      items={items}
-      renderValue={({ code, label }) => {
-        return (
-          <SelectInputOptionContent
-            title={code}
-            note={label}
-            icon={<Flag code={code} intrinsicSize={24} />}
-          />
-        );
-      }}
-      renderTrigger={() => (
-        <SelectInputTriggerButton
-          as={ButtonInput}
-          // @ts-expect-error new (v2) ButtonProps
-          addonStart={{
-            type: 'avatar',
-            value: [
-              addons ? addons[0] : null,
-              {
-                ...(addons && addons.length > 1
-                  ? { ...addons[1] }
-                  : {
-                      asset: <Flag code={currency} />,
-                    }),
-              },
-            ].filter((avatar) => Boolean(avatar)),
-          }}
-          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}
-          onClick={(event) => handleTriggerClick(event)}
-        >
-          {currency}
-        </SelectInputTriggerButton>
-      )}
-      onChange={(newValue) => {
-        onChange?.(newValue.code);
-      }}
-      onFilterChange={({ queryNormalized }) => {
-        setSearchQuery(queryNormalized ?? '');
-        if (queryNormalized) {
-          onSearchChange?.({
-            query: queryNormalized,
-            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)
-              .length,
-          });
-        }
-      }}
-    />
-  );
-};
-
-export const ButtonInput = forwardRef(function ButtonInput(
-  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
-  ref: React.ForwardedRef<HTMLButtonElement | null>,
-) {
-  return (
-    <Button
-      ref={ref}
-      size="md"
-      v2
-      className="wds-currency-selector"
-      priority="secondary-neutral"
-      {...rest}
-    >
-      {children}
-    </Button>
-  );
-});
-
-const getCurrencySelectOption = (currency: CurrencyOption) => {
-  return {
-    type: 'option' as const,
-    value: currency,
-    filterMatchers: currency.keywords,
-  };
-};
-
-const getCurrencyGroup = (section: CurrencySection) => {
-  return {
-    type: 'group' as const,
-    label: section.title,
-    options: section.currencies.map(getCurrencySelectOption),
-  };
-};
-
-const getUniqueCurrencies = (options: CurrencyOptions) => {
-  const allCurrencyOptions = options.flatMap((section) => section.currencies);
-  const uniqueCurrencies = new Map<string, CurrencyOption>();
-
-  allCurrencyOptions.forEach((currencyObj) => {
-    uniqueCurrencies.set(currencyObj.code, currencyObj);
-  });
-
-  return Array.from(uniqueCurrencies.values());
-};
-
-const filterAndSortCurrenciesForQuery = (
-  currencies: CurrencyOption[],
-  query: string,
-): CurrencyOption[] => {
-  return (
-    currencies
-      .filter((currency) => {
-        return (
-          currency.code.toLowerCase().includes(query) ||
-          (currency.label ?? '').toLowerCase().includes(query) ||
-          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))
-        );
-      })
-      // prefer exact matches, then sort alphabetically by code
-      .sort((a, b) => {
-        const aCode = a.code.toLowerCase();
-        const bCode = b.code.toLowerCase();
-        if (aCode === query) {
-          return -1;
-        }
-        if (bCode === query) {
-          return 1;
-        }
-        return aCode.localeCompare(bCode);
-      })
-  );
-};

package/src/expressiveMoneyInput/hooks/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/expressiveMoneyInput/hooks/useInputStyle.ts

@@ -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/hooks/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/expressiveMoneyInput/index.ts

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

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

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