@cerberus-design/react 1.0.0-rc.4 → 1.0.0-rc.6

package/src/components/combobox/parts.ts

@@ -1,101 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  ComboboxClearTrigger,
-  ComboboxContent,
-  ComboboxControl,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxItemGroup,
-  ComboboxItemGroupLabel,
-  ComboboxItemIndicator,
-  ComboboxItemText,
-  ComboboxLabel,
-  ComboboxPositioner,
-  ComboboxRoot,
-  ComboboxTrigger,
-} from './primitives'
-
-/**
- * This module contains the parts of the Combobox parts.
- * @module 'combobox/parts'
- */
-
-interface ComboboxPartsValue {
-  /**
-   * The context provider for the Select component.
-   */
-  Root: ElementType
-  /**
-   * The label that appears above the select input.
-   */
-  Label: ElementType
-  /**
-   * The control that wraps the select trigger.
-   */
-  Control: ElementType
-  /**
-   * The filterable input of the combobox.
-   */
-  Input: ElementType
-  /**
-   * The trigger that opens the dropdown.
-   */
-  Trigger: ElementType
-  /**
-   * The trigger to clear the select input.
-   */
-  ClearTrigger: ElementType
-  /**
-   * The positioner that wraps the content.
-   */
-  Positioner: ElementType
-  /**
-   * The content of the select component.
-   */
-  Content: ElementType
-  /**
-   * A group of items in the select component.
-   */
-  ItemGroup: ElementType
-  /**
-   * The label for a group of items in the select component.
-   */
-  ItemGroupLabel: ElementType
-  /**
-   * An individual item in the select component.
-   */
-  Item: ElementType
-  /**
-   * The text that labels a single radio of the field.
-   */
-  ItemText: ElementType
-  /**
-   * The indicator that appears when the item has been selected.
-   */
-  ItemIndicator: ElementType
-}
-
-/**
- * An Object containing the parts of the Radio component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the ComboboxParts object and
- * the entire family of components vs. only what you use.
- */
-export const ComboboxParts: ComboboxPartsValue = {
-  Root: ComboboxRoot,
-  Label: ComboboxLabel,
-  Control: ComboboxControl,
-  Input: ComboboxInput,
-  Trigger: ComboboxTrigger,
-  ClearTrigger: ComboboxClearTrigger,
-  Positioner: ComboboxPositioner,
-  Content: ComboboxContent,
-  ItemGroup: ComboboxItemGroup,
-  ItemGroupLabel: ComboboxItemGroupLabel,
-  Item: ComboboxItem,
-  ItemText: ComboboxItemText,
-  ItemIndicator: ComboboxItemIndicator,
-}

package/src/components/combobox/primitives.tsx

@@ -1,146 +0,0 @@
-import {
-  Combobox,
-  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,
-  type ComboboxContentProps as ArkComboboxContentProps,
-  type ComboboxControlProps as ArkComboboxControlProps,
-  type ComboboxInputProps as ArkComboboxInputProps,
-  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,
-  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,
-  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,
-  type ComboboxItemProps as ArkComboboxItemProps,
-  type ComboboxItemTextProps as ArkComboboxItemTextProps,
-  type ComboboxLabelProps as ArkComboboxLabelProps,
-  type ComboboxPositionerProps as ArkComboboxPositionerProps,
-  type ComboboxRootProps as ArkComboboxRootProps,
-  type ComboboxTriggerProps as ArkComboboxTriggerProps,
-} from '@ark-ui/react/combobox'
-import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import type { SelectCollectionItem } from '../select/select'
-import { combobox, type ComboboxVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the primitives of the Combobox.
- * @module 'combobox/primitives'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(combobox)
-
-/**
- * The ComboboxRoot component is the context provider for the Combobox
- * component.
- */
-
-export const ComboboxRoot = withSlotRecipe(Combobox.Root, 'root')
-export type ComboboxRootProps = CerberusPrimitiveProps<
-  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps
->
-
-/**
- * The label that appears above the combobox input.
- */
-export const ComboboxLabel = withSlotRecipe(Combobox.Label, 'label')
-export type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>
-
-/**
- * The control that wraps the combobox input.
- */
-export const ComboboxControl = withSlotRecipe(Combobox.Control, 'control')
-export type ComboboxControlProps =
-  CerberusPrimitiveProps<ArkComboboxControlProps>
-
-/**
- * The input of the combobox.
- */
-export const ComboboxInput = withSlotRecipe(Combobox.Input, 'input')
-export type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>
-
-/**
- * The trigger that opens the dropdown.
- */
-export const ComboboxTrigger = withSlotRecipe(Combobox.Trigger, 'trigger')
-export type ComboboxTriggerProps =
-  CerberusPrimitiveProps<ArkComboboxTriggerProps>
-
-/**
- * The trigger to clear the combobox input.
- */
-export const ComboboxClearTrigger = withSlotRecipe(
-  Combobox.ClearTrigger,
-  'clearTrigger',
-)
-export type ComboboxClearTriggerProps =
-  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>
-
-/**
- * The positioner that wraps the content.
- */
-export const ComboboxPositioner = withSlotRecipe(
-  Combobox.Positioner,
-  'positioner',
-)
-export type ComboboxPositionerProps =
-  CerberusPrimitiveProps<ArkComboboxPositionerProps>
-
-/**
- * The content of the combobox component.
- */
-export const ComboboxContent = withSlotRecipe(Combobox.Content, 'content')
-export type ComboboxContentProps = CerberusPrimitiveProps<
-  ArkComboboxContentProps & ComboboxVariantProps
->
-
-/**
- * A group of items in the combobox component.
- */
-export const ComboboxItemGroup = withSlotRecipe(Combobox.ItemGroup, 'itemGroup')
-export type ComboboxItemGroupProps =
-  CerberusPrimitiveProps<ArkComboboxItemGroupProps>
-
-/**
- * The label for a group of items in the combobox component.
- */
-export const ComboboxItemGroupLabel = withSlotRecipe(
-  Combobox.ItemGroupLabel,
-  'itemGroupLabel',
-)
-export type ComboboxItemGroupLabelProps =
-  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>
-
-/**
- * An individual item in the combobox component.
- */
-export const ComboboxItem = withSlotRecipe(Combobox.Item, 'item')
-export type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>
-
-/**
- * The text that labels a single item of the combobox.
- */
-export const ComboboxItemText = withSlotRecipe(Combobox.ItemText, 'itemText')
-export type ComboboxItemTextProps =
-  CerberusPrimitiveProps<ArkComboboxItemTextProps>
-
-/**
- * The indicator that appears when the item has been selected.
- */
-export const ComboboxItemIndicator = withSlotRecipe(
-  Combobox.ItemIndicator,
-  'itemIndicator',
-)
-export type ComboboxItemIndicatorProps =
-  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>
-
-/**
- * The icon that appears at the start of the combobox input.
- */
-export const ComboboxStartIcon = withSlotRecipe(ark.span, 'startIcon')
-export type ComboboxStartIconProps = CerberusPrimitiveProps<
-  HTMLArkProps<'span'>
->
-
-// 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

@@ -1,65 +0,0 @@
-'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

@@ -1,38 +0,0 @@
-'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 content of the cta modal.
-   */
-  content?: ReactNode
-  /**
-   * 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

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

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

@@ -1,186 +0,0 @@
-'use client'
-
-import {
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  type MouseEvent,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react'
-import { HStack, VStack } from 'styled-system/jsx'
-import { useCerberusContext } from '../../context/cerberus'
-import { Show } from '../show/index'
-import { For } from '../for/index'
-import { Avatar } from '../avatar/avatar'
-import {
-  Dialog,
-  DialogDescription,
-  DialogHeading,
-  DialogProvider,
-  DialogRootProps,
-} from '../dialog/index'
-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 the provider and hook for the cta modal.
- * @module 'react/cta-modal/provider'
- */
-
-/**
- * Provides a CTA modal to the app.
- * @see https://cerberus.digitalu.design/react/cta-modal
- * @example
- * ```tsx
- * // Wrap the Provider around the root of the feature.
- * <CTAModal>
- *   <SomeFeatureSection />
- * </CTAModal>
- *
- * // Use the hook to show the cta modal.
- * const cta = useCTAModal()
- *
- * const handleClick = useCallback(async () => {
- *  const userConsent = await cta.show({
- *   heading: 'Create or copy a Cohort',
- *  description:
- *   'Create a new cohort or copy and existing one.',
- *  icon: <Copy size={24} />,
- *  actions: [
- *  {
- *   text: 'Create Cohort',
- *   onClick: () => {},
- *  {
- *   text: 'Copy Cohort',
- *   onClick: () => {}
- *  }
- * })
- * setConsent(userConsent)
- * }, [cta])
- * ```
- */
-export function CTAModal(props: PropsWithChildren<DialogRootProps>) {
-  const { children, ...rootProps } = props
-
-  const [open, setOpen] = useState<boolean>(false)
-  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
-
-  const confirmIcon = content?.icon
-
-  const { icons } = useCerberusContext()
-  const { confirmModal: FallbackIcon } = icons
-
-  const handleShow = useCallback(
-    (options: ShowCTAModalOptions) => {
-      setContent({ ...options })
-      setOpen(true)
-    },
-    [setOpen],
-  )
-
-  const handleActionClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      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],
-  )
-
-  const value = useMemo(
-    () => ({
-      show: handleShow,
-    }),
-    [handleShow],
-  )
-
-  return (
-    <CTAModalContext.Provider value={value}>
-      {children}
-
-      <DialogProvider
-        lazyMount
-        open={open}
-        onOpenChange={(e) => setOpen(e.open)}
-        unmountOnExit
-        {...rootProps}
-      >
-        <Dialog
-          size="sm"
-          style={{
-            '--dialog-content-min-h': 'auto',
-          }}
-        >
-          <DialogCloseIconTrigger />
-
-          <VStack gap="xl" w="full">
-            <VStack alignItems="flex-start" gap="md" w="full">
-              <VStack gap="lg" w="full">
-                <Avatar
-                  gradient="charon-light"
-                  fallback={
-                    <Show
-                      when={confirmIcon}
-                      fallback={<FallbackIcon size={24} />}
-                    >
-                      {confirmIcon}
-                    </Show>
-                  }
-                />
-                <DialogHeading>{content?.heading}</DialogHeading>
-
-                <Show when={content?.description}>
-                  <DialogDescription textAlign="center">
-                    {content?.description}
-                  </DialogDescription>
-                </Show>
-
-                <Show when={content?.content}>
-                  <DialogDescription textAlign="center">
-                    {content?.content}
-                  </DialogDescription>
-                </Show>
-              </VStack>
-            </VStack>
-
-            <HStack gap="md" w="full">
-              <For each={content?.actions._actions}>
-                {(action, index) => (
-                  <Show
-                    key={index}
-                    when={content?.actions?.type === 'btnAction'}
-                    fallback={
-                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>
-                    }
-                  >
-                    <TriggerItem data-index={index} onClick={handleActionClick}>
-                      {(action as CTAButtonAction)?.text}
-                    </TriggerItem>
-                  </Show>
-                )}
-              </For>
-            </HStack>
-          </VStack>
-        </Dialog>
-      </DialogProvider>
-    </CTAModalContext.Provider>
-  )
-}
-
-export function useCTAModal(): CTAModalValue {
-  const context = useContext(CTAModalContext)
-  if (context === null) {
-    throw new Error('useCTAModal must be used within a CTAModal Provider')
-  }
-  return context
-}

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

@@ -1,54 +0,0 @@
-import { ark } from '@ark-ui/react/factory'
-import { css, cx } from 'styled-system/css'
-import { button } from 'styled-system/recipes'
-import { CerberusProps } from '../../system/types'
-import { Button, type ButtonProps } from '../button/button'
-
-/**
- * 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: CerberusProps<'button'> & 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

@@ -1,57 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import { splitProps } from '../../utils/index'
-import { DatePickerContent } from './content'
-import { DatePickerDayView } from './day-view'
-import { DatePickerMonthView } from './month-view'
-import { DatePickerYearView } from './year-view'
-import { DatePickerContentProps } from './primitives'
-
-/**
- * This module contains an abstraction of the DatePicker component.
- * @module 'date-picker/calendar'
- */
-
-export interface DatePickerCalendarProps {
-  /**
-   * @deprecated - this is no longer needed.
-   */
-  withModal?: boolean
-}
-
-/**
- * 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: DatePickerCalendarProps & DatePickerContentProps,
-) {
-  const [, contentProps] = splitProps(props, ['withModal'])
-
-  return (
-    <DatePickerContent {...contentProps}>
-      <DatePickerDayView />
-      <DatePickerMonthView view="month" />
-      <DatePickerYearView view="year" />
-    </DatePickerContent>
-  )
-}