chore: remove now un-used modal component

src/client/components/ui/Modal/Modal.module.scss

@@ -1,37 +0,0 @@
-@keyframes zoomIn {
-  0% {
-    transform: scale(0.8);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes dimmedBackground {
-  from {
-    background-color: rgba(0, 0, 0, 0);
-  }
-  to {
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-}
-
-.dimmedBackground {
-  background-color: rgba(0, 0, 0, 0.8);
-  animation-name: dimmedBackground;
-  animation-duration: 0.2s;
-  animation-iteration-count: 1;
-  animation-timing-function: ease-in-out;
-  animation-fill-mode: forwards;
-}
-
-.zoomIn {
-  animation-name: zoomIn;
-  animation-duration: 0.25s;
-  animation-iteration-count: 1;
-  animation-timing-function: spring;
-  animation-fill-mode: forwards;
-}

src/client/components/ui/Modal/Modal.test.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, render } from '../../../../../tests/test-utils';
-import { Modal } from './Modal';
-import { ModalBody } from './ModalBody';
-import { ModalFooter } from './ModalFooter';
-import { ModalHeader } from './ModalHeader';
-
-describe('Modal component', () => {
-  it('should render without errors', () => {
-    const { container } = render(
-      <Modal onClose={() => {}}>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    expect(container).toBeTruthy();
-  });
-
-  it('should not be visible by default', () => {
-    const { queryByTestId } = render(
-      <Modal onClose={() => {}}>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    // display should be none
-    expect(queryByTestId('modal')).toHaveStyle('display: none');
-  });
-
-  it('should be visible when `isOpen` prop is true', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    // display should be block
-    expect(getByTestId('modal')).toHaveStyle('display: block');
-  });
-
-  it('should not be visible when `isOpen` prop is false', () => {
-    const { queryByTestId } = render(
-      <Modal onClose={() => {}}>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    expect(queryByTestId('modal')).toHaveStyle('display: none');
-  });
-
-  it('should call the `onClose` prop when the close button is clicked', () => {
-    const onClose = jest.fn();
-    const { getByLabelText } = render(
-      <Modal onClose={onClose} isOpen>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    fireEvent.click(getByLabelText('Close'));
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('should call the `onClose` callback when user clicks outside of the modal', () => {
-    const onClose = jest.fn();
-    const { container } = render(
-      <Modal onClose={onClose} isOpen>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    fireEvent.click(container);
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('should have the correct `size` class when the `size` prop is passed', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen size="sm">
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    expect(getByTestId('modal')).toHaveClass('modal-sm');
-  });
-
-  it('should have the correct `type` class when the `type` prop is passed', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen type="primary">
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    expect(getByTestId('modal-status')).toHaveClass('bg-primary');
-    expect(getByTestId('modal-status')).not.toHaveClass('d-none');
-  });
-
-  it('should render the modal content as a child of the modal', () => {
-    const { getByTestId, getByText } = render(
-      <Modal onClose={() => {}} isOpen>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    expect(getByTestId('modal')).toContainElement(getByText('Test modal content'));
-  });
-
-  it('should call the `onClose` callback when the escape key is pressed', () => {
-    const onClose = jest.fn();
-    render(
-      <Modal onClose={onClose} isOpen>
-        <p>Test modal content</p>
-      </Modal>,
-    );
-    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('should correctly render with ModalBody', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen>
-        <ModalBody>
-          <p>Test modal content</p>
-        </ModalBody>
-      </Modal>,
-    );
-    expect(getByTestId('modal-body')).toBeInTheDocument();
-  });
-
-  it('should correctly render with ModalFooter', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen>
-        <ModalFooter>
-          <p>Test modal content</p>
-        </ModalFooter>
-      </Modal>,
-    );
-    expect(getByTestId('modal-footer')).toBeInTheDocument();
-  });
-
-  it('should correctly render with ModalHeader', () => {
-    const { getByTestId } = render(
-      <Modal onClose={() => {}} isOpen>
-        <ModalHeader>
-          <p>Test modal content</p>
-        </ModalHeader>
-      </Modal>,
-    );
-    expect(getByTestId('modal-header')).toBeInTheDocument();
-  });
-});

src/client/components/ui/Modal/Modal.tsx

@@ -1,65 +0,0 @@
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useState } from 'react';
-import styles from './Modal.module.scss';
-
-interface IProps {
-  children: React.ReactNode;
-  isOpen?: boolean;
-  onClose: () => void;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  type?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
-}
-
-export const Modal: React.FC<IProps> = ({ children, isOpen, onClose, size = 'lg', type }) => {
-  const style = { display: 'none' };
-
-  if (isOpen) {
-    style.display = 'block';
-  }
-
-  const [modal, setModal] = useState<HTMLDivElement | null>(null);
-
-  // On click outside
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (modal && !modal.contains(event.target as Node)) {
-        onClose();
-      }
-    },
-    [modal, onClose],
-  );
-
-  // On click outside
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () => document.removeEventListener('click', handleClickOutside, true);
-  }, [handleClickOutside]);
-
-  // Close on escape
-  const handleEscape = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  // Close on escape
-  useEffect(() => {
-    document.addEventListener('keydown', handleEscape, true);
-    return () => document.removeEventListener('keydown', handleEscape, true);
-  }, [handleEscape]);
-
-  return (
-    <div data-testid="modal" className={clsx('modal modal-sm', styles.dimmedBackground)} tabIndex={-1} style={style} role="dialog">
-      <div ref={setModal} className={clsx(`modal-dialog modal-dialog-centered modal-${size}`, styles.zoomIn)} role="document">
-        <div className="shadow modal-content">
-          <button data-testid="modal-close-button" type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={onClose} />
-          <div data-testid="modal-status" className={clsx('modal-status', { [`bg-${type}`]: Boolean(type), 'd-none': !type })} />
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};

src/client/components/ui/Modal/ModalBody.tsx

@@ -1,13 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-interface IProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export const ModalBody: React.FC<IProps> = ({ children, className }) => (
-  <div data-testid="modal-body" className={clsx('modal-body', className)}>
-    {children}
-  </div>
-);

src/client/components/ui/Modal/ModalFooter.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-export const ModalFooter: React.FC<IProps> = ({ children }) => (
-  <div data-testid="modal-footer" className="modal-footer">
-    {children}
-  </div>
-);

src/client/components/ui/Modal/ModalHeader.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-export const ModalHeader: React.FC<IProps> = ({ children }) => (
-  <div data-testid="modal-header" className="modal-header">
-    {children}
-  </div>
-);

src/client/components/ui/Modal/index.ts

@@ -1,4 +0,0 @@
-export { Modal } from './Modal';
-export { ModalBody } from './ModalBody';
-export { ModalFooter } from './ModalFooter';
-export { ModalHeader } from './ModalHeader';