@transferwise/components 0.0.0-experimental-37d8e2c → 0.0.0-experimental-dabe7c7

package/src/avatarView/AvatarView.story.tsx

@@ -1,425 +0,0 @@
-/* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
-import { storyConfig } from '../test-utils';
-import {
-  Freeze,
-  Graph,
-  Leaf,
-  MassPayout,
-  Money,
-  Plane,
-  PlusCircle,
-  QrCode,
-  Rewards,
-  Target,
-  Team,
-  Transport,
-  Wallet,
-  Water,
-} from '@transferwise/icons';
-import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
-import AvatarView, { AvatarViewProps } from '.';
-import { Flag } from '@wise/art';
-import Body from '../body';
-import AvatarWrapper from '../avatarWrapper';
-import { getInitials, Sentiment } from '../common';
-import Display from '../display';
-import { get } from 'lodash';
-import { getAvatarColorFromSeed } from '../avatar/colors';
-
-export default {
-  title: 'Content/AvatarView',
-} satisfies Meta<typeof AvatarView>;
-
-type Story = StoryObj<typeof AvatarView>;
-
-const profileName1 = 'Wolter White';
-const profileName2 = 'Tyler Durden';
-const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
-
-export const Selected: Story = storyConfig(
-  {
-    render: () => {
-      const [selected, setSelected] = useState(true);
-      return (
-        <div
-          style={{
-            gap: '1em',
-            display: 'grid',
-            justifyContent: 'space-between',
-            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
-          }}
-        >
-          {sizes.map((size) => (
-            <AvatarView key={size} size={size} selected={selected}>
-              <Freeze />
-            </AvatarView>
-          ))}
-          {sizes.map((size) => (
-            <AvatarView
-              key={size}
-              size={size}
-              selected={selected}
-              action={{
-                onClick: () => {
-                  action('interactive avatar');
-                  setSelected(!selected);
-                },
-              }}
-            >
-              <Freeze />
-            </AvatarView>
-          ))}
-        </div>
-      );
-    },
-  },
-  { variants: ['light', 'dark'] },
-);
-
-export const Notification: Story = storyConfig(
-  {
-    render: () => (
-      <div
-        style={{
-          gap: '1em',
-          display: 'grid',
-          justifyContent: 'space-between',
-          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
-        }}
-      >
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} notification>
-            <MassPayout />
-          </AvatarView>
-        ))}
-        {sizes.map((size) => (
-          <AvatarView
-            key={size}
-            size={size}
-            notification
-            action={{
-              onClick: () => action('interactive avatar'),
-            }}
-          >
-            <MassPayout />
-          </AvatarView>
-        ))}
-
-        {sizes.map((size) => (
-          <AvatarView key={size} size={size} notification action={{ href: '#' }}>
-            <MassPayout />
-          </AvatarView>
-        ))}
-      </div>
-    ),
-  },
-  { variants: ['light', 'dark'] },
-);
-
-export const Badge: Story = storyConfig(
-  {
-    render: () => {
-      const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
-      const icons = [
-        <Plane />,
-        <QrCode />,
-        <Target />,
-        <Transport />,
-        <Wallet />,
-        <Water />,
-        <Team />,
-      ];
-      return (
-        <div
-          style={{
-            gap: '1em',
-            display: 'grid',
-            justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(7, min-content)',
-          }}
-        >
-          {sizes.map((size, index) => (
-            <AvatarView key={size} size={size} badge={<Flag code={currencies[index]} />}>
-              {icons[index]}
-            </AvatarView>
-          ))}
-
-          {sizes.map((size, index) => (
-            <AvatarView
-              key={size}
-              size={size}
-              badge={<Flag code={currencies[index]} />}
-              action={{ onClick: action('onClick') }}
-              entity={{ name: 'Test Name' }}
-            >
-              {icons[index]}
-            </AvatarView>
-          ))}
-        </div>
-      );
-    },
-  },
-  { variants: ['light', 'dark'] },
-);
-
-export const Interactive: Story = storyConfig(
-  {
-    render: () => {
-      return (
-        <div
-          style={{
-            gap: '1em',
-            display: 'grid',
-            justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(2, min-content)',
-          }}
-        >
-          <Body type="body-large-bold">Button</Body>
-          <Body type="body-large-bold">Link</Body>
-
-          <AvatarView
-            action={{ onClick: action('onClick') }}
-            entity={{
-              imageSrc: '../avatar-img.webp',
-            }}
-          />
-
-          <AvatarView
-            action={{ href: '#' }}
-            entity={{
-              imageSrc: '../avatar-img.webp',
-            }}
-          />
-
-          <AvatarView
-            action={{ onClick: action('onClick') }}
-            badge={<Flag code="EU" />}
-            entity={{
-              imageSrc: '../avatar-img.webp',
-              name: 'Test Name',
-            }}
-          />
-
-          <AvatarView
-            action={{ href: '#' }}
-            badge={<Flag code="EU" />}
-            entity={{
-              imageSrc: '../avatar-img.webp',
-              name: 'Test Name',
-            }}
-          />
-
-          <AvatarView action={{ onClick: action('onClick') }} entity={{ name: 'Test Name' }} />
-
-          <AvatarView action={{ href: '#' }} entity={{ name: 'Test Name' }} />
-
-          <AvatarView
-            action={{ onClick: action('onClick') }}
-            badge={<Flag code="EU" />}
-            entity={{ name: 'Test Name' }}
-          />
-
-          <AvatarView
-            action={{ href: '#' }}
-            badge={<Flag code="EU" />}
-            entity={{ name: 'Test Name' }}
-          />
-
-          <AvatarView action={{ onClick: action('onClick') }}>
-            <Leaf />
-          </AvatarView>
-
-          <AvatarView action={{ href: '#' }}>
-            <Leaf />
-          </AvatarView>
-
-          <AvatarView action={{ onClick: action('onClick') }} badge={<Flag code="EU" />}>
-            <Leaf />
-          </AvatarView>
-
-          <AvatarView action={{ href: '#' }} badge={<Flag code="EU" />}>
-            <Leaf />
-          </AvatarView>
-        </div>
-      );
-    },
-  },
-  { variants: ['light', 'dark'] },
-);
-
-export const Entity: Story = storyConfig(
-  {
-    render: () => {
-      return (
-        <div
-          style={{
-            gap: '1em',
-            display: 'grid',
-            justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(7, min-content)',
-          }}
-        >
-          {sizes.map((size) => (
-            <AvatarView
-              key={size}
-              size={size}
-              entity={{
-                imageSrc: '../avatar-img.webp',
-                name: 'Test Name',
-                profileType: 'business',
-              }}
-            />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView
-              key={size}
-              size={size}
-              action={{ onClick: action('onClick') }}
-              entity={{
-                imageSrc: '../avatar-img.webp',
-                name: 'Test Name',
-                profileType: 'business',
-              }}
-            />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView key={size} size={size} entity={{ name: 'Test Name' }} />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView
-              key={size}
-              size={size}
-              action={{ onClick: action('onClick') }}
-              entity={{ name: 'Test Name' }}
-            />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView key={size} size={size} entity={{ profileType: 'business' }} />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView
-              key={size}
-              size={size}
-              action={{ onClick: action('onClick') }}
-              entity={{ profileType: 'business' }}
-            />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView key={size} size={size} />
-          ))}
-
-          {sizes.map((size) => (
-            <AvatarView key={size} size={size} action={{ onClick: action('onClick') }} />
-          ))}
-        </div>
-      );
-    },
-  },
-  { variants: ['light', 'dark'] },
-);
-
-export const BrokenImageFallback: Story = {
-  render: () => <AvatarView entity={{ imageSrc: '../img-wrong-url.lol' }} />,
-};
-
-export const EdgeInstaces: Story = {
-  render: () => {
-    const css = `.custom-variant {
-      border: 1px dotted black;
-    }`;
-    return (
-      <div
-        style={{
-          gap: '1em',
-          display: 'grid',
-          justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(2, min-content)',
-        }}
-      >
-        <style>{css}</style>
-        {/* <Body>- Custom colors</Body> */}
-        <AvatarView
-          action={{ onClick: action('onClick') }}
-          badge={<Flag code="eu" />}
-          style={{ backgroundColor: 'var(--color-bright-orange)' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView
-          badge={<Flag code="eu" />}
-          style={{ backgroundColor: 'var(--color-bright-orange)' }}
-        >
-          <Money />
-        </AvatarView>
-        {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
-        <AvatarView action={{ onClick: action('onClick') }} className="custom-variant">
-          <PlusCircle />
-        </AvatarView>
-        <AvatarView action={{ href: '#' }} className="custom-variant">
-          <PlusCircle />
-        </AvatarView>
-        <AvatarView action={{ href: '#' }} className="custom-variant">
-          {null}
-        </AvatarView>
-        {/* <Body> - Add example custom backgrounds as in account summary (https://wise.com/account-summary)</Body> */}
-        <AvatarView style={{ backgroundColor: 'rgb(203, 217, 195)' }}>
-          <span style={{ color: 'rgb(22, 51, 0)' }}>
-            <Graph />
-          </span>
-        </AvatarView>
-        <AvatarView
-          action={{ onClick: action('onClikc') }}
-          style={{ backgroundColor: 'rgb(203, 217, 195)' }}
-        >
-          <span style={{ color: 'rgb(22, 51, 0)' }}>
-            <Graph />
-          </span>
-        </AvatarView>
-        <AvatarView style={{ backgroundColor: 'rgb(22, 51, 0)' }}>
-          <span style={{ color: 'rgb(203, 217, 195)' }}>
-            <Rewards />
-          </span>
-        </AvatarView>
-        <AvatarView
-          action={{ onClick: action('onClikc') }}
-          style={{ backgroundColor: 'rgb(22, 51, 0)' }}
-        >
-          <span style={{ color: 'rgb(203, 217, 195)' }}>
-            <Rewards />
-          </span>
-        </AvatarView>
-        {/* <Body>- Add example Wise Sand + custom background from hash</Body> */}
-        <AvatarView
-          badge={<Flag code="eu" />}
-          style={{ backgroundColor: getAvatarColorFromSeed(profileName1) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView style={{ backgroundColor: getAvatarColorFromSeed(profileName1) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView
-          action={{ onClick: action('onClick') }}
-          style={{ backgroundColor: getAvatarColorFromSeed(profileName2) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView
-          action={{ href: '#' }}
-          badge={<Flag code="eu" />}
-          style={{ backgroundColor: getAvatarColorFromSeed(profileName2) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-      </div>
-    );
-  },
-};

package/src/avatarView/AvatarView.tsx

@@ -1,217 +0,0 @@
-import Badge from '../badge';
-import { getInitials } from '../common';
-import NotificationDot from '../common/notificationDot/NotificationDot';
-import StatusIcon from '../statusIcon';
-import Circle from '../common/circle';
-import { HTMLAttributes, PropsWithChildren, useState } from 'react';
-import { ActionOptions as ActionProps } from '../common/action/Action';
-import { clsx } from 'clsx';
-import { Briefcase, Profile } from '@transferwise/icons';
-
-type InteractiveProps = Omit<ActionProps, 'text'> &
-  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;
-
-const AvatarViewDefaultSize = 48;
-
-export type Props = PropsWithChildren<{
-  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
-  /** adds prebuilt notification dot via Badge component */
-  notification?: boolean;
-  /** adds custom badge to avatar */
-  badge?: React.ReactNode;
-  entity?: EntityProps;
-  /** changes background color to neutral and wraps component with button */
-  action?: InteractiveProps;
-  /** changes background color to neutral and adds predefined Badge */
-  selected?: boolean;
-  /** often use case to override `background-color` or `border` */
-  style?: React.CSSProperties;
-}> &
-  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-
-/** Non interactive avatar view has custom border width */
-const mapNonInteractiveBorderWidth = {
-  16: 0.667,
-  24: 1,
-  32: 1,
-  40: 1.25,
-  48: 1.5,
-  56: 1.75,
-  72: 2.25,
-};
-
-/** Selected state has custom border width */
-const mapSelectedBorderWidth = {
-  16: 1,
-  24: 1,
-  32: 1,
-  40: 2,
-  48: 2,
-  56: 2,
-  72: 2,
-};
-
-function AvatarView({
-  children = undefined,
-  size = AvatarViewDefaultSize,
-  selected,
-  notification,
-  badge,
-  entity,
-  action,
-  className,
-  style,
-}: Props) {
-  return (
-    <Interactive
-      {...action}
-      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}
-    >
-      <Badges asset={badge} avatarProps={{ size, notification, selected }}>
-        <Circle
-          size={size}
-          fixedSize
-          style={{
-            // @ts-expect-error CSS custom props allowed
-            '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,
-            '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,
-            ...style,
-          }}
-        >
-          {children === undefined ? <Entity {...entity} /> : children}
-        </Circle>
-      </Badges>
-    </Interactive>
-  );
-}
-
-function Interactive({
-  children,
-  onClick,
-  href,
-  target,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby,
-}: PropsWithChildren<InteractiveProps>) {
-  const elementName: React.ElementType | null = onClick ? 'button' : href ? 'a' : null;
-  if (elementName === null) {
-    // non interactive
-    return <div className={className}>{children}</div>;
-  }
-  const a11yProps = { ariaLabel, ariaLabelledby };
-  if (elementName === 'button') {
-    return (
-      <button
-        type="button"
-        className={clsx(className, 'np-avatar-view-interactive', 'btn-unstyled')}
-        onClick={onClick}
-        {...a11yProps}
-      >
-        {children}
-      </button>
-    );
-  }
-  if (elementName === 'a') {
-    return (
-      // eslint-disable-next-line react/jsx-no-target-blank
-      <a
-        href={href}
-        target={target}
-        rel={target === '_blank' ? 'noreferrer' : undefined}
-        className={clsx(className, 'np-avatar-view-interactive', 'text-no-decoration')}
-        {...a11yProps}
-      >
-        {children}
-      </a>
-    );
-  }
-}
-
-const mapBadgeSize = {
-  16: 'sm',
-  24: 'sm',
-  32: 'sm',
-  40: 'sm',
-  48: 'sm',
-  56: 'lg',
-  72: 'lg',
-};
-
-/** AvatarView has a custom sizes for badge */
-const mapNotificationSize = {
-  16: 6,
-  24: 8,
-  32: 10,
-  40: 10,
-  48: 14,
-  56: 16,
-  72: 20,
-};
-
-type BadgesProps = PropsWithChildren<{
-  asset: React.ReactNode;
-  avatarProps: Pick<Props, 'selected' | 'size' | 'notification'>;
-}>;
-
-function Badges({ children, asset, avatarProps }: BadgesProps) {
-  const { size = AvatarViewDefaultSize, selected, notification } = avatarProps;
-  if (asset || selected || notification) {
-    if (asset && size > 16) {
-      return (
-        <Badge badge={asset} size={mapBadgeSize[size]}>
-          {children}
-        </Badge>
-      );
-    }
-    if (selected && size > 16) {
-      return (
-        <Badge
-          badge={<StatusIcon sentiment="positive" size={mapBadgeSize[size]} />}
-          size={mapBadgeSize[size]}
-        >
-          {children}
-        </Badge>
-      );
-    }
-    if (notification) {
-      return (
-        <Badge
-          badge={
-            <NotificationDot
-              // @ts-expect-error CSS custom props allowed
-              style={{ '--badge-notification-dot-size': `${mapNotificationSize[size]}px` }}
-            />
-          }
-          position="top-right"
-          size={mapBadgeSize[size]}
-        >
-          {children}
-        </Badge>
-      );
-    }
-  }
-  return children;
-}
-
-export type EntityProps = {
-  imageSrc?: string | null;
-  name?: string | null;
-  profileType?: 'personal' | 'business' | null;
-};
-
-function Entity({ imageSrc = null, name = null, profileType = null }: EntityProps) {
-  const [tryLoadImage, setTryLoadImage] = useState(true);
-  if (imageSrc && tryLoadImage) {
-    return <img src={imageSrc} alt="" onError={() => setTryLoadImage(false)} />;
-  }
-  if (profileType) {
-    return profileType === 'business' ? <Briefcase /> : <Profile />;
-  }
-  if (name) {
-    return <>{getInitials(name)}</>;
-  }
-  return <Profile />;
-}
-
-export default AvatarView;

package/src/avatarView/index.ts

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

package/src/common/initials.ts

@@ -1,13 +0,0 @@
-export function getInitials(name: string) {
-  const allInitials = name
-    .split(' ')
-    .map((part) => part[0])
-    .join('')
-    .toUpperCase();
-
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-
-  return allInitials[0] + allInitials.slice(-1);
-}

package/src/common/notificationDot/NotificationDot.css

@@ -1,10 +0,0 @@
-.np-notification-dot {
-  --badge-notification-dot-size: 14px;
-  width: 14px;
-  width: var(--badge-notification-dot-size);
-  height: 14px;
-  height: var(--badge-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-}

package/src/common/notificationDot/NotificationDot.less

@@ -1,7 +0,0 @@
-.np-notification-dot {
-    --badge-notification-dot-size: 14px;
-    width: var(--badge-notification-dot-size);
-    height: var(--badge-notification-dot-size);
-    background-color: var(--color-sentiment-negative);
-    border-radius: var(--radius-full);
-}

package/src/common/notificationDot/NotificationDot.tsx

@@ -1,10 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-
-/**
- * @deprecated make this element part pre build badges
- */
-export default function NotificationDot(props: Props) {
-  return <div {...props} className="np-notification-dot" />;
-}