@cerberus-design/react 0.11.1-next-2ed68bd → 0.11.1-next-c28b077

package/src/context/cta-modal.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  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 { 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'
+
+/**
+ * This module provides a context and hook for the cta modal.
+ * @module
+ */
+
+export interface ShowCTAModalOptions {
+  /**
+   * The heading of the cta modal.
+   */
+  heading: string
+  /**
+   * The description of the cta modal.
+   */
+  description?: string
+  /**
+   * The icon used for the modal Avatar.
+   */
+  icon?: ReactNode
+  /**
+   * The actions for the cta modal. Max of 2 actions.
+   */
+  actions: {
+    text: string
+    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>
+  }[]
+}
+
+export interface CTAModalValue {
+  show: (options: ShowCTAModalOptions) => void
+}
+
+const CTAModalContext = createContext<CTAModalValue | null>(null)
+
+export interface CTAModalProviderProps {}
+
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
+  const { modalRef, show, close } = useModal()
+  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
+  const focusTrap = trapFocus(modalRef)
+  const FallbackIcon = $cerberusIcons.confirmModal
+  const confirmIcon = content?.icon as ReactNode
+  const { close: CloseIcon } = $cerberusIcons
+
+  const handleShow = useCallback(
+    (options: ShowCTAModalOptions) => {
+      const maxActions = 2
+      if (options.actions.length > maxActions) {
+        throw new Error(
+          `CTA Modal only supports a maximum of ${maxActions} actions.`,
+        )
+      }
+      setContent({ ...options })
+      show()
+    },
+    [show],
+  )
+
+  const handleActionClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      const index = event.currentTarget.getAttribute('data-index')
+      const action = content?.actions[Number(index)]
+      if (typeof action?.onClick === 'function') {
+        action.onClick(event)
+      }
+      close()
+    },
+    [content, close],
+  )
+
+  const value = useMemo(
+    () => ({
+      show: handleShow,
+    }),
+    [handleShow],
+  )
+
+  return (
+    <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>
+
+          <ModalHeader>
+            <HStack justify="center" w="full">
+              <Avatar
+                ariaLabel=""
+                gradient="charon-light"
+                icon={
+                  <Show
+                    when={Boolean(confirmIcon)}
+                    fallback={<FallbackIcon size={24} />}
+                  >
+                    {confirmIcon}
+                  </Show>
+                }
+                src=""
+              />
+            </HStack>
+            <VStack gap="lg" w="full">
+              <ModalHeading>{content?.heading}</ModalHeading>
+              <ModalDescription>{content?.description}</ModalDescription>
+            </VStack>
+          </ModalHeader>
+
+          <HStack gap="md" pt="sm" w="full">
+            <Show when={Boolean(content?.actions?.length)}>
+              {content?.actions?.map((action, index) => (
+                <Button
+                  data-index={index}
+                  className={css({
+                    w: '1/2',
+                  })}
+                  key={index}
+                  onClick={handleActionClick}
+                  shape="rounded"
+                  usage="outlined"
+                >
+                  {action.text}
+                </Button>
+              ))}
+            </Show>
+          </HStack>
+        </Modal>
+      </Portal>
+    </CTAModalContext.Provider>
+  )
+}
+
+export function useCTAModal(): CTAModalValue {
+  const context = useContext(CTAModalContext)
+  if (context === null) {
+    throw new Error('useCTAModal must be used within a CTAModal Provider')
+  }
+  return context
+}

package/src/index.ts

@@ -52,6 +52,7 @@ export * from './components/Show'
 // context
 
 export * from './context/confirm-modal'
+export * from './context/cta-modal'
 export * from './context/feature-flags'
 export * from './context/field'
 export * from './context/navMenu'

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = props.palette || 'info'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key] as IconType\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <Close />\n      </button>\n    </dialog>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AACP,SAAS,aAAa;AAcb,cAsCL,YAtCK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,SAAM;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}