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

package/src/expressiveMoneyInput/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.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.less

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

package/src/expressiveMoneyInput/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/ExpressiveMoneyInput.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-expressive-money-input-currency-selector {
-  flex-shrink: 0;
-  margin-right: 24px;
-  margin-right: var(--size-24);
-}
-.wds-expressive-money-input-chevron {
-  transform: translateY(-5%);
-}

package/src/expressiveMoneyInput/ExpressiveMoneyInput.less

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

package/src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts

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

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -1,290 +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 ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
-import { lorem10, lorem5 } from '../test-utils';
-import { Sentiment } from '../common';
-import Image from '../image';
-import Link from '../link';
-import Money from '../money';
-import React from 'react';
-import Button from '../button';
-import Modal from '../modal';
-import ListItem from '../listItem';
-import List from '../list';
-import { Flag } from '@wise/art';
-import Alert from '../alert';
-import Divider from '../divider';
-import { Rewards, Tags } from '@transferwise/icons';
-
-export default {
-  title: 'Forms/ExpressiveMoneyInput',
-  component: ExpressiveMoneyInput,
-} as Meta;
-
-const props: ExpressiveMoneyInputProps = {
-  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: ExpressiveMoneyInputProps) => (
-    <ExpressiveMoneyInput
-      label={args.label}
-      amount={null}
-      currency="EUR"
-      onAmountChange={args.onAmountChange}
-    />
-  ),
-};
-
-export const WithInitAmount = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithLoading = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        loading
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithoutChevron = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        showChevron={false}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithCurrencySelector = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        currencySelector={args.currencySelector}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithInlinePromptNoSentiment = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
-    return (
-      <ExpressiveMoneyInput
-        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: ExpressiveMoneyInputProps) => {
-    return (
-      <>
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'negative' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'warning' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'neutral' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'positive' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'positive', media: <Tags /> }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'proposition' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'proposition', media: <Rewards /> }}
-          onAmountChange={args.onAmountChange}
-        />
-      </>
-    );
-  },
-};
-
-export const Autofocus = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => (
-    <ExpressiveMoneyInput {...args} currency="MXN" inlinePrompt={undefined} />
-  ),
-};
-
-export const WithCustomRender = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const [open, setOpen] = React.useState(false);
-    return (
-      <>
-        <ExpressiveMoneyInput
-          label="Instance with Custom Currency Selector"
-          currency="AUD"
-          currencySelector={{
-            customRender: ({ id, labelId }) => (
-              <Button v2 size="sm" priority="primary" onClick={() => setOpen(true)}>
-                Custom Render
-              </Button>
-            ),
-          }}
-          onAmountChange={(amount) => console.log(amount)}
-        />
-        <Modal
-          open={open}
-          title="Custom UX for currency selectors"
-          body={
-            <List>
-              <ListItem
-                media={
-                  <ListItem.AvatarView>
-                    <Flag code="gb" />
-                  </ListItem.AvatarView>
-                }
-                title="GBP"
-                control={<ListItem.Radio name="currency-key" checked={false} />}
-              />
-              <ListItem
-                media={
-                  <ListItem.AvatarView>
-                    <Flag code="au" />
-                  </ListItem.AvatarView>
-                }
-                title="AUD"
-                control={<ListItem.Radio name="currency-key" checked />}
-              />
-            </List>
-          }
-          onClose={() => setOpen(false)}
-        />
-        <Divider className="m-y-2" />
-        <Alert type="info" message="TODO: add proper message here" />
-      </>
-    );
-  },
-};