refactor(pickers): ♻️ update utils & add date utils

src/calendar/CalendarCellButton.ts

@@ -11,7 +11,7 @@ import { createComponent, createHook } from "reakit-system";
 import { ariaAttr, callAllHandlers } from "@chakra-ui/utils";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 
-import { isInvalid } from "./__utils";
+import { isInvalidDate } from "../utils";
 import { CALENDAR_CELL_BUTTON_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 import { RangeCalendarStateReturn } from "./RangeCalendarState";
@@ -56,7 +56,9 @@ export const useCalendarCellButton = createHook<
     } = options;
     const isCurrentMonth = date.getMonth() === month;
     const isDisabled =
-      isDisabledOption || !isCurrentMonth || isInvalid(date, minDate, maxDate);
+      isDisabledOption ||
+      !isCurrentMonth ||
+      isInvalidDate(date, minDate, maxDate);
     const truelyDisabled = disabled || isDisabled;
 
     return { disabled: truelyDisabled, ...options };

src/calendar/CalendarState.ts

@@ -30,8 +30,8 @@ import { FocusableProps, InputBase, ValueBase } from "@react-types/shared";
 import { useWeekStart } from "./useWeekStart";
 import { RangeValueBase } from "../utils/types";
 import { announce } from "../utils/LiveAnnouncer";
-import { parseDate, stringifyDate } from "../datepicker/__utils";
-import { isInvalid, useWeekDays, generateDaysInMonthArray } from "./__utils";
+import { isInvalidDate, parseDate, stringifyDate } from "../utils";
+import { useWeekDays, generateDaysInMonthArray } from "./__utils";
 
 export interface CalendarInitialState
   extends FocusableProps,
@@ -100,7 +100,7 @@ export function useCalendarState(props: CalendarInitialState = {}) {
 
   // Sets focus to a specific cell date
   function focusCell(date: Date) {
-    if (isInvalid(date, minValue, maxValue)) {
+    if (isInvalidDate(date, minValue, maxValue)) {
       return;
     }
 

src/calendar/RangeCalendarState.ts

@@ -13,11 +13,11 @@ import * as React from "react";
 import { format, isSameDay } from "date-fns";
 import { useControllableState, useUpdateEffect } from "@chakra-ui/hooks";
 
+import { makeRange } from "./__utils";
 import { RangeValueBase } from "../utils/types";
 import { announce } from "../utils/LiveAnnouncer";
 import { useCalendarState } from "./CalendarState";
-import { makeRange, parseRangeDate } from "./__utils";
-import { stringifyDate } from "../datepicker/__utils";
+import { parseRangeDate, stringifyDate } from "../utils";
 
 export interface RangeCalendarInitialState
   extends FocusableProps,

src/calendar/__utils.ts

@@ -6,14 +6,6 @@ import { endOfDay, setDay } from "date-fns";
 import { RangeValue } from "@react-types/shared";
 import { useDateFormatter } from "@react-aria/i18n";
 
-import { parseDate } from "../datepicker/__utils";
-
-export function isInvalid(date: Date, minDate?: Date, maxDate?: Date) {
-  return (
-    (minDate != null && date < minDate) || (maxDate != null && date > maxDate)
-  );
-}
-
 export function useWeekDays(weekStart: number) {
   const dayFormatter = useDateFormatter({ weekday: "short" });
   const dayFormatterLong = useDateFormatter({ weekday: "long" });
@@ -57,14 +49,3 @@ export function makeRange(start: Date, end: Date): RangeValue<Date> {
 
   return { start: start, end: endOfDay(end) };
 }
-
-export const parseRangeDate = (
-  date?: RangeValue<string>,
-): RangeValue<Date> | undefined => {
-  if (!date) return;
-
-  const start = parseDate(date.start);
-  const end = parseDate(date.end);
-  if (!start || !end) return;
-  return { start, end };
-};

src/calendar/stories/Calendar.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Meta } from "@storybook/react";
-import { addDays, addWeeks, format, subWeeks } from "date-fns";
+import { addWeeks, format, subWeeks } from "date-fns";
 
 import "./index.css";
 import { CalendarComponent } from "./CalendarComponent";

src/datepicker/DatePickerContent.ts

@@ -21,10 +21,6 @@ export const useDatePickerContent = createHook<
   name: "DatePickerContent",
   compose: usePickerBaseContent,
   keys: DATE_PICKER_CONTENT_KEYS,
-
-  useProps(_, htmlProps) {
-    return htmlProps;
-  },
 });
 
 export const DatePickerContent = createComponent({

src/datepicker/DatePickerState.ts

@@ -15,7 +15,7 @@ import { useControllableState } from "@chakra-ui/hooks";
 
 import { useSegmentState } from "../segment";
 import { useCalendarState } from "../calendar";
-import { isInvalid, parseDate, stringifyDate } from "./__utils";
+import { isInvalidDate, parseDate, stringifyDate } from "../utils";
 import { DateTimeFormatOpts, RangeValueBase } from "../utils/types";
 import { PickerBaseInitialState, usePickerBaseState } from "../picker-base";
 
@@ -79,7 +79,7 @@ export const useDatePickerState = (props: DatePickerInitialState = {}) => {
 
   const validationState: ValidationState =
     props.validationState ||
-    (isInvalid(value, minValue, maxValue) ? "invalid" : "valid");
+    (isInvalidDate(value, minValue, maxValue) ? "invalid" : "valid");
 
   React.useEffect(() => {
     if (popover.visible) {

src/datepicker/DatePickerTrigger.ts

@@ -1,11 +1,11 @@
 import { createComponent, createHook } from "reakit-system";
 
-import { DATE_PICKER_TRIGGER_KEYS } from "./__keys";
 import {
   PickerBaseTriggerHTMLProps,
   PickerBaseTriggerOptions,
   usePickerBaseTrigger,
 } from "../picker-base";
+import { DATE_PICKER_TRIGGER_KEYS } from "./__keys";
 
 export type DatePickerTriggerOptions = PickerBaseTriggerOptions;
 
@@ -21,10 +21,6 @@ export const useDatePickerTrigger = createHook<
   name: "DatePickerTrigger",
   compose: usePickerBaseTrigger,
   keys: DATE_PICKER_TRIGGER_KEYS,
-
-  useProps(_, htmlProps) {
-    return htmlProps;
-  },
 });
 
 export const DatePickerTrigger = createComponent({

src/datepicker/__utils.ts

@@ -10,64 +10,3 @@ export function setTime(date: Date, time: Date) {
   date.setSeconds(time.getSeconds());
   date.setMilliseconds(time.getMilliseconds());
 }
-
-export function isInvalid(value: Date, minValue?: Date, maxValue?: Date) {
-  return (
-    value != null &&
-    ((minValue != null && value < new Date(minValue)) ||
-      (maxValue != null && value > new Date(maxValue)))
-  );
-}
-
-// As per https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#dates
-export function parseDate(dateValue: string | undefined) {
-  if (dateValue == null || !isString(dateValue)) return;
-
-  const dateRegex = dateValue.match(/(\d{4,})(-(\d\d)){1,2}/i);
-  if (dateRegex == null) return;
-
-  const date = dateValue.split("-");
-  if (+date[0] <= 0 || +date[1] < 1 || +date[1] > 12) return;
-
-  const maxDay = isLeapYear(+date[0])
-    ? getMaxDay(+date[1], true)
-    : getMaxDay(+date[1]);
-  if (+date[2] < 1 && +date[2] > maxDay) return;
-
-  return new Date(
-    +date[0],
-    +date[1] - 1,
-    +date[2],
-    new Date().getHours(),
-    0,
-    0,
-    0,
-  );
-}
-
-function getMaxDay(month: number, isLeapYear = false) {
-  const _31DaysMonth = [1, 3, 5, 7, 8, 10];
-  const _30DaysMonth = [4, 6, 9, 11];
-
-  if (_31DaysMonth.includes(month)) return 31;
-  if (_30DaysMonth.includes(month)) return 30;
-  if (month === 2 && isLeapYear) return 29;
-  return 28;
-}
-
-function isLeapYear(year: number) {
-  return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
-}
-
-export function stringifyDate(date: Date) {
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
-    date.getDate(),
-  )}`;
-}
-
-function pad(number: number) {
-  if (number < 10) {
-    return "0" + number;
-  }
-  return number;
-}

src/picker-base/__tests__/BasePicker.tests.tsx

@@ -7,7 +7,7 @@ import {
   PickerBaseTrigger,
   usePickerBaseState,
   PickerBaseInitialState,
-} from "..";
+} from "../index";
 
 const PickerBaseComp: React.FC<PickerBaseInitialState> = props => {
   const state = usePickerBaseState({

src/segment/SegmentField.ts

@@ -16,10 +16,6 @@ export const useSegmentField = createHook<
   name: "SegmentField",
   compose: useComposite,
   keys: SEGMENT_FIELD_KEYS,
-
-  useProps(_, htmlProps) {
-    return htmlProps;
-  },
 });
 
 export const SegmentField = createComponent({

src/segment/stories/Segment.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Meta } from "@storybook/react";
 
+import "./index.css";
 import { Segment } from "../Segment";
 import { SegmentField } from "../SegmentField";
 import { useSegmentState, SegmentStateProps } from "../SegmentState";
-import "./index.css";
 
 export default {
   title: "Component/Segment",

src/timepicker/TimePickerColumn.ts

@@ -24,10 +24,10 @@ export const useTimePickerColumn = createHook<
   compose: useComposite,
   keys: TIME_PICKER_COLUMN_KEYS,
 
-  useProps(options, htmlProps) {
+  useProps({ columnType }, htmlProps) {
     return {
       role: "listbox",
-      "aria-label": options.columnType,
+      "aria-label": columnType,
       ...htmlProps,
     };
   },

src/timepicker/TimePickerColumnValue.ts

@@ -1,4 +1,3 @@
-import React, { useCallback } from "react";
 import {
   useCompositeItem,
   CompositeItemOptions,
@@ -7,12 +6,13 @@ import {
   ButtonHTMLProps,
   ButtonOptions,
 } from "reakit";
+import * as React from "react";
 import { useForkRef } from "reakit-utils";
 import { createComponent, createHook } from "reakit-system";
 import { TimePickerColumnStateReturn } from "./TimePickerColumnState";
 
-import { TIME_PICKER_COLUMN_VALUE_KEYS } from "./__keys";
 import { callAllHandlers } from "@chakra-ui/utils";
+import { TIME_PICKER_COLUMN_VALUE_KEYS } from "./__keys";
 
 export type TimePickerColumnValueOptions = ButtonOptions &
   CompositeItemOptions &
@@ -58,7 +58,7 @@ export const useTimePickerColumnValue = createHook<
       }
     }, [id, move, selected, setCurrentId, value, visible]);
 
-    const onClick = useCallback(() => {
+    const onClick = React.useCallback(() => {
       setSelected(value);
     }, [setSelected, value]);
 

src/timepicker/TimePickerTrigger.ts

@@ -24,7 +24,7 @@ export const useTimePickerTrigger = createHook<
   compose: usePickerBaseTrigger,
   keys: TIME_PICKER_TRIGGER_KEYS,
 
-  useProps(options, htmlProps) {
+  useProps(_, htmlProps) {
     return {
       "aria-haspopup": "listbox",
       ...htmlProps,

src/timepicker/__tests__/TimePicker.test.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { axe, render, press } from "reakit-test-utils";
+
 import {
   TimePicker,
   TimePickerColumn,
@@ -10,7 +11,7 @@ import {
   TimePickerStateProps,
   TimePickerColumnValue,
   TimePickerSegmentField,
-} from "..";
+} from "../index";
 
 beforeAll(() => {
   // https://github.com/jsdom/jsdom/issues/1695

src/timepicker/__utils.ts

@@ -1,5 +1,6 @@
 import { isString } from "@chakra-ui/utils";
 
+import { pad } from "../utils";
 import { ColumnType } from "./TimePickerColumnState";
 
 // As per https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#times
@@ -26,13 +27,6 @@ export function parseTime(timeValue: string | undefined) {
   return date;
 }
 
-function pad(number: number) {
-  if (number < 10) {
-    return "0" + number;
-  }
-  return number;
-}
-
 export function stringifyTime(date: Date) {
   return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
     date.getSeconds(),