From 81347da699d9d83d6e46a5084e040c0eadb460fe Mon Sep 17 00:00:00 2001 From: MaZ <126461030+mazmassa@users.noreply.github.com> Date: Fri, 23 Jun 2023 00:22:54 +0200 Subject: [PATCH] add toast (#261) --- package-lock.json | 42 +++++++++++- package.json | 1 + src/components/Toast/Toast.stories.tsx | 24 +++++++ src/components/Toast/Toast.test.tsx | 13 ++++ src/components/Toast/Toast.tsx | 89 ++++++++++++++++++++++++++ src/components/Toast/index.ts | 1 + src/components/index.ts | 1 + 7 files changed, 168 insertions(+), 3 deletions(-) create mode 100644 src/components/Toast/Toast.stories.tsx create mode 100644 src/components/Toast/Toast.test.tsx create mode 100644 src/components/Toast/Toast.tsx create mode 100644 src/components/Toast/index.ts diff --git a/package-lock.json b/package-lock.json index e3372964..0e7ae725 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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" @@ -7592,7 +7593,6 @@ }, "node_modules/csstype": { "version": "3.1.2", - "dev": true, "license": "MIT" }, "node_modules/data-urls": { @@ -9406,6 +9406,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz", + "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "dev": true, @@ -14404,6 +14412,21 @@ "dev": true, "license": "MIT" }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-icons": { "version": "4.8.0", "license": "MIT", @@ -21770,8 +21793,7 @@ } }, "csstype": { - "version": "3.1.2", - "dev": true + "version": "3.1.2" }, "data-urls": { "version": "3.0.2", @@ -22958,6 +22980,12 @@ "slash": "^3.0.0" } }, + "goober": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz", + "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==", + "requires": {} + }, "gopd": { "version": "1.0.1", "dev": true, @@ -25988,6 +26016,14 @@ } } }, + "react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "requires": { + "goober": "^2.1.10" + } + }, "react-icons": { "version": "4.8.0", "requires": {} diff --git a/package.json b/package.json index 28ba213c..c8c47257 100644 --- a/package.json +++ b/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" diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx new file mode 100644 index 00000000..8670d799 --- /dev/null +++ b/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: () => ( + <> + +
+
+ + + + ), +}; diff --git a/src/components/Toast/Toast.test.tsx b/src/components/Toast/Toast.test.tsx new file mode 100644 index 00000000..77f74e7e --- /dev/null +++ b/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(); + + let input = screen.getByTestId('toast'); + + expect(input).toBeInTheDocument(); + }); +}); diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx new file mode 100644 index 00000000..592ac4bb --- /dev/null +++ b/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 ( + <> +
+ +
+
{error}
+ + ); +} + +function Success(props: ToastProps) { + const { success } = props; + + return ( + <> +
+ +
+
+ {success} +
+ + ); +} + +export const toast = _toast; + +export function Toast(props: ToastProps) { + const { error, theme: _theme, ...rest } = props; + + const [storedTheme] = useLocalStorage( + 'massa-station-theme', + 'theme-dark', + ); + const [theme, setTheme] = useState(storedTheme); + const isError = Boolean(error); + + useEffect(() => { + setTheme(_theme ?? storedTheme); + }, [_theme]); + + return ( +
+ + {(t) => ( +
+ {t.type === 'error' || isError ? ( + + ) : ( + + )} + +
+ )} + +
+ ); +} diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts new file mode 100644 index 00000000..1b794ee7 --- /dev/null +++ b/src/components/Toast/index.ts @@ -0,0 +1 @@ +export * from './Toast'; diff --git a/src/components/index.ts b/src/components/index.ts index 8b8ad753..73ec6777 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -28,3 +28,4 @@ export * from './TextArea'; export * from './DragDrop'; export * from './Vote'; export * from './Spinner'; +export * from './Toast';