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

package/src/context/feature-flags.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-import { createContext, useContext, type PropsWithChildren } from 'react'
-
-/**
- * This module provides a context and hook for feature flags.
- * @module
- */
-
-export interface FeatureFlagValue {
-  [key: string]: boolean
-}
-
-const FeatureFlagContext = createContext<FeatureFlagValue | null>(null)
-
-export interface FeatureFlagProviderProps {
-  flags: FeatureFlagValue
-}
-
-/**
- * Provides feature flags to the application.
- * @see https://cerberus.digitalu.design/react/feature-flags
- * @example
- * ```tsx
- * // This should be a JSON file or a server response.
- * const flags = {
- *  featureOne: true,
- *  featureTwo: false
- * }
- *
- * // Wrap the Provider around the root of your application.
- * <FeatureFlags flags={flags}>
- *    <FeatureFlag flag="featureOne">
- *      This is visible.
- *    </FeatureFlag>
- *   <FeatureFlag flag="featureTwo">
- *     This is hidden.
- *   </FeatureFlag>
- * </FeatureFlags>
- * ```
- */
-export function FeatureFlags(
-  props: PropsWithChildren<FeatureFlagProviderProps>,
-) {
-  return (
-    <FeatureFlagContext.Provider value={props.flags}>
-      {props.children}
-    </FeatureFlagContext.Provider>
-  )
-}
-
-/**
- * Used to retrieve the context of the FeatureFlags provider.
- */
-export function useFeatureFlags(key: string): boolean {
-  const context = useContext(FeatureFlagContext)
-  if (context === null) {
-    throw new Error(
-      'useFeatureFlag must be used within a FeatureFlags Provider',
-    )
-  }
-  return context[key] ?? false
-}

package/src/context/field.tsx

@@ -1,70 +0,0 @@
-'use client'
-
-import type { FieldRootProps } from '@ark-ui/react/field'
-import {
-  createContext,
-  useContext,
-  useMemo,
-  type PropsWithChildren,
-} from 'react'
-import { FieldRoot } from '../components/field/primitives'
-
-/**
- * This module provides a context and hook for the field.
- * @module Field
- */
-
-export interface FieldContextValue {
-  /**
-   * Whether the field is disabled.
-   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
-   */
-  disabled?: boolean
-  /**
-   * Whether the field is read-only.
-   */
-  readOnly?: boolean
-  /**
-   * Whether the field is required.
-   */
-  required?: boolean
-  /**
-   * Whether the field is invalid.
-   */
-  invalid?: boolean
-}
-
-const FieldContext = createContext<FieldContextValue | null>(null)
-
-/**
- * @deprecated use FieldRoot or FieldParts instead
- */
-export function FieldProvider(props: PropsWithChildren<FieldRootProps>) {
-  const value = useMemo(
-    () => ({
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required,
-      invalid: props.invalid,
-    }),
-    [props.disabled, props.readOnly, props.required, props.invalid],
-  )
-
-  return (
-    <FieldContext.Provider value={value}>
-      <FieldRoot {...props} />
-    </FieldContext.Provider>
-  )
-}
-
-/**
- * Used to access the field context.
- * @returns The field context.
- */
-export function useFieldContext(): FieldContextValue {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error('useFieldContext must be used within a Field Provider.')
-  }
-  return context
-}

package/src/context/navMenu.tsx

@@ -1,89 +0,0 @@
-'use client'
-
-import { css } from 'styled-system/css'
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-  type PropsWithChildren,
-  type RefObject,
-} from 'react'
-
-/**
- * This module provides a context and hook for the nav menu.
- * @module NavMenu
- */
-
-export type NavTriggerRef = RefObject<HTMLButtonElement | null>
-export type NavMenuRef = RefObject<HTMLUListElement | null>
-
-export interface NavMenuContextValue {
-  /**
-   * The ref for the trigger button.
-   */
-  triggerRef: NavTriggerRef
-  /**
-   * The ref for the menu.
-   */
-  menuRef: NavMenuRef
-  /**
-   * Whether the menu is expanded.
-   */
-  expanded: boolean
-  /**
-   * Called when the menu button is clicked.
-   */
-  onToggle: () => void
-}
-
-const NavMenuContext = createContext<NavMenuContextValue | null>(null)
-
-/**
- * @deprecated use the {@link Menu} family instead
- */
-export function NavMenu(props: PropsWithChildren) {
-  const triggerRef = useRef<HTMLButtonElement | null>(null)
-  const menuRef = useRef<HTMLUListElement | null>(null)
-  const [expanded, setExpanded] = useState<boolean>(false)
-
-  const handleToggle = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-
-  const value = useMemo(
-    () => ({
-      triggerRef,
-      menuRef,
-      expanded,
-      onToggle: handleToggle,
-    }),
-    [expanded, handleToggle],
-  )
-
-  return (
-    <NavMenuContext.Provider value={value}>
-      <nav
-        className={css({
-          position: 'relative',
-        })}
-      >
-        {props.children}
-      </nav>
-    </NavMenuContext.Provider>
-  )
-}
-
-/**
- * Used to access the nav menu context.
- * @returns The nav menu context.
- */
-export function useNavMenuContext(): NavMenuContextValue {
-  const context = useContext(NavMenuContext)
-  if (!context) {
-    throw new Error('useNavMenuContext must be used within a NavMenu.')
-  }
-  return context
-}

package/src/context/prompt-modal.tsx

@@ -1,315 +0,0 @@
-'use client'
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-  type ChangeEvent,
-  type MouseEvent,
-  type PropsWithChildren,
-} from 'react'
-import { DialogCloseTrigger } from '@ark-ui/react/dialog'
-import { HStack, VStack } from 'styled-system/jsx'
-import { css } from 'styled-system/css'
-import { hstack } from 'styled-system/patterns'
-import { FieldLabel, FieldRoot, Input } from '../components/field/index'
-import { Button } from '../components/button/button'
-import { Clipboard } from '../components/clipboard/index'
-import { Show } from '../components/show/index'
-import { Avatar } from '../components/avatar/avatar'
-import { Text } from '../components/text/index'
-import { IconButton } from '../components/icon-button/index'
-import {
-  Dialog,
-  DialogDescription,
-  DialogHeading,
-  DialogProvider,
-  DialogRootProps,
-} from '../components/dialog/index'
-import { useCerberusContext } from './cerberus'
-
-/**
- * This module provides a context and hook for the prompt modal.
- * @module PromptModal
- */
-
-export interface ShowPromptModalOptions {
-  /**
-   * The kind of prompt modal to show.
-   * @default 'non-destructive'
-   */
-  kind?: 'destructive' | 'non-destructive'
-  /**
-   * The heading of the prompt modal.
-   */
-  heading: string
-  /**
-   * The description of the prompt modal.
-   */
-  description?: string
-  /**
-   * The key to confirm the action.
-   */
-  key: string
-  /**
-   * The text for the action button.
-   */
-  actionText: string
-  /**
-   * The text for the cancel button.
-   */
-  cancelText: string
-}
-export type PromptShowResult =
-  | ((value: string | PromiseLike<string>) => void)
-  | null
-
-export interface PromptModalValue {
-  /**
-   * The method to trigger the prompt modal.
-   * @returns the value of the key if the action is confirmed.
-   * @example
-   * ```tsx
-   * const accepted = await prompt.show({
-   *  kind: 'destructive',
-   *  heading: 'Delete channel?',
-   *  description:
-   *   'This will permanently delete a channel on your account. There is no going back.',
-   *  key: CHANNEL_NAME,
-   *  actionText: 'Yes, delete channel',
-   *  cancelText: 'No, cancel',
-   * })
-   */
-  show: (options: ShowPromptModalOptions) => Promise<string>
-}
-
-const PromptModalContext = createContext<PromptModalValue | null>(null)
-
-export type PromptModalProviderProps = PropsWithChildren<DialogRootProps>
-
-/**
- * Provides a prompt modal to the app.
- * @see https://cerberus.digitalu.design/react/prompt-modal
- * @example
- * ```tsx
- * // Wrap the Provider around the root of the feature.
- * <PromptModal>
- *   <SomeFeatureSection />
- * </PromptModal>
- *
- * // Use the hook to show the prompt modal.
- * const prompt = usePromptModal()
- *
- * const handleClick = useCallback(async () => {
- *  const accepted = await prompt.show({
- *   kind: 'destructive',
- *   heading: 'Delete channel?',
- *  description:
- *   'This will permanently delete a channel on your account. There is no going back.',
- * key: CHANNEL_NAME,
- * actionText: 'Yes, delete channel',
- * cancelText: 'No, cancel',
- * })
- * // do something with accepted
- * }, [prompt])
- * ```
- */
-export function PromptModal(
-  props: PropsWithChildren<PromptModalProviderProps>,
-) {
-  const { children, ...rootProps } = props
-
-  const [open, setOpen] = useState<boolean>(false)
-  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
-  const [inputValue, setInputValue] = useState<string>('')
-
-  const resolveRef = useRef<PromptShowResult>(null)
-
-  const { icons } = useCerberusContext()
-  const { promptModal: PromptIcon } = icons
-
-  const isValid = useMemo(
-    () => inputValue === content?.key,
-    [inputValue, content],
-  )
-
-  const palette = useMemo(
-    () => (content?.kind === 'destructive' ? 'danger' : 'action'),
-    [content],
-  )
-
-  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.currentTarget.value)
-  }, [])
-
-  const handleChoice = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      const target = e.currentTarget as HTMLButtonElement
-      if (target.value === 'true') {
-        resolveRef.current?.(inputValue)
-      }
-      setOpen(false)
-    },
-    [inputValue, setOpen],
-  )
-
-  const handleShow = useCallback(
-    (options: ShowPromptModalOptions) => {
-      return new Promise<string>((resolve) => {
-        setContent({ ...options, kind: options.kind || 'non-destructive' })
-        setOpen(true)
-        resolveRef.current = resolve
-      })
-    },
-    [setOpen],
-  )
-
-  const value = useMemo(
-    () => ({
-      show: handleShow,
-    }),
-    [handleShow],
-  )
-
-  return (
-    <PromptModalContext.Provider value={value}>
-      {children}
-
-      <DialogProvider
-        lazyMount
-        open={open}
-        onOpenChange={(e) => setOpen(e.open)}
-        unmountOnExit
-        {...rootProps}
-      >
-        <Dialog
-          size="sm"
-          style={{
-            '--dialog-content-min-h': 'auto',
-          }}
-        >
-          <VStack
-            alignItems="flex-start"
-            h="full"
-            justify="space-between"
-            w="full"
-          >
-            <HStack
-              alignSelf="center"
-              justify="center"
-              paddingBlockEnd="md"
-              w="full"
-            >
-              <Show
-                when={palette === 'danger'}
-                fallback={
-                  <Avatar
-                    gradient="charon-light"
-                    fallback={<PromptIcon size={24} />}
-                  />
-                }
-              >
-                <Avatar
-                  gradient="hades-dark"
-                  fallback={<PromptIcon size={24} />}
-                />
-              </Show>
-            </HStack>
-
-            <DialogHeading>{content?.heading}</DialogHeading>
-            <DialogDescription>{content?.description}</DialogDescription>
-
-            <VStack
-              alignItems="flex-start"
-              marginBlockStart="md"
-              marginBlockEnd="lg"
-              w="full"
-            >
-              <FieldRoot invalid={!isValid}>
-                <FieldLabel
-                  className={hstack({
-                    gap: 'xs',
-                    justify: 'flex-start',
-                    marginBlockEnd: 'xs',
-                    textStyle: 'label-md',
-                    w: 'initial',
-                  })}
-                >
-                  Type
-                  <Clipboard.Root value={content?.key || ''}>
-                    <Clipboard.Control asChild>
-                      <HStack gap="xs" w="full">
-                        <Clipboard.Label asChild>
-                          <Text as="strong" userSelect="text">
-                            {content?.key}
-                          </Text>
-                        </Clipboard.Label>
-
-                        <Clipboard.Trigger asChild>
-                          <IconButton
-                            clipboard
-                            shape="square"
-                            size="sm"
-                            rounded="xs"
-                          >
-                            <Clipboard.Indicator />
-                          </IconButton>
-                        </Clipboard.Trigger>
-                      </HStack>
-                    </Clipboard.Control>
-                  </Clipboard.Root>
-                  to confirm
-                </FieldLabel>
-                <Input name="confirm" onChange={handleChange} type="text" />
-              </FieldRoot>
-            </VStack>
-
-            <HStack gap="md" justify="stretch" w="full">
-              <Button
-                autoFocus
-                className={css({
-                  w: '1/2',
-                })}
-                disabled={!isValid}
-                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>
-    </PromptModalContext.Provider>
-  )
-}
-
-/**
- * Used to retrieve the context of the PromptModal provider.
- */
-export function usePromptModal(): PromptModalValue {
-  const context = useContext(PromptModalContext)
-  if (context === null) {
-    throw new Error('usePromptModal must be used within a PromptModal Provider')
-  }
-  return context
-}

package/src/context/theme.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-import { createContext, useContext, type PropsWithChildren } from 'react'
-import { useTheme, type UseThemeOptions } from '../hooks/useTheme'
-
-/**
- * This module provides a context and hook for the theme.
- * @module Theme
- */
-
-export type DefaultThemes = 'cerberus' | 'acheron' | 'elysium'
-export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K
-export type ColorModes = 'light' | 'dark' | 'system'
-
-export interface ThemeContextValue<T extends string = DefaultThemes> {
-  /**
-   * The current theme.
-   */
-  theme: CustomThemes<T>
-  /**
-   * The current color mode.
-   */
-  mode: ColorModes
-  /**
-   * Called when the theme is updated.
-   */
-  updateTheme: (theme: T) => void
-  /**
-   * Called when the color mode is updated.
-   */
-  updateMode: (mode: ColorModes) => void
-}
-
-const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
-  null,
-)
-
-export interface ThemeProviderProps extends UseThemeOptions {
-  /**
-   * The default theme.
-   */
-  defaultTheme?: DefaultThemes
-  /**
-   * The default color mode.
-   */
-  defaultColorMode?: ColorModes
-}
-
-/**
- * A context provider that allows the user to set the theme and mode of the
- * application.
- * @see https://cerberus.digitalu.design/react/use-theme-context
- * @example
- * ```tsx
- * <ThemeProvider>
- *  <App />
- * </ThemeProvider>
- * ```
- */
-export function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>) {
-  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
-    cache: props.cache,
-    updateMode: props.updateMode,
-    updateTheme: props.updateTheme,
-  }) as ThemeContextValue<DefaultThemes>
-
-  return (
-    <ThemeContext.Provider value={state}>
-      {props.children}
-    </ThemeContext.Provider>
-  )
-}
-
-/**
- * Used to access the theme context.
- */
-export function useThemeContext(): ThemeContextValue<DefaultThemes> {
-  const context = useContext(ThemeContext)
-  if (!context) {
-    throw new Error('useThemeContext must be used within a ThemeProvider')
-  }
-  return context
-}

package/src/hooks/useModal.ts

@@ -1,63 +0,0 @@
-'use client'
-
-import { useCallback, useMemo, useRef, useState, type RefObject } from 'react'
-
-/**
- * This module provides a hook for using a custom modal.
- * @module
- */
-
-export interface UseModalReturnValue {
-  /**
-   * The ref for the modal.
-   */
-  modalRef: RefObject<HTMLDialogElement | null>
-  /**
-   * Shows the modal.
-   */
-  show: () => void
-  /**
-   * Closes the modal.
-   */
-  close: () => void
-  /**
-   * Whether the modal is open based on the show and close methods.
-   */
-  isOpen: boolean
-}
-
-/**
- * Provides a hook for using a custom modal via the native dialog element
- * methods.
- *
- * Cerberus modals use the native dialog element. This hook
- * does not control the modal via React state but rather by calling the
- * native dialog element's `showModal` and `close` methods.
- *
- * @memberof module:Modal
- * @see https://cerberus.digitalu.design/react/modal
- * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
- */
-export function useModal(): UseModalReturnValue {
-  const modalRef = useRef<HTMLDialogElement | null>(null)
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-
-  const show = useCallback(() => {
-    modalRef.current?.showModal()
-    setIsOpen(true)
-  }, [])
-
-  const close = useCallback(() => {
-    modalRef.current?.close()
-    setIsOpen(false)
-  }, [])
-
-  return useMemo(() => {
-    return {
-      modalRef,
-      show,
-      close,
-      isOpen,
-    }
-  }, [modalRef, show, close, isOpen])
-}