@cerberus-design/react 0.7.4 → 0.8.0-next-a23daaf

package/src/components/Droppable.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'
+import { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'
+
+export interface DroppableProps
+  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,
+    UseDroppableArguments {
+  dropped?: boolean
+}
+
+export function Droppable(props: PropsWithChildren<DroppableProps>) {
+  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =
+    props
+  const uuid = useId()
+  const { isOver, setNodeRef } = useDroppable({
+    data,
+    disabled,
+    id: id || uuid,
+    resizeObserverConfig,
+  })
+
+  return (
+    <div
+      {...nativeProps}
+      data-over={isOver}
+      data-dropped={dropped}
+      ref={setNodeRef}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/components/FileUploader.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { cx } from '@cerberus/styled-system/css'
+import { circle, vstack } from '@cerberus/styled-system/patterns'
+import { type InputHTMLAttributes } from 'react'
+import { Show } from './Show'
+import { fileUploader, modalIcon } from '@cerberus/styled-system/recipes'
+import { $cerberusIcons } from '../config/defineIcons'
+
+export interface FileUploaderProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  heading?: string
+  name: string
+}
+
+export function FileUploader(props: FileUploaderProps) {
+  const styles = fileUploader()
+  const Icon = $cerberusIcons.fileUploader
+
+  return (
+    <div
+      className={cx(
+        vstack({
+          justify: 'center',
+        }),
+        styles.container,
+      )}
+    >
+      <span className={cx(styles.icon, modalIcon(), circle())}>
+        <Icon />
+      </span>
+
+      <label
+        className={cx(
+          vstack({
+            justify: 'center',
+          }),
+          styles.label,
+        )}
+        htmlFor={props.name}
+      >
+        <Show when={Boolean(props.heading)}>
+          <p className={styles.heading}>{props.heading}</p>
+        </Show>
+        Import {props.accept?.replace(',', ', ')} files
+        <p className={styles.description}>Or click to upload</p>
+        <input
+          {...props}
+          className={cx(props.className, styles.input)}
+          type="file"
+        />
+      </label>
+    </div>
+  )
+}

package/src/components/Notification.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { cx } from '@cerberus/styled-system/css'
+import { hstack, vstack } from '@cerberus/styled-system/patterns'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus/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/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus/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/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus/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/components/Table.tsx

@@ -0,0 +1,58 @@
+import { cx } from '@cerberus/styled-system/css'
+import { table } from '@cerberus/styled-system/recipes'
+import type { PropsWithChildren, TableHTMLAttributes } from 'react'
+
+/**
+ * This module contains the table component.
+ * @module
+ */
+
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  caption: string
+}
+
+/**
+ * The Table component is used to render a table.
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @prop caption - An easy to understand description of the table.
+ * @example
+ * ```tsx
+ * <Table caption="Basic Table">
+ *  {children}
+ * </Table>
+ * ```
+ */
+export function Table(props: PropsWithChildren<TableProps>) {
+  const { caption, children, ...nativeProps } = props
+  const styles = table()
+
+  return (
+    <div className={styles.container}>
+      <table
+        {...nativeProps}
+        className={cx(nativeProps.className, styles.table)}
+      >
+        <caption className={styles.caption}>{caption}</caption>
+        {children}
+      </table>
+    </div>
+  )
+}
+
+// We only provide this for consistency with the rest of the components
+
+export type TrProps = TableHTMLAttributes<HTMLTableRowElement>
+
+/**
+ * The Tr component is used to render a table row.
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @example
+ * ```tsx
+ * <Tr>
+ *  {children}
+ * </Tr>
+ * ```
+ */
+export function Tr(props: PropsWithChildren<TrProps>) {
+  return <tr {...props} />
+}

package/src/components/Tbody.tsx

@@ -0,0 +1,31 @@
+import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import type { TableHTMLAttributes } from 'react'
+
+export type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>
+export type TbodyProps = TbodyBaseProps & TbodyVariantProps
+
+/**
+ * The TBody component is used to render a table body.
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @example
+ * ```tsx
+ * <TBody>
+ *  {children}
+ * </TBody>
+ * ```
+ */
+export function Tbody(props: TbodyProps) {
+  const { decoration, ...nativeProps } = props
+  return (
+    <tbody
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        tbody({
+          decoration,
+        }),
+      )}
+    />
+  )
+}

package/src/components/Td.tsx

@@ -0,0 +1,34 @@
+import { cx } from '@cerberus/styled-system/css'
+import { td, type TdVariantProps } from '@cerberus/styled-system/recipes'
+import type { TableHTMLAttributes } from 'react'
+
+/**
+ * Th component for the Td component
+ * @module
+ */
+
+export type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>
+export type TdProps = TdBaseProps & TdVariantProps
+
+/**
+ * Styles for the Th component
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @example
+ * ```tsx
+ * <Td>Data cell</Td>
+ * ```
+ */
+export function Td(props: TdProps) {
+  const { size, ...nativeProps } = props
+  return (
+    <td
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        td({
+          size,
+        }),
+      )}
+    />
+  )
+}

package/src/components/Th.tsx

@@ -0,0 +1,56 @@
+import { css, cx } from '@cerberus/styled-system/css'
+import { th, type ThVariantProps } from '@cerberus/styled-system/recipes'
+import type { MouseEvent, TableHTMLAttributes } from 'react'
+import { Show } from './Show'
+
+/**
+ * Th component for the Table component
+ * @module
+ */
+
+export type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+}
+export type ThProps = ThBaseProps & ThVariantProps
+
+/**
+ * Styles for the Th component
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @example
+ * ```tsx
+ * <Th>Header 1</Th>
+ * ```
+ */
+export function Th(props: ThProps) {
+  const { size, onClick, ...nativeProps } = props
+  return (
+    <Show
+      when={Boolean(onClick)}
+      fallback={
+        <th
+          {...nativeProps}
+          className={cx(nativeProps.className, th({ size }))}
+        />
+      }
+    >
+      <th {...nativeProps}>
+        <button
+          className={cx(
+            nativeProps.className,
+            th({ size }),
+            css({
+              alignItems: 'center',
+              display: 'inline-flex',
+              justifyContent: 'space-between',
+              userSelect: 'none',
+              w: 'full',
+            }),
+          )}
+          onClick={onClick}
+        >
+          {props.children}
+        </button>
+      </th>
+    </Show>
+  )
+}

package/src/components/Thead.tsx

@@ -0,0 +1,24 @@
+import { cx } from '@cerberus/styled-system/css'
+import { thead } from '@cerberus/styled-system/recipes'
+import type { TableHTMLAttributes } from 'react'
+
+/**
+ * This module contains the Thead component.
+ * @module
+ */
+
+export type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>
+
+/**
+ * The Thead component is used to render a table header.
+ * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @example
+ * ```tsx
+ * <Thead>
+ *  {children}
+ * </Thead>
+ * ```
+ */
+export function Thead(props: TheadProps) {
+  return <thead {...props} className={cx(props.className, thead())} />
+}

package/src/config/cerbIcons.ts

@@ -1,21 +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
-  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,
   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/styled-system/patterns'
+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'
+
+/**
+ * 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
+}