refactor: migrating to dayjs

package.json

@@ -97,6 +97,7 @@
     "@react-aria/spinbutton": "3.0.0",
     "@react-aria/utils": "3.8.1",
     "date-fns": "2.22.1",
+    "dayjs": "^1.10.6",
     "reakit-system": "0.15.1",
     "reakit-utils": "0.15.1",
     "reakit-warning": "^0.6.1"

src/calendar/CalendarCell.ts

@@ -7,9 +7,14 @@ import { useCallback } from "react";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { createComponent, createHook } from "reakit-system";
-import { getDaysInMonth, isSameDay, isWeekend } from "date-fns";
 
-import { dataAttr, ariaAttr } from "../utils";
+import {
+  dataAttr,
+  ariaAttr,
+  getDaysInMonth,
+  isSameDay,
+  isWeekend,
+} from "../utils";
 import { CALENDAR_CELL_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 import { RangeCalendarStateReturn } from "./RangeCalendarState";

src/calendar/CalendarCellButton.ts

@@ -4,14 +4,13 @@
  * to work with Reakit System
  */
 import * as React from "react";
-import { isSameDay } from "date-fns";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { useDateFormatter } from "@react-aria/i18n";
 import { ensureFocus, useForkRef } from "reakit-utils";
 import { createComponent, createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 
-import { isInvalidDateRange } from "../utils";
+import { isInvalidDateRange, isSameDay } from "../utils";
 import { CALENDAR_CELL_BUTTON_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 import { RangeCalendarStateReturn } from "./RangeCalendarState";

src/calendar/CalendarState.ts

@@ -9,7 +9,6 @@ import {
   addMonths,
   addWeeks,
   addYears,
-  closestTo,
   endOfMonth,
   format,
   getDaysInMonth,
@@ -20,19 +19,18 @@ import {
   subMonths,
   subWeeks,
   subYears,
-} from "date-fns";
+  parseDate,
+  stringifyDate,
+  isInvalidDateRange,
+  useControllableState,
+} from "../utils";
+import { closestTo } from "../utils";
 import * as React from "react";
 import { unstable_useId as useId } from "reakit";
 import { useUpdateEffect } from "@chakra-ui/hooks";
 import { useDateFormatter } from "@react-aria/i18n";
 import { InputBase } from "@react-types/shared";
 
-import {
-  parseDate,
-  stringifyDate,
-  isInvalidDateRange,
-  useControllableState,
-} from "../utils";
 import { announce } from "../utils/LiveAnnouncer";
 import { useWeekStart, useWeekDays, generateDaysInMonthArray } from "./helpers";
 
@@ -77,7 +75,7 @@ export function useCalendarState(
   const weekStart = useWeekStart();
   const weekDays = useWeekDays(weekStart);
 
-  let monthStartsAt = (startOfMonth(currentMonth).getDay() - weekStart) % 7;
+  let monthStartsAt = (startOfMonth(currentMonth).get("day") - weekStart) % 7;
   if (monthStartsAt < 0) {
     monthStartsAt += 7;
   }
@@ -103,7 +101,7 @@ export function useCalendarState(
 
         const nextDate = closestTo(date, [minValue, maxValue]);
         if (!isSameMonth(nextDate, currentMonth)) {
-          setCurrentMonth(startOfMonth(nextDate));
+          setCurrentMonth(startOfMonth(nextDate).toDate());
         }
         setFocusedDate(nextDate);
       }
@@ -112,7 +110,7 @@ export function useCalendarState(
     }
 
     if (!isSameMonth(date, currentMonth)) {
-      setCurrentMonth(startOfMonth(date));
+      setCurrentMonth(startOfMonth(date).toDate());
     }
 
     setFocusedDate(date);
@@ -181,10 +179,10 @@ export function useCalendarState(
       focusCell(subMonths(focusedDate, 1));
     },
     focusStartOfMonth() {
-      focusCell(startOfMonth(focusedDate));
+      focusCell(startOfMonth(focusedDate).toDate());
     },
     focusEndOfMonth() {
-      focusCell(endOfMonth(startOfDay(focusedDate)));
+      focusCell(endOfMonth(startOfDay(focusedDate).toDate()).toDate());
     },
     focusNextYear() {
       focusCell(addYears(focusedDate, 1));

src/calendar/RangeCalendarState.ts

@@ -4,14 +4,19 @@
  * to work with Reakit System
  */
 import * as React from "react";
-import { format, isSameDay } from "date-fns";
 import { InputBase, RangeValue } from "@react-types/shared";
 
 import { makeRange } from "./helpers";
 import { announce } from "../utils/LiveAnnouncer";
 import { useCalendarState } from "./CalendarState";
 import { CalendarActions, CalendarState } from "./CalendarState";
-import { parseRangeDate, stringifyDate, useControllableState } from "../utils";
+import {
+  format,
+  isSameDay,
+  parseRangeDate,
+  stringifyDate,
+  useControllableState,
+} from "../utils";
 
 export function useRangeCalendarState(
   props: RangeCalendarInitialState = {},
@@ -56,15 +61,15 @@ export function useRangeCalendarState(
       announce(
         `Selected range, from ${format(
           highlightedRange.start,
-          "do MMM yyyy",
-        )} to ${format(highlightedRange.start, "do MMM yyyy")}`,
+          "Do MMM YYYY",
+        )} to ${format(highlightedRange.start, "Do MMM YYYY")}`,
       );
     } else {
       announce(
         `Selected range, from ${format(
           highlightedRange.start,
-          "do MMM yyyy",
-        )} to ${format(highlightedRange.end, "do MMM yyyy")}`,
+          "Do MMM YYYY",
+        )} to ${format(highlightedRange.end, "Do MMM YYYY")}`,
       );
     }
   }, [highlightedRange]);
@@ -76,7 +81,7 @@ export function useRangeCalendarState(
 
     if (!anchorDate) {
       setAnchorDate(date);
-      announce(`Starting range from ${format(date, "do MMM yyyy")}`);
+      announce(`Starting range from ${format(date, "Do MMM YYYY")}`);
     } else {
       setValue(makeRange(anchorDate, date));
       announceRange();

src/calendar/__tests__/Calendar.test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import MockDate from "mockdate";
-import { subWeeks, addWeeks, format } from "date-fns";
 import { axe, render, press, screen } from "reakit-test-utils";
 
 import {
@@ -16,6 +15,7 @@ import {
 } from "../index";
 import { repeat } from "../../utils/test-utils";
 import { cleanup } from "@testing-library/react";
+import { addWeeks, format, subWeeks } from "../../utils";
 
 export const CalendarComp: React.FC<CalendarInitialState> = props => {
   const state = useCalendarState(props);
@@ -152,9 +152,9 @@ describe("Calendar", () => {
   test("should have min/max values", () => {
     render(
       <CalendarComp
-        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
-        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+        defaultValue={format(new Date(2020, 10, 7), "YYYY-MM-DD")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "YYYY-MM-DD")}
+        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "YYYY-MM-DD")}
       />,
     );
     const { getByLabelText: label } = screen;
@@ -173,9 +173,9 @@ describe("Calendar", () => {
   test("should be able to go to prev/next month when min/max values are set", () => {
     render(
       <CalendarComp
-        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
-        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+        defaultValue={format(new Date(2020, 10, 7), "YYYY-MM-DD")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "YYYY-MM-DD")}
+        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "YYYY-MM-DD")}
       />,
     );
     const { getByLabelText: label } = screen;
@@ -199,9 +199,9 @@ describe("Calendar", () => {
   test("should be able to go to prev/next year when min/max values are set", () => {
     render(
       <CalendarComp
-        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
-        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-        maxValue={format(addWeeks(new Date(2021, 10, 7), 1), "yyyy-MM-dd")}
+        defaultValue={format(new Date(2020, 10, 7), "YYYY-MM-DD")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "YYYY-MM-DD")}
+        maxValue={format(addWeeks(new Date(2021, 10, 7), 1), "YYYY-MM-DD")}
       />,
     );
 

src/calendar/helpers/index.ts

@@ -2,16 +2,18 @@
  * All credit goes to [React Spectrum](https://github.com/adobe/react-spectrum)
  * for these utils inspiration
  */
-import { setDay } from "date-fns";
 import { RangeValue } from "@react-types/shared";
 import { useDateFormatter } from "@react-aria/i18n";
+import dayjs from "dayjs";
 
 export function useWeekDays(weekStart: number) {
   const dayFormatter = useDateFormatter({ weekday: "short" });
   const dayFormatterLong = useDateFormatter({ weekday: "long" });
 
   return [0, 1, 2, 3, 4, 5, 6].map(index => {
-    const dateDay = setDay(Date.now(), (index + weekStart) % 7);
+    const dateDay = dayjs(Date.now())
+      .set("day", (index + weekStart) % 7)
+      .toDate();
     const day = dayFormatter.format(dateDay);
     const dayLong = dayFormatterLong.format(dateDay);
     return { title: dayLong, abbr: day } as const;

src/calendar/stories/CalendarBase.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
-import { addWeeks, format } from "date-fns";
 
 import "./CalendarBase.css";
 import {
@@ -13,6 +12,8 @@ import {
 } from "./templates";
 import { App as Calendar } from "./CalendarBase.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import { format } from "util";
+import { addWeeks } from "@renderlesskit/react/utils";
 
 export default {
   component: Calendar,
@@ -36,18 +37,18 @@ export default {
 } as Meta;
 
 const Base: Story = args => {
-  args.value &&= format(new Date(args.value), "yyyy-MM-dd");
-  args.defaultValue &&= format(new Date(args.defaultValue), "yyyy-MM-dd");
-  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
-  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
+  args.value &&= format(new Date(args.value), "YYYY-MM-DD");
+  args.defaultValue &&= format(new Date(args.defaultValue), "YYYY-MM-DD");
+  args.minValue &&= format(new Date(args.minValue), "YYYY-MM-DD");
+  args.maxValue &&= format(new Date(args.maxValue), "YYYY-MM-DD");
 
   const [{ value }, updateArgs] = useArgs();
 
   return (
     <Calendar
       value={value}
       onChange={date =>
-        updateArgs({ value: format(new Date(date), "yyyy-MM-dd") })
+        updateArgs({ value: format(new Date(date), "YYYY-MM-DD") })
       }
       {...args}
     />

src/calendar/stories/CalendarRange.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
-import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
 import "./CalendarRange.css";
 import {
@@ -13,6 +12,13 @@ import {
 } from "./templates";
 import { App as RangeCalendar } from "./CalendarRange.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import {
+  addDays,
+  addWeeks,
+  format,
+  subDays,
+  subWeeks,
+} from "@renderlesskit/react/utils";
 
 export default {
   title: "Calendar/Range",
@@ -45,16 +51,16 @@ export default {
 
 const Base: Story = args => {
   args.value = {
-    start: args.start && format(new Date(args.start), "yyyy-MM-dd"),
-    end: args.end && format(new Date(args.end), "yyyy-MM-dd"),
+    start: args.start && format(new Date(args.start), "YYYY-MM-DD"),
+    end: args.end && format(new Date(args.end), "YYYY-MM-DD"),
   };
   args.defaultValue = {
     start:
-      args.defaultStart && format(new Date(args.defaultStart), "yyyy-MM-dd"),
-    end: args.defaultEnd && format(new Date(args.defaultEnd), "yyyy-MM-dd"),
+      args.defaultStart && format(new Date(args.defaultStart), "YYYY-MM-DD"),
+    end: args.defaultEnd && format(new Date(args.defaultEnd), "YYYY-MM-DD"),
   };
-  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
-  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
+  args.minValue &&= format(new Date(args.minValue), "YYYY-MM-DD");
+  args.maxValue &&= format(new Date(args.maxValue), "YYYY-MM-DD");
 
   const [argProps, updateArgs] = useArgs();
 
@@ -63,8 +69,8 @@ const Base: Story = args => {
       value={{ start: argProps["start"], end: argProps["nd"] }}
       onChange={date => {
         updateArgs({
-          start: format(new Date(date.start), "yyyy-MM-dd"),
-          end: format(new Date(date.end), "yyyy-MM-dd"),
+          start: format(new Date(date.start), "YYYY-MM-DD"),
+          end: format(new Date(date.end), "YYYY-MM-DD"),
         });
       }}
       {...args}
@@ -115,10 +121,10 @@ ControlledStory.args = {
 
 export const ControlledInput = () => {
   const [start, setStart] = React.useState(
-    format(subDays(new Date(), 1), "yyyy-MM-dd"),
+    format(subDays(new Date(), 1), "YYYY-MM-DD"),
   );
   const [end, setEnd] = React.useState(
-    format(addDays(new Date(), 1), "yyyy-MM-dd"),
+    format(addDays(new Date(), 1), "YYYY-MM-DD"),
   );
 
   return (

src/datepicker/__tests__/DatePicker.test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cleanup } from "@testing-library/react";
-import { format, addWeeks, subWeeks } from "date-fns";
 
 import { axe, render, press, screen } from "reakit-test-utils";
 import {
@@ -24,6 +23,7 @@ import {
   CalendarCellButton,
 } from "../../calendar";
 import { repeat } from "../../utils/test-utils";
+import { addWeeks, format, subWeeks } from "../../utils";
 
 /*
 // Mocking useId otherwise snapshots will change each time
@@ -227,9 +227,9 @@ describe("DatePicker", () => {
   it("should be invalid on out of range value", () => {
     render(
       <DatePickerComp
-        defaultValue={format(addWeeks(new Date(), 2), "yyyy-MM-dd")}
-        minValue={format(subWeeks(new Date(), 1), "yyyy-MM-dd")}
-        maxValue={format(addWeeks(new Date(), 1), "yyyy-MM-dd")}
+        defaultValue={format(addWeeks(new Date(), 2), "YYYY-MM-DD")}
+        minValue={format(subWeeks(new Date(), 1), "YYYY-MM-DD")}
+        maxValue={format(addWeeks(new Date(), 1), "YYYY-MM-DD")}
       />,
     );