refactor(date-fns): ♻️ check date-fns bundle size

adaptui · Sep 8, 2021 · 2febac0 · 2febac0
1 parent 334e557
commit 2febac0
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@react-aria/interactions": "^3.5.1",
     "@react-aria/spinbutton": "^3.0.1",
     "@react-aria/utils": "^3.8.2",
-    "dayjs": "^1.10.6",
+    "date-fns": "^2.23.0",
     "reakit-system": "^0.15.2",
     "reakit-utils": "^0.15.2",
     "reakit-warning": "^0.6.2"

diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts
@@ -67,7 +67,7 @@ export function useCalendarState(
   const weekStart = useWeekStart();
   const weekDays = useWeekDays(weekStart);
 
-  let monthStartsAt = (startOfMonth(currentMonth).get("day") - weekStart) % 7;
+  let monthStartsAt = (startOfMonth(currentMonth).getDay() - weekStart) % 7;
   if (monthStartsAt < 0) {
     monthStartsAt += 7;
   }
@@ -93,7 +93,7 @@ export function useCalendarState(
     if (isInvalidDateRange(date)) return;
 
     if (!isSameMonth(date, currentMonth)) {
-      setCurrentMonth(startOfMonth(date).toDate());
+      setCurrentMonth(startOfMonth(date));
     }
 
     setFocusedDate(date);
@@ -184,10 +184,10 @@ export function useCalendarState(
       focusCell(subMonths(focusedDate, 1));
     },
     focusStartOfMonth() {
-      focusCell(startOfMonth(focusedDate).toDate());
+      focusCell(startOfMonth(focusedDate));
     },
     focusEndOfMonth() {
-      focusCell(endOfMonth(startOfDay(focusedDate).toDate()).toDate());
+      focusCell(endOfMonth(startOfDay(focusedDate)));
     },
     focusNextYear() {
       focusCell(addYears(focusedDate, 1));

diff --git a/src/calendar/helpers/index.ts b/src/calendar/helpers/index.ts
@@ -2,20 +2,18 @@
  * All credit goes to [React Spectrum](https://github.com/adobe/react-spectrum)
  * for these utils inspiration
  */
-import dayjs from "dayjs";
 import { RangeValue } from "@react-types/shared";
 import { useDateFormatter } from "@react-aria/i18n";
 
-import { toUTCString } from "../../utils";
+import { toUTCString, setDay } from "../../utils";
 
 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 = dayjs(Date.now())
-      .set("day", (index + weekStart) % 7)
-      .toDate();
+    const dateDay = setDay(Date.now(), (index + weekStart) % 7);
+
     const day = dayFormatter.format(dateDay);
     const dayLong = dayFormatterLong.format(dateDay);
     return { title: dayLong, abbr: day } as const;

diff --git a/src/timepicker/TimePickerState.ts b/src/timepicker/TimePickerState.ts
@@ -7,7 +7,7 @@ import { SegmentInitialState, useSegmentState } from "../segment";
 import { useTimePickerColumnState } from "./TimePickerColumnState";
 import { PickerBaseInitialState, usePickerBaseState } from "../picker-base";
 import { announce } from "../utils/LiveAnnouncer";
-import { formatDate } from "../utils";
+import { useDateFormatter } from "@react-aria/i18n";
 
 export type TimePickerInitialState = PickerBaseInitialState &
   ValueBase<string> &
@@ -101,8 +101,11 @@ export const useTimePickerState = (props: TimePickerInitialState = {}) => {
   const hours = [...new Array(13).keys()].slice(1);
   const minutes = [...new Array(60).keys()];
   const meridies = ["AM", "PM"];
+
+  const dateFormatter = useDateFormatter({ timeStyle: "medium" });
+
   const announceSelectedDate = () => {
-    announce(`Selected Time: ${formatDate(time, "h:m a")}`);
+    announce(`Selected Time: ${dateFormatter.format(time)}`);
   };
 
   React.useEffect(() => {

diff --git a/src/timepicker/helpers.ts b/src/timepicker/helpers.ts
@@ -1,4 +1,3 @@
-import { formatDate } from "../utils";
 import { isString } from "@chakra-ui/utils";
 
 import { ColumnType } from "./TimePickerColumnState";
@@ -28,7 +27,7 @@ export function parseTime(timeValue: string | undefined) {
 }
 
 export function stringifyTime(date: Date) {
-  return formatDate(date, "HH:mm:ss");
+  return date.toString().slice(16, 24);
 }
 
 export function getSelectedValueFromDate(date: Date, type: ColumnType) {

diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import { RangeValue } from "@react-types/shared";
 
 export const toUTCString = (date: Date) => {
@@ -9,85 +8,33 @@ export const toUTCRangeString = (date: RangeValue<Date>) => {
   return { start: toUTCString(date.start), end: toUTCString(date.end) };
 };
 
-export const subDays = (date: Date, amount: number) =>
-  dayjs(date).subtract(amount, "day").toDate();
-
-export const subMonths = (date: Date, amount: number) =>
-  dayjs(date).subtract(amount, "months").toDate();
-
-export const subWeeks = (date: Date, amount: number) =>
-  dayjs(date).subtract(amount, "weeks").toDate();
-
-export const subYears = (date: Date, amount: number) =>
-  dayjs(date).subtract(amount, "years").toDate();
-
-export const addDays = (date: Date, amount: number) =>
-  dayjs(date).add(amount, "day").toDate();
-
-export const addMonths = (date: Date, amount: number) =>
-  dayjs(date).add(amount, "months").toDate();
-
-export const addYears = (date: Date, amount: number) =>
-  dayjs(date).add(amount, "years").toDate();
-
-export const addWeeks = (date: Date, amount: number) =>
-  dayjs(date).add(amount, "weeks").toDate();
-
-export const getDate = (date: Date) => dayjs(date).get("date");
-
-export const getHours = (date: Date) => dayjs(date).get("hours");
-
-export const getMinutes = (date: Date) => dayjs(date).get("minutes");
-
-export const getMonth = (date: Date) => dayjs(date).get("months");
-
-export const getSeconds = (date: Date) => dayjs(date).get("seconds");
-
-export const getYear = (date: Date) => dayjs(date).get("years");
-
-export const setDate = (date: Date, value: number) =>
-  dayjs(date).set("date", value).toDate();
-
-export const setHours = (date: Date, value: number) =>
-  dayjs(date).set("hour", value).toDate();
-
-export const setMinutes = (date: Date, value: number) =>
-  dayjs(date).set("minute", value).toDate();
-
-export const setSeconds = (date: Date, value: number) =>
-  dayjs(date).set("second", value).toDate();
-
-export const setMonth = (date: Date, value: number) =>
-  dayjs(date).set("month", value).toDate();
-
-export const setYear = (date: Date, value: number) =>
-  dayjs(date).set("year", value).toDate();
-
-export const startOfMonth = (date: Date) => {
-  return dayjs(date).startOf("month");
-};
-
-export const startOfDay = (date: Date) => {
-  return dayjs(date).startOf("day");
-};
-
-export const endOfMonth = (date: Date) => {
-  return dayjs(date).endOf("month");
-};
-
-export const getDaysInMonth = (date: Date) => dayjs(date).daysInMonth();
-
-export const isSameMonth = (date1: Date, date2: Date) =>
-  dayjs(date1).isSame(date2, "month");
-
-export const isSameDay = (date1: Date, date2: Date) =>
-  dayjs(date1).isSame(date2, "day");
-
-export const isWeekend = (date: Date) => {
-  const day = dayjs(date).get("day");
-  return day === 0 || day === 6;
-};
-
-export const formatDate = (date: Date, fmt: string) => {
-  return dayjs(date).format(fmt);
-};
+export {
+  subDays,
+  subMonths,
+  subWeeks,
+  subYears,
+  addDays,
+  addMonths,
+  addYears,
+  addWeeks,
+  getDate,
+  getHours,
+  getMinutes,
+  getMonth,
+  getSeconds,
+  getYear,
+  setDate,
+  setDay,
+  setHours,
+  setMinutes,
+  setSeconds,
+  setMonth,
+  setYear,
+  startOfMonth,
+  startOfDay,
+  endOfMonth,
+  getDaysInMonth,
+  isSameMonth,
+  isSameDay,
+  isWeekend,
+} from "date-fns";
diff --git a/yarn.lock b/yarn.lock
@@ -7724,6 +7724,11 @@ date-fns@^2.16.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4"
   integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==
 
+date-fns@^2.23.0:
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
+  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"