@cerberus-design/react 0.17.2 → 0.18.0

package/build/modern/context/notification-center.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/deprecated/NotificationHeading'\nimport { NotificationDescription } from '../components/deprecated/NotificationDescription'\nimport { Notification } from '../components/deprecated/Notification'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { Button } from '../components/button/button'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * @deprecated\n */\nexport function NotificationCenter_deprecated(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\nexport function useNotificationCenter_deprecated(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

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

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

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

@@ -1,257 +0,0 @@
-'use client'
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useReducer,
-  type MouseEvent,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react'
-import { animateIn, vstack } from '@cerberus/styled-system/patterns'
-import { notification } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { Show } from '../components/Show'
-import { NotificationHeading } from '../components/deprecated/NotificationHeading'
-import { NotificationDescription } from '../components/deprecated/NotificationDescription'
-import { Notification } from '../components/deprecated/Notification'
-import { Portal, type PortalProps } from '../components/Portal'
-import { Button } from '../components/button/button'
-import {
-  addNotification,
-  clearNotificationState,
-  notificationCenterReducer,
-  removeNotification,
-  updateNotificationState,
-} from './notification-center/store'
-
-/**
- * This module provides a context and hook for notifications.
- * @module
- */
-
-export interface NotifyOptions {
-  /**
-   * The palette of the notification.
-   * @default 'info'
-   */
-  palette: 'info' | 'success' | 'warning' | 'danger'
-  /**
-   * The heading of the notification.
-   */
-  heading: string
-  /**
-   * The unique id of the notification.
-   */
-  id?: string
-  /**
-   * The description of the notification.
-   */
-  description?: ReactNode
-  /**
-   * The action to take when the notification is closed
-   */
-  onClose?: () => void
-}
-
-export interface NotificationsValue {
-  notify: (options: NotifyOptions) => void
-}
-
-const NotificationsContext = createContext<NotificationsValue | null>(null)
-
-export type NotificationsProviderProps = PortalProps & {
-  /**
-   * The duration in milliseconds to show the notification.
-   * @default 6000
-   */
-  duration?: number
-}
-
-/**
- * @deprecated
- */
-export function NotificationCenter_deprecated(
-  props: PropsWithChildren<NotificationsProviderProps>,
-) {
-  const [state, dispatch] = useReducer(notificationCenterReducer, [])
-  const styles = notification()
-
-  const timeout = useMemo<number>(
-    () => props.duration || 6000,
-    [props.duration],
-  )
-
-  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',
-      })
-
-      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(
-    () => ({
-      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={state.length > 0}>
-        <Portal container={props.container}>
-          <div className={styles.center}>
-            <Show when={state.length >= 4}>
-              <Button
-                className={cx(styles.closeAll, animateIn())}
-                onClick={handleCloseAll}
-                palette="action"
-                shape="rounded"
-                size="sm"
-                usage="ghost"
-              >
-                Close all
-              </Button>
-            </Show>
-
-            <div
-              className={vstack({
-                alignItems: 'flex-end',
-                gap: '4',
-              })}
-              style={{
-                alignItems: 'flex-end',
-              }}
-            >
-              {state.map((option) => (
-                <MatchNotification
-                  key={option.id}
-                  {...option}
-                  onClose={handleClose}
-                  open={option.state}
-                />
-              ))}
-            </div>
-          </div>
-        </Portal>
-      </Show>
-    </NotificationsContext.Provider>
-  )
-}
-
-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, open } = props
-  const sharedProps = useMemo(
-    () => ({
-      id: id!,
-      open: true,
-      onClose,
-      'data-state': open,
-    }),
-    [id, open, onClose],
-  )
-
-  switch (palette) {
-    case 'success':
-      return (
-        <Notification {...sharedProps} palette="success">
-          <NotificationHeading palette="success">{heading}</NotificationHeading>
-          <NotificationDescription palette="success">
-            {description}
-          </NotificationDescription>
-        </Notification>
-      )
-
-    case 'warning':
-      return (
-        <Notification {...sharedProps} palette="warning">
-          <NotificationHeading palette="warning">{heading}</NotificationHeading>
-          <NotificationDescription palette="warning">
-            {description}
-          </NotificationDescription>
-        </Notification>
-      )
-
-    case 'danger':
-      return (
-        <Notification {...sharedProps} palette="danger">
-          <NotificationHeading palette="danger">{heading}</NotificationHeading>
-          <NotificationDescription palette="danger">
-            {description}
-          </NotificationDescription>
-        </Notification>
-      )
-
-    case 'info':
-    default:
-      return (
-        <Notification {...sharedProps} palette="info">
-          <NotificationHeading palette="info">{heading}</NotificationHeading>
-          <NotificationDescription palette="info">
-            {description}
-          </NotificationDescription>
-        </Notification>
-      )
-  }
-}
-
-export function useNotificationCenter_deprecated(): NotificationsValue {
-  const context = useContext(NotificationsContext)
-  if (!context) {
-    throw new Error(
-      'useNotificationCenter must be used within a NotificationsProvider',
-    )
-  }
-  return context
-}