@veracity/vui 2.14.0-beta.0 → 2.14.0

package/dist/esm/utils/formatDate.d.ts

@@ -0,0 +1,15 @@
+export type DateFormat = 'DD MM YYYY' | 'DD MM YYYY, HH:MM' | 'DD MMM' | 'DD MMM YYYY' | 'DD MMM YYYY, HH:MM' | 'DD MMM, HH:MM' | 'HH:MM' | 'MMM D, YYYY' | 'YYYY/MM/DD' | 'YYYY-MM-DD' | 'YYYY/MM/DD, HH:MM' | 'YYYY-MM-DD, HH:MM' | 'YYYY-MM-DD, HH:MM:SS';
+export type FormatDateOptions = Intl.DateTimeFormatOptions & {
+    locales?: string | string[];
+};
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+export declare const dateFormats: Record<DateFormat, FormatDateOptions>;
+/**
+ * Structures given date string, milliseconds number or Date object according to the chosen format.
+ * Uses toLocalDateString internally. Predefined formats specify initial options, which can be overwritten.
+ * @param date - string, number or Date object accepted by Date() constructor
+ * @param format - predefined configuration of DateTimeFormatOptions
+ * @param options - configuration of toLocaleDateString method
+ */
+export declare function formatDate(date?: string | number | Date, format?: DateFormat, options?: FormatDateOptions): string;
+//# sourceMappingURL=formatDate.d.ts.map

package/dist/esm/utils/formatDate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatDate.d.ts","sourceRoot":"","sources":["../../../src/utils/formatDate.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,YAAY,GACZ,mBAAmB,GACnB,QAAQ,GACR,aAAa,GACb,oBAAoB,GACpB,eAAe,GACf,OAAO,GACP,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,sBAAsB,CAAA;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC3D,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5B,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAc7D,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,GAAE,UAAyB,EACjC,OAAO,CAAC,EAAE,iBAAiB,UAgB5B"}

package/dist/esm/utils/formatDate.js

@@ -0,0 +1,36 @@
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+export const dateFormats = {
+    'DD MM YYYY': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'DD MM YYYY, HH:MM': { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'DD MMM': { month: 'short', day: '2-digit' },
+    'DD MMM YYYY': { year: 'numeric', month: 'short', day: '2-digit' },
+    'DD MMM YYYY, HH:MM': { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'DD MMM, HH:MM': { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'HH:MM': { locales: 'en-GB', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' },
+    'MMM D, YYYY': { locales: 'en-US', year: 'numeric', month: 'short', day: 'numeric' },
+    'YYYY/MM/DD': { locales: 'en-ZA' },
+    'YYYY-MM-DD': { locales: 'fr-CA' },
+    'YYYY/MM/DD, HH:MM': { locales: 'en-ZA', hour: '2-digit', minute: '2-digit' },
+    'YYYY-MM-DD, HH:MM': { locales: 'fr-CA', timeStyle: 'short' },
+    'YYYY-MM-DD, HH:MM:SS': { locales: 'fr-CA' }
+};
+/**
+ * Structures given date string, milliseconds number or Date object according to the chosen format.
+ * Uses toLocalDateString internally. Predefined formats specify initial options, which can be overwritten.
+ * @param date - string, number or Date object accepted by Date() constructor
+ * @param format - predefined configuration of DateTimeFormatOptions
+ * @param options - configuration of toLocaleDateString method
+ */
+export function formatDate(date, format = 'DD MM YYYY', options) {
+    const formatOptions = dateFormats[format];
+    const { locales, ...mergedOptions } = { ...formatOptions, ...options };
+    if (format === 'YYYY-MM-DD, HH:MM:SS' || format === 'YYYY-MM-DD, HH:MM') {
+        return date
+            ? new Date(date).toLocaleDateString(locales) + ', ' + new Date(date).toLocaleTimeString(undefined, mergedOptions)
+            : '';
+    }
+    if (format === 'HH:MM') {
+        return date ? new Date(date).toLocaleTimeString(locales, mergedOptions) : '';
+    }
+    return date ? new Date(date).toLocaleDateString(locales, mergedOptions) : '';
+}

package/dist/esm/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from './assertion';
 export * from './consts';
 export * from './dates';
 export * from './dom';
+export * from './formatDate';
 export * from './function';
 export * from './number';
 export * from './object';

package/dist/esm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}

package/dist/esm/utils/index.js

@@ -3,6 +3,7 @@ export * from './assertion';
 export * from './consts';
 export * from './dates';
 export * from './dom';
+export * from './formatDate';
 export * from './function';
 export * from './number';
 export * from './object';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.14.0-beta.0",
+  "version": "2.14.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/calendar/calendar.styles.ts

@@ -0,0 +1,75 @@
+import Box from '../box'
+import { css, styled, th } from '../core'
+import Link from '../link'
+import { ItemProps } from './calendar.types'
+
+export const boundary = css`
+  background-color: ${th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`
+
+export const current = css`
+  background-color: ${th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`
+
+export const isDisabled = css`
+  color: ${th.color('sandstone.main')} !important;
+  cursor: not-allowed;
+`
+
+export const isHidden = css`
+  color: ${th.color('darkBlue.75')} !important;
+`
+
+export const isToday = css`
+  border: 1px solid ${th.color('seaBlue.main')};
+`
+
+export const hover = css`
+  background-color: ${th.color('skyBlue.85')};
+  color: ${th.color('seaBlue.main')};
+  border-radius: 0;
+`
+
+export const isSelected = css`
+  background-color: ${th.color('skyBlue.85')};
+  border-radius: 0;
+  color: white;
+`
+
+export const CalendarItem = styled(Link)<ItemProps>`
+  aspect-ratio: 1;
+  border: 0;
+  cursor: pointer;
+  height: 100%;
+  justify-content: center;
+  text-decoration: none;
+  width: 100%;
+
+  ${p => p.isHidden && isHidden}
+  ${p => p.isToday && isToday}
+  ${p => p.isDisabled && isDisabled}
+    ${p => p.isSelected && isSelected}
+    ${p => p.boundary && boundary}
+    ${p => p.current && current}
+
+    &:hover {
+    color: inherit;
+    text-decoration: none;
+
+    ${p => !p.isDisabled && hover}
+  }
+`
+
+export const CalendarItemsContainer = styled(Box)`
+  align-items: center;
+  column-gap: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 62px);
+  justify-items: center;
+  row-gap: 0;
+`

package/src/calendar/calendar.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import Box from '../box'
+import { omitThemingProps, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'
+import { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components'
+import { useCalendar, useDefaultViewMonth } from './hooks'
+import {
+  isDay,
+  isExact,
+  isFrom,
+  isMonth,
+  isTo,
+  isYear,
+  processSelectMonth,
+  processSelectYear,
+  processViewDate
+} from './utils'
+
+/** [Beta] Displays calendar. */
+export const Calendar = vui<'div', CalendarProps>((props, ref) => {
+  const {
+    boundaries,
+    className,
+    fixedNumberOfWeeks = false,
+    disabled,
+    isStartDate,
+    mode,
+    onSelectDates,
+    selectedDates,
+    ...rest
+  } = omitThemingProps(props)
+  const styles = useStyleConfig('Calendar', props)
+
+  const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate)
+
+  /**
+   * Effect to reset viewDate when selectedDates changes (onReset)
+   */
+  useEffect(() => {
+    currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate
+    currentDateRef.current && setViewDate(currentDateRef.current)
+  }, [selectedDates])
+
+  const calendarRef = useRef<TimeResult | null>(null)
+
+  const defaultViewMonth = useDefaultViewMonth({
+    boundaries,
+    selectedDate: currentDateRef.current,
+    isStartDate
+  })
+
+  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')
+  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)
+
+  /**
+   * Handles clicking next/prev in header
+   */
+  const onChangeViewItem = (direction: FlowDirection) => {
+    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)
+    newViewMonth && setViewDate(newViewMonth)
+  }
+
+  /**
+   * Handles clicking on a day
+   */
+  const onSelectDay = (clickedDate: Date) => () => {
+    updateDateState(clickedDate)
+    setViewDate(clickedDate)
+  }
+
+  /**
+   * Handles clicking on a month
+   */
+  const onSelectMonth = (clickedDate: Date) => () => {
+    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)
+    updateDateState(processedNewDate)
+    setViewDate(processedNewDate)
+    setTimeUnitMode('day')
+  }
+
+  /**
+   * Handles clicking on a year
+   */
+  const onSelectYear = (clickedDate: Date) => () => {
+    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)
+    updateDateState(processedNewDate)
+    setViewDate(processedNewDate)
+    setTimeUnitMode('month')
+  }
+
+  /**
+   * Send update date to parent component
+   */
+  const updateDateState = (newDate: Date) => {
+    const dateRange: DateRange = { ...selectedDates }
+
+    if (dateRange) {
+      if (isTo(mode)) dateRange.endDate = newDate
+      else dateRange.startDate = newDate
+    }
+
+    if (newDate && !disabled) onSelectDates && onSelectDates(dateRange)
+  }
+
+  const calendar = (calendarRef.current = useCalendar({
+    boundaries,
+    mode,
+    selectedDates,
+    timeUnitMode,
+    viewDate,
+    fixedNumberOfWeeks
+  }))
+
+  return (
+    <Box
+      className={cs('vui-calendar', className)}
+      column
+      cursor="default"
+      minW={280}
+      position="relative"
+      ref={ref}
+      w="fit-content"
+      {...styles}
+      {...rest}
+    >
+      <CalendarHeader
+        nextDisabled={calendar.nextDisabled}
+        onChangeViewItem={onChangeViewItem}
+        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}
+        prevDisabled={calendar.prevDisabled}
+        timeUnitMode={timeUnitMode}
+        viewMonth={viewDate}
+      />
+      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}
+      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}
+      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}
+    </Box>
+  )
+})
+
+Calendar.displayName = 'Calendar'
+
+export default Calendar

package/src/calendar/calendar.types.ts

@@ -0,0 +1,91 @@
+import { BoxProps } from '../box'
+import { ThemingProps } from '../theme'
+
+export interface DateRange {
+  startDate?: Date
+  endDate?: Date
+}
+
+export type FlowDirection = 'next' | 'prev'
+
+/**
+ * Mode for this calendar
+ * Should it handle from date, to date or single date mode
+ */
+export type CalendarMode = 'exact' | 'from' | 'to' | 'range'
+
+export interface DefaultViewMonthProps {
+  boundaries?: DateRange
+  isStartDate?: boolean
+  selectedDate?: Date
+}
+
+export interface MonthProps {
+  boundaries?: DateRange
+  fixedNumberOfWeeks?: boolean
+  mode: CalendarMode
+  selectedDates?: DateRange
+  timeUnitMode?: TimeUnitMode
+  viewDate: Date
+}
+
+export type ItemProps = {
+  boundary?: boolean
+  current?: boolean
+  isDisabled?: boolean
+  isHidden?: boolean
+  isToday?: boolean
+  isSelected?: boolean
+}
+
+/**
+ * Single time item like day in a month, month in a year and year in multiple years
+ */
+export interface TimeItem {
+  /** item is at the edge for a range, marking either start or end of it */
+  boundary: boolean
+  /** item is clicked and selected by the user */
+  current: boolean
+  /** the actual time item */
+  date: Date
+  /** disabled because out of bounds */
+  isDisabled: boolean
+  /** item should be hidden, for days we hide days that are not in the current month,
+   * but still are rendered due to weekDays */
+  isHidden: boolean
+  /** item is in the selected range between two dates */
+  isSelected: boolean
+  /** the date is today*/
+  isToday: boolean
+}
+
+/**
+ * All the date items in a view and whether next/prev button should be disabled
+ */
+export interface TimeResult {
+  items: TimeItem[]
+  nextDisabled: boolean
+  prevDisabled: boolean
+}
+
+/**
+ * Time mode for calendar, display days in month, months in year or years in multiple years
+ */
+export type TimeUnitMode = 'day' | 'month' | 'year'
+
+export type CalendarProps = Omit<BoxProps, 'size' | 'variant'> &
+  ThemingProps<'Calendar'> & {
+    /** Allowed range to select from */
+    boundaries?: DateRange
+    className?: string
+    disabled?: boolean
+    /** Including always 6 weeks into a month (used to have stable height in the calendar) */
+    fixedNumberOfWeeks?: boolean
+    isStartDate?: boolean
+    /** Calendar select mode: 'exact' | 'from' | 'to' | 'range' @default 'exact' */
+    mode: CalendarMode
+    /** On selecting a day */
+    onSelectDates?: (value: DateRange) => void
+    /** Selected date */
+    selectedDates?: DateRange
+  }

package/src/calendar/components/calendarHeader.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from 'react'
+
+import Box from '../../box'
+import { IconButton } from '../../button'
+import { cs } from '../../utils'
+import { FlowDirection, TimeUnitMode } from '../calendar.types'
+import { TimeUnitHeader } from './timeUnitHeader'
+
+type Props = {
+  nextDisabled?: boolean
+  onChangeViewItem: (direction: FlowDirection) => void
+  onSetTimeUnitMode: (mode: TimeUnitMode) => void
+  prevDisabled?: boolean
+  timeUnitMode: TimeUnitMode
+  viewMonth: Date
+}
+
+const size = 40
+
+/**
+ * Header for the calendar
+ */
+export const CalendarHeader: FC<Props> = ({
+  nextDisabled,
+  onChangeViewItem,
+  onSetTimeUnitMode,
+  prevDisabled,
+  timeUnitMode,
+  viewMonth
+}) => (
+  <Box borderBottom="1px solid lightgray" centerV className={cs('vui-calendar-header')}>
+    <Box className="vui-calendar-header-left">
+      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />
+    </Box>
+    <Box className="vui-calendar-header-right" flex="1" justify="flex-end">
+      <IconButton
+        className="icon"
+        disabled={prevDisabled}
+        h={size}
+        icon="falChevronLeft"
+        onClick={() => onChangeViewItem('prev')}
+        size="sm"
+        w={size}
+      />
+      <IconButton
+        className="icon"
+        disabled={nextDisabled}
+        h={size}
+        icon="falChevronRight"
+        onClick={() => onChangeViewItem('next')}
+        size="sm"
+        w={size}
+      />
+    </Box>
+  </Box>
+)

package/src/calendar/components/dayPicker.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import Box from '../../box'
+import { styled, th } from '../../core'
+import { cs } from '../../utils'
+import { CalendarItem, CalendarItemsContainer } from '../calendar.styles'
+import { ItemProps, TimeResult } from '../calendar.types'
+import { weekDays } from '../consts'
+
+type DayPickerProps = {
+  calendar: TimeResult
+  onSelectDay?: (date: Date) => void
+}
+
+const DayItem = styled(CalendarItem)<ItemProps>`
+  aspect-ratio: 1;
+  position: relative;
+  font-size: 14px;
+  font-weight: 500;
+  width: 40px;
+  height: 40px;
+  color: ${th.color('seaBlue.main')};
+`
+
+const DaysContainer = styled(CalendarItemsContainer)`
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto;
+`
+
+export const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (
+  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>
+    {weekDays.map((day, index) => (
+      <Box
+        border={0}
+        className="dayHeader"
+        color="seaBlue.main"
+        fontSize={16}
+        fontWeight={500}
+        key={`week-day-${index}`}
+      >
+        {day}
+      </Box>
+    ))}
+    {calendar.items.map(item => (
+      <DayItem
+        className={cs('vui-day-item')}
+        key={item.date.getTime()}
+        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}
+        {...item}
+      >
+        {item.date.getUTCDate()}
+      </DayItem>
+    ))}
+  </DaysContainer>
+)

package/src/calendar/components/index.ts

@@ -0,0 +1,5 @@
+export * from './dayPicker'
+export * from './calendarHeader'
+export * from './monthPicker'
+export * from './timeUnitHeader'
+export * from './yearPicker'

package/src/calendar/components/monthPicker.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { cs } from '../../utils'
+import { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'
+import { TimeResult } from '../calendar.types'
+import { monthsShort } from '../consts'
+
+type MonthPickerProps = {
+  calendar: TimeResult
+  onSelectMonth?: (date: Date) => void
+}
+
+export const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (
+  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows="repeat(4, 65px)">
+    {calendar.items.map(item => (
+      <MonthItem
+        fontWeight={500}
+        key={item.date.getTime()}
+        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}
+        {...item}
+      >
+        {monthsShort[item.date.getUTCMonth()]}
+      </MonthItem>
+    ))}
+  </CalendarItemsContainer>
+)

package/src/calendar/components/timeUnitHeader.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react'
+
+import { Box } from '../../box'
+import { Button } from '../../button'
+import { cs } from '../../utils'
+import { TimeUnitMode } from '../calendar.types'
+import { months } from '../consts'
+import { isDay, isMonth, isYear } from '../utils'
+
+const h = 40
+const fontSize = 16
+
+type TimeUnitHeaderProps = {
+  onSetTimeUnitMode: (mode: TimeUnitMode) => void
+  timeUnitMode: TimeUnitMode
+  viewMonth: Date
+}
+
+/**
+ * Displays the header title with the month and year being viewed
+ */
+export const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
+  return (
+    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justify="start">
+      {isDay(timeUnitMode) && (
+        <>
+          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('month')} variant="tertiaryDark">
+            {months[viewMonth.getUTCMonth()]}
+          </Button>
+          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+            {viewMonth.getUTCFullYear()}
+          </Button>
+        </>
+      )}
+      {isMonth(timeUnitMode) && (
+        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+          {viewMonth.getUTCFullYear()}
+        </Button>
+      )}
+      {isYear(timeUnitMode) && (
+        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('day')} variant="tertiaryDark">
+          Year
+        </Button>
+      )}
+    </Box>
+  )
+}

package/src/calendar/components/yearPicker.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { CalendarItem as YearItem, CalendarItemsContainer } from '../calendar.styles'
+import { TimeResult } from '../calendar.types'
+
+type YearPickerProps = {
+  calendar: TimeResult
+  onSelectYear?: (date: Date) => void
+}
+
+export const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (
+  <CalendarItemsContainer className="vui-year-picker">
+    {calendar.items.map(item => (
+      <YearItem
+        fontWeight={500}
+        key={item.date.getTime()}
+        onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}
+        {...item}
+      >
+        {item.date.getUTCFullYear()}
+      </YearItem>
+    ))}
+  </CalendarItemsContainer>
+)

package/src/calendar/consts.ts

@@ -0,0 +1,24 @@
+export const viewYears = 12
+
+export const maxDateTimestamp = '9000-12-31T23:59:59Z'
+
+export const minDateTimestamp = '1753-01-02T00:00:00Z'
+
+export const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]
+
+export const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+export const weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']

package/src/calendar/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useBoundaries'
+export * from './useCalendar'
+export * from './useDefaultViewMonth'
+export * from './useSelectedDate'

package/src/calendar/hooks/useBoundaries.ts

@@ -0,0 +1,16 @@
+import { DateRange } from '../calendar.types'
+import { maxDateTimestamp, minDateTimestamp } from '../consts'
+
+/**
+ * Calculates boundaries for max/min dates allowed
+ * Memoized so it will only recalculate when the boundaries changes
+ */
+export const useBoundaries = ({ boundaries }: { boundaries?: DateRange }) => {
+  const min = new Date(minDateTimestamp)
+  const max = new Date(maxDateTimestamp)
+
+  const minDateTime = boundaries?.startDate || min
+  const maxDateTime = boundaries?.endDate || max
+
+  return { maxDateTime, minDateTime }
+}