@cerberus-design/react 0.25.0-rc.7 → 0.25.1-rc.1

package/src/components/date-picker/date-picker.tsx

@@ -1,35 +1,72 @@
+'use client'
+
+import { DateValue } from '@ark-ui/react/date-picker'
 import { DatePickerParts } from './parts'
 import type { DatePickerRootProps } from './primitives'
+import { CalendarDate } from '@internationalized/date'
 
-/**
- * This module contains an abstraction of the DatePicker.Root primitive.
- * @module 'date-picker/root'
- */
+const FULL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})[\s/](\d{4})$/
+const PARTIAL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})$/
+const MONTH_REGEX = /^(\d{1,2})$/
 
 /**
  * DatePicker component is an abstraction of the DatePickerRoot primitive which
  * is the context provider to the DatePicker.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/date-picker)
- * @description [Ark Docs](https://ark-ui.com/react/docs/components/date-picker)
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/docs/components/date-picker)
  */
 export function DatePicker(props: DatePickerRootProps) {
-  // const handleFormat = useCallback((date: DateValue) => {
-  //   const day = date.day.toString().padStart(2, '0')
-  //   const year = date.year.toString()
-  //   const formattedMonth = new DateFormatter('en-US', {
-  //     month: 'short',
-  //   }).format(date.toDate(getLocalTimeZone()))
-
-  //   // Format the date as "DD MMM YYYY"
-  //   return `${day} ${formattedMonth} ${year}`
-  // }, [])
-
   return (
     <DatePickerParts.Root
-      {...props}
+      format={handleFormat}
+      parse={parse}
       positioning={{
         placement: 'bottom-start',
       }}
+      {...props}
     />
   )
 }
+
+function parse(value: string): DateValue | undefined {
+  const fullMatch = value.match(FULL_DATE_REGEX)
+  if (fullMatch) {
+    const [, month, day, year] = fullMatch.map(Number)
+    try {
+      return new CalendarDate(year, month, day) as unknown as DateValue
+    } catch {
+      return undefined
+    }
+  }
+
+  const partialMatch = value.match(PARTIAL_DATE_REGEX)
+  if (partialMatch) {
+    const [, month, day] = partialMatch.map(Number)
+    const currentYear = new Date().getFullYear()
+    try {
+      return new CalendarDate(currentYear, month, day) as unknown as DateValue
+    } catch {
+      return undefined
+    }
+  }
+
+  const monthMatch = value.match(MONTH_REGEX)
+  if (monthMatch) {
+    const [, month] = monthMatch.map(Number)
+    const currentYear = new Date().getFullYear()
+    try {
+      if (month < 1 || month > 12) return undefined
+      return new CalendarDate(currentYear, month, 1) as unknown as DateValue
+    } catch {
+      return undefined
+    }
+  }
+
+  return undefined
+}
+
+function handleFormat(date: DateValue): string {
+  const day = date.day.toString().padStart(2, '0')
+  const month = date.month.toString().padStart(2, '0')
+  const year = date.year.toString()
+  return `${month} ${day} ${year}`
+}

package/src/components/date-picker/input.tsx

@@ -19,7 +19,7 @@ export function DatePickerInput(props: DatePickerInputElProps) {
       <DatePickerParts.Input
         {...props}
         maxLength={11}
-        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        placeholder={props.placeholder ?? 'MM DD YYYY'}
       />
     </DatePickerParts.Control>
   )

package/src/components/date-picker/primitives.tsx

@@ -150,7 +150,10 @@ export const DatePickerClearTrigger = withNoRecipe(DatePicker.ClearTrigger)
  */
 export type DatePickerPositionerProps =
   CerberusPrimitiveProps<ArkDatePickerPositionerProps>
-export const DatePickerPositioner = withNoRecipe(DatePicker.Positioner)
+export const DatePickerPositioner = withSlotRecipe(
+  DatePicker.Positioner,
+  'positioner',
+)
 
 /**
  * The year select input component of the DatePicker. This primitive has no

package/src/components/date-picker/range-input.tsx

@@ -21,7 +21,7 @@ export function RangePickerInput(props: RangePickerInputProps) {
       <DatePickerParts.Input
         {...props}
         data-range-input
-        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        placeholder={props.placeholder ?? 'MM DD YYYY'}
         maxLength={11}
         index={0}
       />
@@ -29,7 +29,7 @@ export function RangePickerInput(props: RangePickerInputProps) {
         {...props}
         data-range-input
         data-range-end-input
-        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        placeholder={props.placeholder ?? 'MM DD YYYY'}
         maxLength={11}
         index={1}
       />

package/src/components/field/status-indicator.tsx

@@ -6,8 +6,7 @@ import { field } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import type { HTMLAttributes, ReactNode } from 'react'
 
-export interface FieldStatusIndicatorProps
-  extends HTMLAttributes<HTMLSpanElement> {
+export interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * The fallback content to display when the field is valid.
    */
@@ -33,9 +32,7 @@ export function FieldStatusIndicator(props: FieldStatusIndicatorProps) {
   const { icons } = useCerberusContext()
   const { invalid: InvalidIcon } = icons
 
-  if (!fieldContext) return null
-
-  if (fieldContext.invalid) {
+  if (fieldContext?.invalid) {
     return (
       <span
         {...nativeProps}

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

@@ -6,14 +6,16 @@ import {
   type HTMLAttributes,
   type MouseEvent,
 } from 'react'
-import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
+import { VStack } from 'styled-system/jsx'
 import { css, cx } from 'styled-system/css'
-import { hstack, vstack } from 'styled-system/patterns'
+import { hstack } from 'styled-system/patterns'
+import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
 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'
+import { IconButton } from '../icon-button/index'
+import { ProgressBar, type ProgressBarProps } from '../progress/index'
+import { Text } from '../text/index'
 
 /**
  * This module contains the FileStatus component.
@@ -34,8 +36,10 @@ 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'> {
+export interface FileBaseStatusProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onClick'
+> {
   /**
    * A unique identifier for the file status. Required for accessibility.
    */
@@ -130,21 +134,10 @@ export function FileStatus(props: FileStatusProps) {
         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',
-          })}
-        >
+      <VStack alignItems="flex-start" gap="0.12rem" w="full">
+        <Text as="small" color="page.text.initial" textStyle="label-sm">
           {file}
-        </small>
+        </Text>
         <ProgressBar
           id={props.id}
           label="File upload status"
@@ -161,7 +154,7 @@ export function FileStatus(props: FileStatusProps) {
             <MatchFileStatusText status={status} now={now} />
           </FieldHelperText>
         </Field>
-      </div>
+      </VStack>
 
       <IconButton
         ariaLabel={actionLabel}

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

@@ -1,72 +1,60 @@
 '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 { PropsWithChildren } from 'react'
 import { useCerberusContext } from '../../context/cerberus'
+import { splitProps } from '../../utils'
+import { Show } from '../show/index'
 import { Avatar } from '../avatar/avatar'
+import { formatFileTypes } from './utils'
+import { ImgPreview } from './img-preview'
+import { FileUploadParts } from './parts'
+import { FileUploadRootProps } from './primitives'
 
-export interface FileUploaderProps
-  extends InputHTMLAttributes<HTMLInputElement> {
+export interface FileUploaderProps extends FileUploadRootProps {
   /**
    * 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.
+   * Show a preview of the uploaded image.
    */
-  disabled?: boolean
+  showPreview?: boolean
 }
 
 /**
  * A component that allows the user to upload files.
- * @see https://cerberus.digitalu.design/react/file-uploader
+ * @see https://cerberus.digitalu.design/docs/components/file-uploader
  */
-export function FileUploader(props: FileUploaderProps) {
+export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
+  const [elProps, rootProps] = splitProps(props, ['heading', 'showPreview'])
+  const { showPreview = true } = elProps
+
   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>
+    <FileUploadParts.Root {...rootProps}>
+      <FileUploadParts.Dropzone>
+        <FileUploadParts.Icon>
+          <Avatar gradient="charon-light" fallback={<Icon />} />
+        </FileUploadParts.Icon>
+
+        <FileUploadParts.Label>
+          <Show when={elProps.heading}>
+            <FileUploadParts.Heading>{elProps.heading}</FileUploadParts.Heading>
+          </Show>
+          Import {formatFileTypes(rootProps.accept)} files
+          <FileUploadParts.Description>
+            Drag and drop files or click to upload
+          </FileUploadParts.Description>
+        </FileUploadParts.Label>
+      </FileUploadParts.Dropzone>
+
+      <Show when={showPreview} fallback={<>{props.children}</>}>
+        {() => <ImgPreview />}
+      </Show>
 
-      <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>
+      <FileUploadParts.HiddenInput />
+    </FileUploadParts.Root>
   )
 }

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

@@ -0,0 +1,28 @@
+import { FileUploadFileError } from '@ark-ui/react/file-upload'
+
+type FileErrorTypes = {
+  tooMany?: string
+  invalidType?: string
+  tooLarge?: string
+  tooSmall?: string
+  invalid?: string
+  exists?: string
+}
+
+/**
+ * Helper function to create error messages for file upload errors. Returns a
+ * record of FileUploadFileError codes and their corresponding error messages.
+ * @returns Record<FileUploadFileError, string>
+ */
+export function createErrorMessages(
+  options: FileErrorTypes,
+): Record<FileUploadFileError, string> {
+  return {
+    TOO_MANY_FILES: options.tooMany || '📊 Too many files selected',
+    FILE_INVALID_TYPE: options.invalidType || '🚫 Invalid file type',
+    FILE_TOO_LARGE: options.tooLarge || '📏 File too large',
+    FILE_TOO_SMALL: options.tooSmall || '📐 File too small',
+    FILE_INVALID: options.invalid || '⚠️ Invalid file',
+    FILE_EXISTS: options.exists || '🔄 File already exists',
+  }
+}

package/src/components/file-upload/img-preview.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { UseFileUploadContext } from '@ark-ui/react/file-upload'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../icon-button/index'
+import { FileUploadParts } from './parts'
+import { FileUploadContextProps } from './primitives'
+
+export function ImgPreview(props: Omit<FileUploadContextProps, 'children'>) {
+  const { icons } = useCerberusContext()
+  const { close: Icon } = icons
+
+  return (
+    <FileUploadParts.ItemGroup>
+      <FileUploadParts.Context {...props}>
+        {(ctx: UseFileUploadContext) =>
+          ctx.acceptedFiles.map((file) => (
+            <FileUploadParts.Item
+              key={file.name}
+              file={file}
+              className="file-item"
+            >
+              <FileUploadParts.ItemPreview type="image/*">
+                <FileUploadParts.ItemPreviewImage />
+              </FileUploadParts.ItemPreview>
+
+              <FileUploadParts.ItemName />
+              <FileUploadParts.ItemSizeText />
+
+              <FileUploadParts.ItemDeleteTrigger asChild>
+                <IconButton clipboard size="sm" usage="ghost">
+                  <Icon />
+                </IconButton>
+              </FileUploadParts.ItemDeleteTrigger>
+            </FileUploadParts.Item>
+          ))
+        }
+      </FileUploadParts.Context>
+    </FileUploadParts.ItemGroup>
+  )
+}

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

@@ -1,2 +1,6 @@
+export * from './primitives'
+export * from './parts'
 export * from './file-status'
 export * from './file-uploader'
+export * from './img-preview'
+export * from './helpers'

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

@@ -0,0 +1,126 @@
+import type { ElementType } from 'react'
+import {
+  FileUploadContext,
+  FileUploadRoot,
+  FileUploadDropzone,
+  FileUploadLabel,
+  FileUploadTrigger,
+  FileUploadClearTrigger,
+  FileUploadItemGroup,
+  FileUploadItem,
+  FileUploadItemPreview,
+  FileUploadItemPreviewImage,
+  FileUploadItemName,
+  FileUploadItemSizeText,
+  FileUploadItemDeleteTrigger,
+  FileUploadIcon,
+  FileUploadHiddenInput,
+  FileUploadHeading,
+  FileUploadDescription,
+} from './primitives'
+
+/**
+ * This module contains the parts of the FileUploadParts component.
+ * @module 'fileUpload/parts'
+ */
+
+interface FileUploadPartsValue {
+  /**
+   * The container of the uploader.
+   */
+  Root: ElementType
+  /**
+   * The label of the uploader.
+   */
+  Label: ElementType
+  /**
+   * The dropzone of the uploader.
+   */
+  Dropzone: ElementType
+  /**
+   * The trigger of the uploader.
+   */
+  Trigger: ElementType
+  /**
+   * The clear trigger of the uploader.
+   */
+  ClearTrigger: ElementType
+  /**
+   * The item group of the uploader.
+   */
+  ItemGroup: ElementType
+  /**
+   * The item of the uploader.
+   */
+  Item: ElementType
+  /**
+   * The item preview of the uploader.
+   */
+  ItemPreview: ElementType
+  /**
+   * The item preview image of the uploader.
+   */
+  ItemPreviewImage: ElementType
+  /**
+   * The item name of the uploader.
+   */
+  ItemName: ElementType
+  /**
+   * The item size text of the uploader.
+   */
+  ItemSizeText: ElementType
+  /**
+   * The item delete trigger of the uploader.
+   */
+  ItemDeleteTrigger: ElementType
+  /**
+   * The hidden input of the uploader.
+   */
+  HiddenInput: ElementType
+  /**
+   * The context of the uploader.
+   */
+  Context: ElementType
+  /**
+   * The icon of the uploader.
+   */
+  Icon: ElementType
+  /**
+   * The heading of the uploader.
+   */
+  Heading: ElementType
+  /**
+   * The description of the uploader.
+   */
+  Description: ElementType
+}
+
+/**
+ * An Object containing the parts of the FileUploader component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the uploaderParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const FileUploadParts: FileUploadPartsValue = {
+  Context: FileUploadContext,
+  Root: FileUploadRoot,
+  Label: FileUploadLabel,
+  Dropzone: FileUploadDropzone,
+  Trigger: FileUploadTrigger,
+  ClearTrigger: FileUploadClearTrigger,
+  ItemGroup: FileUploadItemGroup,
+  Item: FileUploadItem,
+  ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
+  ItemName: FileUploadItemName,
+  ItemSizeText: FileUploadItemSizeText,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  HiddenInput: FileUploadHiddenInput,
+  // custom cerby primitives
+  Icon: FileUploadIcon,
+  Heading: FileUploadHeading,
+  Description: FileUploadDescription,
+}