@northlight/ui 2.41.0 → 2.41.1

package/lib/components/date-picker/components/calendar/quick-navigation/quick-select.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo } from 'react'
+import { any, equals, map } from 'ramda'
+import { palette } from '@northlight/tokens'
+import { Flex, Spacer } from '../../../../flex'
+import { Stack } from '../../../../stack'
+import { Box } from '../../../../box'
+import { DateButton } from './date-button'
+import { validRange } from './utils'
+import { Date, DateRangeValue, QuickSelectProps } from './types'
+import { getQuickSelectOptions } from './get-quick-select-options'
+
+const seperator = `1px solid ${palette.gray['100']}`
+
+export const QuickSelect = ({
+  state,
+  fiscalStartMonth = 0,
+  fiscalStartDay = 0,
+  locale = '',
+  height = '17.5rem',
+}: QuickSelectProps) => {
+  const { quickDates, fiscalQuarters, fiscalSemesters } = useMemo(
+    () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
+    []
+  )
+
+  const updateDate = (newDate: DateRangeValue) => () => {
+    if (newDate) {
+      state.setValue(newDate)
+      state.setFocusedDateRange(newDate)
+    }
+  }
+
+  const getIsActive = (newDate: Date) => equals(state.value, newDate.value)
+
+  const shouldShow = (dates: Date[]) =>
+    any((date) => validRange(date.value, state), dates)
+
+  return (
+    <Stack alignItems="start" borderRight={ seperator } pt="2">
+      <Stack
+        h={ height }
+        overflowY="hidden"
+        pr="4"
+        _hover={ { overflowY: 'scroll' } }
+        w="36"
+        display={ shouldShow(quickDates) ? 'initial' : 'none' }
+      >
+        { map(
+          (quickDate) =>
+            validRange(quickDate.value, state) && (
+              <Box minH="20px" key={ `quick-select-${quickDate.label}` }>
+                <DateButton
+                  onClick={ updateDate(quickDate.value) }
+                  isActive={ getIsActive(quickDate) }
+                >
+                  { quickDate.label }
+                </DateButton>
+              </Box>
+            ),
+          quickDates
+        ) }
+      </Stack>
+      <Box
+        w="50%"
+        borderTop={ seperator }
+        display={ shouldShow(fiscalQuarters) ? 'initial' : 'none' }
+      />
+      <Spacer />
+      <Flex
+        justifyContent="space-around"
+        w="full"
+        pt="2"
+        pr="4"
+        display={ shouldShow(fiscalSemesters) ? 'flex' : 'none' }
+      >
+        { map(
+          (semester) =>
+            validRange(semester.value, state) && (
+              <DateButton
+                onClick={ updateDate(semester.value) }
+                isActive={ getIsActive(semester) }
+                key={ `quick-select-${semester.label}` }
+              >
+                { semester.label }
+              </DateButton>
+            ),
+          fiscalSemesters
+        ) }
+      </Flex>
+      <Flex
+        justifyContent="space-around"
+        w="full"
+        pt={ shouldShow(fiscalSemesters) ? '0' : '2' }
+        pr="4"
+        display={ shouldShow(fiscalQuarters) ? 'flex' : 'none' }
+      >
+        { map(
+          (quarter) =>
+            validRange(quarter.value, state) && (
+              <DateButton
+                onClick={ updateDate(quarter.value) }
+                isActive={ getIsActive(quarter) }
+                key={ `quick-select-${quarter.label}` }
+              >
+                { quarter.label }
+              </DateButton>
+            ),
+          fiscalQuarters
+        ) }
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { CalendarDate, DateValue } from '@internationalized/date'
+import { RangeCalendarState } from '@react-stately/calendar'
+import { ComponentType } from 'react'
+
+type DateRange = {
+  start: DateValue
+  end: DateValue
+}
+
+export interface QuickSelectState {
+  setValue: (value: DateRange) => void
+  setFocusedDateRange: (value: DateRangeValue) => void
+  value: DateRange | null | undefined
+  timeZone: string
+  minValue: DateValue | undefined
+  maxValue: DateValue | undefined
+}
+export interface QuickSelectProps {
+  state: QuickSelectState
+  fiscalStartMonth: number
+  fiscalStartDay?: number
+  locale: string
+  height?: string
+}
+
+export interface DateButtonProps {
+  isActive: boolean
+  onClick: () => void
+  children: string
+}
+
+export type DateRangeValue = {
+  start: DateValue | CalendarDate
+  end: DateValue | CalendarDate
+} | null
+
+export interface Date {
+  value: DateRangeValue
+  label: string
+}
+
+export interface ButtonRowProps {
+  dates: Date[]
+  icon: ComponentType<any>
+  getMethods: any
+  state: RangeCalendarState
+}
+
+export interface AdjustRangeProps {
+  state: RangeCalendarState
+  adjust: 'start' | 'end'
+}
+
+export type MoveDateByType = {
+  days?: number
+  weeks?: number
+  months?: number
+  years?: number
+}

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

@@ -0,0 +1,8 @@
+import { DateRangeValue, QuickSelectState } from './types'
+
+export const validRange = (date: DateRangeValue, state: QuickSelectState) =>
+  !date || (
+    (!state.minValue || date.start >= state.minValue) &&
+    (!state.maxValue || date.end <= state.maxValue) &&
+    date.end >= date.start
+  )

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

@@ -0,0 +1,153 @@
+import React, { useRef } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { useLocale } from '@react-aria/i18n'
+import { useCalendarState } from '@react-stately/calendar'
+import { CalendarDate, GregorianCalendar } from '@internationalized/date'
+import { RangeCalendarProps } from './types'
+import { Button } from '../../../button'
+import { Label } from '../../../typography'
+import { Flex } from '../../../flex'
+import { Box } from '../../../box'
+import { StandaloneCalendarGrid } from './components'
+import { HStack, Stack } from '../../../stack'
+import { DateRangeValue } from './quick-navigation/types'
+import { QuickSelect } from './quick-navigation/quick-select'
+
+const focusRing = {
+  borderWidth: 'xs',
+  borderRadius: 'md',
+  borderColor: 'border.brand.hover',
+  borderStyle: 'solid',
+}
+
+export const RangeCalendar = (props: RangeCalendarProps) => {
+  const {
+    onChange: setRange = identity,
+    value,
+    handleClose,
+    resetDate,
+    isClearable = true,
+    fiscalStartMonth,
+    fiscalStartDay,
+    minValue,
+    maxValue,
+    firstDayOfWeek,
+    onSave,
+    buttonLabel = 'Save',
+    clearButtonLabel = 'Clear',
+  } = props
+
+  const { locale } = useLocale()
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { rangeCalendarContainer } = useMultiStyleConfig('Calendar')
+
+  const calendarOneState = useCalendarState({
+    value: value && value.start ? value.start : null,
+    minValue,
+    maxValue,
+    onChange: (newVal) => {
+      setRange({
+        end: value && value.end && newVal <= value.end ? value.end : newVal,
+        start: newVal,
+      })
+    },
+    locale,
+    createCalendar: () => new GregorianCalendar(),
+  })
+
+  const calendarTwoState = useCalendarState({
+    value: value && value.end ? value.end : null,
+    minValue,
+    maxValue,
+    onChange: (newVal) => {
+      setRange({
+        start:
+          value && value.end && value.start <= newVal ? value.start : newVal,
+        end: newVal,
+      })
+    },
+    locale,
+    createCalendar: () => new GregorianCalendar(),
+  })
+
+  const focusDateRange = (dateRange: DateRangeValue) => {
+    if (dateRange && dateRange.start && dateRange.end) {
+      calendarOneState.setFocusedDate(dateRange.start as CalendarDate)
+      calendarTwoState.setFocusedDate(dateRange.end as CalendarDate)
+    }
+  }
+
+  const state = {
+    setValue: setRange,
+    setFocusedDateRange: focusDateRange,
+    value,
+    timeZone: calendarOneState.timeZone,
+    minValue,
+    maxValue,
+  }
+
+  const focusedStartMonthProps = value && value.start ? {} : focusRing
+
+  const handleSave = () => {
+    onSave?.()
+    handleClose()
+  }
+
+  const handleReset = () => {
+    resetDate()
+    handleClose()
+  }
+
+  return (
+    <Box ref={ ref } __css={ rangeCalendarContainer }>
+      <Stack>
+        <Flex gap={ 4 }>
+          <QuickSelect
+            state={ state }
+            locale={ locale }
+            fiscalStartMonth={ fiscalStartMonth }
+            fiscalStartDay={ fiscalStartDay }
+          />
+          <Stack>
+            <HStack alignItems="start" spacing={ 8 } h="full" pt="2">
+              <Stack h="full" { ...focusedStartMonthProps }>
+                <Box p="2">
+                  <Label size="xs">Start date:</Label>
+                  <StandaloneCalendarGrid
+                    state={ calendarOneState }
+                    range={ value }
+                    firstDayOfWeek={ firstDayOfWeek }
+                  />
+                </Box>
+              </Stack>
+              <Stack h="full" justify="space-between">
+                <Stack opacity={ value && value.start ? '1' : '0.4' }>
+                  <Box p="2">
+                    <Label size="xs">End date:</Label>
+                    <StandaloneCalendarGrid
+                      state={ calendarTwoState }
+                      range={ value }
+                      firstDayOfWeek={ firstDayOfWeek }
+                    />
+                  </Box>
+                </Stack>
+                <HStack pt="2" alignSelf="end">
+                  { isClearable && (
+                    <Button onClick={ handleReset } variant="ghost" size="sm">
+                      { clearButtonLabel }
+                    </Button>
+                  ) }
+                  <Button variant="brand" onClick={ handleSave } size="sm">
+                    { buttonLabel }
+                  </Button>
+                </HStack>
+              </Stack>
+            </HStack>
+          </Stack>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { DateValue } from '@internationalized/date'
+import { CalendarProps as AriaCalendarProps, RangeCalendarProps as AriaRangeCalendarProps } from '@react-aria/calendar'
+import { FirstDayOfWeek } from './components/types'
+
+export interface RangeCalendarProps extends AriaRangeCalendarProps<DateValue> {
+  resetDate: () => void
+  handleClose: () => void
+  fiscalStartMonth: number
+  fiscalStartDay?: number
+  isClearable: boolean
+  firstDayOfWeek: FirstDayOfWeek
+  onSave?: () => void
+  buttonLabel?: string
+  clearButtonLabel?: string
+}
+
+export interface CalendarProps extends AriaCalendarProps<DateValue> {
+  firstDayOfWeek: FirstDayOfWeek
+}

package/lib/components/date-picker/components/date-field/date-field.tsx

@@ -0,0 +1,51 @@
+import React, { useRef } from 'react'
+import { useDateFieldState } from '@react-stately/datepicker'
+import { useDateField } from '@react-aria/datepicker'
+import { createCalendar } from '@internationalized/date'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { find, split } from 'ramda'
+import { Box } from '../../../box'
+import { DateSegment } from './date-segment'
+import { DateFieldProps, DateSegmentType } from './types'
+import { delimeterIncluded, formatQuery } from './utils'
+
+export const DateField = (props: DateFieldProps) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const state = useDateFieldState({
+    ...props,
+    /* Hard coding the United Kingdom locale,
+     this enforces using english characters e.g.
+      yyyy and not other such as åååå or chinese, which prevents hard to predict bugs */
+    locale: 'en-GB',
+    createCalendar,
+  })
+
+  const { dateField } = useMultiStyleConfig('DatePicker')
+  const { fieldProps } = useDateField(props, state, ref)
+
+  const { segments } = state
+  const { dateFormat = 'dd/mm/yyyy' } = props
+  const getMatchingSegment = (query: string, index: number) =>
+    find(
+      (segment: DateSegmentType) => segment.placeholder === formatQuery(query)
+    )(segments) || { ...segments[index], text: query }
+
+  const sortedSegments = split(delimeterIncluded, dateFormat).map(
+    (query: string, index: number) => getMatchingSegment(query, index)
+  )
+
+  return (
+    <Box
+      { ...fieldProps }
+      ref={ ref }
+      display="flex"
+      __css={ dateField }
+      data-testid="date-field-test-id"
+    >
+      { sortedSegments.map((segment, i) => {
+        const id = `${segment.type}-${i}`
+        return <DateSegment segment={ segment } state={ state } key={ id } />
+      }) }
+    </Box>
+  )
+}

package/lib/components/date-picker/components/date-field/date-segment.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { useDateSegment } from '@react-aria/datepicker'
+import { Box } from '../../../box'
+import { DateSegmentProps } from './types'
+
+export const DateSegment = ({ segment, state }: DateSegmentProps) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const { segmentProps } = useDateSegment(segment, state, ref)
+
+  const isDivider = segment.type === 'literal'
+  const { dateSegment } = useMultiStyleConfig('DatePicker')
+  const minWidth = `${String(segment.maxValue).length}ch`
+
+  return (
+    <Box
+      { ...segmentProps }
+      ref={ ref }
+      __css={ dateSegment }
+      minWidth={ isDivider ? 0 : minWidth }
+      paddingInline={ isDivider ? 0 : '0.25rem' }
+      color={
+        segment.isPlaceholder
+          ? 'gray.500'
+          : isDivider
+            ? 'text.subduded'
+            : 'text.default'
+      }
+      fontSize="md"
+    >
+      { segment.text }
+    </Box>
+  )
+}

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

@@ -0,0 +1,4 @@
+export * from './trigger'
+export * from './date-field'
+export * from './styled-field'
+export * from './types'

package/lib/components/date-picker/components/date-field/styled-field.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { Box } from '../../../box'
+import { StyledFieldProps } from './types'
+
+export const StyledField = forwardRef((
+  { isInvalid, isDisabled, children, variant, ...rest }: StyledFieldProps,
+  ref: any
+) => {
+  const { styledField } = useMultiStyleConfig('DatePicker', { variant })
+
+  return (
+    <Box
+      { ...rest }
+      ref={ ref }
+      aria-invalid={ isInvalid }
+      aria-disabled={ isDisabled }
+      display="flex"
+      alignItems="center"
+      h={ 10 }
+      __css={ styledField }
+    >
+      { children }
+    </Box>
+  )
+}
+)

package/lib/components/date-picker/components/date-field/trigger.tsx

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react'
+import { CalendarDuo } from '@northlight/icons'
+import { useButton } from '@react-aria/button'
+import { Button } from '../../../button'
+import { TriggerProps } from './types'
+import { Icon } from '../../../icon'
+
+export const Trigger = (props: TriggerProps) => {
+  const { isDisabled, handleClick } = props
+  const ref = useRef<HTMLButtonElement>(null)
+  const { buttonProps } = useButton(props, ref)
+
+  return (
+    <Button
+      { ...buttonProps }
+      ref={ ref }
+      size="sm"
+      boxSize={ 8 }
+      variant="ghost"
+      isDisabled={ isDisabled }
+      onPointerDown={ handleClick }
+      pointerEvents={ isDisabled ? 'none' : 'auto' }
+    >
+      <Icon as={ CalendarDuo } />
+    </Button>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react'
+import { DateValue } from '@internationalized/date'
+import { AriaDateFieldProps } from '@react-aria/datepicker'
+import { DateFieldState, DateSegment } from '@react-stately/datepicker'
+import { AriaButtonProps } from '@react-aria/button'
+
+export type DateSegmentType = DateSegment
+export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+  dateFormat?: string
+}
+
+export interface DateSegmentProps {
+  segment: DateSegment
+  state: DateFieldState
+}
+
+export interface StyledFieldProps extends HTMLAttributes<HTMLElement> {
+  isInvalid?: boolean
+  isDisabled?: boolean
+  children: ReactNode
+  variant?: 'outline' | 'filled'
+}
+export interface TriggerProps extends AriaButtonProps {
+  handleClick: () => void
+}

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

@@ -0,0 +1,15 @@
+import { toLower } from 'ramda'
+
+type FormatMapKey = 'y' | 'm' | 'd'
+type FormatMapValue = 'yyyy' | 'mm' | 'dd'
+
+const mapFormat: Record<FormatMapKey, FormatMapValue> = {
+  y: 'yyyy',
+  m: 'mm',
+  d: 'dd',
+}
+
+export const formatQuery = (query: string) =>
+  mapFormat[toLower(query)[0] as FormatMapKey]
+
+export const delimeterIncluded = /([.,:;|\-/\\])/

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

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

package/lib/components/date-picker/date-picker/date-picker-locale-wrapper.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react'
+import { I18nProvider } from '@react-aria/i18n'
+import { FirstDayOfWeek } from '../components/calendar/components/types'
+
+interface DatePickerLocaleWrapperProps {
+  firstDayOfWeek: FirstDayOfWeek
+  children: ReactNode
+}
+
+export const DatePickerLocaleWrapper = ({
+  firstDayOfWeek,
+  children,
+}: DatePickerLocaleWrapperProps) => {
+  const locale = firstDayOfWeek === 'monday' ? 'en-DE' : 'en-US'
+  return <I18nProvider locale={ locale }>{ children }</I18nProvider>
+}