From f0c65f07e6452de53a1e2c1664d91693a2164234 Mon Sep 17 00:00:00 2001
From: matuesz-kleszcz <kleeeszcz@gmail.com>
Date: Mon, 11 Sep 2023 11:56:44 +0200
Subject: [PATCH] refactor: TET-225 toast

---
 src/components/Toast/Toast.props.ts           | 14 ++-
 src/components/Toast/Toast.styles.ts          | 47 ++++++---
 src/components/Toast/Toast.test.tsx           | 53 +++++++---
 src/components/Toast/Toast.tsx                | 60 +++++++-----
 .../Toast/stylesBuilder/stylesBuilder.ts      | 97 +++++--------------
 src/components/Toast/types/ToastEmphasis.ts   |  1 +
 src/components/Toast/types/index.ts           |  1 +
 tsconfig.json                                 |  2 +-
 8 files changed, 137 insertions(+), 138 deletions(-)
 create mode 100644 src/components/Toast/types/ToastEmphasis.ts

diff --git a/src/components/Toast/Toast.props.ts b/src/components/Toast/Toast.props.ts
index fbb60b84..8101c1e8 100644
--- a/src/components/Toast/Toast.props.ts
+++ b/src/components/Toast/Toast.props.ts
@@ -1,17 +1,15 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 
-import { ToastConfig } from './Toast.styles';
-import { ToastIntent } from './types';
+import type { ToastConfig } from './Toast.styles';
+import type { ToastEmphasis, ToastIntent } from './types';
 
-import { ActionProp } from '@/types';
-import { Emphasis } from '@/types/Emphasis';
-import { DeepPartial } from '@/utility-types/DeepPartial';
+import type { ActionProp } from '@/types';
 
 export type ToastProps = {
   text: string;
-  emphasis?: Emphasis;
+  emphasis?: ToastEmphasis;
   intent?: ToastIntent;
   action?: ActionProp;
   onCloseClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  custom?: DeepPartial<ToastConfig>;
+  custom?: ToastConfig;
 };
diff --git a/src/components/Toast/Toast.styles.ts b/src/components/Toast/Toast.styles.ts
index f3e4e3ce..561f2561 100644
--- a/src/components/Toast/Toast.styles.ts
+++ b/src/components/Toast/Toast.styles.ts
@@ -1,22 +1,29 @@
-import type { ToastIntent } from './types';
-import { ButtonProps } from '../Button';
+import type { ToastEmphasis, ToastIntent } from './types';
+import type { ButtonProps } from '../Button';
 
-import { BaseProps } from '@/types/BaseProps';
-import { Emphasis } from '@/types/Emphasis';
+import type { BaseProps } from '@/types/BaseProps';
+import type { IconName } from '@/utility-types/IconName';
 
 export type ToastConfig = {
-  emphasis: Record<Emphasis, BaseProps>;
-  intent: Record<ToastIntent, BaseProps>;
-  closeButton: BaseProps;
-  innerElements: {
-    iconContainer: {
-      intent: Record<ToastIntent, { emphasis: Record<Emphasis, BaseProps> }>;
+  emphasis?: Partial<Record<ToastEmphasis, BaseProps>>;
+  intent?: Partial<Record<ToastIntent, BaseProps>>;
+  closeButton?: BaseProps;
+  innerElements?: {
+    iconContainer?: {
+      intent: Partial<
+        Record<
+          ToastIntent,
+          { emphasis: Partial<Record<ToastEmphasis, BaseProps>> }
+        >
+      >;
     } & BaseProps;
-    actionContainer: BaseProps;
-    middleDot: {
-      emphasis: Record<Emphasis, BaseProps | Partial<ButtonProps<'bare'>>>;
+    actionContainer?: BaseProps;
+    middleDot?: {
+      emphasis: Partial<
+        Record<ToastEmphasis, BaseProps | Partial<ButtonProps<'bare'>>>
+      >;
     } & BaseProps;
-    closeButton: BaseProps;
+    closeButton?: BaseProps;
   };
 } & BaseProps;
 
@@ -135,3 +142,15 @@ export const defaultConfig = {
     },
   },
 } satisfies ToastConfig;
+
+export const resolveIconName = (intent: ToastIntent): IconName<20> | null => {
+  const iconConfig: Record<ToastIntent, IconName<20> | null> = {
+    neutral: null,
+    informative: '20-info-fill',
+    success: '20-check-circle-fill',
+    warning: '20-warning-fill',
+    negative: '20-alert-fill',
+  };
+
+  return iconConfig[intent];
+};
diff --git a/src/components/Toast/Toast.test.tsx b/src/components/Toast/Toast.test.tsx
index 21552511..12bc9384 100644
--- a/src/components/Toast/Toast.test.tsx
+++ b/src/components/Toast/Toast.test.tsx
@@ -1,7 +1,9 @@
 import { vi } from 'vitest';
 
 import { Toast } from './Toast';
-import { render } from '../../tests/render';
+import { fireEvent, render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
 
 const getToast = (jsx: JSX.Element) => {
   const { getByTestId } = render(jsx);
@@ -11,6 +13,32 @@ const getToast = (jsx: JSX.Element) => {
 const handleEventMock = vi.fn();
 
 describe('Toast', () => {
+  customPropTester(
+    <Toast
+      text="text"
+      intent="informative"
+      action={[{ label: 'Label' }, { label: 'Label' }]}
+      onCloseClick={handleEventMock}
+    />,
+    {
+      containerId: 'toast',
+      props: {
+        emphasis: ['low', 'high'],
+        intent: ['neutral', 'informative', 'success', 'warning', 'negative'],
+      },
+      innerElements: {
+        iconContainer: [],
+        actionContainer: [],
+        middleDot: ['emphasis'],
+        closeButton: [],
+      },
+    },
+  );
+
+  beforeEach(() => {
+    handleEventMock.mockReset();
+  });
+
   it('should render the toast', () => {
     const toast = getToast(<Toast text="Toast text" />);
     expect(toast).toBeInTheDocument();
@@ -84,7 +112,9 @@ describe('Toast', () => {
       />,
     );
     const button = toast.querySelector('button');
-    button?.click();
+    if (button) {
+      fireEvent.click(button);
+    }
     expect(handleEventMock).toHaveBeenCalled();
   });
 
@@ -96,7 +126,9 @@ describe('Toast', () => {
       />,
     );
     const button = toast.querySelector('button');
-    button?.focus();
+    if (button) {
+      fireEvent.focus(button);
+    }
     expect(handleEventMock).toHaveBeenCalled();
   });
 
@@ -108,7 +140,9 @@ describe('Toast', () => {
       />,
     );
     const button = toast.querySelector('button');
-    button?.blur();
+    if (button) {
+      fireEvent.blur(button);
+    }
     expect(handleEventMock).toHaveBeenCalled();
   });
 
@@ -128,15 +162,4 @@ describe('Toast', () => {
     button?.click();
     expect(handleEventMock).toHaveBeenCalled();
   });
-
-  it('should propagate a custom prop', () => {
-    const toast = getToast(
-      <Toast
-        text="Toast text"
-        custom={{ color: 'background-negative-subtle' }}
-      />,
-    );
-
-    expect(toast).toHaveStyle('color: rgb(254, 245, 245)');
-  });
 });
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index b183d5fb..b4345342 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -2,16 +2,15 @@ import { Icon } from '@virtuslab/tetrisly-icons';
 import { FC, useMemo } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
-import { ToastProps } from './Toast.props';
+import type { ToastProps } from './Toast.props';
+import { resolveIconName } from './Toast.styles';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-type Props = ToastProps & MarginProps;
-
-export const Toast: FC<Props> = ({
+export const Toast: FC<ToastProps & MarginProps> = ({
   text,
   emphasis = 'low',
   intent = 'neutral',
@@ -20,22 +19,13 @@ export const Toast: FC<Props> = ({
   custom,
   ...restProps
 }) => {
-  const {
-    actionProps,
-    actionContainerStyles,
-    closeButtonProps,
-    closeButtonStyles,
-    containerStyles,
-    iconProps,
-    iconContainerStyles,
-    middleDotStyles,
-  } = useMemo(
+  const styles = useMemo(
     () =>
       stylesBuilder({
         custom,
         emphasis,
         intent,
-        closeButton: !!onCloseClick,
+        onCloseClick,
       }),
     [custom, emphasis, intent, onCloseClick],
   );
@@ -44,21 +34,38 @@ export const Toast: FC<Props> = ({
     ? action
     : [action, undefined];
 
+  const iconName = useMemo(() => resolveIconName(intent), [intent]);
+
+  const appearance = useMemo(() => {
+    const buttonIntentAppearance =
+      intent === 'warning' ? 'reverseInverted' : 'inverted';
+    return emphasis === 'high' ? buttonIntentAppearance : 'primary';
+  }, [intent, emphasis]);
+
   return (
-    <tet.div {...containerStyles} {...restProps} data-testid="toast">
-      {!!iconProps.name && (
-        <tet.span {...iconContainerStyles}>
-          <Icon {...iconProps} name={iconProps.name} />
+    <tet.div {...styles.container} data-testid="toast" {...restProps}>
+      {!!iconName && (
+        <tet.span {...styles.iconContainer} data-testid="toast-iconContainer">
+          <Icon name={iconName} />
         </tet.span>
       )}
       {text}
       {firstAction && (
-        <tet.div {...actionContainerStyles}>
-          <Button variant="bare" {...actionProps} {...firstAction} />
+        <tet.div
+          {...styles.actionContainer}
+          data-testid="toast-actionContainer"
+        >
+          <Button variant="bare" appearance={appearance} {...firstAction} />
           {secondAction && (
             <>
-              <tet.div {...middleDotStyles}>&middot;</tet.div>
-              <Button variant="bare" {...actionProps} {...secondAction} />
+              <tet.div {...styles.middleDot} data-testid="toast-middleDot">
+                &middot;
+              </tet.div>
+              <Button
+                variant="bare"
+                appearance={appearance}
+                {...secondAction}
+              />
             </>
           )}
         </tet.div>
@@ -70,8 +77,9 @@ export const Toast: FC<Props> = ({
           intent="none"
           icon="20-close"
           onClick={onCloseClick}
-          {...closeButtonProps}
-          {...closeButtonStyles}
+          appearance={appearance}
+          {...styles.closeButton}
+          data-testid="toast-closeButton"
         />
       )}
     </tet.div>
diff --git a/src/components/Toast/stylesBuilder/stylesBuilder.ts b/src/components/Toast/stylesBuilder/stylesBuilder.ts
index 962593ce..ba913984 100644
--- a/src/components/Toast/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -1,31 +1,20 @@
-import { IconProps } from '@virtuslab/tetrisly-icons';
-
-import { ToastProps } from '../Toast.props';
+import type { ToastProps } from '../Toast.props';
 import { defaultConfig } from '../Toast.styles';
-import { ToastIntent } from '../types';
 
-import { ButtonAppearance } from '@/components/Button/types/ButtonAppearance.type';
-import { IconButtonProps } from '@/components/IconButton/IconButton.props';
-import { IconButtonAppearance } from '@/components/IconButton/IconButtonAppearance.type';
 import { mergeConfigWithCustom } from '@/services';
-import { BaseProps } from '@/types/BaseProps';
+import type { BaseProps } from '@/types/BaseProps';
 
 type StylesBuilderProps = Required<Pick<ToastProps, 'emphasis' | 'intent'>> & {
+  onCloseClick: ToastProps['onCloseClick'];
   custom: ToastProps['custom'];
-  closeButton: boolean;
 };
 
 type ToastStylesBuilder = {
-  actionProps: {
-    appearance: ButtonAppearance<'bare'>;
-  };
-  actionContainerStyles: BaseProps;
-  closeButtonProps: Partial<IconButtonProps<'ghost'>>;
-  closeButtonStyles: BaseProps;
-  containerStyles: BaseProps;
-  iconProps: Partial<IconProps>;
-  iconContainerStyles: BaseProps;
-  middleDotStyles: BaseProps;
+  container: BaseProps;
+  actionContainer: BaseProps;
+  closeButton: BaseProps;
+  iconContainer: BaseProps;
+  middleDot: BaseProps;
 };
 
 export const stylesBuilder = ({
@@ -38,75 +27,35 @@ export const stylesBuilder = ({
     emphasis: emphasisContainerStyles,
     intent: intentContainerStyles,
     closeButton: closeButtonContainerStyles,
-    innerElements: innerElementsStyles,
+    innerElements: {
+      actionContainer,
+      closeButton,
+      iconContainer: iconContainerStyles,
+      middleDot,
+    },
     ...restContainerStyles
   } = config;
 
-  const containerStyles: BaseProps = {
+  const container = {
     ...intentContainerStyles[props.intent],
     ...emphasisContainerStyles[props.emphasis],
     ...restContainerStyles,
-    ...(props.closeButton && closeButtonContainerStyles),
-  };
-
-  const {
-    actionContainer: actionContainerStyles,
-    closeButton: closeButtonStyles,
-    iconContainer,
-    middleDot: middleDotStyles,
-  } = innerElementsStyles;
-
-  const buttonIntentAppearance =
-    props.intent === 'warning' ? 'reverseInverted' : 'inverted';
-  const buttonAppearance =
-    props.emphasis === 'high' ? buttonIntentAppearance : 'primary';
-
-  const actionProps = {
-    appearance: buttonAppearance as ButtonAppearance<'bare'>,
-  };
-
-  const icon: { intent: Record<ToastIntent, Partial<IconProps>> } = {
-    intent: {
-      neutral: {},
-      informative: {
-        name: '20-info-fill',
-      },
-      success: {
-        name: '20-check-circle-fill',
-      },
-      warning: {
-        name: '20-warning-fill',
-      },
-      negative: {
-        name: '20-alert-fill',
-      },
-    },
-  };
-
-  const iconProps: Partial<IconProps> = {
-    ...icon.intent[props.intent],
+    ...(!!props.onCloseClick && closeButtonContainerStyles),
   };
 
   const { intent: intentIconContainerStyles, ...restIconContainerStyles } =
-    iconContainer;
+    iconContainerStyles;
 
-  const iconContainerStyles: BaseProps = {
+  const iconContainer = {
     ...intentIconContainerStyles[props.intent].emphasis[props.emphasis],
     ...restIconContainerStyles,
   };
 
-  const closeButtonProps: Partial<IconButtonProps<'ghost'>> = {
-    appearance: buttonAppearance as IconButtonAppearance<'ghost'>,
-  };
-
   return {
-    actionProps,
-    actionContainerStyles,
-    closeButtonProps,
-    closeButtonStyles,
-    containerStyles,
-    iconProps,
-    iconContainerStyles,
-    middleDotStyles,
+    container,
+    actionContainer,
+    iconContainer,
+    closeButton,
+    middleDot,
   };
 };
diff --git a/src/components/Toast/types/ToastEmphasis.ts b/src/components/Toast/types/ToastEmphasis.ts
new file mode 100644
index 00000000..feaf6a1c
--- /dev/null
+++ b/src/components/Toast/types/ToastEmphasis.ts
@@ -0,0 +1 @@
+export type ToastEmphasis = 'low' | 'high';
diff --git a/src/components/Toast/types/index.ts b/src/components/Toast/types/index.ts
index e159b7fb..24ebc10a 100644
--- a/src/components/Toast/types/index.ts
+++ b/src/components/Toast/types/index.ts
@@ -1 +1,2 @@
+export type { ToastEmphasis } from './ToastEmphasis';
 export type { ToastIntent } from './ToastIntent';
diff --git a/tsconfig.json b/tsconfig.json
index 9592fecf..b486666b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,