@cerberus-design/react 0.6.1 → 0.7.0

package/src/components/TabPanel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { css, cx } from '@cerberus/styled-system/css'
+import { cx } from '@cerberus/styled-system/css'
 import { useMemo, type HTMLAttributes } from 'react'
 import { useTabsContext } from '../context/tabs'
 import { Show } from './Show'
@@ -26,7 +26,7 @@ export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export function TabPanel(props: TabPanelProps) {
   const { tab, ...nativeProps } = props
-  const { active } = useTabsContext()
+  const { active, styles } = useTabsContext()
   const isActive = useMemo(() => active === tab, [active, tab])
 
   return (
@@ -35,18 +35,7 @@ export function TabPanel(props: TabPanelProps) {
         {...nativeProps}
         {...(isActive && { tabIndex: 0 })}
         aria-labelledby={tab}
-        className={cx(
-          nativeProps.className,
-          css({
-            rounded: 'md',
-            _focusVisible: {
-              boxShadow: 'none',
-              outline: '3px solid',
-              outlineColor: 'action.border.focus',
-              outlineOffset: '2px',
-            },
-          }),
-        )}
+        className={cx(nativeProps.className, styles.tabPanel)}
         id={`panel:${tab}`}
         role="tabpanel"
       />

package/src/components/Tag.tsx

@@ -37,7 +37,7 @@ export type TagProps = StaticTagProps | ClickableTagProps
  */
 export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
-  const palette = props?.palette ?? 'neutral'
+  const palette = props?.palette ?? 'page'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
   const closableStyles = isClosable ? closableCss : ''

package/src/config/cerbIcons.ts

@@ -1,12 +1,21 @@
-import { Checkmark, WarningFilled, type CarbonIconType } from '@cerberus/icons'
+import {
+  Checkmark,
+  Information,
+  WarningFilled,
+  type CarbonIconType,
+} from '@cerberus/icons'
 import type { ElementType } from 'react'
 
 export interface DefinedIcons {
+  confirmModal?: CarbonIconType | ElementType
+  promptModal?: CarbonIconType | ElementType
   invalid: CarbonIconType | ElementType
-  toggleChecked: CarbonIconType | ElementType
+  toggleChecked?: CarbonIconType | ElementType
 }
 
 export const defaultIcons: DefinedIcons = {
+  confirmModal: Information,
+  promptModal: Information,
   invalid: WarningFilled,
   toggleChecked: Checkmark,
 }

package/src/config/defineIcons.ts

@@ -8,12 +8,15 @@ function _validateIconsProperties(icons: DefinedIcons) {
   }
 }
 
-export function defineIcons(icons: DefinedIcons): DefinedIcons {
+export function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {
   _validateIconsProperties(icons)
-  $cerberusIcons = icons
+  $cerberusIcons = {
+    ...defaultIcons,
+    ...icons,
+  } as Required<DefinedIcons>
   return $cerberusIcons
 }
 
 // Default icons
 
-export let $cerberusIcons: DefinedIcons = defaultIcons
+export let $cerberusIcons = defaultIcons as Required<DefinedIcons>

package/src/context/confirm-modal.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent,
+  type PropsWithChildren,
+} from 'react'
+import { Portal } from '../components/Portal'
+import { Button } from '../components/Button'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack } from '@cerberus-design/styled-system/patterns'
+import { $cerberusIcons } from '../config/defineIcons'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { ModalIcon } from '../components/ModalIcon'
+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'
+
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+
+export interface ShowConfirmModalOptions {
+  kind?: 'destructive' | 'non-destructive'
+  heading: string
+  description?: string
+  actionText: string
+  cancelText: string
+}
+export type ShowResult =
+  | ((value: boolean | PromiseLike<boolean>) => void)
+  | null
+
+export interface ConfirmModalValue {
+  show: (options: ShowConfirmModalOptions) => Promise<boolean>
+}
+
+const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
+
+export interface ConfirmModalProviderProps {}
+
+/**
+ * Provides a confirm modal to the app.
+ * @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 { modalRef, show, close } = useModal()
+  const resolveRef = useRef<ShowResult>(null)
+  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
+  const focusTrap = trapFocus(modalRef)
+  const ConfirmIcon = $cerberusIcons.confirmModal
+
+  const palette = useMemo(
+    () => (content?.kind === 'destructive' ? 'danger' : 'action'),
+    [content],
+  )
+
+  const handleChoice = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = e.currentTarget as HTMLButtonElement
+      if (target.value === 'true') {
+        resolveRef.current?.(true)
+      }
+      resolveRef.current?.(false)
+      close()
+    },
+    [close],
+  )
+
+  const handleShow = useCallback(
+    (options: ShowConfirmModalOptions) => {
+      return new Promise<boolean>((resolve) => {
+        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        show()
+        resolveRef.current = resolve
+      })
+    },
+    [show],
+  )
+
+  const value = useMemo(
+    () => ({
+      show: handleShow,
+    }),
+    [handleShow],
+  )
+
+  return (
+    <ConfirmModalContext.Provider value={value}>
+      {props.children}
+
+      <Portal>
+        <Modal onKeyDown={focusTrap} ref={modalRef}>
+          <ModalHeader>
+            <Show
+              when={palette === 'danger'}
+              fallback={
+                <ModalIcon palette="action">
+                  <ConfirmIcon size={24} />
+                </ModalIcon>
+              }
+            >
+              <ModalIcon palette="danger">
+                <ConfirmIcon size={24} />
+              </ModalIcon>
+            </Show>
+            <ModalHeading>{content?.heading}</ModalHeading>
+            <ModalDescription>{content?.description}</ModalDescription>
+          </ModalHeader>
+
+          <div
+            className={hstack({
+              gap: '4',
+            })}
+          >
+            <Button
+              autoFocus
+              className={css({
+                w: '1/2',
+              })}
+              name="confirm"
+              onClick={handleChoice}
+              palette={palette}
+              value="true"
+            >
+              {content?.actionText}
+            </Button>
+            <Button
+              className={css({
+                w: '1/2',
+              })}
+              name="cancel"
+              onClick={handleChoice}
+              usage="outlined"
+              value="false"
+            >
+              {content?.cancelText}
+            </Button>
+          </div>
+        </Modal>
+      </Portal>
+    </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
+}

package/src/context/feature-flags.tsx

@@ -0,0 +1,60 @@
+'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.
+ * @param flags - The flags data for the provider.
+ * @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>
+  )
+}
+
+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/prompt-modal.tsx

@@ -0,0 +1,232 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type MouseEvent,
+  type PropsWithChildren,
+} from 'react'
+import { Portal } from '../components/Portal'
+import { Button } from '../components/Button'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { Input } from '../components/Input'
+import { Field } from './field'
+import { Label } from '../components/Label'
+import { $cerberusIcons } from '../config/defineIcons'
+import { ModalIcon } from '../components/ModalIcon'
+import { Show } from '../components/Show'
+import { useModal } from '../hooks/useModal'
+import { Modal } from '../components/Modal'
+import { ModalHeader } from '../components/ModalHeader'
+import { ModalHeading } from '../components/ModalHeading'
+import { ModalDescription } from '../components/ModalDescription'
+
+/**
+ * This module provides a context and hook for the prompt modal.
+ * @module
+ */
+
+export interface ShowPromptModalOptions {
+  kind?: 'destructive' | 'non-destructive'
+  heading: string
+  description?: string
+  key: string
+  actionText: string
+  cancelText: string
+}
+export type PromptShowResult =
+  | ((value: string | PromiseLike<string>) => void)
+  | null
+
+export interface PromptModalValue {
+  show: (options: ShowPromptModalOptions) => Promise<string>
+}
+
+const PromptModalContext = createContext<PromptModalValue | null>(null)
+
+export interface PromptModalProviderProps {}
+
+/**
+ * Provides a prompt modal to the app.
+ * @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 { modalRef, show, close } = useModal()
+  const resolveRef = useRef<PromptShowResult>(null)
+  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
+  const [inputValue, setInputValue] = useState<string>('')
+  const focusTrap = trapFocus(modalRef)
+  const PromptIcon = $cerberusIcons.promptModal
+
+  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)
+    },
+    [content],
+  )
+
+  const handleChoice = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = e.currentTarget as HTMLButtonElement
+      if (target.value === 'true') {
+        resolveRef.current?.(inputValue)
+      }
+      close()
+    },
+    [inputValue, close],
+  )
+
+  const handleShow = useCallback(
+    (options: ShowPromptModalOptions) => {
+      return new Promise<string>((resolve) => {
+        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        show()
+        resolveRef.current = resolve
+      })
+    },
+    [show],
+  )
+
+  const value = useMemo(
+    () => ({
+      show: handleShow,
+    }),
+    [handleShow],
+  )
+
+  return (
+    <PromptModalContext.Provider value={value}>
+      {props.children}
+
+      <Portal>
+        <Modal onKeyDown={focusTrap} ref={modalRef}>
+          <ModalHeader>
+            <Show
+              when={palette === 'danger'}
+              fallback={
+                <ModalIcon palette="action">
+                  <PromptIcon size={24} />
+                </ModalIcon>
+              }
+            >
+              <ModalIcon palette="danger">
+                <PromptIcon size={24} />
+              </ModalIcon>
+            </Show>
+            <ModalHeading>{content?.heading}</ModalHeading>
+            <ModalDescription>{content?.description}</ModalDescription>
+          </ModalHeader>
+
+          <div
+            className={vstack({
+              alignItems: 'flex-start',
+              mt: '4',
+              mb: '8',
+            })}
+          >
+            <Field invalid={!isValid}>
+              <Label htmlFor="confirm" size="md">
+                Type
+                <strong
+                  className={css({
+                    textTransform: 'uppercase',
+                  })}
+                >
+                  {content?.key}
+                </strong>
+                to confirm
+              </Label>
+              <Input
+                id="confirm"
+                name="confirm"
+                onChange={handleChange}
+                type="text"
+              />
+            </Field>
+          </div>
+
+          <div
+            className={hstack({
+              justifyContent: 'stretch',
+              gap: '4',
+            })}
+          >
+            <Button
+              autoFocus
+              className={css({
+                w: '1/2',
+              })}
+              disabled={!isValid}
+              name="confirm"
+              onClick={handleChoice}
+              palette={palette}
+              value="true"
+            >
+              {content?.actionText}
+            </Button>
+            <Button
+              className={css({
+                w: '1/2',
+              })}
+              name="cancel"
+              onClick={handleChoice}
+              usage="outlined"
+              value="false"
+            >
+              {content?.cancelText}
+            </Button>
+          </div>
+        </Modal>
+      </Portal>
+    </PromptModalContext.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/tabs.tsx

@@ -1,5 +1,10 @@
 'use client'
 
+import {
+  tabs,
+  type TabsVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { Pretty } from '@cerberus-design/styled-system/types'
 import {
   createContext,
   useContext,
@@ -20,6 +25,7 @@ export interface TabsContextValue {
   tabs: MutableRefObject<HTMLButtonElement[]>
   id: string
   active: string
+  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>
   onTabUpdate: (active: string) => void
 }
 
@@ -33,6 +39,7 @@ export interface TabsProps {
 
 /**
  * The Tabs component provides a context to manage tab state.
+ * @param id - the id of the tabs component,
  * @param active - the default active tab id,
  * @param cache - whether to cache the active tab state in local storage
  * @example
@@ -49,22 +56,25 @@ export interface TabsProps {
  * </Tabs>
  * ```
  */
-export function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {
-  const { cache, active, id } = props
+export function Tabs(
+  props: PropsWithChildren<TabsProps & TabsVariantProps>,
+): JSX.Element {
+  const { cache, active, id, palette } = props
   const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))
-  const tabs = useRef<HTMLButtonElement[]>([])
+  const tabsList = useRef<HTMLButtonElement[]>([])
   const uuid = useMemo(() => {
     return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'
   }, [id])
 
   const value = useMemo(
     () => ({
-      tabs,
+      tabs: tabsList,
       id: uuid,
       active: activeTab,
+      styles: tabs({ palette }),
       onTabUpdate: setActiveTab,
     }),
-    [activeTab, setActiveTab, uuid, tabs],
+    [activeTab, setActiveTab, palette, uuid, tabsList],
   )
 
   // Get the active tab from local storage

package/src/hooks/useModal.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import { useCallback, useMemo, useRef, type RefObject } from 'react'
+
+/**
+ * This module provides a hook for using a custom modal.
+ * @module
+ */
+
+interface UseModalReturnValue {
+  modalRef: RefObject<HTMLDialogElement>
+  show: () => void
+  close: () => void
+}
+
+export function useModal(): UseModalReturnValue {
+  const modalRef = useRef<HTMLDialogElement | null>(null)
+
+  const show = useCallback(() => {
+    modalRef.current?.showModal()
+  }, [])
+
+  const close = useCallback(() => {
+    modalRef.current?.close()
+  }, [])
+
+  return useMemo(() => {
+    return {
+      modalRef,
+      show,
+      close,
+    }
+  }, [modalRef, show, close])
+}