@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,145 @@
+import React, { useRef } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { useDatePicker } from '@react-aria/datepicker'
+import { useDatePickerState } from '@react-stately/datepicker'
+import { FocusScope } from '@react-aria/focus'
+import { XCloseSolid } from '@northlight/icons'
+import { parseDate } from '@internationalized/date'
+import { DateField, StyledField, Trigger } from '../components/date-field'
+import { Calendar } from '../components/calendar'
+import { DatePickerProps } from '../types'
+import { IconButton } from '../../icon-button'
+import { HStack } from '../../stack'
+import { InputGroup, InputRightElement } from '../../input'
+import { Popover, PopoverAnchor, PopoverContent } from '../../popover'
+import { Icon } from '../../icon'
+import { Box } from '../../box'
+import { DatePickerLocaleWrapper } from './date-picker-locale-wrapper'
+
+/**
+ * Popover to select single date
+ * @see DatePickerField
+ * @see {@link https://northlight.dev/reference/date-picker}
+ *
+ * @example (Example)
+ * ## When is your birthday
+ * (?
+ * () => {
+ * const [ date, setDate ] = useState('2023-10-10')
+ *
+ * const parseDate = () => {
+ * return undefined
+ * }
+ *
+ * return (
+ * <DatePicker
+ * firstDayOfWeek="monday"
+ * resetDate={() => setDate(null)} onChange={setDate} value={parseDate(date)}/>
+ * )
+ * }
+ *
+ * ?)
+ * <br />
+ * ### Some notes on date format
+ * As you can see in the above example, the parseDate function returns undefined.
+ *  The DatePicker natively handles
+ * dates as a DateValue object. To get out a string value on format yyyy-mm-dd,
+ *  you can use the javascript <b>.toString</b> method,
+ *  and for getting it back from string to DateValue,
+ *  you can use the parseDate util.
+ * <br />
+ * To read more about date formatting, consult the
+ * <a target="_blank" style="fontWeight: bold;" href="https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html">react aria internationalized documentation</a>
+ *
+ * @example (Example)
+ * ## Another example
+ * (?
+ * <DatePicker
+ * variant="filled"
+ * dateFormat="mm|dd-yyyy"
+ * />
+ * ?)
+ *
+ */
+export const DatePicker = (props: DatePickerProps) => {
+  const {
+    isDisabled,
+    isClearable = true,
+    resetDate,
+    isInvalid = false,
+    dateFormat,
+    minValue,
+    variant = 'outline',
+    firstDayOfWeek = 'monday',
+  } = props
+  const ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  const { group } = useMultiStyleConfig('DatePicker')
+
+  const state = useDatePickerState({
+    ...props,
+    shouldCloseOnSelect: false,
+    hideTimeZone: true,
+  })
+
+  const { buttonProps, fieldProps, calendarProps, groupProps, dialogProps } =
+    useDatePicker(
+      { ...props, minValue: minValue || parseDate('1994-03-08') },
+      state,
+      ref
+    )
+
+  const togglePopup = () => state.setOpen(!state.isOpen)
+
+  return (
+    <Popover
+      isOpen={ state.isOpen }
+      onClose={ () => state.setOpen(false) }
+      placement="bottom-end"
+    >
+      <PopoverAnchor>
+        <HStack minW={ 56 }>
+          <InputGroup { ...groupProps } ref={ ref } __css={ group }>
+            <StyledField
+              isDisabled={ isDisabled }
+              isInvalid={ isInvalid }
+              variant={ variant }
+            >
+              <Box paddingInlineStart="1a" paddingInlineEnd={ 10 }>
+                <DateField { ...fieldProps } dateFormat={ dateFormat } />
+              </Box>
+            </StyledField>
+            <InputRightElement
+              sx={ { height: '100%', paddingRight: '1' } }
+              zIndex={ 0 }
+            >
+              <Trigger
+                { ...buttonProps }
+                isDisabled={ isDisabled }
+                handleClick={ togglePopup }
+              />
+            </InputRightElement>
+          </InputGroup>
+          <IconButton
+            aria-label="reset-date"
+            variant="danger"
+            size="sm"
+            fontSize="xs"
+            onClick={ resetDate }
+            hidden={ !state.dateValue || !isClearable }
+            isDisabled={ isDisabled }
+            icon={ <Icon as={ XCloseSolid } /> }
+          />
+        </HStack>
+      </PopoverAnchor>
+      { state.isOpen && (
+        <PopoverContent { ...dialogProps } ref={ ref } w={ 64 } border="none">
+          <FocusScope contain={ true } restoreFocus={ true }>
+            <DatePickerLocaleWrapper firstDayOfWeek={ firstDayOfWeek }>
+              <Calendar { ...calendarProps } firstDayOfWeek={ firstDayOfWeek } />
+            </DatePickerLocaleWrapper>
+          </FocusScope>
+        </PopoverContent>
+      ) }
+    </Popover>
+  )
+}

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

@@ -0,0 +1,325 @@
+import React, { useRef } from 'react'
+import { FocusScope } from '@react-aria/focus'
+import { useDateRangePickerState } from '@react-stately/datepicker'
+import { useDateRangePicker } from '@react-aria/datepicker'
+import { useMultiStyleConfig, useOutsideClick } from '@chakra-ui/react'
+import { CheckSolid, XCloseSolid } from '@northlight/icons'
+import { identity, isNil } from 'ramda'
+import { DateValue, parseDate } from '@internationalized/date'
+import { DateRange } from '@react-types/datepicker'
+import { DateRangePickerProps, DateRange as NorthlightDateRange } from '../types'
+import { RangeCalendar } from '../components/calendar/quick-navigation'
+import { P } from '../../typography'
+import { HStack } from '../../stack'
+import { Popover, PopoverAnchor, PopoverContent } from '../../popover'
+import { Portal } from '../../portal'
+import { DateField, StyledField, Trigger } from '../components/date-field'
+import { IconButton } from '../../icon-button'
+import { InputGroup, InputRightElement } from '../../input'
+import { Icon } from '../../icon'
+import { isValidDateRange } from '../date-picker-field/utils'
+import { DatePickerLocaleWrapper } from './date-picker-locale-wrapper'
+import { Tooltip } from '../../tooltip'
+
+const parseValue = (value: any) => {
+  if (!isValidDateRange(value)) return null
+  return { start: parseDate(value.startDate), end: parseDate(value.endDate) }
+}
+
+const PortalWrapper = ({
+  renderInPortal,
+  children,
+}: {
+  renderInPortal: boolean
+  children: React.ReactNode
+}) => {
+  if (renderInPortal) {
+    return <Portal>{ children }</Portal>
+  }
+  return <>{ children }</>
+}
+
+const isDatesEqual = (
+  date1: NorthlightDateRange | null,
+  date2: NorthlightDateRange | null
+) => date1?.startDate === date2?.startDate && date1?.endDate === date2?.endDate
+
+/**
+ * Popover to choose date range on format {startDate:' yyyy-mm-dd', endDate: 'yyyy-mm-dd'}
+ *
+ * @see DatePicker
+ * @see DateRangePickerField
+ * @see {@link https://northlight.dev/reference/date-range-picker}
+ * @example (Example)
+ * ## Advanced Mode
+ * (Due to it being harder to setup normal date range picker,
+ *  the date range picker field is demoed,
+ *  here, you need to pass down and parse a value for the date range picker for it to work properly,
+ *  consult the date picker documentation and the source code for date range picker
+ * field for appropiate use)
+ * (?
+ * <Form initialValues={{date: null}}>
+ * <DateRangePickerField name="date"/>
+ * </Form>
+ * ?)
+ *
+ * @example (Example)
+ * ## Simple mode
+ * The previous example was the date range picker variant
+ * for which we call advance, this one is a simpler version with the same core functionality:
+ * (?
+ * <Form initialValues={{date: null}}>
+ * <DateRangePickerField name="date" />
+ * </Form>
+ * ?)
+ *
+ * @example (Example)
+ * ## Sophisticated example
+ * The `DateRangePickerField` can have **fiscalStartMonth** and **fiscalStartDay** as a `number`
+ * (?
+ * <Form initialValues={{date: null}}>
+ * <DateRangePickerField
+ * name="date"
+ * mode="advanced"
+ * variant="filled"
+ * fiscalStartMonth={3}
+ * fiscalStartDay={5}
+ * dateFormat="mm|dd-yyyy"
+ * minValue="2023-01-01"
+ * maxValue="2028-01-01"
+ * />
+ * </Form>
+ * ?)
+ */
+export const DateRangePicker = (props: DateRangePickerProps) => {
+  const {
+    isDisabled,
+    isClearable = true,
+    resetDate,
+    isInvalid = false,
+    dateFormat,
+    fiscalStartMonth,
+    fiscalStartDay,
+    variant = 'outline',
+    onChange: onChangeCallback = identity,
+    value,
+    minValue = '1994-03-08',
+    maxValue,
+    renderInPortal = false,
+    firstDayOfWeek,
+    onSave,
+    buttonLabel = 'Save',
+    clearButtonLabel = 'Clear',
+    savedDateRange,
+    defaultDateRange,
+    CustomResetButton,
+    onCancelChanges,
+    'data-testid': dataTestId,
+    defaultOpen = false,
+    onOpenChange,
+  } = props
+  const ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  const { group } = useMultiStyleConfig('DatePicker')
+  const parsedProps = {
+    onChange: (date: DateRange) => {
+      onChangeCallback({
+        startDate: date?.start.toString(),
+        endDate: date?.end.toString(),
+      })
+    },
+    value: parseValue(value) as { start: DateValue, end: DateValue },
+    minValue: isNil(minValue) ? undefined : (parseDate(minValue) as DateValue),
+    maxValue: isNil(maxValue) ? undefined : (parseDate(maxValue) as DateValue),
+  }
+  const state = useDateRangePickerState({
+    value: parsedProps.value,
+    onChange: parsedProps.onChange,
+    minValue: parsedProps.minValue,
+    maxValue: parsedProps.maxValue,
+    isDisabled,
+    isInvalid,
+    placeholderValue: props.placeholderValue,
+    isDateUnavailable: props.isDateUnavailable,
+    allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+    shouldCloseOnSelect: false,
+    hideTimeZone: true,
+    defaultOpen,
+    onOpenChange,
+  })
+
+  const {
+    groupProps,
+    startFieldProps,
+    endFieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+  } = useDateRangePicker(
+    {
+      onChange: (date: DateRange) => {
+        onChangeCallback({
+          startDate: date?.start.toString(),
+          endDate: date?.end.toString(),
+        })
+      },
+      value: parseValue(value) as { start: DateValue, end: DateValue },
+      minValue: parsedProps.minValue || parseDate('1994-03-08'),
+      maxValue: parsedProps.maxValue,
+      placeholderValue: props.placeholderValue,
+      isDateUnavailable: props.isDateUnavailable,
+      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      isDisabled,
+      isInvalid,
+      startName: props.startName,
+      endName: props.endName,
+      'aria-label': 'Date range picker',
+      ...(!isNil(dataTestId) && { 'data-testid': dataTestId }),
+    },
+    state,
+    ref
+  )
+
+  const togglePopup = () => state.setOpen(!state.isOpen)
+
+  const handleClose = () => {
+    state.setOpen(false)
+  }
+
+  useOutsideClick({
+    ref,
+    handler: () => state.setOpen(false),
+  })
+
+  const ResetButton = CustomResetButton || (
+    <IconButton
+      aria-label="reset-date"
+      variant="danger"
+      size="sm"
+      fontSize="xs"
+      hidden={ !isClearable }
+      isDisabled={ isDisabled }
+      onClick={ resetDate }
+      icon={ <Icon as={ XCloseSolid } /> }
+    />
+  )
+
+  const cancelOrResetDateChange = () => {
+    if (onCancelChanges) {
+      if (!isNil(savedDateRange)) onChangeCallback(savedDateRange)
+      onCancelChanges()
+    } else {
+      if (!isNil(defaultDateRange)) onChangeCallback(defaultDateRange)
+      resetDate()
+    }
+  }
+
+  const handleSave = () => {
+    onSave?.()
+    handleClose()
+  }
+
+  const handleModalClose = () => {
+    if (!isNil(savedDateRange)) onChangeCallback(savedDateRange)
+    handleClose()
+  }
+
+  // If savedDateRange is null, we consider value saved
+  const isCurrentDateSaved =
+    isNil(savedDateRange) || isDatesEqual(value, savedDateRange)
+
+  // If defaultDateRange is null, we consider value resettable
+  const isDateResettable =
+    isNil(defaultDateRange) || !isDatesEqual(value, defaultDateRange)
+
+  const canShowSaveAndCancelButtons = !isNil(savedDateRange) && !isNil(defaultDateRange)
+
+  const shouldShowResetButton =
+    !state.isOpen && isCurrentDateSaved && isDateResettable
+
+  const shouldShowSaveAndCancelButtons =
+    canShowSaveAndCancelButtons && !state.isOpen && !isCurrentDateSaved
+
+  return (
+    <Popover
+      isOpen={ state.isOpen }
+      onClose={ handleModalClose }
+      placement="bottom-start"
+    >
+      <PopoverAnchor>
+        <HStack>
+          <InputGroup { ...groupProps } ref={ ref } __css={ group }>
+            <StyledField
+              isDisabled={ isDisabled }
+              isInvalid={ isInvalid }
+              variant={ variant }
+            >
+              <HStack paddingInlineStart="1a" paddingInlineEnd={ 10 }>
+                <DateField { ...startFieldProps } dateFormat={ dateFormat } />
+                <P>-</P>
+                <DateField { ...endFieldProps } dateFormat={ dateFormat } />
+              </HStack>
+            </StyledField>
+            <InputRightElement sx={ { height: '100%', paddingRight: '1' } }>
+              <Trigger
+                { ...buttonProps }
+                isDisabled={ isDisabled }
+                handleClick={ togglePopup }
+              />
+            </InputRightElement>
+          </InputGroup>
+          { shouldShowResetButton && (
+            ResetButton
+          ) }
+          { shouldShowSaveAndCancelButtons && (
+            <>
+              <Tooltip label={ clearButtonLabel }>
+                <IconButton
+                  aria-label="cancel-date-change"
+                  variant="ghost"
+                  size="sm"
+                  fontSize="xs"
+                  onClick={ onCancelChanges }
+                  isDisabled={ isDisabled }
+                  icon={ <Icon as={ XCloseSolid } /> }
+                />
+              </Tooltip>
+              <Tooltip label={ buttonLabel }>
+                <IconButton
+                  aria-label="save-date"
+                  variant="brand"
+                  size="sm"
+                  fontSize="xs"
+                  onClick={ handleSave }
+                  isDisabled={ isDisabled }
+                  icon={ <Icon as={ CheckSolid } /> }
+                />
+              </Tooltip>
+            </>
+          ) }
+        </HStack>
+      </PopoverAnchor>
+      <PortalWrapper renderInPortal={ renderInPortal }>
+        { state.isOpen && (
+          <PopoverContent { ...dialogProps } ref={ ref } w="max-content">
+            <FocusScope contain={ true } restoreFocus={ true }>
+              <DatePickerLocaleWrapper firstDayOfWeek={ firstDayOfWeek }>
+                <RangeCalendar
+                  { ...calendarProps }
+                  resetDate={ cancelOrResetDateChange }
+                  handleClose={ handleModalClose }
+                  fiscalStartMonth={ fiscalStartMonth || 0 }
+                  fiscalStartDay={ fiscalStartDay || 0 }
+                  isClearable={ isClearable }
+                  firstDayOfWeek={ firstDayOfWeek }
+                  onSave={ onSave }
+                  clearButtonLabel={ clearButtonLabel }
+                  buttonLabel={ buttonLabel }
+                />
+              </DatePickerLocaleWrapper>
+            </FocusScope>
+          </PopoverContent>
+        ) }
+      </PortalWrapper>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,3 @@
+export * from './date-picker'
+export * from './date-range-picker'
+export * from './date-picker-locale-wrapper'

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

@@ -0,0 +1,97 @@
+import React, { forwardRef } from 'react'
+import { DateValue, parseDate } from '@internationalized/date'
+import { identity } from 'ramda'
+import { DatePickerFieldProps } from '../types'
+import { Field } from '../../form'
+import { DatePicker } from '../date-picker/date-picker'
+import { useFormContext } from '../../../hooks'
+import { InputGroupWrapper } from '../../../internal-components/input-group-wrapper'
+
+/**
+ * The <DatePicker /> component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see DatePicker
+ * @see {@link https://northlight.dev/reference/date-picker-field}
+ *
+ * @example (Example)
+ * ##Fill in your information:
+ * (?
+ * <Form initialValues={{date: null}}>
+ * <DatePickerField name="date" />
+ * </Form>
+ *
+ * ?)
+ * <br />
+ * ###The simplest way
+ * Using the date picker in a form is probably the easiest
+ * way to use it, it will handle the state for you and you
+ * can retrieve the date at the end as a string on format
+ * yyyy-mm-dd on the onSubmit callback on <Form>
+ *
+ */
+export const DatePickerField = forwardRef<HTMLDivElement, DatePickerFieldProps>(({
+  name,
+  minValue,
+  maxValue,
+  isRequired,
+  direction = 'column',
+  label,
+  validate,
+  firstDayOfWeek = 'monday',
+  onChange: onChangeCallback = identity,
+  inputLeftElement,
+  inputRightElement,
+  ...rest
+}, ref) => {
+  const { setValue, setError, trigger } = useFormContext()
+
+  const handleChange = (date: DateValue) => {
+    setValue(name, date?.toString())
+    if ((minValue && date < parseDate(minValue)) || (maxValue && date > parseDate(maxValue))) {
+      setError(name, {
+        type: 'custom',
+        message: minValue && maxValue
+          ? `Date must be between ${minValue}-${maxValue}`
+          : minValue
+            ? `Select date earliest at ${minValue}`
+            : `Select date latest at ${maxValue}`
+        ,
+      })
+    } else {
+      trigger(name)
+    }
+    onChangeCallback(date)
+  }
+
+  return (
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ value, onChange }, { formState: { errors } }) => (
+        <InputGroupWrapper
+          inputLeftElement={ inputLeftElement }
+          inputRightElement={ inputRightElement }
+        >
+          <DatePicker
+            firstDayOfWeek={ firstDayOfWeek }
+            aria-label={ label }
+            isInvalid={ !!errors[name] }
+            onChange={ handleChange }
+            resetDate={ () => onChange(null) }
+            value={ value ? parseDate(value) as any : null }
+            minValue={ minValue ? parseDate(minValue) as DateValue : undefined }
+            maxValue={ maxValue ? parseDate(maxValue) as DateValue : undefined }
+            validationState={ errors.name ? 'invalid' : 'valid' }
+            { ...rest as any }
+          />
+        </InputGroupWrapper>
+      ) }
+    </Field>
+
+  )
+})

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

@@ -0,0 +1,81 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { DateRangePickerFieldProps, FormBody } from '../types'
+import { Field } from '../../form'
+import { DateRangePicker } from '../date-picker/date-range-picker'
+import { useFormContext } from '../../../hooks'
+
+/**
+ * The <DateRangePicker /> component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see DateRangePicker
+ * @see {@link https://northlight.dev/reference/date-range-picker-field}
+ *
+ */
+export const DateRangePickerField = forwardRef<HTMLDivElement, DateRangePickerFieldProps>(({
+  name,
+  minValue,
+  maxValue,
+  isRequired,
+  direction = 'column',
+  label,
+  validate,
+  firstDayOfWeek = 'monday',
+  onChange: onChangeCallback = identity,
+  isClearable = true,
+  onSave,
+  buttonLabel = 'Save',
+  ...rest
+}, ref) => {
+  const { setValue, setError, trigger } = useFormContext<FormBody>()
+
+  const handleChange = (dateRange: { startDate: string, endDate: string }) => {
+    setValue(name, dateRange)
+    if (
+      (minValue && dateRange?.startDate < minValue) ||
+      (maxValue && dateRange?.endDate > maxValue)
+    ) {
+      setError(name, {
+        type: 'custom',
+        message:
+          minValue && maxValue
+            ? `Date must be between ${minValue}-${maxValue}`
+            : minValue
+              ? `Select date earliest at ${minValue}`
+              : `Select date latest at ${maxValue}`,
+      })
+    } else {
+      trigger(name)
+    }
+    onChangeCallback(dateRange)
+  }
+
+  return (
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ value, onChange }, { formState: { errors } }) => (
+        <DateRangePicker
+          firstDayOfWeek={ firstDayOfWeek }
+          aria-label={ label }
+          isInvalid={ !!errors[name] }
+          onChange={ handleChange }
+          onSave={ onSave }
+          resetDate={ () => onChange(null) }
+          value={ value }
+          minValue={ minValue }
+          maxValue={ maxValue }
+          validationState={ errors.name ? 'invalid' : 'valid' }
+          isClearable={ isClearable }
+          buttonLabel={ buttonLabel }
+          { ...(rest as any) }
+        />
+      ) }
+    </Field>
+  )
+})

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

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

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

@@ -0,0 +1,9 @@
+import { has, is } from 'ramda'
+
+export const isValidDateRange = (value: unknown) => (
+  is(Object, value) &&
+  has('startDate', value) &&
+  has('endDate', value) &&
+  is(String, value.startDate) &&
+  is(String, value.endDate)
+)

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

@@ -0,0 +1,3 @@
+export * from './date-picker'
+export * from './date-picker-field'
+export * from './types'