Merge pull request #395 from omnifed/387-feature-make-notification-api

387 feature make notification api

docs/app/components/PageLayout.tsx

@@ -122,6 +122,7 @@ export function TabPageContent(props: PropsWithChildren<PageLayoutProps>) {
           },
         }),
       )}
+      id="react:page-content"
     >
       {props.children}
     </div>

docs/app/react/notification/components/messages.data.json

@@ -0,0 +1,26 @@
+[
+  {
+    "palette": "info",
+    "id": "1",
+    "heading": "Update Available",
+    "description": "A new version of the app is available. Refresh."
+  },
+  {
+    "palette": "success",
+    "id": "2",
+    "heading": "Profile Updated",
+    "description": "Your profile has been updated successfully."
+  },
+  {
+    "palette": "warning",
+    "id": "3",
+    "heading": "Slow Network",
+    "description": "Your network is slow. Please check your connection."
+  },
+  {
+    "palette": "danger",
+    "id": "4",
+    "heading": "Unable to Update",
+    "description": "An error occurred. Please try again."
+  }
+]

docs/app/react/notification/components/notification-preview.tsx

@@ -1,185 +1,103 @@
 'use client'
 
 import {
-  CheckmarkFilled,
-  Close,
-  ErrorFilled,
-  InformationFilled,
-  WarningFilled,
-} from '@cerberus-design/icons'
-import { IconButton } from '@cerberus-design/react'
-import { css, cx } from '@cerberus/styled-system/css'
-import { hstack, vstack } from '@cerberus/styled-system/patterns'
-import { notification } from '@cerberus/styled-system/recipes'
-import type { PropsWithChildren } from 'react'
-
-const FLEX_START = 'flex-start'
+  Button,
+  Notification,
+  NotificationCenter,
+  NotificationDescription,
+  NotificationHeading,
+  useNotificationCenter,
+  type NotifyOptions,
+} from '@cerberus-design/react'
+import { css } from '@cerberus/styled-system/css'
+import { vstack } from '@cerberus/styled-system/patterns'
+import { useCallback, type PropsWithChildren } from 'react'
+import messagesData from './messages.data.json'
 
 export function InfoNotification() {
-  const infoStyles = notification()
   return (
-    <div
-      className={cx(
-        hstack({
-          position: 'relative',
-          gap: '4',
-          top: 'initial',
-        }),
-        infoStyles.dialog,
-      )}
-    >
-      <span className={infoStyles.icon}>
-        <InformationFilled />
-      </span>
-
-      <div
-        className={vstack({
-          alignItems: FLEX_START,
-          gap: '0',
-          py: '2',
-        })}
-      >
-        <p className={infoStyles.heading}>Info Notification</p>
-        <p className={infoStyles.description}>
-          This is a description with a <a href="#">link</a> in the message.
-        </p>
-      </div>
-
-      <div>
-        <IconButton ariaLabel="Close">
-          <Close />
-        </IconButton>
-      </div>
-    </div>
+    <Notification id="info:1" open>
+      <NotificationHeading>Info Notification</NotificationHeading>
+      <NotificationDescription>
+        This is a description with a <a href="#">link</a> in the message.
+      </NotificationDescription>
+    </Notification>
   )
 }
 
 export function SuccessNotification() {
-  const styles = notification({
-    palette: 'success',
-  })
-
+  const palette = 'success'
   return (
-    <div
-      className={cx(
-        hstack({
-          position: 'relative',
-          gap: '4',
-          top: 'initial',
-        }),
-        styles.dialog,
-      )}
-    >
-      <span className={styles.icon}>
-        <CheckmarkFilled />
-      </span>
-
-      <div
-        className={vstack({
-          alignItems: FLEX_START,
-          gap: '0',
-          py: '2',
-        })}
-      >
-        <p className={styles.heading}>Success Notification</p>
-        <p className={styles.description}>
-          This is a description with a <a href="#">link</a> in the message.
-        </p>
-      </div>
-
-      <div>
-        <IconButton ariaLabel="Close">
-          <Close />
-        </IconButton>
-      </div>
-    </div>
+    <Notification id="success:1" open palette={palette}>
+      <NotificationHeading palette={palette}>
+        Info Notification
+      </NotificationHeading>
+      <NotificationDescription palette={palette}>
+        This is a description with a <a href="#">link</a> in the message.
+      </NotificationDescription>
+    </Notification>
   )
 }
 
 export function WarningNotification() {
-  const styles = notification({
-    palette: 'warning',
-  })
-
+  const palette = 'warning'
   return (
-    <div
-      className={cx(
-        hstack({
-          position: 'relative',
-          gap: '4',
-          top: 'initial',
-        }),
-        styles.dialog,
-      )}
-    >
-      <span className={styles.icon}>
-        <WarningFilled />
-      </span>
-
-      <div
-        className={vstack({
-          alignItems: FLEX_START,
-          gap: '0',
-          py: '2',
-        })}
-      >
-        <p className={styles.heading}>Warning Notification</p>
-        <p className={styles.description}>
-          This is a description with a <a href="#">link</a> in the message.
-        </p>
-      </div>
-
-      <div>
-        <IconButton ariaLabel="Close">
-          <Close />
-        </IconButton>
-      </div>
-    </div>
+    <Notification id="warning:1" open palette={palette}>
+      <NotificationHeading palette={palette}>
+        Warning Notification
+      </NotificationHeading>
+      <NotificationDescription palette={palette}>
+        This is a description with a <a href="#">link</a> in the message.
+      </NotificationDescription>
+    </Notification>
   )
 }
 
 export function DangerNotification() {
-  const styles = notification({
-    palette: 'danger',
-  })
+  const palette = 'danger'
+  return (
+    <Notification id="danger:1" open palette={palette}>
+      <NotificationHeading palette={palette}>
+        Danger Notification
+      </NotificationHeading>
+      <NotificationDescription palette={palette}>
+        This is a description with a <a href="#">link</a> in the message.
+      </NotificationDescription>
+    </Notification>
+  )
+}
 
+export function CustomNotification() {
   return (
-    <div
-      className={cx(
-        hstack({
-          position: 'relative',
-          gap: '4',
-          top: 'initial',
-        }),
-        styles.dialog,
-      )}
+    <Notification
+      className={css({
+        bgColor: 'black',
+      })}
+      id="forever"
+      open
     >
-      <span className={styles.icon}>
-        <ErrorFilled />
-      </span>
-
-      <div
-        className={vstack({
-          alignItems: FLEX_START,
-          gap: '0',
-          py: '2',
+      <NotificationHeading
+        className={css({
+          color: 'yellow',
+          fontWeight: '900',
         })}
       >
-        <p className={styles.heading}>Danger Notification</p>
-        <p className={styles.description}>
-          This is a description with a <a href="#">link</a> in the message.
-        </p>
-      </div>
-
-      <div>
-        <IconButton ariaLabel="Close">
-          <Close />
-        </IconButton>
-      </div>
-    </div>
+        Wu-Tang Clan
+      </NotificationHeading>
+      <NotificationDescription
+        className={css({
+          color: 'yellow.100',
+          textStyle: 'body-sm',
+        })}
+      >
+        It&apos;s Method Man, for short Mr. Meth
+      </NotificationDescription>
+    </Notification>
   )
 }
 
+// Overview
+
 function NotificationWrapper(props: PropsWithChildren<{}>) {
   return (
     <div
@@ -219,16 +137,22 @@ export function PalettePreview() {
   )
 }
 
+function Feature() {
+  const { notify } = useNotificationCenter()
+
+  const handleClick = useCallback(() => {
+    const messages = messagesData as NotifyOptions[]
+    const message = messages[Math.floor(Math.random() * messages.length)]
+    notify(message)
+  }, [notify])
+
+  return <Button onClick={handleClick}>Trigger notification</Button>
+}
+
 export function OverviewPreview() {
   return (
-    <div
-      className={vstack({
-        w: 'full',
-      })}
-    >
-      <NotificationWrapper>
-        <InfoNotification />
-      </NotificationWrapper>
-    </div>
+    <NotificationCenter>
+      <Feature />
+    </NotificationCenter>
   )
 }