From 150c7a8f52522b822d869c4d9c6e36c3ea2b3a17 Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Thu, 10 Jul 2025 17:42:27 -0400
Subject: [PATCH] feat(ui): move more Toast logic

---
 apps/site/layouts/Base.tsx                          |  2 +-
 packages/ui-components/.storybook/preview.tsx       |  8 ++++----
 .../__tests__/index.test.jsx}                       |  2 +-
 .../Providers/NotificationProvider/index.module.css |  8 ++++++++
 .../index.tsx}                                      | 13 +++++--------
 5 files changed, 19 insertions(+), 14 deletions(-)
 rename packages/ui-components/src/Providers/{__tests__/NotificationProvider.test.jsx => NotificationProvider/__tests__/index.test.jsx} (94%)
 create mode 100644 packages/ui-components/src/Providers/NotificationProvider/index.module.css
 rename packages/ui-components/src/Providers/{NotificationProvider.tsx => NotificationProvider/index.tsx} (84%)

diff --git a/apps/site/layouts/Base.tsx b/apps/site/layouts/Base.tsx
index ab7770efb10ef..2f1d967be9ecc 100644
--- a/apps/site/layouts/Base.tsx
+++ b/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>
diff --git a/packages/ui-components/.storybook/preview.tsx b/packages/ui-components/.storybook/preview.tsx
index 0f63ea379f10f..97d9fef3894c6 100644
--- a/packages/ui-components/.storybook/preview.tsx
+++ b/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' },
diff --git a/packages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx b/packages/ui-components/src/Providers/NotificationProvider/__tests__/index.test.jsx
similarity index 94%
rename from packages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx
rename to packages/ui-components/src/Providers/NotificationProvider/__tests__/index.test.jsx
index 33525f1f42509..b66c3c5dd8a10 100644
--- a/packages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx
+++ b/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', () => {
diff --git a/packages/ui-components/src/Providers/NotificationProvider/index.module.css b/packages/ui-components/src/Providers/NotificationProvider/index.module.css
new file mode 100644
index 0000000000000..9a3e6fa8c950c
--- /dev/null
+++ b/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;
+}
diff --git a/packages/ui-components/src/Providers/NotificationProvider.tsx b/packages/ui-components/src/Providers/NotificationProvider/index.tsx
similarity index 84%
rename from packages/ui-components/src/Providers/NotificationProvider.tsx
rename to packages/ui-components/src/Providers/NotificationProvider/index.tsx
index 743bc50c0f9a8..3aca3b54edd9a 100644
--- a/packages/ui-components/src/Providers/NotificationProvider.tsx
+++ b/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>