Create Notification Component (#5955)

feat: create Notification component

.storybook/preview.tsx

···
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { SiteProvider } from '../providers/siteProvider';
 import { LocaleProvider } from '../providers/localeProvider';
+import { NotificationProvider } from '../providers/notificationProvider';
 import * as constants from './constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
···
     Story => (
       <SiteProvider>
         <LocaleProvider>
-          <div className={rootClasses}>
-            <Story />
-          </div>
+          <NotificationProvider viewportClassName="absolute top-0 left-0 list-none">
+            <div className={rootClasses}>
+              <Story />
+            </div>
+          </NotificationProvider>
         </LocaleProvider>
       </SiteProvider>
     ),

components/Common/Notification/index.module.css

···
+.root {
+  @apply m-6
+    rounded
+    border
+    border-neutral-200
+    bg-white
+    px-4
+    py-3
+    shadow-lg
+    dark:border-neutral-800
+    dark:bg-neutral-900;
+}
+
+.message {
+  @apply font-medium
+    text-green-600
+    dark:text-white;
+}

components/Common/Notification/index.stories.tsx

···
+import { CodeBracketIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import { FormattedMessage } from 'react-intl';
+
+import Notification from './index';
+
+type Story = StoryObj<typeof Notification>;
+type Meta = MetaObj<typeof Notification>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    duration: 5000,
+    children: 'Copied to clipboard!',
+  },
+};
+
+export const TimedNotification: Story = {
+  args: {
+    duration: 5000,
+    children: 'Copied to clipboard!',
+  },
+};
+
+export const WithJSX: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="flex items-center gap-3">
+        <CodeBracketIcon className="h-4 w-4" />
+        <FormattedMessage id="components.common.codebox.copied" />
+      </div>
+    ),
+  },
+};
+
+export default { component: Notification } as Meta;

components/Common/Notification/index.tsx

···
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type NotificationProps = {
+  open?: boolean;
+  duration?: number;
+  onChange?: (value: boolean) => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const Notification: FC<NotificationProps> = ({
+  open,
+  duration = 5000,
+  onChange,
+  children,
+  className,
+}: NotificationProps) => (
+  <ToastPrimitive.Root
+    open={open}
+    duration={duration}
+    onOpenChange={onChange}
+    className={classNames(styles.root, className)}
+  >
+    <ToastPrimitive.Title className={styles.message}>
+      {children}
+    </ToastPrimitive.Title>
+  </ToastPrimitive.Root>
+);
+
+export default Notification;

hooks/useNotification.ts

···
+import { useContext } from 'react';
+
+import { NotificationDispatch } from '@/providers/notificationProvider';
+
+export const useNotification = () => useContext(NotificationDispatch);

i18n/locales/en.json

···
   "components.pagination.previous": "Older",
   "components.common.crossLink.previous": "Prev",
   "components.common.crossLink.next": "Next",
+  "components.common.codebox.copied": "Copied to clipboard!",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
   "layouts.blogIndex.currentYear": "News from {year}",
   "components.api.jsonLink.title": "View as JSON",

package-lock.json

···
         "@mdx-js/react": "^2.3.0",
         "@nodevu/core": "~0.1.0",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-toast": "^1.1.5",
         "@types/node": "18.18.3",
         "@vcarl/remark-headings": "~0.1.0",
         "@vercel/analytics": "^1.0.2",
···
         }
       }
     },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-primitive": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
···
       },
       "peerDependenciesMeta": {
         "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
           "optional": true
         }
       }

package.json

···
     "@mdx-js/react": "^2.3.0",
     "@nodevu/core": "~0.1.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-toast": "^1.1.5",
     "@types/node": "18.18.3",
     "@vcarl/remark-headings": "~0.1.0",
     "@vercel/analytics": "^1.0.2",

providers/notificationProvider.tsx

···
+import * as Toast from '@radix-ui/react-toast';
+import type {
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  SetStateAction,
+} from 'react';
+import { createContext, useEffect, useState } from 'react';
+
+import Notification from '@/components/Common/Notification';
+
+type NotificationContextType = {
+  message: string | ReactNode;
+  duration: number;
+} | null;
+
+type NotificationProps = {
+  viewportClassName?: string;
+};
+
+const NotificationContext = createContext<NotificationContextType>(null);
+
+export const NotificationDispatch = createContext<
+  Dispatch<SetStateAction<NotificationContextType>>
+>(() => {});
+
+export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
+  viewportClassName,
+  children,
+}) => {
+  const [notification, dispatch] = useState<NotificationContextType>(null);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => dispatch(null), notification?.duration);
+
+    return () => clearTimeout(timeout);
+  }, [notification]);
+
+  return (
+    <NotificationContext.Provider value={notification}>
+      <NotificationDispatch.Provider value={dispatch}>
+        <Toast.Provider>
+          {children}
+
+          <Toast.Viewport className={viewportClassName} />
+          {notification && (
+            <Notification duration={notification.duration}>
+              {notification.message}
+            </Notification>
+          )}
+        </Toast.Provider>
+      </NotificationDispatch.Provider>
+    </NotificationContext.Provider>
+  );
+};