add toast (#261)

package.json

@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-currency-input-field": "^3.6.10",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",
     "tw-colors": "^1.2.5",
     "vite-plugin-svgr": "^3.2.0"

src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,24 @@
+import { Toast, toast } from './Toast';
+import { Button } from './../Button/Button';
+
+export default { title: 'Components/Toast' };
+
+export const _Toast = {
+  render: () => (
+    <>
+      <Button
+        onClick={() => {
+          toast.error('Euhh! This is an error message!');
+        }}
+      >
+        Create ERROR Toast
+      </Button>
+      <br />
+      <br />
+      <Button onClick={() => toast.success('Uuurraa! This is a success CSS')}>
+        Create SUCCESS Toast
+      </Button>
+      <Toast theme="theme-dark" />
+    </>
+  ),
+};

src/components/Toast/Toast.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Toast } from './Toast';
+
+describe('Components | Toast', () => {
+  test('it should render', () => {
+    render(<Toast content="this is the content" error="Oupps!" />);
+
+    let input = screen.getByTestId('toast');
+
+    expect(input).toBeInTheDocument();
+  });
+});

src/components/Toast/Toast.tsx

@@ -0,0 +1,89 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import { useEffect, useState } from 'react';
+import { toast as _toast, Toaster } from 'react-hot-toast';
+import { ComponentPropsWithoutRef } from 'react';
+import { FiX, FiCheckCircle, FiAlertCircle } from 'react-icons/fi';
+import { Button } from '../Button';
+import { useLocalStorage } from '../../util/useLocalStorage';
+
+interface ToastProps extends ComponentPropsWithoutRef<'div'> {
+  error?: string;
+  success?: string;
+  theme?: string;
+}
+
+function Error(props: ToastProps) {
+  const { error } = props;
+
+  return (
+    <>
+      <div
+        className="inline-flex items-center justify-center flex-shrink-0
+                  w-10 h-10 text-s-error bg-s-error bg-opacity-25 rounded-lg"
+      >
+        <FiAlertCircle size={24} />
+      </div>
+      <div className="ml-3 text-sm font-normal pr-2 text-s-error">{error}</div>
+    </>
+  );
+}
+
+function Success(props: ToastProps) {
+  const { success } = props;
+
+  return (
+    <>
+      <div
+        className="inline-flex items-center justify-center flex-shrink-0
+                        w-10 h-10 text-s-success bg-s-success bg-opacity-25 rounded-lg"
+      >
+        <FiCheckCircle size={24} />
+      </div>
+      <div className="ml-3 text-sm font-normal pr-2 text-s-success">
+        {success}
+      </div>
+    </>
+  );
+}
+
+export const toast = _toast;
+
+export function Toast(props: ToastProps) {
+  const { error, theme: _theme, ...rest } = props;
+
+  const [storedTheme] = useLocalStorage<string>(
+    'massa-station-theme',
+    'theme-dark',
+  );
+  const [theme, setTheme] = useState<string>(storedTheme);
+  const isError = Boolean(error);
+
+  useEffect(() => {
+    setTheme(_theme ?? storedTheme);
+  }, [_theme]);
+
+  return (
+    <div data-testid="toast">
+      <Toaster position="bottom-left">
+        {(t) => (
+          <div
+            className={`${theme} flex items-center w-fit p-4 text-primary bg-secondary rounded-lg shadow`}
+            {...rest}
+          >
+            {t.type === 'error' || isError ? (
+              <Error error={t.message?.toString()} {...props} />
+            ) : (
+              <Success success={t.message?.toString()} {...props} />
+            )}
+            <Button variant="icon" onClick={() => toast.dismiss(t.id)}>
+              <FiX />
+            </Button>
+          </div>
+        )}
+      </Toaster>
+    </div>
+  );
+}

src/components/Toast/index.ts

@@ -0,0 +1 @@
+export * from './Toast';

src/components/index.ts

@@ -28,3 +28,4 @@ export * from './TextArea';
 export * from './DragDrop';
 export * from './Vote';
 export * from './Spinner';
+export * from './Toast';