@cerberus-design/react 0.7.4-next-92f76bb → 0.7.4-next-9a605c3

package/src/context/notification-center.tsx

@@ -0,0 +1,159 @@
+'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 { vstack } from '@cerberus-design/styled-system/patterns'
+import { Portal, type PortalProps } from '../components/Portal'
+import { cx } from '@cerberus-design/styled-system/css'
+import { notification } from '@cerberus-design/styled-system/recipes'
+
+/**
+ * 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 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 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={cx(
+              notification().center,
+              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>
+        </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":[]}