feat(ui): move more Toast logic (#7973)

Author: avivkeller

apps/site/layouts/Base.tsx

@@ -8,7 +8,7 @@ import { NavigationStateProvider } from '#site/providers/navigationStateProvider
 import styles from './layouts.module.css';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
-  <NotificationProvider viewportClassName="fixed bottom-0 right-0 list-none">
+  <NotificationProvider>
     <NavigationStateProvider>
       <div className={styles.baseLayout}>{children}</div>
     </NavigationStateProvider>

packages/ui-components/.storybook/preview.tsx

@@ -1,7 +1,8 @@
-import * as Toast from '@radix-ui/react-toast';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
+import { NotificationProvider } from '#ui/Providers/NotificationProvider';
+
 import { STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
 
 import '#ui/styles/index.css';
@@ -13,10 +14,9 @@ const preview: Preview = {
   },
   decorators: [
     Story => (
-      <Toast.Provider>
+      <NotificationProvider>
         <Story />
-        <Toast.Viewport />
-      </Toast.Provider>
+      </NotificationProvider>
     ),
     withThemeByDataAttribute<ReactRenderer>({
       themes: { light: '', dark: 'dark' },

packages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx renamed to packages/ui-components/src/Providers/NotificationProvider/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { NotificationProvider, useNotification } from '../NotificationProvider';
+import { NotificationProvider, useNotification } from '..';
 
 describe('useNotification', () => {
     it('should return the notification dispatch function', () => {

packages/ui-components/src/Providers/NotificationProvider/index.module.css

@@ -0,0 +1,8 @@
+@reference "../../styles/index.css";
+
+.viewport {
+  @apply fixed
+    bottom-0
+    right-0
+    list-none;
+}

packages/ui-components/src/Providers/NotificationProvider.tsx renamed to packages/ui-components/src/Providers/NotificationProvider/index.tsx

@@ -10,13 +10,13 @@ import type {
 
 import Notification from '#ui/Common/Notification';
 
+import styles from './index.module.css';
+
 type NotificationContextType = {
   message: string | ReactNode;
   duration: number;
 } | null;
 
-type NotificationProps = { viewportClassName?: string };
-
 const NotificationContext = createContext<NotificationContextType>(null);
 
 export const NotificationDispatch = createContext<
@@ -25,10 +25,7 @@ export const NotificationDispatch = createContext<
 
 export const useNotification = () => useContext(NotificationDispatch);
 
-export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
-  viewportClassName,
-  children,
-}) => {
+export const NotificationProvider: FC<PropsWithChildren> = ({ children }) => {
   const [notification, dispatch] = useState<NotificationContextType>(null);
 
   useEffect(() => {
@@ -43,13 +40,13 @@ export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
         <Toast.Provider>
           {children}
 
-          <Toast.Viewport className={viewportClassName} />
-
           {notification && (
             <Notification duration={notification.duration}>
               {notification.message}
             </Notification>
           )}
+
+          <Toast.Viewport className={styles.viewport} />
         </Toast.Provider>
       </NotificationDispatch.Provider>
     </NotificationContext.Provider>