feat(core): Alert revisited!

packages/core/.storybook/main.js

@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/alert.stories.tsx',
     '../stories/modal.stories.tsx',
     '../stories/tree.stories.tsx',
     '../stories/tabs.stories.tsx',

packages/core/components/Alert/Alert.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../ThemeProvider/themes/contract.css';
+
+export const message = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const icon = style({
+  paddingTop: contract.space[7],
+  paddingRight: contract.space[15],
+  paddingBottom: contract.space[7],
+  paddingLeft: contract.space[7],
+});
+
+export const dialog = style({
+  display: 'flex',
+  flexDirection: 'row',
+});

packages/core/components/Alert/Alert.test.tsx

@@ -1,26 +1,21 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render } from '../shared/test/utils';
-import Alert from './Alert';
+import { Alert } from './Alert';
 
 describe('<Alert />', () => {
   describe('Snapshots', () => {
     it('should match snapshot with error type', () => {
       const { container } = render(
-        <Alert
-          closeAlert={() => {}}
-          title="Error"
-          type="error"
-          message="Error"
-        />,
+        <Alert onClose={() => {}} title="Error" type="error" message="Error" />,
       );
       expect(container).toMatchSnapshot();
     });
 
     it('should match snapshot with warning type', () => {
       const { container } = render(
         <Alert
-          closeAlert={() => {}}
+          onClose={() => {}}
           title="Warning"
           type="warning"
           message="Warning"
@@ -31,15 +26,15 @@ describe('<Alert />', () => {
 
     it('should match snapshot with info type', () => {
       const { container } = render(
-        <Alert closeAlert={() => {}} title="Info" type="info" message="Info" />,
+        <Alert onClose={() => {}} title="Info" type="info" message="Info" />,
       );
       expect(container).toMatchSnapshot();
     });
 
     it('should match snapshot with question type', () => {
       const { container } = render(
         <Alert
-          closeAlert={() => {}}
+          onClose={() => {}}
           title="question"
           type="question"
           message="question"
@@ -49,20 +44,18 @@ describe('<Alert />', () => {
     });
   });
 
-  describe('closeAlert prop', () => {
-    it('should call closeAlert when modal "OK" button is pressed', () => {
-      const closeAlertMock = vi.fn();
-      const { getByText } = render(
-        <Alert
-          title="closeAlert"
-          message="closeAlert"
-          closeAlert={closeAlertMock}
-        />,
+  describe('onClose prop', () => {
+    it('should call onClose when modal "X" button is pressed', () => {
+      const onCloseMock = vi.fn();
+      const { getAllByRole } = render(
+        <Alert title="onClose" message="onClose" onClose={onCloseMock} />,
       );
 
-      fireEvent.click(getByText('X'));
+      const [x] = getAllByRole('button');
+
+      fireEvent.click(x);
 
-      expect(closeAlertMock).toHaveBeenCalled();
+      expect(onCloseMock).toHaveBeenCalled();
     });
   });
 });

packages/core/components/Alert/Alert.tsx

@@ -1,8 +1,8 @@
-import { User2, User3, User4, User5 } from '@react95/icons';
-import styled from '@xstyled/styled-components';
 import React, { forwardRef, useEffect } from 'react';
+import { User2, User3, User4, User5 } from '@react95/icons';
+import * as styles from './Alert.css';
 
-import Modal, { ModalProps } from '../Modal/Modal';
+import { Modal, ModalProps } from '../Modal/Modal';
 
 import sound from './assets/chord.mp3';
 
@@ -22,30 +22,14 @@ const RenderImage: React.FC<{ option: string }> = ({ option }) => {
   }
 };
 
-const Message = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const IconWrapper = styled.div`
-  padding: 7 15 7 7;
-`;
-
-const Dialog = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
-export type AlertProps = Omit<ModalProps, 'closeModal'> & {
+export type AlertProps = ModalProps & {
   message: string;
-  closeAlert: ModalProps['closeModal'];
   hasSound?: boolean;
   type?: AlertType;
 };
 
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ type = 'error', message, closeAlert, hasSound, ...rest }, ref) => {
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ type = 'error', message, hasSound, ...rest }, ref) => {
     if (hasSound) {
       useEffect(() => {
         const audio = new Audio(sound);
@@ -54,30 +38,21 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
     }
 
     return (
-      <Modal
-        closeModal={closeAlert}
-        height="120"
-        hasWindowButton={false}
-        {...rest}
-        ref={ref}
-      >
-        <Dialog>
-          <IconWrapper>
+      <Modal height="120" hasWindowButton={false} {...rest} ref={ref}>
+        <div className={styles.dialog}>
+          <div className={styles.icon}>
             <RenderImage option={type} />
-          </IconWrapper>
-          <Message>{message}</Message>
-        </Dialog>
+          </div>
+          <div className={styles.message}>{message}</div>
+        </div>
       </Modal>
     );
   },
 );
 
-Alert.displayName = 'Alert';
-
 Alert.defaultProps = {
   type: 'error',
   buttons: [{ value: 'OK', onClick: () => {} }],
-  closeAlert: () => {},
   buttonsAlignment: 'center',
   positionOffset: {
     x:
@@ -87,9 +62,7 @@ Alert.defaultProps = {
     y:
       typeof window == 'undefined'
         ? 0
-        : Math.floor(window.innerHeight / 2) - 80,
+        : Math.floor(window.innerHeight / 2) - 100,
   },
   hasSound: false,
 };
-
-export default Alert;