@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,227 @@
+import React, { useState } from 'react'
+import {
+  ArrowCircleLeftDuo,
+  ArrowCircleRightDuo,
+  ChevronDownSolid,
+  ChevronUpSolid,
+} from '@northlight/icons'
+import { equals } from 'ramda'
+import { CalendarDate } from '@internationalized/date'
+import { Lead, P } from '../../../../typography'
+import { Clickable } from '../../../../clickable'
+import { SlideFade } from '../../../../transitions'
+import { HStack, Stack } from '../../../../stack'
+import { Icon } from '../../../../icon'
+import { ButtonRow } from './button-row'
+import { AdjustRangeProps, Date, DateRangeValue, MoveDateByType } from './types'
+
+export const AdjustRange = ({ state, adjust = 'start' }: AdjustRangeProps) => {
+  const [ isOpen, setIsOpen ] = useState(false)
+
+  const moveStartDateBy = (inp: MoveDateByType) => {
+    if (state.value) {
+      return {
+        start: state.value.start.add(inp),
+        end: state.value.end,
+      }
+    }
+    return null
+  }
+
+  const moveEndDateBy = (inp: MoveDateByType) => {
+    if (state.value) {
+      return {
+        start: state.value.start,
+        end: state.value.end.add(inp),
+      }
+    }
+    return null
+  }
+
+  const moveStartDayBack = {
+    value: moveStartDateBy({ days: -1 }),
+    label: 'Day',
+  }
+
+  const moveStartWeekBack = {
+    value: moveStartDateBy({ weeks: -1 }),
+    label: 'Week',
+  }
+
+  const moveStartMonthBack = {
+    value: moveStartDateBy({ months: -1 }),
+    label: 'Month',
+  }
+
+  const moveStartYearBack = {
+    value: moveStartDateBy({ years: -1 }),
+    label: 'Year',
+  }
+
+  const moveStartDayForward = {
+    value: moveStartDateBy({ days: 1 }),
+    label: 'Day',
+  }
+
+  const moveStartWeekForward = {
+    value: moveStartDateBy({ weeks: 1 }),
+    label: 'Week',
+  }
+
+  const moveStartMonthForward = {
+    value: moveStartDateBy({ months: 1 }),
+    label: 'Month',
+  }
+
+  const moveStartYearForward = {
+    value: moveStartDateBy({ years: 1 }),
+    label: 'Year',
+  }
+
+  const moveStartBack = [
+    moveStartDayBack,
+    moveStartWeekBack,
+    moveStartMonthBack,
+    moveStartYearBack,
+  ]
+
+  const moveStartForward = [
+    moveStartDayForward,
+    moveStartWeekForward,
+    moveStartMonthForward,
+    moveStartYearForward,
+  ]
+
+  const moveEndDayBack = {
+    value: moveEndDateBy({ days: -1 }),
+    label: 'Day',
+  }
+
+  const moveEndWeekBack = {
+    value: moveEndDateBy({ weeks: -1 }),
+    label: 'Week',
+  }
+
+  const moveEndMonthBack = {
+    value: moveEndDateBy({ months: -1 }),
+    label: 'Month',
+  }
+
+  const moveEndYearBack = {
+    value: moveEndDateBy({ years: -1 }),
+    label: 'Year',
+  }
+
+  const moveEndDayForward = {
+    value: moveEndDateBy({ days: 1 }),
+    label: 'Day',
+  }
+
+  const moveEndWeekForward = {
+    value: moveEndDateBy({ weeks: 1 }),
+    label: 'Week',
+  }
+
+  const moveEndMonthForward = {
+    value: moveEndDateBy({ months: 1 }),
+    label: 'Month',
+  }
+
+  const moveEndYearForward = {
+    value: moveEndDateBy({ years: 1 }),
+    label: 'Year',
+  }
+
+  const moveEndBack = [
+    moveEndDayBack,
+    moveEndWeekBack,
+    moveEndMonthBack,
+    moveEndYearBack,
+  ]
+
+  const moveEndForward = [
+    moveEndDayForward,
+    moveEndWeekForward,
+    moveEndMonthForward,
+    moveEndYearForward,
+  ]
+
+  const updateDate =
+    (newDate: DateRangeValue, focusOnStart = true) =>
+      () => {
+        if (newDate) {
+          state.setValue(newDate)
+          state.setFocusedDate(
+            focusOnStart
+              ? newDate.start as CalendarDate
+              : newDate.end as CalendarDate
+          )
+        }
+      }
+
+  const getMethodsStart = (date: Date) => ({
+    onClick: updateDate(date.value, true),
+  })
+
+  const getMethodsEnd = (date: Date) => ({
+    onClick: updateDate(date.value, false),
+  })
+
+  const showAdjust =
+    state.value !== null &&
+    state.highlightedRange !== null &&
+    equals(state.value, state.highlightedRange)
+
+  return (
+    <Stack
+      spacing={ 2 }
+      visibility={
+        showAdjust ? 'visible' : 'hidden'
+      }
+      pt="2"
+    >
+      <Clickable onClick={ () => setIsOpen((prev) => !prev) }>
+        <HStack>
+          <P variant="14">Adjust { adjust }</P>
+          <Icon as={ isOpen ? ChevronUpSolid : ChevronDownSolid } size="xs" />
+        </HStack>
+      </Clickable>
+      <SlideFade in={ isOpen } direction="top" hideDisplay={ true }>
+        { adjust === 'start' && (
+          <Stack minH="91px">
+            <Lead sx={ { fontSize: '12px' } }>Move date by</Lead>
+            <ButtonRow
+              icon={ ArrowCircleLeftDuo }
+              dates={ moveStartBack }
+              getMethods={ getMethodsStart }
+              state={ state }
+            />
+            <ButtonRow
+              icon={ ArrowCircleRightDuo }
+              dates={ moveStartForward }
+              getMethods={ getMethodsStart }
+              state={ state }
+            />
+          </Stack>
+        ) }
+        { adjust === 'end' && (
+          <Stack minH="91px">
+            <Lead sx={ { fontSize: '12px' } }>Move date by</Lead>
+            <ButtonRow
+              icon={ ArrowCircleLeftDuo }
+              dates={ moveEndBack }
+              getMethods={ getMethodsEnd }
+              state={ state }
+            />
+            <ButtonRow
+              icon={ ArrowCircleRightDuo }
+              dates={ moveEndForward }
+              getMethods={ getMethodsEnd }
+              state={ state }
+            />
+          </Stack>
+        ) }
+      </SlideFade>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { any } from 'ramda'
+import { HStack } from '../../../../stack'
+import { MoveButton } from './move-button'
+import { Icon } from '../../../../icon'
+import { validRange } from './utils'
+import { ButtonRowProps } from './types'
+import { Box } from '../../../../box'
+
+export const ButtonRow = ({
+  dates,
+  icon,
+  getMethods,
+  state,
+}: ButtonRowProps) => (
+  <HStack
+    display={
+      any((date) => validRange(date.value, state), dates) ? 'initial' : 'none'
+    }
+  >
+    <Icon as={ icon } color="blue.500" size="lg" />
+    { dates.map(
+      (date) =>
+        validRange(date.value, state) && (
+          <Box ml="1" display="inline">
+            <MoveButton { ...getMethods(date) }>{ date.label }</MoveButton>
+          </Box>
+        )
+    ) }
+  </HStack>
+)

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Clickable } from '../../../../clickable'
+import { Label } from '../../../../typography'
+import { Flex } from '../../../../flex'
+import { DateButtonProps } from './types'
+
+export const DateButton = ({
+  isActive,
+  onClick,
+  children,
+}: DateButtonProps) => (
+  <Flex maxW="120px">
+    <Clickable onClick={ onClick }>
+      <Label
+        _hover={ {
+          fontWeight: 'semibold',
+        } }
+        sx={ {
+          color: isActive ? 'background.button.brand' : 'text.default',
+          cursor: 'pointer',
+          fontWeight: isActive ? 'semibold' : 'regular',
+        } }
+        _active={ {
+          fontWeight: 'semibold',
+        } }
+        h="8"
+      >
+        { children }
+      </Label>
+    </Clickable>
+  </Flex>
+)

package/lib/components/date-picker/components/calendar/quick-navigation/get-quick-select-options.ts

@@ -0,0 +1,319 @@
+import {
+  CalendarDate,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  startOfMonth,
+  startOfWeek,
+  startOfYear,
+  today,
+} from '@internationalized/date'
+import { QuickSelectState } from './types'
+
+export const getQuickSelectOptions = (
+  state: QuickSelectState,
+  locale: string,
+  fiscalStartMonth: number,
+  fiscalStartDay: number
+) => {
+  const thisDay = today(state.timeZone)
+
+  const startOfMonthWithDays = (
+    date: CalendarDate,
+    { months, days }: { months: number, days: number }
+  ) => {
+    const start = date.add({ months }).set({ day: days })
+    return start
+  }
+
+  const endOfMonthWithDays = (
+    date: CalendarDate,
+    { months, days }: { months: number, days: number }
+  ) => {
+    const end = date.add({ months }).set({ day: days }).subtract({ days: 1 })
+    return end
+  }
+
+  const thisWeek = {
+    value: {
+      start: startOfWeek(thisDay, locale),
+      end: endOfWeek(thisDay, locale),
+    },
+    label: 'This Week',
+  }
+
+  const nextWeek = {
+    value: {
+      start: startOfWeek(thisDay.add({ weeks: 1 }), locale),
+      end: endOfWeek(thisDay.add({ weeks: 1 }), locale),
+    },
+    label: 'Next Week',
+  }
+
+  const lastWeek = {
+    value: {
+      start: startOfWeek(thisDay.subtract({ weeks: 1 }), locale),
+      end: endOfWeek(thisDay.subtract({ weeks: 1 }), locale),
+    },
+    label: 'Last Week',
+  }
+
+  const thisMonth = {
+    value: {
+      start: startOfMonth(thisDay),
+      end: endOfMonth(thisDay),
+    },
+    label: 'This Month',
+  }
+
+  const lastMonth = {
+    value: {
+      start: startOfMonth(thisDay.subtract({ months: 1 })),
+      end: endOfMonth(thisDay.subtract({ months: 1 })),
+    },
+    label: 'Last Month',
+  }
+
+  const thisYear = {
+    value: {
+      start: startOfYear(thisDay),
+      end: endOfYear(thisDay),
+    },
+    label: 'This Year',
+  }
+
+  const lastYear = {
+    value: {
+      start: startOfYear(thisDay.subtract({ years: 1 })),
+      end: endOfYear(thisDay.subtract({ years: 1 })),
+    },
+    label: 'Last Year',
+  }
+
+  const nextMonth = {
+    value: {
+      start: startOfMonth(thisDay.add({ months: 1 })),
+      end: endOfMonth(thisDay.add({ months: 1 })),
+    },
+    label: 'Next Month',
+  }
+
+  const nextThreeMonths = {
+    value: {
+      start: startOfMonth(thisDay.add({ months: 1 })),
+      end: endOfMonth(thisDay.add({ months: 3 })),
+    },
+    label: 'Next 3 Months',
+  }
+
+  const nextSixMonths = {
+    value: {
+      start: startOfMonth(thisDay.add({ months: 1 })),
+      end: endOfMonth(thisDay.add({ months: 6 })),
+    },
+    label: 'Next 6 Months',
+  }
+
+  const nextYear = {
+    value: {
+      start: startOfYear(thisDay.add({ years: 1 })),
+      end: endOfYear(thisDay.add({ years: 1 })),
+    },
+    label: 'Next Year',
+  }
+
+  // Fiscal year from input is 0-11, while internationalized gives 1-12. This corrects the check.
+  const offsetFiscalYear =
+    thisDay.month < fiscalStartMonth + 1 ||
+    (thisDay.month === fiscalStartMonth + 1 && thisDay.day < fiscalStartDay)
+      ? 1
+      : 0
+
+  const thisFiscalYear = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        { months: fiscalStartMonth, days: fiscalStartDay }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        { months: fiscalStartMonth + 12, days: fiscalStartDay }
+      ),
+    },
+    label: 'This Fiscal Year',
+  }
+
+  const lastFiscalYear = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear + 1 }),
+        {
+          months: fiscalStartMonth,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear + 1 }),
+        {
+          months: fiscalStartMonth + 12,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: 'Last Fiscal Year',
+  }
+
+  const yearToDate = {
+    value: {
+      start: startOfMonthWithDays(startOfYear(thisDay), {
+        months: fiscalStartMonth,
+        days: fiscalStartDay,
+      }),
+      end: thisDay,
+    },
+    label: 'Year to Date',
+  }
+
+  const S1 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'S1' : 'FS1',
+  }
+
+  const S2 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 12,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'S2' : 'FS2',
+  }
+
+  const F1 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 3,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'Q1' : 'FQ1',
+  }
+
+  const F2 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 3,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'Q2' : 'FQ2',
+  }
+
+  const F3 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 9,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'Q3' : 'FQ3',
+  }
+
+  const F4 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 9,
+          days: fiscalStartDay,
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 12,
+          days: fiscalStartDay,
+        }
+      ),
+    },
+    label: fiscalStartMonth === 0 ? 'Q4' : 'FQ4',
+  }
+
+  const fiscalSemesters = [ S1, S2 ]
+  const fiscalQuarters = [ F1, F2, F3, F4 ]
+  const fiscalYears =
+    fiscalStartMonth === 0 ? [] : [ thisFiscalYear, lastFiscalYear ]
+
+  const quickDates = [
+    thisYear,
+    yearToDate,
+    lastWeek,
+    nextWeek,
+    thisWeek,
+    lastMonth,
+    nextThreeMonths,
+    nextSixMonths,
+    nextMonth,
+    thisMonth,
+    lastYear,
+    nextYear,
+    ...fiscalYears,
+  ]
+
+  return { quickDates, fiscalQuarters, fiscalSemesters }
+}

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { palette } from '@northlight/tokens'
+import { Clickable } from '../../../../clickable'
+import { P } from '../../../../typography'
+
+export const MoveButton = (props: any) => (
+  <Clickable { ...props } w="max-content">
+    <P
+      variant="14"
+      _hover={ {
+        borderBottomWidth: '1px',
+        borderBottomStyle: 'dashed',
+        borderBottomColor: palette.blue['500'],
+        marginBottom: '-1px',
+      } }
+      _active={ {
+        color: 'blue.500',
+      } }
+    >
+      { props.children }
+    </P>
+  </Clickable>
+)