@cerberus-design/react 0.6.1-next-1315bf2 → 0.6.1-next-2d28489

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.6.1-next-1315bf2",
+  "version": "0.6.1-next-2d28489",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.6.1-next-1315bf2"
+    "@cerberus-design/styled-system": "0.6.1-next-2d28489"
   },
   "publishConfig": {
     "access": "public"

package/src/config/cerbIcons.ts

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

package/src/context/confirm-modal.tsx

@@ -164,14 +164,14 @@ export function ConfirmModal(
 
 // This is to help show the variant styles for the icon since Panda is
 // not syncing correctly for the danger variant.
-function ConfirmModalIcon(props: ConfirmModalVariantProps) {
+export function ConfirmModalIcon(props: ConfirmModalVariantProps) {
   const InfoIcon = $cerberusIcons.confirmModal
   return (
     <Show
       when={props.palette === 'danger'}
       fallback={
         <div className={cx(confirmModal().icon, circle())}>
-          <InfoIcon />
+          <InfoIcon size={24} />
         </div>
       }
     >
@@ -188,7 +188,7 @@ function ConfirmModalIcon(props: ConfirmModalVariantProps) {
           color: 'var(--cerberus-colors-danger-text-100)',
         }}
       >
-        <InfoIcon />
+        <InfoIcon size={24} />
       </div>
     </Show>
   )

package/src/context/prompt-modal.tsx

@@ -0,0 +1,254 @@
+'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, cx } from '@cerberus-design/styled-system/css'
+import { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import {
+  confirmModal,
+  type ConfirmModalVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { Input } from '../components/Input'
+import { Field } from './field'
+import { Label } from '../components/Label'
+import { ConfirmModalIcon } from './confirm-modal'
+import { $cerberusIcons } from '../config/defineIcons'
+import { Show } from '../components/Show'
+
+/**
+ * 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 dialogRef = useRef<HTMLDialogElement>(null)
+  const resolveRef = useRef<PromptShowResult>(null)
+  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
+  const [inputValue, setInputValue] = useState<string>('')
+  const focusTrap = trapFocus(dialogRef)
+
+  const isValid = useMemo(
+    () => inputValue === content?.key,
+    [inputValue, content],
+  )
+
+  const palette = useMemo(
+    () => (content?.kind === 'destructive' ? 'danger' : 'action'),
+    [content],
+  )
+  const styles = confirmModal({ palette })
+
+  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)
+      }
+      dialogRef?.current?.close()
+    },
+    [inputValue],
+  )
+
+  const handleShow = useCallback((options: ShowPromptModalOptions) => {
+    return new Promise<string>((resolve) => {
+      setContent({ ...options, kind: options.kind || 'non-destructive' })
+      dialogRef?.current?.showModal()
+      resolveRef.current = resolve
+    })
+  }, [])
+
+  const value = useMemo(
+    () => ({
+      show: handleShow,
+    }),
+    [handleShow],
+  )
+
+  return (
+    <PromptModalContext.Provider value={value}>
+      {props.children}
+
+      <Portal>
+        <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>
+          <div
+            className={vstack({
+              alignItems: 'flex-start',
+              gap: '4',
+            })}
+          >
+            <ConfirmModalIcon palette={palette} />
+            <h2 className={styles.heading}>{content?.heading}</h2>
+            <p className={styles.description}>{content?.description}</p>
+          </div>
+
+          <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>
+        </dialog>
+      </Portal>
+    </PromptModalContext.Provider>
+  )
+}
+
+// This is to help show the variant styles for the icon since Panda is
+// not syncing correctly for the danger variant.
+export function PromptModalIcon(props: ConfirmModalVariantProps) {
+  const PromptIcon = $cerberusIcons.promptModal
+  return (
+    <Show
+      when={props.palette === 'danger'}
+      fallback={
+        <div className={cx(confirmModal().icon, circle())}>
+          <PromptIcon size={24} />
+        </div>
+      }
+    >
+      <div
+        className={cx(
+          confirmModal({
+            palette: 'danger',
+          }).icon,
+          circle({
+            bgColor: 'danger.surface.initial',
+          }),
+        )}
+        style={{
+          color: 'var(--cerberus-colors-danger-text-100)',
+        }}
+      >
+        <PromptIcon size={24} />
+      </div>
+    </Show>
+  )
+}
+
+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/index.ts

@@ -30,6 +30,7 @@ export * from './context/confirm-modal'
 export * from './context/feature-flags'
 export * from './context/field'
 export * from './context/navMenu'
+export * from './context/prompt-modal'
 export * from './context/tabs'
 export * from './context/theme'
 

package/build/legacy/chunk-SCAVVE6E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AASA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AASA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}