@cerberus-design/react 0.16.0 → 0.17.0

package/src/components/combobox/primitives.tsx

@@ -0,0 +1,209 @@
+import {
+  Combobox,
+  type ComboboxClearTriggerProps,
+  type ComboboxContentProps,
+  type ComboboxControlProps,
+  type ComboboxInputProps,
+  type ComboboxItemGroupLabelProps,
+  type ComboboxItemGroupProps,
+  type ComboboxItemIndicatorProps,
+  type ComboboxItemProps,
+  type ComboboxItemTextProps,
+  type ComboboxLabelProps,
+  type ComboboxPositionerProps,
+  type ComboboxRootProps,
+  type ComboboxTriggerProps,
+} from '@ark-ui/react/combobox'
+import { ark } from '@ark-ui/react/factory'
+import type { SelectCollectionItem } from '../select/select'
+import {
+  combobox,
+  type ComboboxVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import type { PropsWithChildren } from 'react'
+
+/**
+ * This module contains the primitives of the Combobox.
+ * @module 'combobox/primitives'
+ */
+
+/**
+ * The ComboboxRoot component is the context provider for the Combobox
+ * component.
+ */
+export function ComboboxRoot(
+  props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps,
+) {
+  const { size, ...rootProps } = props
+  const styles = combobox({ size })
+  return (
+    <Combobox.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The label that appears above the combobox input.
+ */
+export function ComboboxLabel(props: ComboboxLabelProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Label {...props} className={cx(styles.label, props.className)} />
+  )
+}
+
+/**
+ * The control that wraps the combobox input.
+ */
+export function ComboboxControl(props: ComboboxControlProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The input of the combobox.
+ */
+export function ComboboxInput(props: ComboboxInputProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Input {...props} className={cx(styles.input, props.className)} />
+  )
+}
+
+/**
+ * The trigger that opens the dropdown.
+ */
+export function ComboboxTrigger(props: ComboboxTriggerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger to clear the combobox input.
+ */
+export function ComboboxClearTrigger(props: ComboboxClearTriggerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ClearTrigger
+      {...props}
+      className={cx(styles.clearTrigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The positioner that wraps the content.
+ */
+export function ComboboxPositioner(props: ComboboxPositionerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Positioner
+      {...props}
+      className={cx(styles.positioner, props.className)}
+    />
+  )
+}
+
+/**
+ * The content of the combobox component.
+ */
+export function ComboboxContent(
+  props: ComboboxContentProps & ComboboxVariantProps,
+) {
+  const { size, ...contentProps } = props
+  const styles = combobox({ size })
+  return (
+    <Combobox.Content
+      {...contentProps}
+      className={cx(styles.content, contentProps.className)}
+    />
+  )
+}
+
+/**
+ * A group of items in the combobox component.
+ */
+export function ComboboxItemGroup(props: ComboboxItemGroupProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemGroup
+      {...props}
+      className={cx(styles.itemGroup, props.className)}
+    />
+  )
+}
+
+/**
+ * The label for a group of items in the combobox component.
+ */
+export function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemGroupLabel
+      {...props}
+      className={cx(styles.itemGroupLabel, props.className)}
+    />
+  )
+}
+
+/**
+ * An individual item in the combobox component.
+ */
+export function ComboboxItem(props: ComboboxItemProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Item {...props} className={cx(styles.item, props.className)} />
+  )
+}
+
+/**
+ * The text that labels a single item of the combobox.
+ */
+export function ComboboxItemText(props: ComboboxItemTextProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemText
+      {...props}
+      className={cx(styles.itemText, props.className)}
+    />
+  )
+}
+
+/**
+ * The indicator that appears when the item has been selected.
+ */
+export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemIndicator
+      {...props}
+      className={cx(styles.itemIndicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The icon that appears at the start of the combobox input.
+ */
+export function ComboboxStartIcon(props: PropsWithChildren) {
+  const styles = combobox()
+  return <ark.span {...props} className={styles.startIcon} />
+}
+
+// We are only doing this to make the API consistent
+export const ComboItemText = ComboboxItemText
+
+export type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails

package/src/components/combobox/use-stateful-collection.ts

@@ -0,0 +1,65 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import type { ComboboxInputValueChangeDetails } from '@ark-ui/react/combobox'
+import type { SelectCollectionItem } from '../select/select'
+import { createSelectCollection } from '../select/primitives'
+
+/**
+ * This module contains a custom hook that provides a stateful collection for
+ * the Combobox component.
+ */
+
+export interface StatefulCollectionReturn {
+  /**
+   * The collection of items.
+   */
+  collection: ReturnType<typeof createSelectCollection>
+  /**
+   * The filter value split into an array of characters.
+   */
+  filterChars: string[]
+  /**
+   * The function to handle input changes.
+   */
+  handleInputChange: (details: ComboboxInputValueChangeDetails) => void
+}
+
+/**
+ * This hook provides a stateful collection for the Combobox component.
+ * It returns a collection of items and a function to handle input changes.
+ * @param initialItems - The initial collection of items.
+ * @return An object containing the collection and a function to handle input changes.
+ */
+export function useStatefulCollection(
+  initialItems: SelectCollectionItem[] = [],
+): StatefulCollectionReturn {
+  const [items, setItems] = useState(initialItems)
+  const [filterValue, setFilterValue] = useState<string[]>([])
+
+  const collection = useMemo(() => createSelectCollection(items), [items])
+
+  const handleInputChange = useCallback(
+    (details: ComboboxInputValueChangeDetails) => {
+      if (details.inputValue === '') {
+        return setItems(initialItems)
+      }
+      setItems((prev) =>
+        prev.filter((item) =>
+          item.value.includes(details.inputValue.toLowerCase()),
+        ),
+      )
+      setFilterValue(details.inputValue.split(''))
+    },
+    [initialItems],
+  )
+
+  return useMemo(
+    () => ({
+      collection,
+      filterChars: filterValue,
+      handleInputChange,
+    }),
+    [collection, filterValue, handleInputChange],
+  )
+}

package/src/components/cta-dialog/context.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { createContext, type ReactNode } from 'react'
+import type { CTAModalActionReturn } from './utils'
+
+/**
+ * This module provides the context for the cta modal.
+ * @module
+ */
+
+export interface ShowCTAModalOptions {
+  /**
+   * The heading of the cta modal.
+   */
+  heading: string
+  /**
+   * The description of the cta modal.
+   */
+  description?: string
+  /**
+   * The icon used for the modal Avatar.
+   */
+  icon?: ReactNode
+  /**
+   * The actions for the cta modal. Requires 2 actions.
+   */
+  actions: CTAModalActionReturn
+}
+
+export interface CTAModalValue {
+  show: (options: ShowCTAModalOptions) => void
+}
+
+export const CTAModalContext = createContext<CTAModalValue | null>(null)

package/src/components/cta-dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './utils'

package/src/{context/cta-modal.tsx → components/cta-dialog/provider.tsx}

@@ -1,66 +1,39 @@
 'use client'
 
 import {
-  createContext,
   useCallback,
   useContext,
   useMemo,
   useState,
   type MouseEvent,
-  type MouseEventHandler,
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/button/button'
-import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
-import { useCerberusContext } from './cerberus'
-import { HStack } from '@cerberus/styled-system/jsx'
-import { css } from '@cerberus/styled-system/css'
-import { VStack } from '@cerberus/styled-system/jsx'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from '../../context/cerberus'
+import { Show } from '../Show'
+import { For } from '../for'
+import { Avatar } from '../avatar/avatar'
 import {
   Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
-import { DialogCloseIconTrigger } from '../components/Dialog.client'
+} from '../dialog'
+import { DialogCloseIconTrigger } from '../dialog/close-icon-trigger'
+import type { CTAButtonAction, CTAModalActionReturn } from './utils'
+import {
+  CTAModalContext,
+  type CTAModalValue,
+  type ShowCTAModalOptions,
+} from './context'
+import { TriggerItem } from './trigger-item'
 
 /**
- * This module provides a context and hook for the cta modal.
- * @module
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
  */
 
-export interface ShowCTAModalOptions {
-  /**
-   * The heading of the cta modal.
-   */
-  heading: string
-  /**
-   * The description of the cta modal.
-   */
-  description?: string
-  /**
-   * The icon used for the modal Avatar.
-   */
-  icon?: ReactNode
-  /**
-   * The actions for the cta modal. Max of 2 actions.
-   */
-  actions: {
-    text: string
-    onClick: MouseEventHandler<HTMLButtonElement>
-  }[]
-}
-
-export interface CTAModalValue {
-  show: (options: ShowCTAModalOptions) => void
-}
-
-const CTAModalContext = createContext<CTAModalValue | null>(null)
-
-export type CTAModalProviderProps = PropsWithChildren<unknown>
-
 /**
  * Provides a CTA modal to the app.
  * @see https://cerberus.digitalu.design/react/cta-modal
@@ -93,7 +66,7 @@ export type CTAModalProviderProps = PropsWithChildren<unknown>
  * }, [cta])
  * ```
  */
-export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
+export function CTAModal(props: PropsWithChildren<object>) {
   const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
   const confirmIcon = content?.icon
@@ -103,12 +76,6 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleShow = useCallback(
     (options: ShowCTAModalOptions) => {
-      const maxActions = 2
-      if (options.actions.length > maxActions) {
-        throw new Error(
-          `CTA Modal only supports a maximum of ${maxActions} actions.`,
-        )
-      }
       setContent({ ...options })
       setOpen(true)
     },
@@ -117,10 +84,10 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleActionClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
-      const index = event.currentTarget.getAttribute('data-index')
-      const action = content?.actions[Number(index)]
-      const { onClick } = action || {}
-      onClick?.(event)
+      const index = Number(event.currentTarget.getAttribute('data-index'))
+      const contentActions = content?.actions as CTAModalActionReturn
+      const action = contentActions._actions[index] as CTAButtonAction
+      action?.handleClick?.(event)
       setOpen(false)
     },
     [content, setOpen],
@@ -145,9 +112,8 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
             <VStack alignItems="flex-start" gap="md" w="full">
               <VStack gap="lg" w="full">
                 <Avatar
-                  ariaLabel=""
                   gradient="charon-light"
-                  icon={
+                  fallback={
                     <Show
                       when={Boolean(confirmIcon)}
                       fallback={<FallbackIcon size={24} />}
@@ -155,7 +121,6 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
                       {confirmIcon}
                     </Show>
                   }
-                  src=""
                 />
                 <DialogHeading>{content?.heading}</DialogHeading>
                 <DialogDescription>{content?.description}</DialogDescription>
@@ -163,22 +128,21 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
             </VStack>
 
             <HStack gap="md" w="full">
-              <Show when={Boolean(content?.actions?.length)}>
-                {content?.actions?.map((action, index) => (
-                  <Button
-                    data-index={index}
-                    className={css({
-                      w: '1/2',
-                    })}
+              <For each={content?.actions._actions}>
+                {(action, index) => (
+                  <Show
                     key={index}
-                    onClick={handleActionClick}
-                    shape="rounded"
-                    usage="outlined"
+                    when={content?.actions?.type === 'btnAction'}
+                    fallback={
+                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>
+                    }
                   >
-                    {action.text}
-                  </Button>
-                ))}
-              </Show>
+                    <TriggerItem data-index={index} onClick={handleActionClick}>
+                      {(action as CTAButtonAction)?.text}
+                    </TriggerItem>
+                  </Show>
+                )}
+              </For>
             </HStack>
           </VStack>
         </Dialog>

package/src/components/cta-dialog/trigger-item.tsx

@@ -0,0 +1,53 @@
+import { css, cx } from '@cerberus/styled-system/css'
+import { Button, type ButtonProps } from '../button/button'
+import { ark } from '@ark-ui/react/factory'
+import { button } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module provides the trigger item for the cta modal.
+ * @module 'react/cta-modal/trigger-item'
+ */
+
+export interface TriggerItemProps extends ButtonProps {
+  asChild?: boolean
+}
+
+/**
+ * Trigger item for the cta modal which renders content based on the actions.
+ * type.
+ */
+export function TriggerItem(props: TriggerItemProps) {
+  const { asChild, children, ...buttonProps } = props
+
+  if (asChild) {
+    return (
+      <ark.div
+        className={cx(
+          button({
+            shape: 'rounded',
+            usage: 'ghost',
+          }),
+          css({
+            w: '1/2',
+          }),
+        )}
+        asChild
+      >
+        {children}
+      </ark.div>
+    )
+  }
+
+  return (
+    <Button
+      {...buttonProps}
+      className={css({
+        w: '1/2',
+      })}
+      shape="rounded"
+      usage="outlined"
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/cta-dialog/utils.ts

@@ -0,0 +1,57 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+/**
+ * This module provide utility functions for the cta modal.
+ * @module 'react/cta-modal/utils'
+ */
+
+export type CTAButtonAction = {
+  /**
+   * The text of the button.
+   */
+  text: string
+  /**
+   * The onClick handler for the button.
+   */
+  handleClick: MouseEventHandler<HTMLButtonElement>
+}
+
+export type CTAModalAction = (CTAButtonAction | ReactNode)[]
+
+export interface CTAModalActionReturn {
+  /**
+   * The type of the action content.
+   */
+  type: 'reactNode' | 'btnAction'
+  /**
+   * The actions for the cta modal. Max of 2 actions.
+   */
+  _actions: CTAModalAction
+}
+
+/**
+ * Creates the action data to pass to the cta modal `show` method.
+ */
+export function createCTAModalActions(
+  providedActions: CTAModalAction,
+): CTAModalActionReturn {
+  if (providedActions.length !== 2) {
+    throw new Error('CTAModal must include 2 actions')
+  }
+
+  if (
+    providedActions.every(
+      (action) => (action as unknown as CTAButtonAction)?.handleClick,
+    )
+  ) {
+    return {
+      type: 'btnAction',
+      _actions: providedActions as CTAButtonAction[],
+    }
+  }
+
+  return {
+    type: 'reactNode',
+    _actions: providedActions as ReactNode[],
+  }
+}

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

@@ -0,0 +1,34 @@
+import { DatePickerContent } from './content'
+import { DatePickerDayView } from './day-view'
+import { DatePickerMonthView } from './month-view'
+import { DatePickerYearView } from './year-view'
+
+/**
+ * This module contains an abstraction of the DatePicker component.
+ * @module 'date-picker/calendar'
+ */
+
+/**
+ * An abstraction of the DatePicker content components that contain the
+ * different calendar views and controls.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerCalendar(props: { withModal?: boolean }) {
+  return (
+    <DatePickerContent withModal={props.withModal}>
+      <DatePickerDayView />
+      <DatePickerMonthView />
+      <DatePickerYearView />
+    </DatePickerContent>
+  )
+}

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

@@ -0,0 +1,29 @@
+import type { DatePickerContentProps } from '@ark-ui/react/date-picker'
+import { Portal } from '../Portal'
+import { DatePickerParts } from './parts'
+
+/**
+ * This private module contains an abstraction of the DatePickerContent
+ * primitive.
+ * @module 'date-picker/content'
+ */
+
+/**
+ * An abstraction of the DatePicker content that wraps the DatePickerParts
+ * primitives.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerContent(
+  props: DatePickerContentProps & {
+    withModal?: boolean
+  },
+) {
+  const { withModal, ...contentProps } = props
+  return (
+    <Portal disabled={withModal ?? false}>
+      <DatePickerParts.Positioner>
+        <DatePickerParts.Content {...contentProps} />
+      </DatePickerParts.Positioner>
+    </Portal>
+  )
+}

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

@@ -0,0 +1,32 @@
+import type { DatePickerRootProps } from '@ark-ui/react/date-picker'
+import { DatePickerParts } from './parts'
+
+/**
+ * This module contains an abstraction of the DatePicker.Root primitive.
+ * @module 'date-picker/root'
+ */
+
+/**
+ * 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)
+ */
+export function DatePicker(props: DatePickerRootProps) {
+  // There is a bug with the Root component that causes random date selection
+  // onBlur after the first selection if the format prop is used.
+  // ref: https://github.com/chakra-ui/ark/issues/3112#event-16047829195
+
+  // const handleFormat = useCallback((value: DateValue) => {
+  //   return formatISOToMilitary(value.toString())
+  // }, [])
+
+  return (
+    <DatePickerParts.Root
+      {...props}
+      positioning={{
+        placement: 'bottom-start',
+      }}
+    />
+  )
+}