@cerberus-design/react 0.13.2 → 0.14.0

package/src/components/Accordion.tsx

@@ -0,0 +1,160 @@
+import { Accordion as ArkAccordion } from '@ark-ui/react'
+import { ChevronDown } from '@cerberus/icons'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  accordion,
+  type AccordionVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+export type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps
+
+/**
+ * The context provider for the Accordion family.
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *  <AccordionItemGroup heading="Item 1 heading" value="one">
+ *     This is the content
+ *  </AccordionItemGroup>
+ * </Accordion>
+ * ```
+ */
+export function Accordion(props: AccordionProps) {
+  const { size, className, ...rootProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.Root
+      collapsible
+      className={cx(className, styles.root)}
+      {...rootProps}
+    />
+  )
+}
+
+type AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps
+
+/**
+ * The item for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItem(props: AccordionItemProps) {
+  const { size, ...itemProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.Item
+      {...itemProps}
+      className={cx(itemProps.className, styles.item)}
+    />
+  )
+}
+
+export type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &
+  AccordionVariantProps
+
+/**
+ * The trigger for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
+  const { size, ...triggerProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.ItemTrigger
+      {...triggerProps}
+      className={cx(triggerProps.className, styles.itemTrigger)}
+    />
+  )
+}
+
+export type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &
+  AccordionVariantProps
+
+/**
+ * The indicator for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ * */
+export function AccordionItemIndicator(props: AccordionItemIndicatorProps) {
+  const { size, ...indicatorProps } = props
+  const styles = accordion({ size })
+  const iconSize = size === 'sm' ? 16 : '24'
+
+  return (
+    <ArkAccordion.ItemIndicator
+      {...indicatorProps}
+      className={cx(indicatorProps.className, styles.itemIndicator)}
+    >
+      <ChevronDown size={iconSize} />
+    </ArkAccordion.ItemIndicator>
+  )
+}
+
+export type AccordionItemContentProps = ArkAccordion.ItemContentProps &
+  AccordionVariantProps
+
+/**
+ * The content for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ * */
+export function AccordionItemContent(props: AccordionItemContentProps) {
+  const { size, ...contentProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.ItemContent
+      {...contentProps}
+      className={cx(contentProps.className, styles.itemContent)}
+    />
+  )
+}

package/src/components/AccordionItemGroup.tsx

@@ -0,0 +1,79 @@
+import { Accordion as ArkAccordion } from '@ark-ui/react'
+import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+import type { PropsWithChildren } from 'react'
+import { Show } from './Show'
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
+} from './Accordion'
+import { css } from '@cerberus/styled-system/css'
+
+/**
+ * This module contains an abstraction of the AccordionItem components.
+ * @module
+ */
+
+export interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {
+  /**
+   * The heading of the accordion item to open and close the content.
+   */
+  heading: string
+  /**
+   * The position of the arrow indicator.
+   */
+  indicatorPosition?: 'start' | 'end'
+}
+export type AccordionItemGroupProps = AccordionItemGroupBaseProps &
+  AccordionVariantProps
+
+/**
+ * A grouped item for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItemGroup heading="Accordion Item 1" value="one">
+ *     Accordion Item 1 content
+ *   </AccordionItemGroup>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItemGroup(
+  props: PropsWithChildren<AccordionItemGroupProps>,
+) {
+  const {
+    size,
+    heading,
+    children,
+    indicatorPosition = 'end',
+    ...itemProps
+  } = props
+  const triggerStyles =
+    indicatorPosition === 'start'
+      ? {
+          gap: 'md',
+          justifyContent: 'flex-start',
+        }
+      : undefined
+
+  return (
+    <AccordionItem {...itemProps}>
+      <AccordionItemTrigger className={css(triggerStyles)} size={size}>
+        <Show when={indicatorPosition === 'start'}>
+          <AccordionItemIndicator size={size} />
+        </Show>
+
+        {heading}
+
+        <Show when={indicatorPosition === 'end'}>
+          <AccordionItemIndicator size={size} />
+        </Show>
+      </AccordionItemTrigger>
+
+      <AccordionItemContent size={size}>{children}</AccordionItemContent>
+    </AccordionItem>
+  )
+}

package/src/components/DatePicker.client.tsx

@@ -0,0 +1,365 @@
+'use client'
+
+import {
+  DatePicker as ArkDP,
+  type DatePickerContentProps,
+  type DatePickerInputProps,
+  type DatePickerRootProps,
+  type DatePickerViewProps,
+  // type DateValue,
+} from '@ark-ui/react'
+import { Portal } from './Portal'
+// import { useCallback } from 'react'
+import { datePicker } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { useFieldContext } from '../context/field'
+import {
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerContext,
+  DatePickerViewControlGroup,
+  DatePickerTable,
+  DatePickerTableHeader,
+  DatePickerTableCellTrigger,
+  DatePickerTableCell,
+} from './DatePicker.server'
+// import { formatISOToMilitary } from '../hooks/useDate'
+
+/**
+ * This module contains the DatePicker client family components.
+ * @module DatePicker:client
+ */
+
+// We are not exposing this to the public API
+const datePickerStyles = datePicker()
+
+/**
+ * The main context provider for the DatePicker family components.
+ * @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 DatePicker(props: DatePickerRootProps) {
+  const states = useFieldContext()
+
+  // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112
+
+  // There is a bug with the Root component that causes random date selection
+  // onBlur after the first selection if the format prop is used.
+  // const handleFormat = useCallback((value: DateValue) => {
+  //   return formatISOToMilitary(value.toString())
+  // }, [])
+
+  return (
+    <ArkDP.Root
+      {...props}
+      {...states}
+      positioning={{
+        placement: 'bottom-start',
+      }}
+    />
+  )
+}
+
+/**
+ * The input component for the DatePicker.
+ * @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 DatePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The input component for the DatePicker that uses ranges.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date" selection="range">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <RangePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function RangePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control data-range className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={0}
+      />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        data-range-end-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={1}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The content component for the DatePicker which contains the calendar.
+ * @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 DatePickerContent(props: DatePickerContentProps) {
+  const { children, ...contentProps } = props
+  return (
+    <Portal>
+      <ArkDP.Positioner className={datePickerStyles.positioner}>
+        <ArkDP.Content
+          {...contentProps}
+          className={cx(contentProps.className, datePickerStyles.content)}
+        >
+          {children}
+        </ArkDP.Content>
+      </ArkDP.Positioner>
+    </Portal>
+  )
+}
+
+/**
+ * The day view component for the DatePicker.
+ * @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 DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {
+  function isToday(date: ArkDP.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: ArkDP.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: ArkDP.DateValue): 'today' | 'past' | 'future' {
+    if (isToday(date)) return 'today'
+    if (isPastDay(date)) return 'past'
+    return 'future'
+  }
+
+  return (
+    <DatePickerView {...props} view="day">
+      <DatePickerContext>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableHead>
+                <ArkDP.TableRow>
+                  {datePicker.weekDays.map((weekDay, id) => (
+                    <DatePickerTableHeader key={id}>
+                      {weekDay.narrow}
+                    </DatePickerTableHeader>
+                  ))}
+                </ArkDP.TableRow>
+              </ArkDP.TableHead>
+
+              <ArkDP.TableBody>
+                {datePicker.weeks.map((week, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {week.map((day, id) => (
+                      <DatePickerTableCell key={id} value={day}>
+                        <DatePickerTableCellTrigger
+                          data-date={getDayValue(day)}
+                        >
+                          {day.day}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </DatePickerContext>
+    </DatePickerView>
+  )
+}
+
+/**
+ * The month view component for the DatePicker.
+ * @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 DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="month">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker
+                  .getMonthsGrid({ columns: 4, format: 'short' })
+                  .map((months, id) => (
+                    <ArkDP.TableRow key={id}>
+                      {months.map((month, id) => (
+                        <DatePickerTableCell key={id} value={month.value}>
+                          <DatePickerTableCellTrigger>
+                            {month.label}
+                          </DatePickerTableCellTrigger>
+                        </DatePickerTableCell>
+                      ))}
+                    </ArkDP.TableRow>
+                  ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * The year view component for the DatePicker.
+ * @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 DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="year">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {years.map((year, id) => (
+                      <DatePickerTableCell key={id} value={year.value}>
+                        <DatePickerTableCellTrigger>
+                          {year.label}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * 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() {
+  return (
+    <DatePickerContent>
+      <DatePickerDayView />
+      <DatePickerMonthView />
+      <DatePickerYearView />
+    </DatePickerContent>
+  )
+}