@transferwise/components 0.0.0-experimental-e94d625 → 0.0.0-experimental-8e1de95

package/src/Snackbar/Snackbar.tsx

@@ -1,10 +1,9 @@
-import { Component, createRef } from 'react';
+import { useEffect, 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 { DirectionContext } from '../Provider/Direction';
 import withNextPortal from '../WithNextPortal/WithNextPortal';
 
 const CSS_TRANSITION_DURATION = 400;
@@ -25,102 +24,105 @@ interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'>
   visible: boolean;
 }
 
-export class Snackbar extends Component<SnackbarProps, SnackbarState> {
-  bodyRef = createRef<HTMLSpanElement>();
-  timeout = 0;
-  transitionTimeout = 0;
+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.
+  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state
+  // updates are what keep this conversion behaviour-identical to the class component.
+  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+  useEffect(() => {
+    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();
+      }
+    };
 
-  constructor(props: SnackbarProps) {
-    super(props);
-    this.state = {
-      visible: false,
-      text: '',
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
+      }, committedProps.current.timeout);
     };
-  }
 
-  componentWillUnmount() {
-    window.clearTimeout(this.timeout);
-    window.clearTimeout(this.transitionTimeout);
-  }
+    const show = () => {
+      setState((current) => ({ ...current, visible: true, action, text }));
+      setLeaveTimeout();
+    };
 
-  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
-    if (!nextProps.text) {
-      return false;
+    if (!text) {
+      return;
     }
-    if (
-      nextProps.timestamp === this.props.timestamp &&
-      nextState.visible === this.state.visible &&
-      nextState.text === this.state.text
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  setLeaveTimeout = () => {
-    const { timeout } = this.props;
-
-    this.timeout = window.setTimeout(() => {
-      this.setState({ visible: false });
-    }, timeout);
-  };
-
-  componentDidUpdate(previousProps: SnackbarProps) {
-    const { action, text, timestamp } = this.props;
 
     if (!previousProps.text) {
-      this.setState({ visible: true, action, text }, () => {
-        this.setLeaveTimeout();
-      });
+      show();
     } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(this.timeout);
-
-      if (this.state.visible) {
-        this.setState({ visible: false }, () => {
-          this.transitionTimeout = window.setTimeout(() => {
-            this.setState({ visible: true, action, text });
-            this.setLeaveTimeout();
-          }, CSS_TRANSITION_DURATION);
-        });
+      window.clearTimeout(leaveTimeout.current);
+
+      if (state.visible) {
+        setState((current) => ({ ...current, visible: false }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
       } else {
-        this.setState({ visible: true, action, text });
-        this.setLeaveTimeout();
+        show();
       }
     }
-  }
-
-  render() {
-    const { action, text, visible } = this.state;
-    const { timeout } = this.props;
-
-    return (
-      <div className="snackbar" aria-live="assertive" role="alert">
-        <CSSTransition
-          nodeRef={this.bodyRef}
-          in={visible}
-          classNames="snackbar__text-container"
-          timeout={{
-            appear: 0,
-            enter: timeout,
-            exit: CSS_TRANSITION_DURATION,
-          }}
-          unmountOnExit
-        >
-          <Body ref={this.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>
-    );
-  }
-}
-
-Snackbar.contextType = DirectionContext;
+  });
+  /* 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/_stories/Snackbar.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Snackbar } from '../Snackbar';
 
 export default {
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Snackbar>;
 
 const TIMEOUT = 10_000_000;
 
-function SnackbarStory({ action }: { action?: { label: string } }) {
+function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
   const [timestamp, setTimestamp] = useState(0);
 
   useEffect(() => {
@@ -23,21 +23,33 @@ function SnackbarStory({ action }: { action?: { label: string } }) {
   }, []);
 
   return (
-    <Snackbar
-      text={<span>Transfer completed successfully</span>}
-      timestamp={timestamp}
-      timeout={TIMEOUT}
-      action={action}
-    />
+    <Snackbar text={<span>{text}</span>} timestamp={timestamp} timeout={TIMEOUT} action={action} />
   );
 }
 
 export const WithAction: Story = {
-  render: () => <SnackbarStory action={{ label: 'View' }} />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <SnackbarStory text={i18n.text} action={{ label: i18n.actionLabel }} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      text: { en: 'Transfer completed successfully', ar: 'تم إتمام التحويل بنجاح' },
+      actionLabel: { en: 'View', ar: 'عرض' },
+    },
+  }),
 };
 
 export const WithoutAction: Story = {
-  render: () => <SnackbarStory />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <SnackbarStory text={i18n.text} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      text: { en: 'Transfer completed successfully', ar: 'تم إتمام التحويل بنجاح' },
+    },
+  }),
 };

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

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, within, expect, screen } from 'storybook/test';
 import Stepper from '../Stepper';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const STEPS = [
   {
@@ -90,18 +90,36 @@ export const ProgressbarWidth: Story = {
   },
 };
 
+// `steps` is a required prop, so `args` must supply it even though `render` builds its own
+// translated steps from the i18n map and ignores this value.
 const RTL_STEPS = [{ label: 'Amount' }, { label: 'You' }, { label: 'Review' }, { label: 'Pay' }];
 
 export const RTLDiff: Story = {
   args: {
     steps: RTL_STEPS,
   },
-  render: () => (
-    <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
-      <Stepper steps={RTL_STEPS} activeStep={0} />
-      <Stepper steps={RTL_STEPS} activeStep={2} />
-      <Stepper steps={RTL_STEPS} activeStep={4} />
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount },
+      { label: i18n.you },
+      { label: i18n.review },
+      { label: i18n.pay },
+    ];
+    return (
+      <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
+        <Stepper steps={steps} activeStep={0} />
+        <Stepper steps={steps} activeStep={2} />
+        <Stepper steps={steps} activeStep={4} />
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      you: { en: 'You', ar: 'بياناتك' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };

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

@@ -3,7 +3,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { withVariantConfig } from '../../../.storybook/helpers';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import Switch from '../Switch';
 
@@ -103,15 +103,23 @@ export const Zoom400: Story = {
  * the thumb direction flips correctly between writing modes.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field label="Unchecked">
-        <Switch checked={false} onClick={() => {}} />
-      </Field>
-      <Field label="Checked">
-        <Switch checked onClick={() => {}} />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.unchecked}>
+          <Switch checked={false} onClick={() => {}} />
+        </Field>
+        <Field label={i18n.checked}>
+          <Switch checked onClick={() => {}} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      unchecked: { en: 'Unchecked', ar: 'غير محدد' },
+      checked: { en: 'Checked', ar: 'محدد' },
+    },
+  }),
 };

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

@@ -1,79 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DirectDebits } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Table from '..';
 import { TableHeaderType } from '../Header/TableHeader';
 import { TableRowType, TableRowClickableType } from '../Row/TableRow';
 
-const headers: TableHeaderType[] = [
-  { header: 'Employee', width: '200px' },
-  { header: 'Location' },
-  { header: 'Payment', alignment: 'right' },
-  { header: 'Status' },
-];
-
-const rows: TableRowType[] = [
-  {
-    cells: [
-      {
-        cell: {
-          type: 'leading',
-          primaryText: 'Bob Brown',
-          secondaryText: 'Software Engineer',
-          avatar: { profileName: 'Bob Brown', badge: { flagCode: 'GBP' } },
-        },
-      },
-      { cell: { type: 'text', text: 'FR, Paris' } },
-      {
-        cell: {
-          type: 'currency',
-          primaryCurrency: { amount: 12345.67, currency: 'eur' },
-          secondaryCurrency: { amount: 11000.0, currency: 'gbp' },
-        },
-        alignment: 'right',
-      },
-      {
-        cell: {
-          type: 'status',
-          primaryText: 'Cancelled',
-          secondaryText: '1 day ago',
-          sentiment: 'negative',
-        },
-      },
-    ],
-  },
-  {
-    cells: [
-      {
-        cell: {
-          type: 'leading',
-          primaryText: 'Jan Kowalski',
-          secondaryText: 'Product Manager',
-          avatar: { asset: <DirectDebits />, badge: { status: 'warning' } },
-        },
-      },
-      { cell: { type: 'text', text: 'US, New York' } },
-      {
-        cell: {
-          type: 'currency',
-          primaryCurrency: { amount: 23456.78, currency: 'usd' },
-          secondaryCurrency: { amount: 21000.0, currency: 'gbp' },
-        },
-        alignment: 'right',
-      },
-      {
-        cell: {
-          type: 'status',
-          primaryText: 'Paid',
-          secondaryText: 'Yesterday',
-          sentiment: 'positive',
-        },
-      },
-    ],
-  },
-];
-
 export default {
   component: Table,
   title: 'Content/Table/Tests',
@@ -83,22 +15,111 @@ export default {
 type Story = StoryObj<typeof Table>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Table data={{ headers, rows }} />
-      <Table
-        data={{
-          headers,
-          rows,
-          onRowClick: (rowData: TableRowType | TableRowClickableType) => {
-            void rowData;
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const headers: TableHeaderType[] = [
+      { header: i18n.employeeHeader, width: '200px' },
+      { header: i18n.locationHeader },
+      { header: i18n.paymentHeader, alignment: 'right' },
+      { header: i18n.statusHeader },
+    ];
+
+    const rows: TableRowType[] = [
+      {
+        cells: [
+          {
+            cell: {
+              type: 'leading',
+              primaryText: i18n.employeeOneName,
+              secondaryText: i18n.employeeOneRole,
+              avatar: { profileName: i18n.employeeOneName, badge: { flagCode: 'GBP' } },
+            },
+          },
+          { cell: { type: 'text', text: i18n.employeeOneLocation } },
+          {
+            cell: {
+              type: 'currency',
+              primaryCurrency: { amount: 12345.67, currency: 'eur' },
+              secondaryCurrency: { amount: 11000.0, currency: 'gbp' },
+            },
+            alignment: 'right',
+          },
+          {
+            cell: {
+              type: 'status',
+              primaryText: i18n.employeeOneStatus,
+              secondaryText: i18n.employeeOneStatusTime,
+              sentiment: 'negative',
+            },
+          },
+        ],
+      },
+      {
+        cells: [
+          {
+            cell: {
+              type: 'leading',
+              primaryText: i18n.employeeTwoName,
+              secondaryText: i18n.employeeTwoRole,
+              avatar: { asset: <DirectDebits />, badge: { status: 'warning' } },
+            },
+          },
+          { cell: { type: 'text', text: i18n.employeeTwoLocation } },
+          {
+            cell: {
+              type: 'currency',
+              primaryCurrency: { amount: 23456.78, currency: 'usd' },
+              secondaryCurrency: { amount: 21000.0, currency: 'gbp' },
+            },
+            alignment: 'right',
+          },
+          {
+            cell: {
+              type: 'status',
+              primaryText: i18n.employeeTwoStatus,
+              secondaryText: i18n.employeeTwoStatusTime,
+              sentiment: 'positive',
+            },
           },
-        }}
-      />
-      <Table data={{ headers, rows }} fullWidth={false} />
-      <Table data={{ headers, rows: [] }} />
-      <Table data={{ headers, rows }} loading />
-    </>
-  ),
-  ...withRTLDiff(),
+        ],
+      },
+    ];
+
+    return (
+      <>
+        <Table data={{ headers, rows }} />
+        <Table
+          data={{
+            headers,
+            rows,
+            onRowClick: (rowData: TableRowType | TableRowClickableType) => {
+              void rowData;
+            },
+          }}
+        />
+        <Table data={{ headers, rows }} fullWidth={false} />
+        <Table data={{ headers, rows: [] }} />
+        <Table data={{ headers, rows }} loading />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      employeeHeader: { en: 'Employee', ar: 'الموظف' },
+      locationHeader: { en: 'Location', ar: 'الموقع' },
+      paymentHeader: { en: 'Payment', ar: 'الدفعة' },
+      statusHeader: { en: 'Status', ar: 'الحالة' },
+      employeeOneName: { en: 'Bob Brown', ar: 'بوب براون' },
+      employeeOneRole: { en: 'Software Engineer', ar: 'مهندس برمجيات' },
+      employeeOneLocation: { en: 'FR, Paris', ar: 'فرنسا، باريس' },
+      employeeOneStatus: { en: 'Cancelled', ar: 'ملغى' },
+      employeeOneStatusTime: { en: '1 day ago', ar: 'منذ يوم واحد' },
+      employeeTwoName: { en: 'Jan Kowalski', ar: 'يان كوفالسكي' },
+      employeeTwoRole: { en: 'Product Manager', ar: 'مدير المنتج' },
+      employeeTwoLocation: { en: 'US, New York', ar: 'أمريكا، نيويورك' },
+      employeeTwoStatus: { en: 'Paid', ar: 'مدفوع' },
+      employeeTwoStatusTime: { en: 'Yesterday', ar: 'أمس' },
+    },
+  }),
 };