@veracity/vui 2.13.6 → 2.14.0

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

package/src/calendar/hooks/useCalendar.ts

@@ -0,0 +1,181 @@
+import { useMemo } from 'react'
+
+import { generateDateByUTCValue, getDateUTCValue, sameDate, sameYear, sameYearSameMonth } from '../../utils'
+import { MonthProps, TimeItem, TimeResult } from '../calendar.types'
+import { viewYears } from '../consts'
+import { getNextDate, isDay, isExact, isFrom, isMonth, isRange, isTo, isYear } from '../utils'
+import { useBoundaries } from './useBoundaries'
+import { useSelectedDate } from './useSelectedDate'
+
+/**
+ * Main hook for doing calendar calculations
+ * Calculates for all time unit modes: day, month and year
+ * Depends on useBoundaries and useSelectedDate to do initial setup
+ */
+export const useCalendar = ({
+  boundaries,
+  selectedDates,
+  mode = 'exact',
+  timeUnitMode,
+  viewDate,
+  fixedNumberOfWeeks
+}: MonthProps) => {
+  const boundariesProcessed = useBoundaries({ boundaries })
+  const selectedProcessed = useSelectedDate({ selectedDates, mode })
+
+  return useMemo(() => {
+    const { maxDateTime, minDateTime } = boundariesProcessed
+    const { currentDateTime, maxSelectedDateTime, minSelectedDateTime } = selectedProcessed
+    const { utcYear: viewDateYear, utcMonth: viewDateMonth } = getDateUTCValue(viewDate)
+
+    let calendarFirstDay: Date
+    let calendarLastDay: Date
+    let nextFirstDay: Date
+    let prevLastDay: Date
+    let firstDay: Date
+    let lastDay: Date
+
+    if (isDay(timeUnitMode)) {
+      firstDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 1)
+      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0) // lastDay
+
+      nextFirstDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 1)
+      prevLastDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 0)
+
+      const weekdayFirst = firstDay.getUTCDay()
+      const weekdayLast = lastDay.getUTCDay()
+
+      // Monday preceding the month (or first day of the month if it's on a Monday)
+      calendarFirstDay =
+        weekdayFirst === 0
+          ? new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
+          : new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+
+      // Sunday after the month (or last day of the month if it's on a Sunday)
+      calendarLastDay =
+        weekdayLast === 0
+          ? new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
+          : new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+
+      // If calendar must contain constant number of weeks (6 weeks)
+      // Missing weeks will be added to the end of the month
+      const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
+      if (fixedNumberOfWeeks) {
+        for (let week = numberOfWeeks; week < 6; week++) {
+          calendarLastDay = generateDateByUTCValue(
+            calendarLastDay.getUTCFullYear(),
+            calendarLastDay.getUTCMonth(),
+            calendarLastDay.getUTCDate() + 7
+          )
+        }
+      }
+    } else if (isMonth(timeUnitMode)) {
+      calendarFirstDay = firstDay = generateDateByUTCValue(viewDateYear, 0, 1)
+      calendarLastDay = lastDay = generateDateByUTCValue(viewDateYear, 11, 31)
+      nextFirstDay = generateDateByUTCValue(viewDateYear + 1, 0, 1)
+      prevLastDay = generateDateByUTCValue(viewDateYear - 1, 11, 31)
+    } else {
+      const calendarStartYear = new Date().getUTCFullYear() - viewYears / 2
+      const diffYears = calendarStartYear - viewDateYear
+
+      const startYear = calendarStartYear - Math.ceil(diffYears / viewYears) * viewYears
+      const endYear = startYear + viewYears - 1
+
+      if (startYear === 1753) calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 2)
+      else calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 1)
+
+      calendarLastDay = lastDay = generateDateByUTCValue(endYear, 11, 31)
+      nextFirstDay = generateDateByUTCValue(endYear + 1, 0, 1)
+      prevLastDay = generateDateByUTCValue(startYear - 1, 11, 31)
+    }
+
+    const items: TimeItem[] = []
+
+    // Loops between first and last date
+    let dateItem = calendarFirstDay
+    do {
+      const isHidden = dateItem < firstDay || dateItem >= lastDay
+      const isToday = sameDate(dateItem, new Date())
+      const { utcYear: minDateYear, utcMonth: minDateMonth } = getDateUTCValue(minDateTime)
+
+      let minUnitModeDate = minDateTime
+      if (isMonth(timeUnitMode))
+        // Need to compare with the first day of the month to decide if the month is disabled in the month overview
+        minUnitModeDate = generateDateByUTCValue(minDateYear, minDateMonth, 1)
+      else if (isYear(timeUnitMode))
+        // Need to compare with the first day of the year to decide if the year is disabled in the year overview
+        minUnitModeDate = generateDateByUTCValue(minDateYear, 0, 1)
+
+      const isDisabled = dateItem < minUnitModeDate || dateItem > maxDateTime ? true : false
+
+      // The calendar only select a single date
+      const isExactSelected = isExact(mode) && minSelectedDateTime && +dateItem === +minSelectedDateTime
+
+      // The calendar selects a range
+      const inRangeLow = minSelectedDateTime && dateItem >= minSelectedDateTime
+      const inRangeHigh = maxSelectedDateTime && dateItem <= maxSelectedDateTime
+
+      const inRange =
+        !isExact(mode) &&
+        ((!isDisabled && inRangeLow && (!maxSelectedDateTime || inRangeHigh)) ||
+          (inRangeHigh && (!minSelectedDateTime || inRangeLow)))
+
+      const isRangeSelected = isRange(mode) && inRange
+      const isFromSelected = isFrom(mode) && inRangeLow
+      const isToSelected = isTo(mode) && inRangeHigh
+
+      const isSelected = !!(isExactSelected || isFromSelected || isToSelected || isRangeSelected)
+
+      let maxSelectedCheck = maxSelectedDateTime
+      let minSelectedCheck = minSelectedDateTime
+
+      if (isYear(timeUnitMode)) {
+        if (maxSelectedCheck) maxSelectedCheck = generateDateByUTCValue(maxSelectedCheck.getUTCFullYear(), 0, 1)
+        if (minSelectedCheck) minSelectedCheck = generateDateByUTCValue(minSelectedCheck.getUTCFullYear(), 0, 1)
+      }
+      if (isMonth(timeUnitMode)) {
+        if (maxSelectedCheck)
+          maxSelectedCheck = generateDateByUTCValue(
+            maxSelectedCheck.getUTCFullYear(),
+            maxSelectedCheck.getUTCMonth(),
+            1
+          )
+        if (minSelectedCheck)
+          minSelectedCheck = generateDateByUTCValue(
+            minSelectedCheck.getUTCFullYear(),
+            minSelectedCheck.getUTCMonth(),
+            1
+          )
+      }
+
+      const boundary = !isTo(mode) && sameDate(dateItem, minSelectedCheck)
+
+      let current: boolean
+      if (isDay(timeUnitMode)) current = sameDate(dateItem, currentDateTime)
+      else if (isMonth(timeUnitMode)) current = sameYearSameMonth(dateItem, currentDateTime)
+      else current = sameYear(dateItem, currentDateTime)
+
+      items.push({
+        date: dateItem,
+        isHidden,
+        isToday,
+        isDisabled: boundary ? false : isDisabled,
+        isSelected,
+        boundary,
+        current
+      })
+
+      dateItem = getNextDate(dateItem, timeUnitMode)
+    } while (dateItem <= calendarLastDay)
+
+    // Disables next/prev buttons
+    const prevDisabled = minDateTime > prevLastDay
+    const nextDisabled = maxDateTime < nextFirstDay
+
+    return {
+      items,
+      prevDisabled,
+      nextDisabled
+    } as TimeResult
+  }, [boundaries, selectedDates, mode, timeUnitMode, viewDate])
+}

package/src/calendar/hooks/useDefaultViewMonth.ts

@@ -0,0 +1,18 @@
+import { DefaultViewMonthProps } from '../calendar.types'
+
+/**
+ * Calculates the default view date, either using selected date, current date or boundaries
+ * Used when initializing, after that viewDate will be set
+ * Memoized so will only recalculate when boundaries or selectedDate changes
+ */
+export const useDefaultViewMonth = ({ boundaries, selectedDate, isStartDate }: DefaultViewMonthProps) => {
+  if (selectedDate) return selectedDate
+
+  const currentDate = new Date()
+  if (!boundaries) return currentDate
+
+  if (boundaries.endDate && currentDate > boundaries.endDate && !isStartDate) return boundaries.endDate
+  if (boundaries.startDate && currentDate > boundaries.startDate && isStartDate) return boundaries.startDate
+
+  return currentDate
+}

package/src/calendar/hooks/useSelectedDate.ts

@@ -0,0 +1,20 @@
+import { CalendarMode, DateRange } from '../calendar.types'
+import { isExact, isFrom } from '../utils'
+
+/**
+ * Calculate the selected dates
+ * If we are in single calendar mode, will use the startDate as selected date
+ * Memoized so will only recalculate when selectedDates or mode changes
+ */
+export const useSelectedDate = ({ selectedDates, mode }: { mode: CalendarMode; selectedDates?: DateRange }) => {
+  const currentDateTime = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate
+
+  const minSelectedDateTime = selectedDates?.startDate || undefined
+  const maxSelectedDateTime = selectedDates?.endDate || undefined
+
+  return {
+    currentDateTime,
+    maxSelectedDateTime,
+    minSelectedDateTime
+  }
+}

package/src/calendar/index.ts

@@ -0,0 +1,4 @@
+export * from './calendar'
+export { default } from './calendar'
+export * from './calendar.types'
+export * from './consts'

package/src/calendar/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}