feat!: move from react-toastify to sonner (#6682)

**BREAKING:** We now export toast from `sonner` instead of
`react-toastify`. If you send out toasts from your own projects, make
sure to use our `toast` export, or install `sonner`. React-toastify
toasts will no longer work anymore. The Toast APIs are mostly similar,
but there are some differences if you provide options to your toast

CSS styles have been changed from Toastify

```css
/* before */
.Toastify


/* current */
.payload-toast-container
.payload-toast-item
.payload-toast-close-button

/* individual toast items will also have these classes depending on the state */
.toast-info
.toast-warning
.toast-success
.toast-error
```


https://github.com/payloadcms/payload/assets/70709113/da3e732e-aafc-4008-9469-b10f4eb06b35

---------

Co-authored-by: Paul Popus <paul@nouance.io>

Author: AlessioGr

packages/next/package.json

@@ -54,8 +54,8 @@
     "path-to-regexp": "^6.2.1",
     "qs": "6.11.2",
     "react-diff-viewer-continued": "3.2.6",
-    "react-toastify": "10.0.5",
     "sass": "1.77.4",
+    "sonner": "^1.5.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {

packages/next/src/layouts/Root/index.tsx

@@ -11,7 +11,6 @@ import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
 import { parseCookies } from 'payload/auth'
 import { createClientConfig } from 'payload/config'
 import React from 'react'
-import 'react-toastify/dist/ReactToastify.css'
 
 import { getPayloadHMR } from '../../utilities/getPayloadHMR.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'

packages/next/src/scss/app.scss

@@ -1,5 +1,5 @@
 @import './styles.scss';
-@import './toastify.scss';
+@import './toasts.scss';
 @import './colors.scss';
 
 :root {

packages/next/src/scss/toastify.scss

@@ -0,0 +1,111 @@
+.payload-toast-container {
+  .payload-toast-close-button {
+    left: unset;
+    right: 0.5rem;
+    top: 1.5rem;
+    color: var(--theme-elevation-400);
+    background: unset;
+    border: none;
+    display: flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: none;
+    }
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    [dir='RTL'] & {
+      right: unset;
+      left: 0.5rem;
+    }
+  }
+
+  .payload-toast-item {
+    padding: 1rem;
+    color: var(--theme-text);
+    font-style: normal;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    border-radius: 0.15rem;
+    border: 1px solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow:
+      0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+      0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+    .toast-content {
+      transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &[data-front='false'] {
+      .toast-content {
+        opacity: 0;
+      }
+    }
+
+    &[data-expanded='true'] {
+      .toast-content {
+        opacity: 1;
+      }
+    }
+
+    .toast-icon {
+      svg {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+
+    &.toast-warning {
+      border-color: var(--theme-warning-200);
+      background-color: var(--theme-warning-100);
+    }
+
+    &.toast-error {
+      border-color: var(--theme-error-300);
+      background-color: var(--theme-error-150);
+    }
+
+    &.toast-success {
+      border-color: var(--theme-success-200);
+      background-color: var(--theme-success-100);
+    }
+
+    &.toast-info {
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
+    }
+
+    [data-theme='light'] & {
+      &.toast-warning {
+        border-color: var(--theme-warning-550);
+        background-color: var(--theme-warning-100);
+      }
+
+      &.toast-error {
+        border-color: var(--theme-error-200);
+        background-color: var(--theme-error-50);
+      }
+
+      &.toast-success {
+        border-color: var(--theme-success-550);
+        background-color: var(--theme-success-50);
+      }
+
+      &.toast-info {
+        border-color: var(--theme-border-color);
+        background-color: var(--theme-elevation-50);
+      }
+    }
+  }
+}

packages/next/src/scss/toasts.scss

@@ -15,7 +15,7 @@ import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useSearchParams } from 'next/navigation.js'
 import qs from 'qs'
 import * as React from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 
 import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'
 import { LocaleSelector } from './LocaleSelector/index.js'

packages/next/src/views/API/index.client.tsx

@@ -10,7 +10,7 @@ import { useConfig } from '@payloadcms/ui/providers/Config'
 import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
 import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useEffect, useState } from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 
 import type { Props } from './types.js'
 
@@ -71,7 +71,7 @@ export const Auth: React.FC<Props> = (props) => {
     })
 
     if (response.status === 200) {
-      toast.success(t('authentication:successfullyUnlocked'), { autoClose: 3000 })
+      toast.success(t('authentication:successfullyUnlocked'))
     } else {
       toast.error(t('authentication:failedToUnlock'))
     }

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -9,7 +9,7 @@ import { useConfig } from '@payloadcms/ui/providers/Config'
 import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { email } from 'payload/fields/validations'
 import React, { Fragment, useState } from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 
 export const ForgotPasswordForm: React.FC = () => {
   const config = useConfig()

packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx

@@ -11,7 +11,7 @@ import { useConfig } from '@payloadcms/ui/providers/Config'
 import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useRouter } from 'next/navigation.js'
 import React from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 
 type Args = {
   token: string
@@ -49,7 +49,7 @@ export const ResetPasswordClient: React.FC<Args> = ({ token }) => {
         history.push(`${admin}`)
       } else {
         history.push(`${admin}/login`)
-        toast.success(i18n.t('general:updatedSuccessfully'), { autoClose: 3000 })
+        toast.success(i18n.t('general:updatedSuccessfully'))
       }
     },
     [fetchFullUser, history, admin, i18n],

packages/next/src/views/ResetPassword/index.client.tsx

@@ -9,7 +9,7 @@ import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import { requests } from '@payloadcms/ui/utilities/api'
 import { useRouter } from 'next/navigation.js'
 import React, { Fragment, useCallback, useState } from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 
 import type { Props } from './types.js'