@cerberus-design/react 0.18.3 → 0.19.0

package/src/components/fieldset/primitives.tsx

@@ -1,76 +1,57 @@
 import {
   Fieldset,
-  type FieldsetHelperTextProps,
-  type FieldsetLegendProps,
-  type FieldsetRootProps,
+  type FieldsetHelperTextProps as ArkFieldsetHelperText,
+  type FieldsetLegendProps as ArkFieldsetLegendProps,
+  type FieldsetRootProps as ArkFieldsetRootProps,
 } from '@ark-ui/react/fieldset'
-import { cx } from 'styled-system/css'
 import { fieldset, type FieldsetVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains all the primitives of the Fieldset component.
  * @module 'react/fieldset'
  */
 
-/**
- * The context & container for the Fieldset components.
- * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
- * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
- */
-export function FieldsetRoot(props: FieldsetRootProps) {
-  const styles = fieldset()
-  return (
-    <Fieldset.Root {...props} className={cx(styles.root, props.className)} />
-  )
-}
+const { withSlotRecipe } = createCerberusPrimitive(fieldset)
 
-/**
- * The legend element for the Fieldset group.
- * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
- * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
- */
-export function FieldsetLegend(
-  props: FieldsetLegendProps & FieldsetVariantProps,
-) {
-  const { usage, ...legendProps } = props
-  const styles = fieldset({ usage })
-  return (
-    <Fieldset.Legend
-      {...legendProps}
-      className={cx(styles.legend, legendProps.className)}
-    />
-  )
-}
+// Root
 
-/**
- * The description element for the Fieldset group.
- * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
- * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
- */
-export function FieldsetHelperText(
-  props: FieldsetHelperTextProps & FieldsetVariantProps,
-) {
-  const { usage, ...helperTextProps } = props
-  const styles = fieldset({ usage })
-  return (
-    <Fieldset.HelperText
-      {...helperTextProps}
-      className={cx(styles.helperText, helperTextProps.className)}
-    />
-  )
-}
+export const FieldsetRoot = withSlotRecipe<FieldsetRootProps>(
+  Fieldset.Root,
+  'root',
+)
+export type FieldsetRootProps = CerberusPrimitiveProps<
+  ArkFieldsetRootProps & FieldsetVariantProps
+>
 
-/**
- * The error text element for the Fieldset group.
- * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
- * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
- */
-export function FieldsetErrorText(props: FieldsetHelperTextProps) {
-  const styles = fieldset()
-  return (
-    <Fieldset.ErrorText
-      {...props}
-      className={cx(styles.errorText, props.className)}
-    />
-  )
-}
+// Legend
+
+export type FieldsetLegendProps = CerberusPrimitiveProps<
+  ArkFieldsetLegendProps & FieldsetVariantProps
+>
+export const FieldsetLegend = withSlotRecipe<FieldsetLegendProps>(
+  Fieldset.Legend,
+  'legend',
+)
+
+// Helper Text
+
+export type FieldsetHelperTextProps = CerberusPrimitiveProps<
+  ArkFieldsetHelperText & FieldsetVariantProps
+>
+export const FieldsetHelperText = withSlotRecipe<FieldsetHelperTextProps>(
+  Fieldset.HelperText,
+  'helperText',
+)
+
+// Error Text
+
+export type FieldsetErrorTextProps =
+  CerberusPrimitiveProps<ArkFieldsetHelperText>
+export const FieldsetErrorText = withSlotRecipe<FieldsetErrorTextProps>(
+  Fieldset.ErrorText,
+  'errorText',
+)

package/src/components/file-upload/file-status.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import {
+  useCallback,
+  useMemo,
+  type HTMLAttributes,
+  type MouseEvent,
+} from 'react'
+import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
+import { css, cx } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
+import { useCerberusContext } from '../../context/cerberus'
+import { ProgressBar, type ProgressBarProps } from '../progress/index'
+import { IconButton } from '../icon-button/index'
+import { Avatar } from '../avatar/avatar'
+import { Field, FieldHelperText } from '../field/index'
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+
+/**
+ * The available values of the fileStatus helper Object.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]
+
+/**
+ * The actions that can be performed on a file.
+ */
+export type FileStatusActions = 'cancel' | 'retry' | 'delete'
+export interface FileBaseStatusProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * A unique identifier for the file status. Required for accessibility.
+   */
+  id: string
+  /**
+   * The name of the file.
+   */
+  file: string
+  /**
+   * The percentage of the file that has been processed.
+   */
+  now: ProgressBarProps['now']
+  /**
+   * The status of the file.
+   */
+  status: processStatus
+  /**
+   * The action to perform on the file when a user clicks the
+   * button located at the end of the status card.
+   * @param status - The status of the file.
+   * @param e - The event object.
+   * @example
+   * ```tsx
+   * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+   * ```
+   * @default () => {}
+   */
+  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+}
+export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps
+
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export const enum processStatus {
+  TODO = 'todo',
+  PROCESSING = 'processing',
+  DONE = 'done',
+  ERROR = 'error',
+}
+
+/**
+ * A component that displays the status of a file during file processing.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+export function FileStatus(props: FileStatusProps) {
+  const { file, now, status, onClick, ...nativeProps } = props
+  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])
+  const palette = useMemo(() => getPalette(status), [status])
+  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])
+  const styles = useMemo(() => {
+    switch (status) {
+      case processStatus.TODO:
+        return fileStatus({ status: 'todo' })
+      case processStatus.PROCESSING:
+        return fileStatus({ status: 'processing' })
+      case processStatus.DONE:
+        return fileStatus({ status: 'done' })
+      case processStatus.ERROR:
+        return fileStatus({ status: 'error' })
+      default:
+        return fileStatus()
+    }
+  }, [status])
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const actionStatus = getStatusActionLabel(
+        status,
+      ).toLocaleLowerCase() as FileStatusActions
+      onClick(actionStatus, e)
+    },
+    [onClick, status],
+  )
+
+  return (
+    <div
+      {...nativeProps}
+      className={cx(nativeProps.className, styles.root, hstack())}
+    >
+      <Avatar
+        gradient={modalIconPalette}
+        fallback={<MatchFileStatusIcon size={24} status={status} />}
+      />
+
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '0.12rem',
+          w: 'full',
+        })}
+      >
+        <small
+          className={css({
+            color: 'page.text.initial',
+            textStyle: 'label-sm',
+          })}
+        >
+          {file}
+        </small>
+        <ProgressBar
+          id={props.id}
+          label="File upload status"
+          now={now}
+          size="sm"
+        />
+        <Field label="" invalid={modalIconPalette === 'hades-dark'}>
+          <FieldHelperText
+            className={css({
+              color: 'page.text.100',
+            })}
+            id={`help:${file}`}
+          >
+            <MatchFileStatusText status={status} now={now} />
+          </FieldHelperText>
+        </Field>
+      </div>
+
+      <IconButton
+        ariaLabel={actionLabel}
+        onClick={handleClick}
+        palette={palette}
+        size="sm"
+      >
+        <MatchStatusAction status={status} />
+      </IconButton>
+    </div>
+  )
+}
+
+interface FileStatusElProps {
+  status: FileStatusProps['status']
+  size?: 16 | 20 | 24 | 32
+  now?: number
+}
+
+function MatchFileStatusIcon(props: FileStatusElProps) {
+  const { icons } = useCerberusContext()
+  const {
+    waitingFileUploader: TodoIcon,
+    fileUploader: FileUploaderIcon,
+    invalidAlt: InvalidIcon,
+    successNotification: DoneIcon,
+  } = icons
+
+  switch (props.status) {
+    case processStatus.TODO:
+      return <TodoIcon size={props.size} />
+    case processStatus.PROCESSING:
+      return <FileUploaderIcon size={props.size} />
+    case processStatus.DONE:
+      return <DoneIcon size={props.size} />
+    case processStatus.ERROR:
+      return <InvalidIcon size={props.size} />
+    default:
+      throw new Error('Unknown status')
+  }
+}
+
+function MatchFileStatusText(props: FileStatusElProps) {
+  switch (props.status) {
+    case processStatus.TODO:
+      return 'Waiting to upload'
+    case processStatus.PROCESSING:
+      return `${props.now}% Complete`
+    case processStatus.DONE:
+      return 'File uploaded successfully'
+    case processStatus.ERROR:
+      return 'There was an error uploading the file'
+    default:
+      throw new Error('Invalid status')
+  }
+}
+
+function MatchStatusAction(props: FileStatusElProps) {
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons
+  switch (props.status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return <CloseIcon />
+    case processStatus.ERROR:
+      return <RedoIcon />
+    case processStatus.DONE:
+      return <TrashIcon />
+    default:
+      throw new Error('Invalid status')
+  }
+}
+
+function getStatusActionLabel(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'Cancel'
+    case processStatus.ERROR:
+      return 'Retry'
+    case processStatus.DONE:
+      return 'Delete'
+    default:
+      return ''
+  }
+}
+
+function getPalette(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'danger'
+    case processStatus.ERROR:
+      return 'action'
+    case processStatus.DONE:
+      return 'danger'
+    default:
+      return 'action'
+  }
+}
+
+function getModalIconPalette(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'charon-light'
+    case processStatus.ERROR:
+      return 'hades-dark'
+    case processStatus.DONE:
+      return 'thanatos-light'
+    default:
+      return 'charon-light'
+  }
+}

package/src/components/file-upload/file-uploader.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { cx } from 'styled-system/css'
+import { vstack } from 'styled-system/patterns'
+import { fileUploader } from 'styled-system/recipes'
+import { type InputHTMLAttributes } from 'react'
+import { Show } from '../show/index'
+import { useCerberusContext } from '../../context/cerberus'
+import { Avatar } from '../avatar/avatar'
+
+export interface FileUploaderProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * The optional heading to display in the FileUploader component.
+   */
+  heading?: string
+  /**
+   * The name of the file input element.
+   */
+  name: string
+  /**
+   * Disable the FileUploader component. Good for single-use file uploads.
+   */
+  disabled?: boolean
+}
+
+/**
+ * A component that allows the user to upload files.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ */
+export function FileUploader(props: FileUploaderProps) {
+  const { icons } = useCerberusContext()
+  const styles = fileUploader()
+  const { waitingFileUploader: Icon } = icons
+
+  return (
+    <div
+      {...(props.disabled ? { 'aria-disabled': true } : {})}
+      className={cx(
+        vstack({
+          justify: 'center',
+        }),
+        styles.container,
+      )}
+    >
+      <div className={styles.icon}>
+        <Avatar gradient="charon-light" fallback={<Icon />} />
+      </div>
+
+      <label
+        className={cx(
+          vstack({
+            justify: 'center',
+          }),
+          styles.label,
+        )}
+        htmlFor={props.name}
+      >
+        <Show when={props.heading}>
+          <p className={styles.heading}>{props.heading}</p>
+        </Show>
+        Import {props.accept?.replace(',', ', ')} files
+        <p className={styles.description}>Click to select files</p>
+        <input
+          {...props}
+          className={cx(props.className, styles.input)}
+          type="file"
+        />
+      </label>
+    </div>
+  )
+}

package/src/components/file-upload/index.ts

@@ -0,0 +1,2 @@
+export * from './file-status'
+export * from './file-uploader'

package/src/components/for/index.ts

@@ -0,0 +1 @@
+export * from './for'

package/src/components/icon-button/button.tsx

@@ -0,0 +1,24 @@
+import { IconButtonRoot, type IconButtonRootProps } from './primitives'
+
+/**
+ * This module contains the Icon Button component.
+ * @module
+ */
+
+export interface IconButtonProps extends IconButtonRootProps {
+  /**
+   * The aria-label attribute for the icon button.
+   */
+  ariaLabel: string
+}
+
+/**
+ * A component that allows the user to perform actions using an icon
+ * @see https://cerberus.digitalu.design/react/icon-button
+ */
+export function IconButton(props: IconButtonProps) {
+  const { ariaLabel, ...rootProps } = props
+  return (
+    <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />
+  )
+}

package/src/components/icon-button/index.tsx

@@ -0,0 +1,2 @@
+export * from './button'
+export * from './primitives'

package/src/components/icon-button/primitives.ts

@@ -0,0 +1,21 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains the IconButton component primitives.
+ * @module @cerberus-design/react/components/icon-button/primitives
+ */
+
+const { withRecipe } = createCerberusPrimitive(iconButton)
+
+/**
+ * The root element of the Button component.
+ */
+export type IconButtonRootProps = CerberusPrimitiveProps<
+  HTMLArkProps<'button'> & IconButtonVariantProps
+>
+export const IconButtonRoot = withRecipe(ark.button)

package/src/components/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './primitives'
+export * from './menu'

package/src/components/menu/menu.tsx

@@ -0,0 +1,144 @@
+import {
+  MenuContentEl,
+  MenuItemEl,
+  MenuItemGroupEl,
+  MenuItemGroupLabelEl,
+  MenuPositioner,
+  MenuRoot,
+  MenuSeparatorEl,
+  MenuTriggerEl,
+  type MenuContentProps,
+  type MenuTriggerProps,
+} from './primitives'
+
+/**
+ * This module contains the Menu named abstractions component.
+ * @module @cerberus-design/react/components/menu
+ */
+
+/**
+ * The root Menu component which controls the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>Trigger</MenuTrigger>
+ * </Menu>
+ */
+export const Menu = MenuRoot
+
+/**
+ * The MenuTrigger component opens/closes the Menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ * </Menu>
+ */
+export function MenuTrigger(props: MenuTriggerProps) {
+  return <MenuTriggerEl {...props} asChild />
+}
+
+/**
+ * The MenuContent component is the container for the menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuContent(props: MenuContentProps) {
+  return (
+    <MenuPositioner>
+      <MenuContentEl {...props} />
+    </MenuPositioner>
+  )
+}
+
+/**
+ * The MenuItem component is a single item in the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuItem = MenuItemEl
+
+/**
+ * The MenuItemGroup component is a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuItemGroup = MenuItemGroupEl
+
+/**
+ * The MenuItemGroupLabel component is the label for a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuGroupLabel = MenuItemGroupLabelEl
+
+/**
+ * The MenuSeparator component is a visual divider between menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *    <MenuItemGroup>
+ *      <MenuGroupLabel>Group Label</MenuGroupLabel>
+ *      <MenuSeparator />
+ *      <MenuItem value="item_1">Item 1</MenuItem>
+ *      <MenuItem value="item_2">Item 2</MenuItem>
+ *    </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuSeparator = MenuSeparatorEl