@cerberus-design/react 0.14.2 → 0.15.0

package/src/context/confirm-modal.tsx

@@ -11,20 +11,19 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
 import { css } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import { $cerberusIcons } from '../config/defineIcons'
-import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Show } from '../components/Show'
-import { Modal } from '../components/Modal'
-import { useModal } from '../hooks/useModal'
-import { ModalHeader } from '../components/ModalHeader'
-import { ModalHeading } from '../components/ModalHeading'
-import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
 import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from './cerberus'
+import {
+  Dialog,
+  DialogCloseTrigger,
+  DialogDescription,
+  DialogHeading,
+  DialogProvider,
+} from '../components/Dialog'
 
 /**
  * This module provides a context and hook for the confirm modal.
@@ -116,13 +115,14 @@ export type ConfirmModalProviderProps = PropsWithChildren<unknown>
 export function ConfirmModal(
   props: PropsWithChildren<ConfirmModalProviderProps>,
 ) {
-  const { modalRef, show, close } = useModal()
-  const resolveRef = useRef<ShowResult>(null)
+  const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
-  const focusTrap = trapFocus(modalRef)
-  const ConfirmIcon = $cerberusIcons.confirmModal
+  const resolveRef = useRef<ShowResult>(null)
   const kind = content?.kind ?? 'non-destructive'
 
+  const { icons } = useCerberusContext()
+  const { confirmModal: ConfirmIcon } = icons
+
   const palette = useMemo(
     () => (kind === 'destructive' ? 'danger' : 'action'),
     [kind],
@@ -135,20 +135,20 @@ export function ConfirmModal(
         resolveRef.current?.(true)
       }
       resolveRef.current?.(false)
-      close()
+      setOpen(false)
     },
-    [close],
+    [setOpen],
   )
 
   const handleShow = useCallback(
     (options: ShowConfirmModalOptions) => {
       return new Promise<boolean>((resolve) => {
         setContent({ ...options })
-        show()
+        setOpen(true)
         resolveRef.current = resolve
       })
     },
-    [show],
+    [setOpen, setContent],
   )
 
   const value = useMemo(
@@ -162,15 +162,15 @@ export function ConfirmModal(
     <ConfirmModalContext.Provider value={value}>
       {props.children}
 
-      <Portal>
-        <Modal onKeyDown={focusTrap} ref={modalRef}>
+      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
+        <Dialog size="sm">
           <VStack gap="xl" w="full">
-            <ModalHeader>
-              <div
-                className={hstack({
-                  justify: 'center',
-                  w: 'full',
-                })}
+            <VStack alignItems="flex-start" gap="md" w="full">
+              <HStack
+                alignSelf="center"
+                justify="center"
+                paddingBlockEnd="md"
+                w="full"
               >
                 <Show
                   when={palette === 'danger'}
@@ -190,10 +190,10 @@ export function ConfirmModal(
                     src=""
                   />
                 </Show>
-              </div>
-              <ModalHeading>{content?.heading}</ModalHeading>
-              <ModalDescription>{content?.description}</ModalDescription>
-            </ModalHeader>
+              </HStack>
+              <DialogHeading>{content?.heading}</DialogHeading>
+              <DialogDescription>{content?.description}</DialogDescription>
+            </VStack>
 
             <HStack gap="4" w="full">
               <Button
@@ -208,21 +208,23 @@ export function ConfirmModal(
               >
                 {content?.actionText}
               </Button>
-              <Button
-                className={css({
-                  w: '1/2',
-                })}
-                name="cancel"
-                onClick={handleChoice}
-                usage="outlined"
-                value="false"
-              >
-                {content?.cancelText}
-              </Button>
+              <DialogCloseTrigger asChild>
+                <Button
+                  className={css({
+                    w: '1/2',
+                  })}
+                  name="cancel"
+                  onClick={handleChoice}
+                  usage="outlined"
+                  value="false"
+                >
+                  {content?.cancelText}
+                </Button>
+              </DialogCloseTrigger>
             </HStack>
           </VStack>
-        </Modal>
-      </Portal>
+        </Dialog>
+      </DialogProvider>
     </ConfirmModalContext.Provider>
   )
 }

package/src/context/cta-modal.tsx

@@ -11,21 +11,20 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
-import { $cerberusIcons } from '../config/defineIcons'
-import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Show } from '../components/Show'
-import { Modal } from '../components/Modal'
-import { useModal } from '../hooks/useModal'
-import { ModalHeader } from '../components/ModalHeader'
-import { ModalHeading } from '../components/ModalHeading'
-import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
+import { useCerberusContext } from './cerberus'
 import { HStack } from '@cerberus/styled-system/jsx'
-import { IconButton } from '../components/IconButton'
 import { css } from '@cerberus/styled-system/css'
 import { VStack } from '@cerberus/styled-system/jsx'
+import {
+  Dialog,
+  DialogDescription,
+  DialogHeading,
+  DialogProvider,
+} from '../components/Dialog'
+import { DialogCloseIconTrigger } from '../components/Dialog.client'
 
 /**
  * This module provides a context and hook for the cta modal.
@@ -95,12 +94,12 @@ export type CTAModalProviderProps = PropsWithChildren<unknown>
  * ```
  */
 export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
-  const { modalRef, show, close } = useModal()
+  const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
-  const focusTrap = trapFocus(modalRef)
-  const FallbackIcon = $cerberusIcons.confirmModal
   const confirmIcon = content?.icon
-  const { close: CloseIcon } = $cerberusIcons
+
+  const { icons } = useCerberusContext()
+  const { confirmModal: FallbackIcon } = icons
 
   const handleShow = useCallback(
     (options: ShowCTAModalOptions) => {
@@ -111,9 +110,9 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
         )
       }
       setContent({ ...options })
-      show()
+      setOpen(true)
     },
-    [show],
+    [setOpen],
   )
 
   const handleActionClick = useCallback(
@@ -122,9 +121,9 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
       const action = content?.actions[Number(index)]
       const { onClick } = action || {}
       onClick?.(event)
-      close()
+      setOpen(false)
     },
-    [content, close],
+    [content, setOpen],
   )
 
   const value = useMemo(
@@ -138,24 +137,12 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
     <CTAModalContext.Provider value={value}>
       {props.children}
 
-      <Portal>
-        <Modal onKeyDown={focusTrap} ref={modalRef}>
-          <span
-            className={css({
-              padding: 'md',
-              position: 'absolute',
-              right: 0,
-              top: 0,
-              zIndex: 'decorator',
-            })}
-          >
-            <IconButton ariaLabel="Close modal" onClick={close}>
-              <CloseIcon />
-            </IconButton>
-          </span>
+      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
+        <Dialog size="sm">
+          <DialogCloseIconTrigger />
 
           <VStack gap="xl" w="full">
-            <ModalHeader>
+            <VStack alignItems="flex-start" gap="md" w="full">
               <VStack gap="lg" w="full">
                 <Avatar
                   ariaLabel=""
@@ -170,10 +157,10 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
                   }
                   src=""
                 />
-                <ModalHeading>{content?.heading}</ModalHeading>
-                <ModalDescription>{content?.description}</ModalDescription>
+                <DialogHeading>{content?.heading}</DialogHeading>
+                <DialogDescription>{content?.description}</DialogDescription>
               </VStack>
-            </ModalHeader>
+            </VStack>
 
             <HStack gap="md" w="full">
               <Show when={Boolean(content?.actions?.length)}>
@@ -194,8 +181,8 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
               </Show>
             </HStack>
           </VStack>
-        </Modal>
-      </Portal>
+        </Dialog>
+      </DialogProvider>
     </CTAModalContext.Provider>
   )
 }

package/src/context/notification-center/store.ts

@@ -0,0 +1,88 @@
+import type { Dispatch } from 'react'
+import type {
+  AddNotifyAction,
+  ClearNotifyAction,
+  NotificationsStore,
+  RemoveNotifyAction,
+  UpdateNotifyAction,
+} from './types'
+
+/**
+ * This module contains the reducer store and actions for the notification
+ * center.
+ * @module notification-center/store
+ */
+
+/**
+ * The reducer for the notification center.
+ * @param state An array of notifications.
+ * @param action An action to take on the notifications.
+ * @returns The new state of the notifications.
+ */
+export function notificationCenterReducer(
+  state: NotificationsStore,
+  action:
+    | AddNotifyAction
+    | RemoveNotifyAction
+    | UpdateNotifyAction
+    | ClearNotifyAction,
+): NotificationsStore {
+  switch (action.type) {
+    case 'ADD_NOTIFICATION':
+      return [...state, action.payload]
+    case 'REMOVE_NOTIFICATION':
+      return state.filter((n) => n.id !== action.payload.id)
+    case 'UPDATE_NOTIFICATION':
+      return state.map((n) =>
+        n.id === action.payload.id ? { ...n, ...action.payload } : n,
+      )
+    case 'CLEAR_NOTIFICATIONS':
+      return []
+    default:
+      return state
+  }
+}
+
+/**
+ * Adds a notification to the notification center.
+ * @param dispatch The dispatch function.
+ * @param options The notification options.
+ */
+export function addNotification(
+  dispatch: Dispatch<AddNotifyAction>,
+  options: AddNotifyAction['payload'],
+) {
+  dispatch({ type: 'ADD_NOTIFICATION', payload: { ...options } })
+}
+
+/**
+ * Removes a notification from the notification center.
+ * @param dispatch The dispatch function.
+ * @param id The id of the notification to remove.
+ */
+export function removeNotification(
+  dispatch: Dispatch<RemoveNotifyAction>,
+  id: RemoveNotifyAction['payload']['id'],
+) {
+  dispatch({ type: 'REMOVE_NOTIFICATION', payload: { id } })
+}
+
+/**
+ * Updates a notification in the notification center.
+ * @param dispatch The dispatch function.
+ * @param options The notification options.
+ */
+export function updateNotificationState(
+  dispatch: Dispatch<UpdateNotifyAction>,
+  options: UpdateNotifyAction['payload'],
+) {
+  dispatch({ type: 'UPDATE_NOTIFICATION', payload: { ...options } })
+}
+
+/**
+ * Clears the notification state.
+ * @param dispatch The dispatch function.
+ */
+export function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>) {
+  dispatch({ type: 'CLEAR_NOTIFICATIONS' })
+}

package/src/context/notification-center/types.ts

@@ -0,0 +1,28 @@
+import type { NotifyOptions } from '../notification-center'
+
+export type NotificationsStore = NotificationOption[]
+
+export type NotificationOption = NotifyOptions & {
+  state: 'open' | 'closed'
+}
+
+// Actions
+
+export type AddNotifyAction = {
+  type: 'ADD_NOTIFICATION'
+  payload: NotificationOption
+}
+
+export type RemoveNotifyAction = {
+  type: 'REMOVE_NOTIFICATION'
+  payload: { id: Required<NotificationOption['id']> }
+}
+
+export type UpdateNotifyAction = {
+  type: 'UPDATE_NOTIFICATION'
+  payload: {
+    id: Required<NotificationOption['id']>
+  } & Partial<NotificationOption>
+}
+
+export type ClearNotifyAction = { type: 'CLEAR_NOTIFICATIONS' }

package/src/context/notification-center.tsx

@@ -5,7 +5,7 @@ import {
   useCallback,
   useContext,
   useMemo,
-  useState,
+  useReducer,
   type MouseEvent,
   type PropsWithChildren,
   type ReactNode,
@@ -19,6 +19,13 @@ import { Portal, type PortalProps } from '../components/Portal'
 import { notification } from '@cerberus/styled-system/recipes'
 import { Button } from '../components/Button'
 import { cx } from '@cerberus/styled-system/css'
+import {
+  addNotification,
+  clearNotificationState,
+  notificationCenterReducer,
+  removeNotification,
+  updateNotificationState,
+} from './notification-center/store'
 
 /**
  * This module provides a context and hook for notifications.
@@ -55,7 +62,13 @@ export interface NotificationsValue {
 
 const NotificationsContext = createContext<NotificationsValue | null>(null)
 
-export type NotificationsProviderProps = PortalProps
+export type NotificationsProviderProps = PortalProps & {
+  /**
+   * The duration in milliseconds to show the notification.
+   * @default 6000
+   */
+  duration?: number
+}
 
 /**
  * Provides a notification center to the app.
@@ -82,35 +95,58 @@ export type NotificationsProviderProps = PortalProps
 export function NotificationCenter(
   props: PropsWithChildren<NotificationsProviderProps>,
 ) {
-  const [activeNotifications, setActiveNotifications] = useState<
-    NotifyOptions[]
-  >([])
+  const [state, dispatch] = useReducer(notificationCenterReducer, [])
   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 timeout = useMemo<number>(
+    () => props.duration || 6000,
+    [props.duration],
+  )
 
-  const handleCloseAll = useCallback(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose()
+  const closeNotification = useCallback(
+    (id: string) => {
+      updateNotificationState(dispatch, {
+        id,
+        state: 'closed',
+      })
+      window.setTimeout(() => {
+        removeNotification(dispatch, id)
+      }, 150)
+    },
+    [dispatch],
+  )
+
+  const handleNotify = useCallback(
+    (options: NotifyOptions) => {
+      const id = `${options.palette}:${state.length + 1}`
+      addNotification(dispatch, {
+        ...options,
+        id,
+        state: 'open',
       })
-      return []
+
+      window.setTimeout(() => {
+        closeNotification(id)
+      }, timeout)
+    },
+    [dispatch, state, timeout, closeNotification],
+  )
+
+  const handleClose = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = e.currentTarget as HTMLButtonElement
+      closeNotification(target.value)
+    },
+    [closeNotification],
+  )
+
+  const handleCloseAll = useCallback(() => {
+    state.forEach((item) => {
+      if (item.onClose) item.onClose()
     })
-  }, [])
+    // we don't want to animate out for this one
+    clearNotificationState(dispatch)
+  }, [state, dispatch])
 
   const value = useMemo(
     () => ({
@@ -126,10 +162,10 @@ export function NotificationCenter(
     <NotificationsContext.Provider value={value}>
       {props.children}
 
-      <Show when={activeNotifications.length > 0}>
+      <Show when={state.length > 0}>
         <Portal container={props.container}>
           <div className={styles.center}>
-            <Show when={activeNotifications.length >= 4}>
+            <Show when={state.length >= 4}>
               <Button
                 className={cx(styles.closeAll, animateIn())}
                 onClick={handleCloseAll}
@@ -151,11 +187,12 @@ export function NotificationCenter(
                 alignItems: 'flex-end',
               }}
             >
-              {activeNotifications.map((option) => (
+              {state.map((option) => (
                 <MatchNotification
                   key={option.id}
                   {...option}
                   onClose={handleClose}
+                  open={option.state}
                 />
               ))}
             </div>
@@ -167,23 +204,27 @@ export function NotificationCenter(
 }
 
 interface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {
+  open: 'open' | 'closed'
   onClose: (e: MouseEvent<HTMLButtonElement>) => void
   key: string | undefined
 }
 
 function MatchNotification(props: MatchNotificationProps) {
-  const { palette, id, onClose, heading, description } = props
+  const { palette, id, onClose, heading, description, open } = props
+  const sharedProps = useMemo(
+    () => ({
+      id: id!,
+      open: true,
+      onClose,
+      'data-state': open,
+    }),
+    [id, open, onClose],
+  )
 
   switch (palette) {
     case 'success':
       return (
-        <Notification
-          id={id!}
-          key={id}
-          onClose={onClose}
-          open
-          palette="success"
-        >
+        <Notification {...sharedProps} palette="success">
           <NotificationHeading palette="success">{heading}</NotificationHeading>
           <NotificationDescription palette="success">
             {description}
@@ -193,13 +234,7 @@ function MatchNotification(props: MatchNotificationProps) {
 
     case 'warning':
       return (
-        <Notification
-          id={id!}
-          key={id}
-          onClose={onClose}
-          open
-          palette="warning"
-        >
+        <Notification {...sharedProps} palette="warning">
           <NotificationHeading palette="warning">{heading}</NotificationHeading>
           <NotificationDescription palette="warning">
             {description}
@@ -209,7 +244,7 @@ function MatchNotification(props: MatchNotificationProps) {
 
     case 'danger':
       return (
-        <Notification id={id!} key={id} onClose={onClose} open palette="danger">
+        <Notification {...sharedProps} palette="danger">
           <NotificationHeading palette="danger">{heading}</NotificationHeading>
           <NotificationDescription palette="danger">
             {description}
@@ -220,7 +255,7 @@ function MatchNotification(props: MatchNotificationProps) {
     case 'info':
     default:
       return (
-        <Notification id={id!} key={id} onClose={onClose} open palette="info">
+        <Notification {...sharedProps} palette="info">
           <NotificationHeading palette="info">{heading}</NotificationHeading>
           <NotificationDescription palette="info">
             {description}