feat(ui): add NotificationProvider

apps/site/components/Common/CodeBox.tsx

@@ -3,11 +3,12 @@
 import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
 import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
+import { useNotification } from '@node-core/ui-components/Providers/NotificationProvider';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 
 import Link from '#site/components/Link';
-import { useCopyToClipboard, useNotification } from '#site/hooks';
+import { useCopyToClipboard } from '#site/hooks';
 
 type CodeBoxProps = {
   language: string;

apps/site/hooks/react-client/index.ts

@@ -1,6 +1,5 @@
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDetectOS } from './useDetectOS';
 export { default as useMediaQuery } from './useMediaQuery';
-export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
 export { default as useNavigationState } from './useNavigationState';

apps/site/hooks/react-server/index.ts

@@ -1,5 +1,4 @@
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDetectOS } from './useDetectOS';
 export { default as useMediaQuery } from './useMediaQuery';
-export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';

apps/site/layouts/Base.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { NotificationProvider } from '@node-core/ui-components/Providers/NotificationProvider';
 import type { FC, PropsWithChildren } from 'react';
 
 import { NavigationStateProvider } from '#site/providers/navigationStateProvider';
-import { NotificationProvider } from '#site/providers/notificationProvider';
 
 import styles from './layouts.module.css';
 

apps/site/package.json

@@ -44,7 +44,6 @@
     "@oramacloud/client": "^2.1.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "~4.1.11",
     "@types/node": "catalog:",

apps/site/providers/notificationProvider.tsx → packages/ui-components/src/Providers/NotificationProvider.tsx

@@ -1,13 +1,14 @@
-import Notification from '@node-core/ui-components/Common/Notification';
 import * as Toast from '@radix-ui/react-toast';
+import { createContext, useContext, useEffect, useState } from 'react';
 import type {
   Dispatch,
   FC,
   PropsWithChildren,
   ReactNode,
   SetStateAction,
 } from 'react';
-import { createContext, useEffect, useState } from 'react';
+
+import Notification from '#ui/Common/Notification';
 
 type NotificationContextType = {
   message: string | ReactNode;
@@ -22,6 +23,8 @@ export const NotificationDispatch = createContext<
   Dispatch<SetStateAction<NotificationContextType>>
 >(() => {});
 
+export const useNotification = () => useContext(NotificationDispatch);
+
 export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
   viewportClassName,
   children,

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

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { NotificationProvider, useNotification } from '../NotificationProvider';
+
+describe('useNotification', () => {
+    it('should return the notification dispatch function', () => {
+        // Arrange
+        const TestComponent = () => {
+            const notificationDispatch = useNotification();
+            return (
+                <div>
+                    {notificationDispatch ? 'Dispatch available' : 'Dispatch unavailable'}
+                </div>
+            );
+        };
+
+        // Act
+        const { getByText } = render(
+            <NotificationProvider>
+                <TestComponent />
+            </NotificationProvider>
+        );
+
+        // Assert
+        const result = getByText('Dispatch available');
+        assert.ok(result.ownerDocument);
+    });
+
+    it('should return null outside NotificationProvider', () => {
+        // Arrange
+        const TestComponent = () => {
+            const notificationDispatch = useNotification();
+            return (
+                <div>
+                    {notificationDispatch ? 'Dispatch available' : 'Dispatch unavailable'}
+                </div>
+            );
+        };
+
+        // Act
+        const { queryByText } = render(<TestComponent />);
+
+        // Assert
+        const result = queryByText((content, element) => {
+            return element.textContent === 'Dispatch unavailable';
+        });
+
+        assert.equal(result, null);
+    });
+});