@cerberus-design/react 0.16.0 → 0.17.0

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

@@ -0,0 +1,82 @@
+'use client'
+
+import type {
+  DatePicker,
+  DatePickerViewProps,
+  UseDatePickerContext,
+} from '@ark-ui/react/date-picker'
+import { DatePickerParts } from './parts'
+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

@@ -0,0 +1,6 @@
+export * from './parts'
+export * from './primitives'
+export * from './date-picker'
+export * from './input'
+export * from './range-input'
+export * from './calendar'

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

@@ -0,0 +1,26 @@
+import type { DatePickerInputProps } from '@ark-ui/react/date-picker'
+import { DatePickerTrigger } from './trigger'
+import { DatePickerParts } from './parts'
+
+/**
+ * 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: DatePickerInputProps) {
+  return (
+    <DatePickerParts.Control>
+      <DatePickerTrigger />
+      <DatePickerParts.Input
+        {...props}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+      />
+    </DatePickerParts.Control>
+  )
+}

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

@@ -0,0 +1,51 @@
+'use client'
+
+import type {
+  DatePickerViewProps,
+  UseDatePickerContext,
+} from '@ark-ui/react/date-picker'
+import { DatePickerParts } from './parts'
+import { DatePickerViewControlGroup } from './view-control-group'
+
+/**
+ * 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: Omit<DatePickerViewProps, 'view'>) {
+  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>
+  )
+}

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

@@ -0,0 +1,167 @@
+import type { ElementType } from 'react'
+import {
+  DatePickerClearTrigger,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerControl,
+  DatePickerInputEl,
+  DatePickerLabel,
+  DatePickerMonthSelect,
+  DatePickerNextTrigger,
+  DatePickerPositioner,
+  DatePickerPrevTrigger,
+  DatePickerRangeText,
+  DatePickerRoot,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+  DatePickerYearSelect,
+} from './primitives'
+
+/**
+ * This module contains the parts of the DatePicker component.
+ * @module 'date-picker/parts'
+ */
+
+interface DatePickerPartsValue {
+  /**
+   * The container of the date-picker.
+   */
+  Root: ElementType
+  /**
+   * The label of the date-picker.
+   */
+  Label: ElementType
+  /**
+   * The control of the date-picker.
+   */
+  Control: ElementType
+  /**
+   * The input of the date-picker.
+   */
+  Input: ElementType
+  /**
+   * The trigger that opens the date-picker.
+   */
+  Trigger: ElementType
+  /**
+   * The trigger that clears the value of the date-picker.
+   */
+  ClearTrigger: ElementType
+  /**
+   * The positioner of the content for the date-picker.
+   */
+  Positioner: ElementType
+  /**
+   * The content of the date-picker.
+   */
+  Content: ElementType
+  /**
+   * The year select input of the date-picker.
+   */
+  YearSelect: ElementType
+  /**
+   * The month select input of the date-picker.
+   */
+  MonthSelect: ElementType
+  /**
+   * The day view of the date-picker.
+   */
+  View: ElementType
+  /**
+   * The day context of the date-picker.
+   */
+  Context: ElementType
+  /**
+   * The container for the content triggers.
+   */
+  ViewControl: ElementType
+  /**
+   * The trigger that moves to the previous month.
+   */
+  PrevTrigger: ElementType
+  /**
+   * The trigger that moves to the next month.
+   */
+  NextTrigger: ElementType
+  /**
+   * The trigger that moves to the next view.
+   */
+  ViewTrigger: ElementType
+  /**
+   * The range text of the date-picker.
+   */
+  RangeText: ElementType
+  /**
+   * The table of the date-picker.
+   */
+  Table: ElementType
+  /**
+   * The table head of the date-picker.
+   */
+  TableHead: ElementType
+  /**
+   * The table row of the date-picker.
+   */
+  TableRow: ElementType
+  /**
+   * The header text for the table.
+   */
+  TableHeader: ElementType
+  /**
+   * The body of the table.
+   */
+  TableBody: ElementType
+  /**
+   * The table cell of the table.
+   */
+  TableCell: ElementType
+  /**
+   * The trigger for the table cell.
+   */
+  TableCellTrigger: ElementType
+}
+
+/**
+ * An Object containing the parts of the DatePicker component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the DatePickerParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const DatePickerParts: DatePickerPartsValue = {
+  Root: DatePickerRoot,
+  Label: DatePickerLabel,
+  Control: DatePickerControl,
+  Input: DatePickerInputEl,
+  Trigger: DatePickerTrigger,
+  ClearTrigger: DatePickerClearTrigger,
+  Positioner: DatePickerPositioner,
+  Content: DatePickerContent,
+  YearSelect: DatePickerYearSelect,
+  MonthSelect: DatePickerMonthSelect,
+  View: DatePickerView,
+  Context: DatePickerContext,
+  ViewControl: DatePickerViewControl,
+  PrevTrigger: DatePickerPrevTrigger,
+  NextTrigger: DatePickerNextTrigger,
+  ViewTrigger: DatePickerViewTrigger,
+  RangeText: DatePickerRangeText,
+  Table: DatePickerTable,
+  TableHead: DatePickerTableHead,
+  TableRow: DatePickerTableRow,
+  TableHeader: DatePickerTableHeader,
+  TableBody: DatePickerTableBody,
+  TableCell: DatePickerTableCell,
+  TableCellTrigger: DatePickerTableCellTrigger,
+}

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

@@ -0,0 +1,232 @@
+import {
+  DatePicker,
+  type DatePickerContentProps,
+  type DatePickerControlProps,
+  type DatePickerInputProps,
+  type DatePickerLabelProps,
+  type DatePickerRangeTextProps,
+  type DatePickerTableCellProps,
+  type DatePickerTableCellTriggerProps,
+  type DatePickerTableHeaderProps,
+  type DatePickerTableProps,
+  type DatePickerTriggerProps,
+  type DatePickerViewControlProps,
+} from '@ark-ui/react/date-picker'
+import { cx } from '@cerberus/styled-system/css'
+import { datePicker } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the DatePicker primitives.
+ * @module 'date-picker/primitives'
+ */
+
+/**
+ * The label component for the DatePicker.
+ */
+export function DatePickerLabel(props: DatePickerLabelProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Label
+      {...props}
+      className={cx(styles.label, props.className)}
+    />
+  )
+}
+
+/**
+ * The control component for the DatePicker which wraps the input and the
+ * triggers to open the DatePicker and clear the value.
+ */
+export function DatePickerControl(props: DatePickerControlProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The input component for the DatePicker.
+ */
+export function DatePickerInputEl(props: DatePickerInputProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Input
+      {...props}
+      className={cx(styles.input, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger component that opens the DatePicker.
+ */
+export function DatePickerTrigger(props: DatePickerTriggerProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The content component for the DatePicker.
+ */
+export function DatePickerContent(props: DatePickerContentProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Content
+      {...props}
+      className={cx(styles.content, props.className)}
+    />
+  )
+}
+
+/**
+ * The view control component for the DatePicker which wraps the triggers to
+ * switch between calendar views.
+ */
+export function DatePickerViewControl(props: DatePickerViewControlProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Control
+      {...props}
+      className={cx(styles.viewControl, props.className)}
+    />
+  )
+}
+
+/**
+ * The range text component for the DatePicker.
+ */
+export function DatePickerRangeText(props: DatePickerRangeTextProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.RangeText
+      {...props}
+      className={cx(styles.rangeText, props.className)}
+    />
+  )
+}
+
+/**
+ * The table component for the DatePicker.
+ */
+export function DatePickerTable(props: DatePickerTableProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.Table
+      {...props}
+      className={cx(styles.table, props.className)}
+    />
+  )
+}
+
+/**
+ * The header component for the DatePicker table.
+ */
+export function DatePickerTableHeader(props: DatePickerTableHeaderProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.TableHeader
+      {...props}
+      className={cx(styles.tableHeader, props.className)}
+    />
+  )
+}
+
+/**
+ * The table cell component for the DatePicker.
+ */
+export function DatePickerTableCell(props: DatePickerTableCellProps) {
+  const styles = datePicker()
+  return (
+    <DatePicker.TableCell
+      {...props}
+      className={cx(styles.tableCell, props.className)}
+    />
+  )
+}
+
+/**
+ * The table cell trigger component for the DatePicker.
+ */
+export function DatePickerTableCellTrigger(
+  props: DatePickerTableCellTriggerProps,
+) {
+  const styles = datePicker()
+  return (
+    <DatePicker.TableCellTrigger
+      {...props}
+      className={cx(styles.tableCellTrigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The root component of the DatePicker. This primitive has no Cerberus styles.
+ */
+export const DatePickerRoot = DatePicker.Root
+/**
+ * The label component of the DatePicker. This primitive has no Cerberus styles.
+ */
+export const DatePickerClearTrigger = DatePicker.ClearTrigger
+/**
+ * The control component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerPositioner = DatePicker.Positioner
+/**
+ * The year select input component of the DatePicker. This primitive has no
+ * Cerberus styles.
+ */
+export const DatePickerYearSelect = DatePicker.YearSelect
+/**
+ * The month select input component of the DatePicker. This primitive has no
+ * Cerberus styles.
+ */
+export const DatePickerMonthSelect = DatePicker.MonthSelect
+/**
+ * The day view component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerView = DatePicker.View
+/**
+ * The day context component of the DatePicker. This primitive has no
+ * Cerberus styles.
+ */
+export const DatePickerContext = DatePicker.Context
+/**
+ * The trigger component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerPrevTrigger = DatePicker.PrevTrigger
+/**
+ * The trigger component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerNextTrigger = DatePicker.NextTrigger
+/**
+ * The trigger component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerViewTrigger = DatePicker.ViewTrigger
+/**
+ * The table head component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerTableHead = DatePicker.TableHead
+/**
+ * The table row component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerTableRow = DatePicker.TableRow
+/**
+ * The table body component of the DatePicker. This primitive has no Cerberus
+ * styles.
+ */
+export const DatePickerTableBody = DatePicker.TableBody

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

@@ -0,0 +1,53 @@
+'use client'
+
+import type { DatePickerInputProps } from '@ark-ui/react/date-picker'
+import { useMemo, type InputHTMLAttributes } from 'react'
+import { DatePickerParts } from './parts'
+import { DatePickerTrigger } from './trigger'
+
+export interface RangePickerInputProps
+  extends Omit<DatePickerInputProps, 'defaultValue'> {
+  /**
+   * The defaultValue to add for the inputs. The first item is the start date
+   * and the second item is the end date.
+   */
+  defaultValue?: [
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+  ]
+}
+
+/**
+ * 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 RangePickerInput(props: RangePickerInputProps) {
+  const { defaultValue, ...nativeProps } = props
+
+  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])
+  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])
+
+  return (
+    <DatePickerParts.Control data-range>
+      <DatePickerTrigger />
+      <DatePickerParts.Input
+        {...nativeProps}
+        data-range-input
+        defaultValue={startDate}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={0}
+      />
+      <DatePickerParts.Input
+        {...nativeProps}
+        data-range-input
+        defaultValue={endDate}
+        data-range-end-input
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={1}
+      />
+    </DatePickerParts.Control>
+  )
+}

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

@@ -0,0 +1,28 @@
+'use client'
+
+import type { DatePickerTriggerProps } from '@ark-ui/react/date-picker'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../IconButton'
+import { DatePickerParts } from './parts'
+
+/**
+ * This private module contains the DatePicker trigger component.
+ * @module DatePickerTrigger
+ */
+
+/**
+ * An abstraction of the DatePickerTrigger that toggles the calender open.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerTrigger(props: DatePickerTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { calendar: CalendarIcon } = icons
+
+  return (
+    <DatePickerParts.Trigger {...props} asChild>
+      <IconButton ariaLabel="Open calendar" size="sm" usage="ghost">
+        <CalendarIcon />
+      </IconButton>
+    </DatePickerParts.Trigger>
+  )
+}

package/src/components/date-picker/view-control-group.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import type { DatePickerViewControlProps } from '@ark-ui/react/date-picker'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../IconButton'
+import { DatePickerParts } from './parts'
+import { Button } from '../button/button'
+import { css } from '@cerberus/styled-system/css'
+
+/**
+ * This private module contains an abstraction of the DatePickerViewControl
+ * primitive.
+ * @module 'date-picker/view-control-group'
+ */
+
+/**
+ * An abstraction of the DatePicker control that contains the prev, view, and
+ * next triggers which control the calendar output.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerViewControlGroup(props: DatePickerViewControlProps) {
+  const { icons } = useCerberusContext()
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons
+
+  return (
+    <DatePickerParts.ViewControl {...props}>
+      <DatePickerParts.PrevTrigger asChild>
+        <IconButton ariaLabel="Previous" size="sm">
+          <PrevIcon />
+        </IconButton>
+      </DatePickerParts.PrevTrigger>
+
+      <DatePickerParts.ViewTrigger asChild>
+        <Button
+          className={css({
+            h: '2rem',
+            paddingInline: 'md',
+          })}
+          shape="rounded"
+          size="sm"
+          usage="ghost"
+        >
+          <DatePickerParts.RangeText />
+        </Button>
+      </DatePickerParts.ViewTrigger>
+
+      <DatePickerParts.NextTrigger asChild>
+        <IconButton ariaLabel="Next" size="sm">
+          <NextIcon />
+        </IconButton>
+      </DatePickerParts.NextTrigger>
+    </DatePickerParts.ViewControl>
+  )
+}