@transferwise/components 0.0.0-experimental-b3df26d → 0.0.0-experimental-050f154

package/src/expressiveMoneyInput/CurrencySelector.tsx

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

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

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

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

@@ -0,0 +1,290 @@
+/* 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" />
+      </>
+    );
+  },
+};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx

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