@northlight/ui 2.41.0 → 2.41.1

package/lib/components/date-picker/components/calendar/components/calendar-cell.tsx

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react'
+import { chakra } from '@chakra-ui/react'
+import { useCalendarCell } from '@react-aria/calendar'
+import { isSameMonth, today } from '@internationalized/date'
+import { CalendarCellProps } from './types'
+import { Button } from '../../../../button'
+
+export const CalendarCell = ({
+  state,
+  date,
+  currentMonth,
+}: CalendarCellProps) => {
+  const ref = useRef<HTMLButtonElement>(null)
+  const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
+    { date },
+    state,
+    ref
+  )
+  const isToday = date.compare(today(state.timeZone)) === 0
+
+  const isOutsideMonth = !isSameMonth(currentMonth, date)
+
+  return (
+    <chakra.td { ...cellProps }>
+      <Button
+        { ...buttonProps }
+        ref={ ref }
+        borderRadius="xs"
+        boxSize={ 8 }
+        hidden={ isOutsideMonth }
+        size="sm"
+        fontWeight="medium"
+        variant={ isSelected ? 'brand' : 'ghost' }
+        ring={ isToday && !isSelected ? '1px' : '0px' }
+        ringColor="brand"
+      >
+        { formattedDate }
+      </Button>
+    </chakra.td>
+  )
+}

package/lib/components/date-picker/components/calendar/components/calendar-grid.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react'
+import { chakra } from '@chakra-ui/react'
+import { useCalendarGrid } from '@react-aria/calendar'
+import { getWeeksInMonth } from '@internationalized/date'
+import { times } from 'ramda'
+import { Table, Tbody, Thead, Tr } from '../../../../table'
+import { CalendarCell } from './calendar-cell'
+import { CalendarGridProps } from './types'
+import { DayLabels } from './day-labels'
+import { getWeekdays } from './utils'
+
+export const CalendarGrid = memo(
+  ({ state, locale, firstDayOfWeek, ...rest }: CalendarGridProps) => {
+    const startDate = state.visibleRange.start
+    const { gridProps, headerProps } = useCalendarGrid(rest, state)
+    const weeksInMonth = getWeeksInMonth(startDate, locale)
+    const weekDays = getWeekdays(firstDayOfWeek)
+
+    return (
+      <Table variant="unstyled" { ...gridProps }>
+        <Thead { ...headerProps }>
+          <Tr>
+            <DayLabels weekDays={ weekDays } />
+          </Tr>
+        </Thead>
+        <Tbody>
+          { times(
+            (weekIndex) => (
+              <Tr key={ weekIndex }>
+                { state
+                  .getDatesInWeek(weekIndex, startDate)
+                  .map((date) =>
+                    (date ? (
+                      <CalendarCell
+                        key={ date.day }
+                        state={ state }
+                        date={ date }
+                        currentMonth={ startDate }
+                      />
+                    ) : (
+                      <chakra.td />
+                    ))
+                  ) }
+              </Tr>
+            ),
+            weeksInMonth
+          ) }
+        </Tbody>
+      </Table>
+    )
+  }
+)

package/lib/components/date-picker/components/calendar/components/day-labels.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react'
+import { chakra, useMultiStyleConfig } from '@chakra-ui/system'
+import { DayLabelsProps } from './types'
+
+export const DayLabels = memo(({ weekDays }: DayLabelsProps) => {
+  const { dayLabel } = useMultiStyleConfig('Calendar')
+  const weekDaysWithIds = weekDays.map((day, i) => ({ label: day, _id: i }))
+
+  return (
+    <>
+      { weekDaysWithIds.map(({ label, _id }) => (
+        <chakra.th key={ _id } __css={ dayLabel }>
+          { label }
+        </chakra.th>
+      )) }
+    </>
+  )
+})

package/lib/components/date-picker/components/calendar/components/get-week-number-start-of-month.ts

@@ -0,0 +1,68 @@
+const MILLISECONDS_PER_DAY = 86400000
+
+const getThursdayDate = (date: Date): Date => {
+  const thursdayDate = new Date(date)
+  thursdayDate.setDate(date.getDate() + (4 - (date.getDay() || 7)))
+  return thursdayDate
+}
+
+const hasWeek53 = (year: number): boolean => {
+  const firstDayOfYear = new Date(year, 0, 1)
+  return firstDayOfYear.getDay() === 4 ||
+         (firstDayOfYear.getDay() === 3 && new Date(year, 1, 29).getMonth() === 1)
+}
+
+export const getWeekNumberAtStartOfMonth = (
+  year: number,
+  month: number
+): number => {
+  const firstDayOfMonth = new Date(year, month - 1, 1)
+  const thursdayOfFirstWeek = getThursdayDate(firstDayOfMonth)
+  const firstDayOfYear = new Date(year, 0, 1)
+  const firstThursdayOfYear = getThursdayDate(firstDayOfYear)
+  const daysDifference = thursdayOfFirstWeek.getTime() - firstThursdayOfYear.getTime()
+  const weekNumber = Math.ceil((daysDifference / MILLISECONDS_PER_DAY + 1) / 7)
+
+  const isYearTransition = firstThursdayOfYear.getFullYear() < year
+  const isJanuaryTransition = isYearTransition
+  && thursdayOfFirstWeek.getFullYear() < year && month === 1
+
+  if (isJanuaryTransition) {
+    return hasWeek53(year - 1) ? 53 : 52
+  }
+
+  if (isYearTransition && month > 1) {
+    return weekNumber - 1
+  }
+
+  if (month === 1 && weekNumber > 51) {
+    return !hasWeek53(year - 1) ? 1 : weekNumber
+  }
+
+  return weekNumber
+}
+
+export const getDisplayWeek = (
+  baseWeek: number,
+  weekIndex: number,
+  year: number,
+  month: number
+): number => {
+  const isJanuaryEdgeCase = month === 1 && baseWeek > 51
+
+  if (isJanuaryEdgeCase) {
+    return weekIndex === 0 ? baseWeek : weekIndex
+  }
+
+  if (weekIndex === 0) {
+    return baseWeek
+  }
+
+  const nextWeek = baseWeek + weekIndex
+
+  if (nextWeek > 52) {
+    return hasWeek53(year) && nextWeek === 53 ? 53 : nextWeek - 52
+  }
+
+  return nextWeek
+}

package/lib/components/date-picker/components/calendar/components/index.ts

@@ -0,0 +1,3 @@
+export * from './calendar-grid'
+export * from './month-button'
+export * from './standalone-calendar-grid'

package/lib/components/date-picker/components/calendar/components/month-button.tsx

@@ -0,0 +1,21 @@
+import React, { useRef } from 'react'
+import { useButton } from '@react-aria/button'
+import { Button } from '../../../../button'
+import { MonthButtonProps } from './types'
+
+export const MonthButton = ({ children, ...rest }: MonthButtonProps) => {
+  const ref = useRef<HTMLButtonElement>(null)
+  const { buttonProps } = useButton(rest, ref)
+
+  return (
+    <Button
+      { ...buttonProps }
+      boxSize={ 8 }
+      size="xs"
+      variant="ghost"
+      ref={ ref }
+    >
+      { children }
+    </Button>
+  )
+}

package/lib/components/date-picker/components/calendar/components/range-cell.tsx

@@ -0,0 +1,75 @@
+import React, { useRef } from 'react'
+import { chakra } from '@chakra-ui/react'
+import { useCalendarCell } from '@react-aria/calendar'
+import { isSameMonth, today } from '@internationalized/date'
+import { equals } from 'ramda'
+import { RangeCellProps } from './types'
+
+export const RangeCell = ({
+  state,
+  date,
+  currentMonth,
+  range,
+}: RangeCellProps) => {
+  const isOutsideMonth = !isSameMonth(currentMonth, date)
+  if (isOutsideMonth) return <chakra.td />
+
+  const ref = useRef<HTMLButtonElement>(null)
+  const {
+    cellProps,
+    buttonProps,
+    isSelected: baseIsSelected,
+    formattedDate,
+  } = useCalendarCell({ date }, state, ref)
+
+  const isToday = date.compare(today(state.timeZone)) === 0
+
+  const isHighlighted = range && date < range.end && date > range.start
+
+  const isSelected =
+    range &&
+    !isHighlighted &&
+    (equals(date, range.start) || equals(date, range.end))
+
+  return (
+    <chakra.td { ...cellProps }>
+      <chakra.button
+        { ...buttonProps }
+        type="button"
+        ref={ ref }
+        borderRadius="xs"
+        bgColor={
+          isHighlighted ? 'brand-alt' : isSelected ? 'brand' : 'transparent'
+        }
+        color={ isSelected ? 'text.inverted' : 'text.default' }
+        fontSize="sm"
+        ring={ isToday && !isSelected ? '1px' : '0px' }
+        ringColor="brand"
+        mx="-1px"
+        ml={ isToday ? '-2px ' : undefined }
+        my="0a"
+        w="8"
+        h="8"
+        fontWeight="medium"
+        opacity={ isSelected && !baseIsSelected ? '0.4' : '1' }
+        _focusVisible={ {
+          outline: 'none',
+          ring: '2px',
+          ringColor: 'border.wcag',
+          ringOffset: '1px',
+        } }
+        _hover={ {
+          bgColor: isSelected ? ' background.button.brand-hover' : 'bg.filled',
+          _disabled: {
+            bgColor: 'transparent',
+          },
+        } }
+        _disabled={ {
+          opacity: 0.3,
+        } }
+      >
+        { formattedDate }
+      </chakra.button>
+    </chakra.td>
+  )
+}

package/lib/components/date-picker/components/calendar/components/standalone-calendar-grid.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react'
+import { chakra } from '@chakra-ui/react'
+import { useCalendar, useCalendarGrid } from '@react-aria/calendar'
+import { getWeeksInMonth } from '@internationalized/date'
+import { times } from 'ramda'
+import { useLocale } from '@react-aria/i18n'
+import { CalendarState } from '@react-stately/calendar'
+import { ChevronLeftSolid, ChevronRightSolid } from '@northlight/icons'
+import { DayLabels } from './day-labels'
+import { Box } from '../../../../box'
+import { HStack, Stack } from '../../../../stack'
+import { Flex } from '../../../../flex'
+import { Icon } from '../../../../icon'
+import { Small } from '../../../../typography'
+import { MonthSelect, YearSelectRangeCalendar } from '../date-select'
+import { MonthButton } from './month-button'
+import { getDisplayWeek, getWeekNumberAtStartOfMonth } from './get-week-number-start-of-month'
+import { RangeCell } from './range-cell'
+import { DateRangeValue } from '../quick-navigation/types'
+import { FirstDayOfWeek } from './types'
+import { getWeekdays } from './utils'
+
+interface StandaloneCalendarGridProps {
+  state: CalendarState
+  range: DateRangeValue | undefined
+  firstDayOfWeek: FirstDayOfWeek
+}
+
+export const StandaloneCalendarGrid = ({
+  state,
+  range,
+  firstDayOfWeek,
+  ...rest
+}: StandaloneCalendarGridProps) => {
+  const { locale } = useLocale()
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    {},
+    state
+  )
+  const startDate = state.visibleRange.start
+  const { gridProps, headerProps } = useCalendarGrid(rest, state)
+  const weekDays = getWeekdays(firstDayOfWeek)
+  const weeksInMonth = getWeeksInMonth(startDate, locale)
+  const weekNumberStart = useMemo(() => {
+    const weekNumber = getWeekNumberAtStartOfMonth(startDate.year, startDate.month)
+    return weekNumber
+  }, [ startDate.year, startDate.month ])
+
+  return (
+    <Box { ...calendarProps } h="265px" p="0">
+      <Stack>
+        <Flex justify="space-between" w="full" p="1" alignItems="center">
+          <MonthButton { ...prevButtonProps }>
+            <Icon as={ ChevronLeftSolid } boxSize={ 4 } />
+          </MonthButton>
+          <HStack spacing="0">
+            <MonthSelect state={ state } />
+            <YearSelectRangeCalendar state={ state } />
+          </HStack>
+          <MonthButton { ...nextButtonProps }>
+            <Icon as={ ChevronRightSolid } boxSize={ 4 } />
+          </MonthButton>
+        </Flex>
+        <chakra.table { ...gridProps } sx={ { borderSpacing: '0' } }>
+          <chakra.thead { ...headerProps }>
+            <chakra.tr>
+              <chakra.th />
+              <DayLabels weekDays={ weekDays } />
+            </chakra.tr>
+          </chakra.thead>
+          <chakra.tbody>
+            { times((weekIndex) => {
+              const weekNumber = getDisplayWeek(weekNumberStart,
+                weekIndex,
+                startDate.year,
+                startDate.month)
+              return (
+                <chakra.tr key={ weekIndex }>
+                  <chakra.td>
+                    <Small sx={ { color: 'text.subdued' } } pr="2">
+                      w.
+                      { weekNumber }
+                    </Small>
+                  </chakra.td>
+                  { state
+                    .getDatesInWeek(weekIndex, startDate)
+                    .map((date) =>
+                      (date ? (
+                        <RangeCell
+                          key={ date.day }
+                          state={ state }
+                          range={ range }
+                          date={ date }
+                          currentMonth={ startDate }
+                        />
+                      ) : (
+                        <chakra.td />
+                      ))
+                    ) }
+                </chakra.tr>
+              )
+            }, weeksInMonth) }
+          </chakra.tbody>
+        </chakra.table>
+      </Stack>
+    </Box>
+  )
+}

package/lib/components/date-picker/components/calendar/components/types.ts

@@ -0,0 +1,43 @@
+import { CalendarDate, DateValue } from '@internationalized/date'
+import { AriaRangeCalendarProps } from '@react-aria/calendar'
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar'
+import { AriaButtonProps } from '@react-aria/button'
+import { DateRangeValue } from '../quick-navigation/types'
+
+export type MonthButtonProps = AriaButtonProps
+
+export interface RangeCalendarProps extends AriaRangeCalendarProps<DateValue> {
+  handleClose: () => void
+  resetDate: () => void
+}
+
+export interface CalendarGridProps {
+  state: CalendarState
+  locale: string
+  firstDayOfWeek: FirstDayOfWeek
+}
+
+export interface RangeCalendarGridProps {
+  state: RangeCalendarState
+  locale: string
+  offset?: { months?: number }
+}
+
+export interface CalendarCellProps {
+  state: CalendarState
+  date: CalendarDate
+  currentMonth: CalendarDate
+}
+
+export interface RangeCellProps {
+  state: CalendarState
+  date: CalendarDate
+  currentMonth: CalendarDate
+  range: DateRangeValue | undefined
+}
+
+export interface DayLabelsProps {
+  weekDays: string[]
+}
+
+export type FirstDayOfWeek = 'monday' | 'sunday'

package/lib/components/date-picker/components/calendar/components/utils.ts

@@ -0,0 +1,5 @@
+const mondayFirstWeekDays = [ 'M', 'T', 'W', 'T', 'F', 'S', 'S' ]
+const sundayFirstWeekDays = [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ]
+
+export const getWeekdays = (firstDayOfWeek: 'monday' | 'sunday') =>
+  (firstDayOfWeek === 'monday' ? mondayFirstWeekDays : sundayFirstWeekDays)

package/lib/components/date-picker/components/calendar/constants.ts

@@ -0,0 +1,14 @@
+export const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]

package/lib/components/date-picker/components/calendar/date-select/index.ts

@@ -0,0 +1,4 @@
+export * from './month-select'
+export * from './year-select-calendar'
+export * from './year-select-range-calendar'
+export * from './types'

package/lib/components/date-picker/components/calendar/date-select/month-select.tsx

@@ -0,0 +1,36 @@
+import React, { ChangeEvent } from 'react'
+import { Select, useMultiStyleConfig } from '@chakra-ui/react'
+import { months } from '../constants'
+import { MonthSelectProps } from './types'
+
+export const MonthSelect = ({ state }: MonthSelectProps) => {
+  const { dateSelect } = useMultiStyleConfig('Calendar')
+  const selectedMonth = state.visibleRange.start.month - 1
+
+  const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const index = Number(e.target.value)
+    const diff = index - selectedMonth
+    state.setFocusedDate(state.visibleRange.start.add({ months: diff }))
+  }
+
+  return (
+    <Select
+      id="month"
+      aria-label="Select Month"
+      onChange={ onChange }
+      value={ selectedMonth }
+      iconSize="0px"
+      size="sm"
+      variant="unstyled"
+      sx={ dateSelect }
+      w="max-content"
+      textAlign="center"
+    >
+      { months.map((month, i) => (
+        <option value={ i } key={ `month-${i as number}` }>
+          { month }
+        </option>
+      )) }
+    </Select>
+  )
+}

package/lib/components/date-picker/components/calendar/date-select/types.ts

@@ -0,0 +1,29 @@
+import { CalendarDate } from '@internationalized/date'
+import { CalendarState } from '@react-stately/calendar'
+import { ChangeEventHandler } from 'react'
+
+export interface MonthSelectProps {
+  state: CalendarState
+}
+
+export interface YearSelectCalendarProps {
+  state: CalendarState
+}
+
+export type YearSelectRangeCalendarProps = MonthSelectProps
+
+export interface YearValue {
+  value: CalendarDate
+  formatted: string
+}
+
+export interface UseYearsCalendarProps {
+  state: CalendarState
+}
+
+export type UseYearsRangeCalendarProps = MonthSelectProps
+
+export interface YearSelectProps {
+  onChange: ChangeEventHandler<HTMLSelectElement>
+  years: YearValue[]
+}

package/lib/components/date-picker/components/calendar/date-select/utils.ts

@@ -0,0 +1,33 @@
+import { useDateFormatter } from '@react-aria/i18n'
+import { UseYearsCalendarProps, UseYearsRangeCalendarProps, YearValue } from './types'
+
+export const useYearsCalendar = ({
+  state,
+}: UseYearsCalendarProps) => {
+  const years: YearValue[] = []
+  const formatter = useDateFormatter({ year: 'numeric', month: 'long' })
+
+  for (let i = -10; i < 10; i += 1) {
+    const date = state.focusedDate.add({ years: i })
+    years.push({
+      value: date,
+      formatted: formatter.format(date.toDate(state.timeZone)),
+    })
+  }
+  return { years }
+}
+
+export const useYearsRangeCalendar = ({
+  state,
+}: UseYearsRangeCalendarProps) => {
+  const years: YearValue[] = []
+
+  for (let i = -10; i < 10; i += 1) {
+    const date = state.visibleRange.start.add({ years: i })
+    years.push({
+      value: date,
+      formatted: `${date.year}`,
+    })
+  }
+  return { years }
+}

package/lib/components/date-picker/components/calendar/date-select/year-select-calendar.tsx

@@ -0,0 +1,17 @@
+import React, { ChangeEvent } from 'react'
+import { YearSelect } from './year-select'
+import { useYearsCalendar } from './utils'
+import { YearSelectCalendarProps } from './types'
+
+export const YearSelectCalendar = ({ state }: YearSelectCalendarProps) => {
+  const { years } = useYearsCalendar({ state })
+  const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const index = Number(e.target.value)
+    const date = years[index].value
+    state.setFocusedDate(date)
+  }
+
+  return (
+    <YearSelect onChange={ onChange } years={ years } />
+  )
+}

package/lib/components/date-picker/components/calendar/date-select/year-select-range-calendar.tsx

@@ -0,0 +1,19 @@
+import React, { ChangeEvent } from 'react'
+import { YearSelect } from './year-select'
+import { useYearsRangeCalendar } from './utils'
+import { YearSelectRangeCalendarProps } from './types'
+
+export const YearSelectRangeCalendar = ({
+  state,
+}: YearSelectRangeCalendarProps) => {
+  const { years } = useYearsRangeCalendar({ state })
+  const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const index = Number(e.target.value)
+    const date = years[index].value
+    state.setFocusedDate(date)
+  }
+
+  return (
+    <YearSelect onChange={ onChange } years={ years } />
+  )
+}

package/lib/components/date-picker/components/calendar/date-select/year-select.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Select, useMultiStyleConfig } from '@chakra-ui/react'
+import { YearSelectProps } from './types'
+
+export const YearSelect = ({
+  onChange,
+  years,
+}: YearSelectProps) => {
+  const { dateSelect } = useMultiStyleConfig('Calendar')
+
+  return (
+    <Select
+      id="year"
+      aria-label="Year"
+      onChange={ onChange }
+      value={ 10 }
+      size="sm"
+      iconSize="0px"
+      variant="unstyled"
+      sx={ dateSelect }
+      w="max-content"
+    >
+      { years.map((year, i) => (
+        <option key={ year.formatted } value={ i }>
+          { year.formatted }
+        </option>
+      )) }
+    </Select>
+
+  )
+}

package/lib/components/date-picker/components/calendar/index.ts

@@ -0,0 +1 @@
+export * from './calendar'