@cerberus-design/react 1.0.0-rc.5 → 1.0.0-rc.7

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>
-  )
-}

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

@@ -1,21 +0,0 @@
-import { DatePickerParts } from './parts'
-import type { DatePickerContentProps } from './primitives'
-
-/**
- * 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) {
-  return (
-    <DatePickerParts.Positioner>
-      <DatePickerParts.Content {...props} />
-    </DatePickerParts.Positioner>
-  )
-}

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

@@ -1,20 +0,0 @@
-'use client'
-
-import { DatePickerParts } from './parts'
-import type { DatePickerRootProps } from './primitives'
-
-/**
- * DatePicker component is an abstraction of the DatePickerRoot primitive which
- * is the context provider to the DatePicker.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/docs/components/date-picker)
- */
-export function DatePicker(props: DatePickerRootProps) {
-  return (
-    <DatePickerParts.Root
-      positioning={{
-        placement: 'bottom-start',
-      }}
-      {...props}
-    />
-  )
-}

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

@@ -1,82 +0,0 @@
-'use client'
-
-import type {
-  DatePicker,
-  UseDatePickerContext,
-} from '@ark-ui/react/date-picker'
-import { DatePickerParts } from './parts'
-import type { DatePickerViewProps } from './primitives'
-import { DatePickerViewControlGroup } from './view-control-group'
-
-/**
- * This private module contains an abstraction of the DayView component.
- * @module 'date-picker/day-view'
- */
-
-export type DateValue = DatePicker.DateValue
-
-/**
- * An abstraction of the DatePickerDayView that renders the day view of the
- * DatePicker.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {
-  function isToday(date: DateValue): boolean {
-    const today = new Date()
-    const formatted = today.toISOString().split('T')[0]
-    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
-    return formatted === arkDate
-  }
-
-  function isPastDay(date: DateValue): boolean {
-    const today = new Date()
-    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
-    return new Date(arkDate) < today
-  }
-
-  function getDayValue(date: DateValue): 'today' | 'past' | 'future' {
-    if (isToday(date)) return 'today'
-    if (isPastDay(date)) return 'past'
-    return 'future'
-  }
-
-  return (
-    <DatePickerParts.View {...props} view="day">
-      <DatePickerParts.Context>
-        {(datePickerData: UseDatePickerContext) => (
-          <>
-            <DatePickerViewControlGroup />
-
-            <DatePickerParts.Table>
-              <DatePickerParts.TableHead>
-                <DatePickerParts.TableRow>
-                  {datePickerData.weekDays.map((weekDay, id) => (
-                    <DatePickerParts.TableHeader key={id}>
-                      {weekDay.narrow}
-                    </DatePickerParts.TableHeader>
-                  ))}
-                </DatePickerParts.TableRow>
-              </DatePickerParts.TableHead>
-
-              <DatePickerParts.TableBody>
-                {datePickerData.weeks.map((week, id) => (
-                  <DatePickerParts.TableRow key={id}>
-                    {week.map((day, id) => (
-                      <DatePickerParts.TableCell key={id} value={day}>
-                        <DatePickerParts.TableCellTrigger
-                          data-date={getDayValue(day)}
-                        >
-                          {day.day}
-                        </DatePickerParts.TableCellTrigger>
-                      </DatePickerParts.TableCell>
-                    ))}
-                  </DatePickerParts.TableRow>
-                ))}
-              </DatePickerParts.TableBody>
-            </DatePickerParts.Table>
-          </>
-        )}
-      </DatePickerParts.Context>
-    </DatePickerParts.View>
-  )
-}

package/src/components/date-picker/index.ts

@@ -1,16 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './date-picker'
-export * from './input'
-export * from './range-input'
-export * from './calendar'
-
-// external dependencies
-
-export { parseDate, type DateValue } from '@ark-ui/react/date-picker'
-export {
-  CalendarDate,
-  today,
-  getLocalTimeZone,
-  DateFormatter,
-} from '@internationalized/date'

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

@@ -1,26 +0,0 @@
-import { DatePickerTrigger } from './trigger'
-import { DatePickerParts } from './parts'
-import type { DatePickerInputElProps } from './primitives'
-
-/**
- * This module contains an abstraction of the DatePickerInputEl primitive.
- * @module 'date-picker/input'
- */
-
-/**
- * An abstraction of the DatePicker input that wraps the input and the
- * triggers to open the DatePicker and clear the value.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerInput(props: DatePickerInputElProps) {
-  return (
-    <DatePickerParts.Control>
-      <DatePickerTrigger />
-      <DatePickerParts.Input
-        {...props}
-        maxLength={11}
-        placeholder={props.placeholder ?? 'MM/DD/YYYY'}
-      />
-    </DatePickerParts.Control>
-  )
-}

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

@@ -1,49 +0,0 @@
-'use client'
-
-import type { UseDatePickerContext } from '@ark-ui/react/date-picker'
-import { DatePickerParts } from './parts'
-import { DatePickerViewControlGroup } from './view-control-group'
-import type { DatePickerViewProps } from './primitives'
-
-/**
- * This private module contains an abstraction of the DatePickerMonthView
- * component.
- * @module 'date-picker/month-view'
- */
-
-/**
- * An abstraction of the DatePickerMonthView that renders the month view of the
- * DatePicker.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerMonthView(props: DatePickerViewProps) {
-  return (
-    <DatePickerParts.View {...props} view="month">
-      <DatePickerParts.Context>
-        {(datePicker: UseDatePickerContext) => (
-          <>
-            <DatePickerViewControlGroup />
-
-            <DatePickerParts.Table>
-              <DatePickerParts.TableBody>
-                {datePicker
-                  .getMonthsGrid({ columns: 4, format: 'short' })
-                  .map((months, id) => (
-                    <DatePickerParts.TableRow key={id}>
-                      {months.map((month, id) => (
-                        <DatePickerParts.TableCell key={id} value={month.value}>
-                          <DatePickerParts.TableCellTrigger>
-                            {month.label}
-                          </DatePickerParts.TableCellTrigger>
-                        </DatePickerParts.TableCell>
-                      ))}
-                    </DatePickerParts.TableRow>
-                  ))}
-              </DatePickerParts.TableBody>
-            </DatePickerParts.Table>
-          </>
-        )}
-      </DatePickerParts.Context>
-    </DatePickerParts.View>
-  )
-}