@transferwise/components 46.166.0 → 46.168.0

package/src/Snackbar/Snackbar.test.tsx

@@ -1,206 +0,0 @@
-import { act, render, screen, userEvent } from '../test-utils';
-import Button from '../Button';
-
-import { Snackbar, type SnackbarProps } from './Snackbar';
-import { SnackbarConsumer } from './SnackbarContext';
-import SnackbarProvider from './SnackbarProvider';
-
-const CSS_TRANSITION_DURATION = 400;
-const TIMEOUT = 4000;
-
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-
-const advanceTimers = (duration: number) => {
-  act(() => {
-    jest.advanceTimersByTime(duration);
-  });
-};
-
-const renderSnackbar = (props: Partial<SnackbarProps> = {}) =>
-  render(<Snackbar text="" timeout={TIMEOUT} timestamp={0} {...props} />);
-
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.clearAllTimers();
-  jest.useRealTimers();
-});
-
-describe('Snackbar', () => {
-  it('renders the live region wrapper even while no notification is shown', () => {
-    renderSnackbar();
-
-    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
-    expect(screen.getByRole('alert')).toHaveClass('snackbar');
-  });
-
-  it('does not show a notification that is already present on mount', () => {
-    renderSnackbar({ text: 'Changes saved', timestamp: 1 });
-
-    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
-  });
-
-  it('shows the notification once text arrives after mount', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('renders an action and calls its onClick handler', async () => {
-    const onClick = jest.fn();
-    const { rerender } = renderSnackbar();
-
-    rerender(
-      <Snackbar
-        action={{ label: 'View', onClick }}
-        text="Transfer completed"
-        timeout={TIMEOUT}
-        timestamp={1}
-      />,
-    );
-    await user.click(screen.getByRole('button', { name: 'View' }));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('dismisses the notification once the timeout elapses', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-
-    advanceTimers(TIMEOUT - 1);
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-
-    advanceTimers(1);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
-  });
-
-  it('exits the current notification before entering the next one', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION - 1);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-
-    advanceTimers(1);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-    expect(screen.queryByText('First message')).not.toBeInTheDocument();
-  });
-
-  it('shows the next notification immediately when the previous one has already been dismissed', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
-
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-  });
-
-  it('restarts the timeout for a replacing notification', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT - 100);
-
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(TIMEOUT - 1);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(1);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-  });
-
-  it('dismisses a delayed replacement on the timeout current when it appears', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    // Shortened while the replacement is still waiting out the exit transition.
-    rerender(<Snackbar text="Second message" timeout={1000} timestamp={2} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(1000);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-  });
-
-  // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
-  // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
-  it('keeps the notification visible for as long as text is empty', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="" timeout={TIMEOUT} timestamp={2} />);
-
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('ignores a repeated timestamp', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={1} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('First message')).toBeInTheDocument();
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-  });
-
-  it('clears its pending dismissal timer on unmount', () => {
-    const { rerender, unmount } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    const pendingTimers = jest.getTimerCount();
-    unmount();
-
-    // The timer left behind belongs to CSSTransition's enter timeout, not to Snackbar.
-    expect(jest.getTimerCount()).toBe(pendingTimers - 1);
-  });
-});
-
-describe('Snackbar created through SnackbarProvider', () => {
-  const renderProvider = () =>
-    render(
-      <SnackbarProvider timeout={TIMEOUT}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <Button onClick={() => createSnackbar({ text: 'Changes saved' })}>Show</Button>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>,
-    );
-
-  it('shows a notification created through the context', async () => {
-    renderProvider();
-
-    await user.click(screen.getByRole('button', { name: 'Show' }));
-
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('shows only one notification when the trigger is clicked repeatedly', async () => {
-    renderProvider();
-
-    const trigger = screen.getByRole('button', { name: 'Show' });
-    await user.click(trigger);
-    await user.click(trigger);
-    await user.click(trigger);
-
-    expect(screen.getAllByRole('alert')).toHaveLength(1);
-  });
-});

package/src/Snackbar/Snackbar.tsx

@@ -1,129 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
-
-import Button from '../Button';
-import Body from '../Body';
-import type { ThemeDark, ThemeLight } from '../common';
-import withNextPortal from '../WithNextPortal/WithNextPortal';
-
-const CSS_TRANSITION_DURATION = 400;
-
-export interface SnackbarProps {
-  action?: {
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  };
-  text: React.ReactNode;
-  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */
-  theme?: ThemeLight | ThemeDark;
-  timeout: number;
-  timestamp: number;
-}
-
-interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {
-  visible: boolean;
-}
-
-export const Snackbar = (props: SnackbarProps) => {
-  const bodyRef = useRef<HTMLSpanElement>(null);
-  const leaveTimeout = useRef(0);
-  const transitionTimeout = useRef(0);
-  /** The props of the last committed render, as `this.props` was in the class component. */
-  const committedProps = useRef(props);
-
-  const [state, setState] = useState<SnackbarState>({
-    visible: false,
-    text: '',
-  });
-
-  useEffect(
-    () => () => {
-      window.clearTimeout(leaveTimeout.current);
-      window.clearTimeout(transitionTimeout.current);
-    },
-    [],
-  );
-
-  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
-  // relied on, including the shouldComponentUpdate guard that ignored every update without text.
-  // Layout, not passive, so a notification is shown or replaced before the browser paints, as
-  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect
-  // and its synchronous state updates are what keep this conversion behaviour-identical.
-  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  useLayoutEffect(() => {
-    const previousProps = committedProps.current;
-    committedProps.current = props;
-
-    const { action, text, timestamp } = props;
-
-    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
-    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
-    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
-    const updateWhileTextIsPresent = (update: () => void) => {
-      if (committedProps.current.text) {
-        update();
-      }
-    };
-
-    const setLeaveTimeout = () => {
-      leaveTimeout.current = window.setTimeout(() => {
-        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
-      }, committedProps.current.timeout);
-    };
-
-    const show = () => {
-      setState((current) => ({ ...current, visible: true, action, text }));
-      setLeaveTimeout();
-    };
-
-    if (!text) {
-      return;
-    }
-
-    if (!previousProps.text) {
-      show();
-    } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(leaveTimeout.current);
-
-      if (state.visible) {
-        setState((current) => ({ ...current, visible: false }));
-        transitionTimeout.current = window.setTimeout(() => {
-          updateWhileTextIsPresent(show);
-        }, CSS_TRANSITION_DURATION);
-      } else {
-        show();
-      }
-    }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-
-  const { action, text, visible } = state;
-  const { timeout } = props;
-
-  return (
-    <div className="snackbar" aria-live="assertive" role="alert">
-      <CSSTransition
-        nodeRef={bodyRef}
-        in={visible}
-        classNames="snackbar__text-container"
-        timeout={{
-          appear: 0,
-          enter: timeout,
-          exit: CSS_TRANSITION_DURATION,
-        }}
-        unmountOnExit
-      >
-        <Body ref={bodyRef} as="span" className="snackbar__text">
-          {text}
-          {action ? (
-            <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
-              {action.label}
-            </Button>
-          ) : null}
-        </Body>
-      </CSSTransition>
-    </div>
-  );
-};
-
-export default withNextPortal(Snackbar);

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,33 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import SnackbarPortal, { SnackbarProps } from './Snackbar';
-import { SnackbarContext } from './SnackbarContext';
-
-export interface SnackbarProviderProps {
-  timeout?: number;
-  children?: React.ReactNode;
-}
-
-export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
-  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
-    text: '',
-    timestamp: 0,
-  });
-  const { action, text, timestamp } = state;
-
-  return (
-    <SnackbarContext.Provider
-      value={useMemo(
-        () => ({
-          createSnackbar: ({ action, text }) => {
-            setState({ action, text, timestamp: Date.now() });
-          },
-        }),
-        [],
-      )}
-    >
-      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />
-      {children}
-    </SnackbarContext.Provider>
-  );
-}

package/src/Snackbar/_stories/Snackbar.story.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, userEvent, within } from 'storybook/test';
-
-import { wait } from '../../test-utils/wait';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Button from '../../Button';
-import { Snackbar } from '../Snackbar';
-import { SnackbarConsumer } from '../SnackbarContext';
-import SnackbarProvider from '../SnackbarProvider';
-
-const meta: Meta = {
-  component: Snackbar,
-  title: 'Prompts/Snackbar',
-};
-export default meta;
-
-export const Sandbox = createSandboxStory({
-  code: `<SnackbarProvider>
-  <SnackbarConsumer>
-    {({ createSnackbar }) => (
-      <Button v2 size="md"
-        onClick={() =>
-          createSnackbar({
-            text: <span>Transfer completed successfully</span>,
-            action: {
-              label: 'View',
-              onClick: () => console.log('View clicked'),
-            },
-          })
-        }
-      >
-        Show Snackbar
-      </Button>
-    )}
-  </SnackbarConsumer>
-</SnackbarProvider>`,
-  scope: globalScope,
-});
-
-export const Basic: StoryObj = {
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-        transform: async (src = '') => {
-          const match = /(function Render\(\).*?)(,\s+play:\s+async)/s.exec(src);
-          return match?.[1] || src;
-        },
-      },
-    },
-    source: {
-      type: 'code',
-    },
-  },
-  render: function Render() {
-    return (
-      <SnackbarProvider>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => {
-            return (
-              <Button
-                block
-                onClick={() => {
-                  createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: fn(),
-                    },
-                    text: <span>Some text</span>,
-                  });
-                }}
-              >
-                Show Snackbar
-              </Button>
-            );
-          }}
-        </SnackbarConsumer>
-      </SnackbarProvider>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    await wait(0);
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};

package/src/Snackbar/_stories/Snackbar.test.story.tsx

@@ -1,139 +0,0 @@
-import { userEvent, within, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-import { withVariantConfig } from '../../../.storybook/helpers';
-import { lorem20 } from '../../test-utils';
-import { wait } from '../../test-utils/wait';
-import Button from '../../Button';
-import { Snackbar, type SnackbarProps } from '../Snackbar';
-import { SnackbarConsumer } from '../SnackbarContext';
-import SnackbarProvider from '../SnackbarProvider';
-
-export default {
-  title: 'Prompts/Snackbar/Tests',
-  component: Snackbar,
-  argTypes: {},
-  tags: ['!autodocs', '!manifest'],
-};
-
-const launchSnackbar = async (canvasElement: HTMLElement) => {
-  await wait(0);
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
-};
-
-type Args = Partial<SnackbarProps> & {
-  extraContext: React.ReactNode;
-  timeout: number;
-};
-
-const TIMEOUT = 10000000;
-
-const Default = {
-  args: {
-    timeout: TIMEOUT,
-  } as Args,
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    await launchSnackbar(canvasElement);
-  },
-  render: (args: Args) => {
-    return (
-      <SnackbarProvider timeout={args.timeout}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <>
-              <Button
-                v2
-                block
-                onClick={() => {
-                  createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: () => action('View button clicked.'),
-                    },
-                    text: <span>Some text</span>,
-                  });
-                }}
-              >
-                Show Snackbar
-              </Button>
-              {args.extraContext}
-            </>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>
-    );
-  },
-};
-
-export const Basic = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-};
-
-export const Mobile = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  ...withVariantConfig(['mobile'], Default),
-};
-
-const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
-  await Default.play(context);
-
-  // the snackbar is outside the storybook dom so dark mode doesn't apply
-  const body = document.querySelector('div.np-theme-personal');
-  if (body) {
-    body.setAttribute('class', 'np-theme-personal--dark');
-  }
-  const snackbar = document.querySelector('div.snackbar');
-  if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
-  }
-};
-
-export const DarkMode = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: switchToDarkMode,
-  ...withVariantConfig(['dark'], Default),
-};
-
-export const Zoom400 = {
-  ...Default,
-  args: {
-    ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        Snackbar isn&#39;t transparent (I&#39;m going to make this text very long so that it will
-        fill up the entire page and go behind the snackbar. This way, when you look at it you will
-        easily be able to tell if the snackbar is transparent and recognize the bug because we
-        don&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
-        lot of problems with transparencies. {lorem20}
-      </div>
-    ),
-  },
-  ...withVariantConfig(['400%'], Default),
-};
-
-/**
- * Snackbar is only shown once even if trigger is clicked many times
- */
-export const MultipleClicks = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const canvas = within(canvasElement);
-    for (let i = 0; i < 8; i += 1) {
-      await userEvent.click(canvas.getByRole('button'));
-    }
-
-    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
-  },
-};