@cerberus-design/react 1.0.0-rc.4 → 1.0.0-rc.6

package/src/config/defineIcons.ts

@@ -1,24 +0,0 @@
-import { defaultIcons } from './icons/default'
-import type { DefinedIcons, IconType } from './types'
-
-/**
- * Defines the icons that will be used in Cerberus React components via the
- * CerberusProvider.
- * @param icons The icons that will be used in Cerberus React components.
- * @returns Icons object compatible with the CerberusProvider SystemConfig.
- * @example
- * ```tsx
- * const icons = defineIcons({
- *  accordionIndicator: MyAccordionIndicatorIcon,
- *  ...
- * })
- * ```
- */
-export function defineIcons<T extends IconType>(
-  icons: DefinedIcons<T>,
-): Required<DefinedIcons<T>> {
-  return {
-    ...defaultIcons,
-    ...icons,
-  } as Required<DefinedIcons<T>>
-}

package/src/config/icons/checkbox.icons.tsx

@@ -1,98 +0,0 @@
-/**
- * This module contains substitute icons for the Checkbox component.
- * @module
- */
-
-/**
- * Checkmark icon for Checkbox component
- */
-export function CheckmarkIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      role="img"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
-      />
-    </svg>
-  )
-}
-
-/**
- * Indeterminate icon for Checkbox component
- */
-export function IndeterminateIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path fill="currentColor" d="M4 11h16v2.667H4z" />
-    </svg>
-  )
-}
-
-/**
- * Animated checkmark icon for Clipboard.Indicator component
- */
-export function AnimatedCheckmarkIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeDasharray={24}
-        strokeDashoffset={24}
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M5 11l6 6l10 -10"
-      >
-        <animate
-          fill="freeze"
-          attributeName="stroke-dashoffset"
-          dur="0.28s"
-          values="24;0"
-        ></animate>
-      </path>
-    </svg>
-  )
-}
-
-/**
- * Copy icon for Clipboard.Indicator component
- */
-export function CopyIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      role="img"
-      viewBox="0 0 32 32"
-    >
-      <title>copy</title>
-      <path
-        d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"
-        fill="currentColor"
-      />
-      <path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor" />
-      <path
-        fill="none"
-        d="M0 0h32v32H0z"
-        data-name="&lt;Transparent Rectangle&gt;"
-      />
-    </svg>
-  )
-}

package/src/config/icons/default.ts

@@ -1,69 +0,0 @@
-import {
-  Calendar,
-  CaretDown,
-  Checkmark,
-  CheckmarkOutline,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Close,
-  CloudUpload,
-  Information,
-  OverflowMenuVertical,
-  Restart,
-  TrashCan,
-  UserFilled,
-  Warning,
-  WarningAlt,
-  WarningFilled,
-} from '@carbon/icons-react'
-import { AnimatingUploadIcon } from '../../components/AnimatingUploadIcon'
-import { DefinedIcons } from '../types'
-import { CheckmarkIcon, IndeterminateIcon } from './checkbox.icons'
-import {
-  PinLeftFilledIcon,
-  PinLeftIcon,
-  PinRightFilledIcon,
-  PinRightIcon,
-} from './pinned.icons'
-import { SortAscIcon, SortDescIcon } from './sort.icons'
-
-/**
- * Fallback icons when there is no custom set provided by the user.
- */
-export const defaultIcons: Required<DefinedIcons> = {
-  accordionIndicator: ChevronDown,
-  avatar: UserFilled,
-  calendar: Calendar,
-  calendarPrev: ChevronLeft,
-  calendarNext: ChevronRight,
-  caretDown: CaretDown,
-  checkbox: CheckmarkIcon,
-  close: Close,
-  confirmModal: Information,
-  dangerNotification: WarningFilled,
-  decrement: ChevronDown,
-  delete: TrashCan,
-  fileUploader: AnimatingUploadIcon,
-  increment: ChevronUp,
-  indeterminate: IndeterminateIcon,
-  infoNotification: Information,
-  invalid: WarningFilled,
-  invalidAlt: Warning,
-  moreVertical: OverflowMenuVertical,
-  pinLeft: PinLeftIcon,
-  pinLeftFilled: PinLeftFilledIcon,
-  pinRight: PinRightIcon,
-  pinRightFilled: PinRightFilledIcon,
-  promptModal: Information,
-  redo: Restart,
-  selectArrow: ChevronDown,
-  selectChecked: Checkmark,
-  sortAsc: SortAscIcon,
-  sortDesc: SortDescIcon,
-  successNotification: CheckmarkOutline,
-  toggleChecked: Checkmark,
-  waitingFileUploader: CloudUpload,
-  warningNotification: WarningAlt,
-}

package/src/config/icons/pinned.icons.tsx

@@ -1,31 +0,0 @@
-import { CarbonIconProps, Pin, PinFilled } from '@carbon/icons-react'
-import { PropsWithChildren } from 'react'
-import { Box } from 'styled-system/jsx'
-
-export function PinLeftIcon(props: CarbonIconProps) {
-  return <Pin {...props} />
-}
-
-export function PinLeftFilledIcon(props: CarbonIconProps) {
-  return <PinFilled {...props} />
-}
-
-export function PinRightIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <Pin {...props} />
-    </FlippedContainer>
-  )
-}
-
-export function PinRightFilledIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <PinFilled {...props} />
-    </FlippedContainer>
-  )
-}
-
-function FlippedContainer(props: PropsWithChildren) {
-  return <Box transform="scaleX(-1)" {...props} />
-}

package/src/config/icons/sort.icons.tsx

@@ -1,19 +0,0 @@
-import { CarbonIconProps, SortAscending } from '@carbon/icons-react'
-import { PropsWithChildren } from 'react'
-import { Box } from 'styled-system/jsx'
-
-export function SortAscIcon(props: CarbonIconProps) {
-  return <SortAscending {...props} />
-}
-
-export function SortDescIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <SortAscending {...props} />
-    </FlippedContainer>
-  )
-}
-
-function FlippedContainer(props: PropsWithChildren) {
-  return <Box transform="rotate(180deg)" {...props} />
-}

package/src/config/index.ts

@@ -1,41 +0,0 @@
-import { defaultIcons } from './icons/default'
-import type { SystemConfig } from './types'
-
-/**
- * Create a system configuration object to be used on the CerberusProvider.
- * @param options The system configuration options you want to customize.
- * @returns A CerberusProvider-compatible system configuration object.
- * @example
- * ```tsx
- * const icons = defineIcons({
- *  accordionIndicator: MyAccordionIndicatorIcon,
- *  ...
- * })
- * const config = makeSystemConfig({
- *   icons,
- * })
- *
- * // In your app
- * <CerberusProvider config={config}>
- *  <App />
- * </CerberusProvider>
- * ```
- */
-export function makeSystemConfig(options?: SystemConfig): SystemConfig {
-  if (!options) {
-    return {
-      icons: defaultIcons,
-    }
-  }
-
-  return {
-    ...options,
-    icons: {
-      ...defaultIcons,
-      ...options.icons,
-    },
-  }
-}
-
-export * from './defineIcons'
-export * from './types'

package/src/config/types.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-
-/**
- * This module contains the types for the Cerberus React configuration.
- * @module config.types
- */
-
-export interface SystemConfig {
-  /**
-   * The icons that will be used in Cerberus React components.
-   */
-  icons: Required<DefinedIcons>
-}
-
-export interface DefinedIcons<T extends IconType = IconType> {
-  accordionIndicator?: T
-  avatar?: T
-  calendar?: T
-  calendarPrev?: T
-  calendarNext?: T
-  caretDown?: T
-  checkbox?: T
-  close?: T
-  confirmModal?: T
-  decrement?: T
-  delete?: T
-  dangerNotification?: T
-  fileUploader?: T
-  indeterminate?: T
-  increment?: T
-  infoNotification?: T
-  invalid?: T
-  invalidAlt?: T
-  moreVertical?: T
-  pinLeft?: T
-  pinLeftFilled?: T
-  pinRight?: T
-  pinRightFilled?: T
-  promptModal?: T
-  redo?: T
-  selectArrow?: T
-  selectChecked?: T
-  sortAsc?: T
-  sortDesc?: T
-  successNotification?: T
-  toggleChecked?: T
-  waitingFileUploader?: T
-  warningNotification?: T
-}
-
-// types
-
-export type IconType = ElementType

package/src/context/cerberus.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-import {
-  createContext,
-  useContext,
-  useMemo,
-  type PropsWithChildren,
-} from 'react'
-import { makeSystemConfig, type SystemConfig } from '../config'
-
-/**
- * This  module contains the Cerberus configuration context and helpers.
- * @module context/cerberus
- */
-
-type CerberusContextValue = SystemConfig
-
-const CerberusContext = createContext<CerberusContextValue | null>(null)
-
-interface CerberusProviderProps {
-  config?: SystemConfig
-}
-
-/**
- * Cerberus configuration provider.
- * @param props.config The Cerberus configuration created with
- * `makeSystemConfig` helper.
- */
-export function CerberusProvider(
-  props: PropsWithChildren<CerberusProviderProps>,
-) {
-  const value = useMemo(() => {
-    return props.config || makeSystemConfig()
-  }, [props.config])
-
-  return (
-    <CerberusContext.Provider value={value}>
-      {props.children}
-    </CerberusContext.Provider>
-  )
-}
-
-/**
- * Returns the Cerberus configuration context.
- * @returns The Cerberus configuration context.
- */
-export function useCerberusContext() {
-  const context = useContext(CerberusContext)
-  if (!context) {
-    throw new Error('useCerberus must be used within a CerberusProvider')
-  }
-  return context
-}

package/src/context/confirm-modal.tsx

@@ -1,276 +0,0 @@
-'use client'
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-  type MouseEvent,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react'
-import { css } from 'styled-system/css'
-import { HStack, VStack } from 'styled-system/jsx'
-import { Button } from '../components/button/button'
-import { Show } from '../components/show/index'
-import { Avatar } from '../components/avatar/avatar'
-import {
-  Dialog,
-  DialogCloseTrigger,
-  DialogDescription,
-  DialogHeading,
-  DialogProvider,
-  type OpenChangeDetails,
-  type DialogRootProps,
-} from '../components/dialog'
-import { useCerberusContext } from './cerberus'
-
-/**
- * This module provides a context and hook for the confirm modal.
- * @module
- */
-
-export interface BaseConfirmOptions {
-  /**
-   * The heading of the confirm modal.
-   */
-  heading: string
-  /**
-   * The text for the action button.
-   */
-  actionText: string
-  /**
-   * The text for the cancel button.
-   */
-  cancelText: string
-  /**
-   * Whether to show the avatar icon at the top of the modal.
-   * @default true
-   */
-  showAvatar?: boolean
-}
-
-export interface DestructiveConfirmOptions extends BaseConfirmOptions {
-  /**
-   * The kind of confirm modal to show.
-   */
-  kind?: 'destructive'
-  /**
-   * The description of the confirm modal. Can only be a string for destructive confirm modals.
-   */
-  description?: ReactNode
-}
-
-export interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
-  /**
-   * The kind of confirm modal to show.
-   * @default 'non-destructive'
-   */
-  kind?: 'non-destructive'
-  /**
-   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
-   * @example
-   * ```tsx
-   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
-   */
-  description?: ReactNode
-}
-
-export type ShowConfirmModalOptions =
-  | NonDestructiveConfirmModalOptions
-  | DestructiveConfirmOptions
-
-export type ShowResult = ((value: boolean | null) => void) | null
-
-export interface ConfirmModalValue {
-  show: (options: ShowConfirmModalOptions) => Promise<boolean | null>
-}
-
-const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
-
-export type ConfirmModalProviderProps = PropsWithChildren<DialogRootProps>
-
-/**
- * Provides a confirm modal to the app.
- * @see https://cerberus.digitalu.design/react/confirm-modal
- * @example
- * ```tsx
- * // Wrap the Provider around the root of the feature.
- * <ConfirmModal>
- *   <SomeFeatureSection />
- * </ConfirmModal>
- *
- * // Use the hook to show the confirm modal.
- * const confirm = useConfirmModal()
- *
- * const handleClick = useCallback(async () => {
- *  const userConsent = await confirm.show({
- *   heading: 'Add new payment method?',
- *  description:
- *   'This will add a new payment method to your account to be billed for future purchases.',
- * actionText: 'Yes, add payment method',
- * cancelText: 'No, cancel',
- * })
- * setConsent(userConsent)
- * }, [confirm])
- * ```
- */
-export function ConfirmModal(
-  props: PropsWithChildren<ConfirmModalProviderProps>,
-) {
-  const { children, ...rootProps } = props
-  const [open, setOpen] = useState<boolean>(false)
-  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
-
-  const resolveRef = useRef<ShowResult>(null)
-
-  const showAvatar = content?.showAvatar ?? true
-  const kind = content?.kind ?? 'non-destructive'
-
-  const { icons } = useCerberusContext()
-  const { confirmModal: ConfirmIcon } = icons
-
-  const palette = useMemo(
-    () => (kind === 'destructive' ? 'danger' : 'action'),
-    [kind],
-  )
-
-  const handleChoice = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      const target = e.currentTarget as HTMLButtonElement
-      if (target.value === 'true') {
-        resolveRef.current?.(true)
-      }
-      resolveRef.current?.(false)
-      setOpen(false)
-    },
-    [setOpen],
-  )
-
-  const handleShow = useCallback(
-    (options: ShowConfirmModalOptions) => {
-      return new Promise<boolean | null>((resolve) => {
-        setContent({ ...options })
-        setOpen(true)
-        resolveRef.current = resolve
-      })
-    },
-    [setOpen, setContent],
-  )
-
-  const handleOpenChange = useCallback(
-    ({ open }: OpenChangeDetails) => {
-      setOpen(open)
-      if (!open) {
-        resolveRef.current?.(null)
-        resolveRef.current = null
-      }
-    },
-    [setOpen],
-  )
-
-  const value = useMemo(
-    () => ({
-      show: handleShow,
-    }),
-    [handleShow],
-  )
-
-  return (
-    <ConfirmModalContext.Provider value={value}>
-      {children}
-
-      <DialogProvider
-        lazyMount
-        open={open}
-        onOpenChange={handleOpenChange}
-        unmountOnExit
-        {...rootProps}
-      >
-        <Dialog
-          size="sm"
-          style={{
-            '--dialog-content-min-h': 'auto',
-          }}
-        >
-          <VStack
-            alignItems="flex-start"
-            gap="md"
-            justify="space-between"
-            w="full"
-          >
-            <Show when={showAvatar}>
-              <HStack
-                alignSelf="center"
-                justify="center"
-                paddingBlockEnd="md"
-                w="full"
-              >
-                <Show
-                  when={palette === 'danger'}
-                  fallback={
-                    <Avatar
-                      gradient="charon-light"
-                      fallback={<ConfirmIcon size={24} />}
-                    />
-                  }
-                >
-                  <Avatar
-                    gradient="hades-dark"
-                    fallback={<ConfirmIcon size={24} />}
-                  />
-                </Show>
-              </HStack>
-            </Show>
-
-            <DialogHeading>{content?.heading}</DialogHeading>
-
-            <Show when={content?.description}>
-              <DialogDescription>{content?.description}</DialogDescription>
-            </Show>
-
-            <HStack gap="md" pt="md" w="full">
-              <Button
-                autoFocus
-                className={css({
-                  w: '1/2',
-                })}
-                name="confirm"
-                onClick={handleChoice}
-                palette={palette}
-                value="true"
-              >
-                {content?.actionText}
-              </Button>
-              <DialogCloseTrigger asChild>
-                <Button
-                  className={css({
-                    w: '1/2',
-                  })}
-                  name="cancel"
-                  onClick={handleChoice}
-                  usage="outlined"
-                  value="false"
-                >
-                  {content?.cancelText}
-                </Button>
-              </DialogCloseTrigger>
-            </HStack>
-          </VStack>
-        </Dialog>
-      </DialogProvider>
-    </ConfirmModalContext.Provider>
-  )
-}
-
-export function useConfirmModal(): ConfirmModalValue {
-  const context = useContext(ConfirmModalContext)
-  if (context === null) {
-    throw new Error(
-      'useConfirmModal must be used within a ConfirmModal Provider',
-    )
-  }
-  return context
-}