@cerberus-design/react 0.7.4-next-92f76bb → 0.7.4-next-02f723e

package/src/components/Notification.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { cx } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import {
+  useRef,
+  type DialogHTMLAttributes,
+  type PropsWithChildren,
+  type MouseEvent,
+} from 'react'
+import { Close } from '@cerberus/icons'
+import { $cerberusIcons } from '../config/defineIcons'
+import type { IconType } from '../config/cerbIcons'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+
+/**
+ * This module exports the Notification component.
+ * @module
+ */
+
+function MatchNotificationIcon(props: NotificationVariantProps) {
+  const palette = props.palette || 'info'
+  const key = `${palette}Notification` as keyof typeof $cerberusIcons
+  const Icon = $cerberusIcons[key] as IconType
+  return <Icon />
+}
+
+export interface NotificationBaseProps
+  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {
+  id: string
+  onClose?: (e: MouseEvent<HTMLButtonElement>) => void
+}
+export type NotificationProps = NotificationBaseProps & NotificationVariantProps
+
+/**
+ * The info notification component.
+ * @param props - The component props.
+ * @returns The info notification component.
+ * @example
+ * ```tsx
+ * <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 Notification(props: PropsWithChildren<NotificationProps>) {
+  const { children, palette, onClose, ...nativeProps } = props
+  const ref = useRef<HTMLDialogElement>(null)
+  const onKeyDown = trapFocus(ref)
+  const styles = notification({ palette })
+
+  return (
+    <dialog
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          position: 'relative',
+          gap: '4',
+        }),
+        styles.dialog,
+      )}
+      onKeyDown={onKeyDown}
+      ref={ref}
+      role="alert"
+    >
+      <span className={styles.icon}>
+        <MatchNotificationIcon palette={palette} />
+      </span>
+
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '0',
+          py: '2',
+        })}
+      >
+        {children}
+      </div>
+
+      <button
+        aria-label="Close"
+        className={styles.close}
+        onClick={onClose}
+        value={props.id}
+      >
+        <Close />
+      </button>
+    </dialog>
+  )
+}

package/src/components/NotificationDescription.tsx

@@ -0,0 +1,31 @@
+/**
+ * This module exports the NotificationDescription component.
+ * @module
+ */
+
+import { cx } from '@cerberus-design/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+export interface BaseNotificationDescriptionProps
+  extends HTMLAttributes<HTMLParagraphElement> {}
+export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
+  NotificationVariantProps
+
+/**
+ * The NotificationDescription component is used to render the description of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+export function NotificationDescription(props: NotificationDescriptionProps) {
+  const { palette, ...nativeProps } = props
+  const styles = notification({ palette })
+  return (
+    <p
+      className={cx(nativeProps.className, styles.description)}
+      {...nativeProps}
+    />
+  )
+}

package/src/components/NotificationHeading.tsx

@@ -0,0 +1,28 @@
+/**
+ * This module exports the NotificationHeading component.
+ * @module
+ */
+
+import { cx } from '@cerberus-design/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+export interface BaseNotificationHeadingProps
+  extends HTMLAttributes<HTMLParagraphElement> {}
+export type NotificationHeadingProps = BaseNotificationHeadingProps &
+  NotificationVariantProps
+
+/**
+ * The NotificationHeading component is used to render the heading of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+export function NotificationHeading(props: NotificationHeadingProps) {
+  const { palette, ...nativeProps } = props
+  const styles = notification({ palette })
+  return (
+    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />
+  )
+}

package/src/config/cerbIcons.ts

@@ -1,24 +1,37 @@
 import {
   Checkmark,
+  CheckmarkFilled,
   CloudUpload,
+  ErrorFilled,
   Information,
+  InformationFilled,
   WarningFilled,
   type CarbonIconType,
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
 
+export type IconType = CarbonIconType | ElementType
+
 export interface DefinedIcons {
-  confirmModal?: CarbonIconType | ElementType
-  fileUploader?: CarbonIconType | ElementType
-  promptModal?: CarbonIconType | ElementType
-  invalid: CarbonIconType | ElementType
-  toggleChecked?: CarbonIconType | ElementType
+  confirmModal?: IconType
+  promptModal?: IconType
+  fileUploader?: IconType
+  infoNotification?: IconType
+  successNotification?: IconType
+  warningNotification?: IconType
+  dangerNotification?: IconType
+  invalid: IconType
+  toggleChecked?: IconType
 }
 
 export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
-  fileUploader: CloudUpload,
   promptModal: Information,
+  fileUploader: CloudUpload,
+  infoNotification: InformationFilled,
+  successNotification: CheckmarkFilled,
+  warningNotification: WarningFilled,
+  dangerNotification: ErrorFilled,
   invalid: WarningFilled,
   toggleChecked: Checkmark,
 }

package/src/context/notification-center.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react'
+import { Show } from '../components/Show'
+import { NotificationHeading } from '../components/NotificationHeading'
+import { NotificationDescription } from '../components/NotificationDescription'
+import { Notification } from '../components/Notification'
+import { animateIn, vstack } from '@cerberus-design/styled-system/patterns'
+import { Portal, type PortalProps } from '../components/Portal'
+import { notification } from '@cerberus-design/styled-system/recipes'
+import { Button } from '../components/Button'
+import { cx } from '@cerberus-design/styled-system/css'
+
+/**
+ * This module provides a context and hook for notifications.
+ * @module
+ */
+
+export interface NotifyOptions {
+  palette: 'info' | 'success' | 'warning' | 'danger'
+  heading: string
+  id?: string
+  description?: ReactNode
+  onClose?: () => void
+}
+
+export interface NotificationsValue {
+  notify: (options: NotifyOptions) => void
+}
+
+const NotificationsContext = createContext<NotificationsValue | null>(null)
+
+export interface NotificationsProviderProps extends PortalProps {}
+
+/**
+ * Provides a notification center to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <Notifications>
+ *   <SomeFeatureSection />
+ * </Notifications>
+ *
+ * // Use the hook to show a notification.
+ * const notify = useNotifications()
+ *
+ * const handleClick = useCallback(() => {
+ *  notify({
+ *   palette: 'info',
+ *   heading: 'New feature!',
+ *   description: 'We have added a new feature to the app.',
+ * })
+ * }, [notify])
+ * ```
+ */
+export function NotificationCenter(
+  props: PropsWithChildren<NotificationsProviderProps>,
+) {
+  const [activeNotifications, setActiveNotifications] = useState<
+    NotifyOptions[]
+  >([])
+  const styles = notification()
+
+  const handleNotify = useCallback((options: NotifyOptions) => {
+    setActiveNotifications((prev) => {
+      const id = `${options.palette}:${prev.length + 1}`
+      return [...prev, { ...options, id }]
+    })
+  }, [])
+
+  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+    const target = e.currentTarget as HTMLButtonElement
+    setActiveNotifications((prev) => {
+      const item = prev.find((option) => option.id === target.value)
+      if (item?.onClose) item.onClose()
+      return prev.filter((option) => option.id !== target.value)
+    })
+  }, [])
+
+  const handleCloseAll = useCallback(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose()
+      })
+      return []
+    })
+  }, [])
+
+  const value = useMemo(
+    () => ({
+      notify: handleNotify,
+    }),
+    [handleNotify],
+  )
+
+  // For some reason, the vstack pattern alignItems is not registering here.
+  // So we are forcing it with the style prop.
+
+  return (
+    <NotificationsContext.Provider value={value}>
+      {props.children}
+
+      <Show when={activeNotifications.length > 0}>
+        <Portal container={props.container}>
+          <div className={styles.center}>
+            <Show when={activeNotifications.length >= 4}>
+              <Button
+                className={cx(styles.closeAll, animateIn())}
+                onClick={handleCloseAll}
+                palette="action"
+                shape="rounded"
+                size="sm"
+                usage="text"
+              >
+                Close all
+              </Button>
+            </Show>
+            <div
+              className={vstack({
+                alignItems: 'flex-end',
+                gap: '4',
+              })}
+              style={{
+                alignItems: 'flex-end',
+              }}
+            >
+              {activeNotifications.map((option) => (
+                <Notification
+                  id={option.id!}
+                  key={option.id}
+                  onClose={handleClose}
+                  open
+                  palette={option.palette}
+                >
+                  <NotificationHeading palette={option.palette}>
+                    {option.heading}
+                  </NotificationHeading>
+                  <NotificationDescription palette={option.palette}>
+                    {option.description}
+                  </NotificationDescription>
+                </Notification>
+              ))}
+            </div>
+          </div>
+        </Portal>
+      </Show>
+    </NotificationsContext.Provider>
+  )
+}
+
+/**
+ * The hook to use the NotificationCenter.
+ * @returns The notify method to trigger a notification.
+ * @example
+ * ```tsx
+ * const {notify} = useNotificationCenter()
+ * notify({
+ *  palette: 'info',
+ *  heading: 'New feature',
+ *  description: 'We have added a new feature to the app.',
+ * })
+ * ```
+ */
+export function useNotificationCenter(): NotificationsValue {
+  const context = useContext(NotificationsContext)
+  if (!context) {
+    throw new Error(
+      'useNotificationCenter must be used within a NotificationsProvider',
+    )
+  }
+  return context
+}

package/src/index.ts

@@ -21,6 +21,9 @@ export * from './components/ModalIcon'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'
+export * from './components/Notification'
+export * from './components/NotificationHeading'
+export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/Radio'
 export * from './components/Tab'
@@ -37,6 +40,7 @@ export * from './context/confirm-modal'
 export * from './context/feature-flags'
 export * from './context/field'
 export * from './context/navMenu'
+export * from './context/notification-center'
 export * from './context/prompt-modal'
 export * from './context/tabs'
 export * from './context/theme'

package/build/legacy/chunk-GIHAFJYX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CloudUpload,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  fileUploader?: CarbonIconType | ElementType\n  promptModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  fileUploader: CloudUpload,\n  promptModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAWA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/modern/chunk-GIHAFJYX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CloudUpload,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  fileUploader?: CarbonIconType | ElementType\n  promptModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  fileUploader: CloudUpload,\n  promptModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAWA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}