@cerberus-design/react 0.8.0 → 0.8.1

package/src/components/FileStatus.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import {
+  useCallback,
+  useMemo,
+  type HTMLAttributes,
+  type MouseEvent,
+} from 'react'
+import { ProgressBar } from './ProgressBar'
+import { IconButton } from './IconButton'
+import {
+  fileStatus,
+  type FileStatusVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { css, cx } from '@cerberus/styled-system/css'
+import { circle, hstack, vstack } from '@cerberus/styled-system/patterns'
+import { $cerberusIcons } from '../config/defineIcons'
+import { FieldMessage } from './FieldMessage'
+import { Field } from '../context/field'
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+
+export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]
+export type FileStatusActions = 'cancel' | 'retry' | 'delete'
+export interface FileBaseStatusProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  file: string
+  now: number
+  status: processStatus
+  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',
+}
+
+/**
+ * This component displays the status of a file.
+ * @param props - {
+ *  file: string,
+ *  now: number,
+ *  status: keyof typeof fileStatus,
+ *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+ * }.
+ * @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],
+  )
+
+  return (
+    <div
+      {...nativeProps}
+      className={cx(nativeProps.className, styles.root, hstack())}
+    >
+      <div
+        className={cx(
+          styles.icon,
+          circle({
+            size: '2rem',
+          }),
+        )}
+      >
+        <MatchFileStatusIcon status={status} />
+      </div>
+
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '0.12rem',
+          w: 'full',
+        })}
+      >
+        <small
+          className={css({
+            color: 'page.text.initial',
+            textStyle: 'label-sm',
+          })}
+        >
+          {file}
+        </small>
+        <ProgressBar now={now} size="sm" />
+        <Field invalid={modalIconPalette === 'danger'}>
+          <FieldMessage
+            className={css({
+              color: 'page.text.100',
+            })}
+            id={`help:${file}`}
+          >
+            <MatchFileStatusText status={status} now={now} />
+          </FieldMessage>
+        </Field>
+      </div>
+
+      <IconButton
+        ariaLabel={actionLabel}
+        onClick={handleClick}
+        palette={palette}
+        size="sm"
+      >
+        <MatchStatusAction status={status} />
+      </IconButton>
+    </div>
+  )
+}
+
+interface FileStatusElProps {
+  status: FileStatusProps['status']
+  now?: number
+}
+
+function MatchFileStatusIcon(props: FileStatusElProps) {
+  const {
+    fileUploader: FileUploaderIcon,
+    invalidAlt: InvalidIcon,
+    successNotification: DoneIcon,
+  } = $cerberusIcons
+
+  switch (props.status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return <FileUploaderIcon />
+    case processStatus.DONE:
+      return <DoneIcon />
+    case processStatus.ERROR:
+      return <InvalidIcon />
+    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 { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons
+  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 'action'
+    case processStatus.ERROR:
+      return 'danger'
+    case processStatus.DONE:
+      return 'success'
+    default:
+      return 'action'
+  }
+}

package/src/components/FileUploader.tsx

@@ -43,7 +43,7 @@ export function FileUploader(props: FileUploaderProps) {
           <p className={styles.heading}>{props.heading}</p>
         </Show>
         Import {props.accept?.replace(',', ', ')} files
-        <p className={styles.description}>Or click to upload</p>
+        <p className={styles.description}>Click to select files</p>
         <input
           {...props}
           className={cx(props.className, styles.input)}

package/src/components/Label.tsx

@@ -38,12 +38,13 @@ export function Label(props: PropsWithChildren<LabelProps>) {
   return (
     <label
       {...nativeProps}
-      data-disabled={disabled}
+      {...(disabled && { 'data-disabled': true })}
       className={cx(
         nativeProps.className,
         label({ size, usage }),
         hstack({
           justify: 'space-between',
+          w: 'full',
         }),
       )}
     >
@@ -51,7 +52,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'page.text.100',
+            color: 'inherit',
             fontSize: 'inherit',
           })}
         >

package/src/components/ModalIcon.tsx

@@ -6,8 +6,8 @@ import {
 } from '@cerberus/styled-system/recipes'
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 
-export type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>
-export type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps
+export type ModalIconProps = HTMLAttributes<HTMLDivElement> &
+  ModalIconVariantProps
 
 export function ModalIcon(props: PropsWithChildren<ModalIconProps>) {
   const { palette, ...nativeProps } = props

package/src/components/ProgressBar.tsx

@@ -0,0 +1,61 @@
+import { cx } from '@cerberus/styled-system/css'
+import {
+  progressBar,
+  type ProgressBarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+
+export interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}
+export type NonIndeterminateProgressBarProps = {
+  indeterminate?: never
+  now: number
+}
+export type IndeterminateProgressBarProps = {
+  indeterminate: true
+  now?: never
+}
+export type ProgressBarProps = ProgressBarBaseProps &
+  ProgressBarVariantProps &
+  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)
+
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+export function ProgressBar(props: ProgressBarProps) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props
+  const styles = progressBar({ size, usage })
+  const nowClamped = Math.min(100, Math.max(0, now || 0))
+  const width = {
+    width: indeterminate ? '50%' : `${nowClamped}%`,
+  }
+
+  return (
+    <div
+      {...nativeProps}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={indeterminate ? 0 : nowClamped}
+      className={cx(nativeProps.className, styles.root)}
+      role="meter"
+    >
+      <div
+        {...(indeterminate && { 'data-indeterminate': true })}
+        data-complete={nowClamped === 100}
+        className={styles.bar}
+        style={width}
+      />
+    </div>
+  )
+}

package/src/components/Select.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { cx } from '@cerberus/styled-system/css'
+import { hstack } from '@cerberus/styled-system/patterns'
+import {
+  select,
+  type SelectVariantProps,
+} from '@cerberus/styled-system/recipes'
+import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'
+import { $cerberusIcons } from '../config/defineIcons'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+
+/**
+ * This module contains the select components.
+ * @module
+ */
+
+export type SelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> &
+  SelectVariantProps & {
+    id: string
+    describedBy?: string
+  }
+
+/**
+ * Select component
+ * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }
+ * @example
+ * ```tsx
+ * <Select describedby="help:fruit" id="fruit">
+ *  <Option value="">Choose option</Option>
+ *  <Option value="one">Option 1</Option>
+ *  <Option value="two">Option 2</Option>
+ *  <Option value="three">Option 3</Option>
+ * </Select>
+ * ```
+ */
+export function Select(props: SelectProps) {
+  const { describedBy, size, ...nativeProps } = props
+  const { invalid, ...fieldStates } = useFieldContext()
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons
+  const styles = select({
+    size,
+  })
+
+  return (
+    <div className={styles.root}>
+      <select
+        {...nativeProps}
+        {...fieldStates}
+        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(invalid && { 'aria-invalid': true })}
+        className={styles.input}
+      />
+      <span
+        className={cx(
+          styles.iconStack,
+          hstack({
+            gap: '2',
+          }),
+        )}
+      >
+        <Show when={invalid}>
+          <span
+            {...(invalid && { 'data-invalid': true })}
+            className={styles.stateIcon}
+          >
+            <InvalidIcon />
+          </span>
+        </Show>
+        <span className={styles.arrowIcon}>
+          <SelectArrow />
+        </span>
+      </span>
+    </div>
+  )
+}
+
+// We only export this component for consistency with the other components
+
+export type OptionProps = OptionHTMLAttributes<HTMLOptionElement>
+
+/**
+ * Option component
+ * props: OptionHTMLAttributes<HTMLOptionElement>
+ * @example
+ * ```tsx
+ * <Option value="one">Option 1</Option>
+ * ```
+ */
+export function Option(props: OptionProps) {
+  return <option {...props} />
+}

package/src/config/cerbIcons.ts

@@ -1,37 +1,57 @@
 import {
   Checkmark,
   CheckmarkFilled,
+  ChevronDown,
+  CloseFilled,
   CloudUpload,
   ErrorFilled,
   Information,
   InformationFilled,
+  Restart,
+  TrashCan,
+  Warning,
   WarningFilled,
   type CarbonIconType,
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
+import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
 
 export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
+  checkbox?: IconType
+  close?: IconType
   confirmModal?: IconType
+  delete?: IconType
   promptModal?: IconType
   fileUploader?: IconType
+  indeterminate?: IconType
   infoNotification?: IconType
   successNotification?: IconType
   warningNotification?: IconType
   dangerNotification?: IconType
   invalid: IconType
+  invalidAlt?: IconType
+  redo?: IconType
+  selectArrow?: IconType
   toggleChecked?: IconType
 }
 
 export const defaultIcons: DefinedIcons = {
+  checkbox: CheckmarkIcon,
+  close: CloseFilled,
   confirmModal: Information,
+  delete: TrashCan,
   promptModal: Information,
   fileUploader: CloudUpload,
+  indeterminate: IndeterminateIcon,
   infoNotification: InformationFilled,
   successNotification: CheckmarkFilled,
   warningNotification: WarningFilled,
   dangerNotification: ErrorFilled,
   invalid: WarningFilled,
+  invalidAlt: Warning,
+  redo: Restart,
+  selectArrow: ChevronDown,
   toggleChecked: Checkmark,
 }

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

@@ -0,0 +1,49 @@
+import type { SVGProps } from 'react'
+
+/**
+ * This module contains substitute icons for the Checkbox component.
+ * @module
+ */
+
+interface CheckboxIconProps extends SVGProps<SVGSVGElement> {}
+
+/**
+ * Checkmark icon for Checkbox component
+ */
+export function CheckmarkIcon(props: CheckboxIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <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>
+  )
+}
+
+interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}
+
+/**
+ * Indeterminate icon for Checkbox component
+ */
+export function IndeterminateIcon(props: IndeterminateIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path fill="currentColor" d="M4 11h16v2.667H4z" />
+    </svg>
+  )
+}

package/src/index.ts

@@ -6,9 +6,11 @@
 // components
 
 export * from './components/Button'
+export * from './components/Checkbox'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'
@@ -25,7 +27,9 @@ export * from './components/Notification'
 export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
+export * from './components/ProgressBar'
 export * from './components/Radio'
+export * from './components/Select'
 export * from './components/Tab'
 export * from './components/TabList'
 export * from './components/TabPanel'

package/build/legacy/aria-helpers/nav-menu.aria.js

@@ -1,7 +0,0 @@
-import {
-  createNavTriggerProps
-} from "../chunk-JF76VIL3.js";
-export {
-  createNavTriggerProps
-};
-//# sourceMappingURL=nav-menu.aria.js.map

package/build/legacy/aria-helpers/tabs.aria.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  useTabsKeyboardNavigation
-} from "../chunk-GKUDLVOV.js";
-import "../chunk-KF24CS4S.js";
-export {
-  useTabsKeyboardNavigation
-};
-//# sourceMappingURL=tabs.aria.js.map

package/build/legacy/aria-helpers/trap-focus.aria.js

@@ -1,7 +0,0 @@
-import {
-  trapFocus
-} from "../chunk-KESKDLX6.js";
-export {
-  trapFocus
-};
-//# sourceMappingURL=trap-focus.aria.js.map

package/build/legacy/chunk-2UFNQM55.js

@@ -1,21 +0,0 @@
-// src/components/Modal.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { modal } from "@cerberus/styled-system/recipes";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-function ModalEl(props, ref) {
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ...props,
-      className: cx(props.className, modal().dialog),
-      ref
-    }
-  );
-}
-var Modal = forwardRef(ModalEl);
-
-export {
-  Modal
-};
-//# sourceMappingURL=chunk-2UFNQM55.js.map

package/build/legacy/chunk-2UFNQM55.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n *  <ModalIcon icon={$cerberusIcons.alert} />\n *  <h2>Modal Heading</h2>\n *  <p>Modal description</p>\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAeO,IAAM,QAAQ,WAAW,OAAO;","names":[]}