Create Notification Component (#5955)

feat: create Notification component

Author: fa-901

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 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';
 
@@ -30,9 +31,11 @@ const preview: Preview = {
     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

@@ -0,0 +1,18 @@
+.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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { NotificationDispatch } from '@/providers/notificationProvider';
+
+export const useNotification = () => useContext(NotificationDispatch);

i18n/locales/en.json

@@ -36,6 +36,7 @@
   "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

@@ -44,6 +44,7 @@
     "@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",

package.json

@@ -0,0 +1,56 @@
+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>
+  );
+};