fix: toast use sonner

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,5 +1,5 @@
 import { useOutlet, usePrefersColor } from 'dumi';
-import { ThemeProvider } from '../../../src';
+import { ThemeProvider, Notifications } from '../../../src';
 
 const GlobalLayout = () => {
   const [color] = usePrefersColor();
@@ -12,6 +12,7 @@ const GlobalLayout = () => {
       }}
     >
       {outlet}
+      <Notifications />
     </ThemeProvider>
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zens",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "MarkFlowy's ui component library.",
   "keywords": [],
   "homepage": "https://github.com/drl990114/zens#readme",
@@ -68,7 +68,6 @@
     "rc-image": "^7.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
     "react-spinners": "^0.13.8",
     "sonner": "^1.4.0",
     "styled-components": "^6.1.0",

src/Toast/demo/basic.tsx

@@ -0,0 +1,48 @@
+import { Button, Space, toast } from 'zens';
+
+export default () => {
+  const normalToast = () => {
+    toast('normal toast');
+  };
+
+  const errorToast = () => {
+    toast.error('error toast');
+  };
+
+  const longtextToast = () => {
+    toast('longtext toast'.repeat(20), {
+      duration: 10000,
+    });
+  };
+
+  const successToast = () => {
+    toast.success('success toast');
+  };
+
+  const promiseToast = () => {
+    let a = 'qweq';
+    const n = toast.loading('loading');
+
+    setTimeout(() => {
+      toast.dismiss(n);
+      toast.success('success', {
+        action: {
+          label: 'action',
+          onClick: () => {
+            toast('action');
+          },
+        },
+      });
+    }, 2000);
+  };
+
+  return (
+    <Space>
+      <Button onClick={normalToast}>toast</Button>
+      <Button onClick={errorToast}>error toast</Button>
+      <Button onClick={longtextToast}>longtext</Button>
+      <Button onClick={successToast}>success toast</Button>
+      <Button onClick={promiseToast}>promise toast</Button>
+    </Space>
+  );
+};

src/Toast/index.md

@@ -0,0 +1,17 @@
+---
+title: Toast 提示
+nav:
+  title: 组件
+  order: 2
+group:
+  title: 反馈
+  order: 1
+---
+
+# Toast 提示
+
+提示
+
+### 基本用法
+
+<code src="./demo/basic.tsx"></code>

src/Toast/index.tsx

@@ -1,61 +1,27 @@
-import { memo, useContext } from 'react'
-import { ToastBar, Toaster, toast } from 'react-hot-toast'
-import styled, { ThemeContext } from 'styled-components'
+import { memo, useContext } from 'react';
+import { Toaster } from 'sonner';
+import styled, { ThemeContext } from 'styled-components';
 
-export { toast } from 'react-hot-toast'
+export { toast } from 'sonner';
 
-export type Variant = 'default' | 'error' | 'warning' | 'info' | 'success'
-
-const ToastIcon = styled.div`
-  padding-top: ${({ theme }) => theme?.spaceXs};
-`
-
-const ToastDismiss = styled.div`
-  padding: ${({ theme }) => theme?.spaceXs} ${({ theme }) => theme?.spaceSm};
-  border-radius: ${({ theme }) => theme?.smallBorderRadius};
-  cursor: pointer;
-
-  &:hover {
-    color: ${({ theme }) => theme?.white};
-    background: ${({ theme }) => theme?.accentColor};
-  }
-`
+export type Variant = 'default' | 'error' | 'warning' | 'info' | 'success';
 
 export const Notifications = memo(() => {
-  const context = useContext(ThemeContext)
+  const context = useContext(ThemeContext);
 
   return (
     <Toaster
+      expand={false}
+      closeButton
       toastOptions={{
-        className: 'mf-toast',
         style: {
-          display: 'flex',
-          alignItems: 'flex-start',
-          border: `1px solid ${context?.borderColor}`,
+          borderColor: context?.borderColor,
           borderRadius: context?.smallBorderRadius,
           color: context?.primaryFontColor,
           background: context?.bgColor,
         },
         duration: 5000,
-        position: 'bottom-center',
-        custom: {},
       }}
-    >
-      {(t) => (
-        <ToastBar toast={t}>
-          {({ icon, message }) => (
-            <>
-              <ToastIcon>{icon}</ToastIcon>
-              {message}
-              {t.type !== 'loading' && (
-                <ToastDismiss className="mf-toast__dismiss" onClick={() => toast.dismiss(t.id)}>
-                  x
-                </ToastDismiss>
-              )}
-            </>
-          )}
-        </ToastBar>
-      )}
-    </Toaster>
-  )
-})
+    ></Toaster>
+  );
+});

yarn.lock

@@ -9205,11 +9205,6 @@ gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
-goober@^2.1.10:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
-  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
-
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -15842,13 +15837,6 @@ [email protected]:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-hot-toast@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
-  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
-  dependencies:
-    goober "^2.1.10"
-
 react-intl@^6.4.4:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.6.2.tgz#97a044afa9cac65ae62f404c8bb9cbd3aec52d41"