chore: fe-6858 - update date-fns from ^2.30.0 to ^4.10.0

The main concern with my current implementation is that <DayPicker has a property locale that accepts a date-fns localize type. weekdaysLong and weekdaysShort are now not accepted properties. I did not know what to do for this scenario, so I removed the code entirely. However, I suspect that's not the correct behaviour. I would appreciate guidance for how to proceed.
Sage · Jan 15, 2025 · d3d535d · d3d535d
1 parent 3130d4c
commit d3d535d
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -124,7 +124,6 @@
     "core-js": "^3.33.3",
     "css-loader": "^6.8.1",
     "cz-conventional-changelog": "^3.3.0",
-    "date-fns-tz": "^1.3.8",
     "dayjs": "^1.11.10",
     "draft-js": "^0.11.7",
     "eslint": "^8.55.0",
@@ -187,7 +186,7 @@
     "ci-info": "^3.8.0",
     "classnames": "~2.3.2",
     "crypto-js": "^4.2.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",

diff --git a/rfcs/text/refactoring-date-component.md b/rfcs/text/refactoring-date-component.md
@@ -152,7 +152,7 @@ Research into whether we should migrate to a new solution or continue to use `re
 
 We will remove the `date` property from the locale object passed to the `I18nProvider` component: instead we will store the formats internally and use the `locale.locale()` string to map to the formats for that given locale. The rest of the locale object must match the interface detailed in the [i18n RFC](https://github.com/Sage/carbon/blob/master/rfcs/text/i18n.md) documenting the approach. Storing the formats internally and separating valid formats by locale will lessen the amount of maintenance the component will require.
 
-To implement translations in the new component we will leverage the locales already provided by [date-fns/locale](https://github.com/date-fns/date-fns/tree/master/src/locale), whereby the locale string can be used to map to the relevant file. The [localize](https://date-fns.org/v2.23.0/docs/I18n-Contribution-Guide#localize) properties surfaced from `date-fns` support translations for weekdays, months and so on out of the box. Whilst this would couple our implementation closely to `date-fns` if we decided later we needed to move away from it implementing a different mechanism would not be too complex.
+To implement translations in the new component we will leverage the locales already provided by [date-fns/locale](https://github.com/date-fns/date-fns/tree/master/src/locale), whereby the locale string can be used to map to the relevant file. The [localize](https://date-fns.org/v4.1.0/docs/I18n-Contribution-Guide#localize) properties surfaced from `date-fns` support translations for weekdays, months and so on out of the box. Whilst this would couple our implementation closely to `date-fns` if we decided later we needed to move away from it implementing a different mechanism would not be too complex.
 
 ## Event handling
 

diff --git a/src/components/date-range/date-range.test.tsx b/src/components/date-range/date-range.test.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import enGBLocale from "date-fns/locale/en-GB";
-import deLocale from "date-fns/locale/de";
+import { enGB as enGBLocale } from "date-fns/locale/en-GB";
+import { de as deLocale } from "date-fns/locale/de";
 
 import DateRange, { DateRangeChangeEvent } from "./date-range.component";
 import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";

diff --git a/src/components/date/__internal__/date-fns-fp/index.ts b/src/components/date/__internal__/date-fns-fp/index.ts
@@ -1,9 +1,9 @@
 // Separate index.ts to export only required sub-modules from date-fns/fp
 // import { format, formatISO, isMatch, parse, parseISO } from "date-fns/fp" adds extra 300kb to bundle size.
-export { default as format } from "date-fns/fp/format";
-export { default as formatISO } from "date-fns/fp/formatISO";
-export { default as isMatch } from "date-fns/fp/isMatch";
-export { default as isValid } from "date-fns/fp/isValid";
-export { default as parse } from "date-fns/fp/parse";
-export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
-export { default as parseISO } from "date-fns/fp/parseISO";
+export { format } from "date-fns/fp/format";
+export { formatISO } from "date-fns/fp/formatISO";
+export { isMatch } from "date-fns/fp/isMatch";
+export { isValid } from "date-fns/fp/isValid";
+export { parse } from "date-fns/fp/parse";
+export { parseWithOptions } from "date-fns/fp/parseWithOptions";
+export { parseISO } from "date-fns/fp/parseISO";
diff --git a/src/components/date/__internal__/date-formats/index.ts b/src/components/date/__internal__/date-formats/index.ts
@@ -141,9 +141,10 @@ interface LocaleFormats {
 }
 
 const getFormatData = (
-  { code = "en-GB" }: DateFnsLocale,
+  locale?: Partial<Pick<DateFnsLocale, "code">>,
   dateFormatOverride?: string,
 ): LocaleFormats => {
+  const code = locale?.code || "en-GB";
   if (dateFormatOverride) {
     const { format } = getOutputFormatForLocale(code);
     let formatFromLocale;

diff --git a/src/components/date/__internal__/date-picker/date-picker.component.tsx b/src/components/date/__internal__/date-picker/date-picker.component.tsx
@@ -1,4 +1,5 @@
 import { flip, offset } from "@floating-ui/dom";
+import type { Day, Month } from "date-fns";
 import React, {
   useCallback,
   KeyboardEvent,
@@ -92,24 +93,16 @@ export const DatePicker = ({
   const locale = useLocale();
   const { localize, options } = locale.date.dateFnsLocale();
   const { weekStartsOn } = options || /* istanbul ignore next */ {};
-  const monthsLong = useMemo(
-    () =>
-      Array.from({ length: 12 }).map((_, i) => {
-        const month = localize?.month(i);
-        return month[0].toUpperCase() + month.slice(1);
-      }),
-    [localize],
-  );
   const weekdaysLong = useMemo(
-    () => Array.from({ length: 7 }).map((_, i) => localize?.day(i)),
+    () => Array.from({ length: 7 }).map((_, i) => localize?.day(i as Day)),
     [localize],
   );
   const weekdaysShort = useMemo(() => {
     const isGivenLocale = (str: string) => locale.locale().includes(str);
     return Array.from({ length: 7 }).map((_, i) =>
       localize
         ?.day(
-          i,
+          i as Day,
           ["de", "pl"].some(isGivenLocale)
             ? { width: "wide" }
             : { width: "abbreviated" },
@@ -236,7 +229,7 @@ export const DatePicker = ({
           <DayPicker
             formatters={{
               formatCaption: (month) =>
-                `${localize?.month(month.getMonth())} ${month.getFullYear()}`,
+                `${localize?.month(month.getMonth() as Month)} ${month.getFullYear()}`,
             }}
             required={false}
             weekStartsOn={weekStartsOn}
@@ -245,9 +238,6 @@ export const DatePicker = ({
             locale={{
               localize: {
                 ...defaultLocale.localize,
-                months: monthsLong,
-                weekdaysLong,
-                weekdaysShort,
               },
             }}
             selected={focusedMonth}

diff --git a/src/components/date/__internal__/date-picker/date-picker.test.tsx b/src/components/date/__internal__/date-picker/date-picker.test.tsx
@@ -1,18 +1,20 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import enGBLocale from "date-fns/locale/en-GB";
-import deLocale from "date-fns/locale/de";
-import esLocale from "date-fns/locale/es";
-import enCALocale from "date-fns/locale/en-CA";
-import enZALocale from "date-fns/locale/en-ZA";
-import frLocale from "date-fns/locale/fr";
-import frCALocale from "date-fns/locale/fr-CA";
-import enUSLocale from "date-fns/locale/en-US";
-import zhCNLocale from "date-fns/locale/zh-CN";
+import type { Day } from "date-fns";
+import { de as deLocale } from "date-fns/locale/de";
+import { enCA as enCALocale } from "date-fns/locale/en-CA";
+import { enGB as enGBLocale } from "date-fns/locale/en-GB";
+import { enUS as enUSLocale } from "date-fns/locale/en-US";
+import { enZA as enZALocale } from "date-fns/locale/en-ZA";
+import { es as esLocale } from "date-fns/locale/es";
+import { fr as frLocale } from "date-fns/locale/fr";
+import { frCA as frCALocale } from "date-fns/locale/fr-CA";
+import { zhCN as zhCNLocale } from "date-fns/locale/zh-CN";
+import type { Locale } from "react-day-picker";
 
-import DatePicker, { DatePickerProps } from "./date-picker.component";
 import I18nProvider from "../../../i18n-provider";
+import DatePicker, { DatePickerProps } from "./date-picker.component";
 
 interface MockProps extends Omit<DatePickerProps, "inputElement"> {
   open?: boolean;
@@ -41,7 +43,7 @@ const getWeekdayTranslations = (
   const startDay = locale.options?.weekStartsOn || 0;
 
   return locale.localize
-    ?.day((index + startDay) % 7, { width: "abbreviated" })
+    ?.day(((index + startDay) % 7) as Day, { width: "abbreviated" })
     .substring(0, substringLimit);
 };
 

diff --git a/src/components/date/__internal__/utils.ts b/src/components/date/__internal__/utils.ts
@@ -1,4 +1,4 @@
-import { Matcher } from "react-day-picker";
+import type { Locale, Matcher } from "react-day-picker";
 
 import {
   format,

diff --git a/src/components/date/date-test.stories.tsx b/src/components/date/date-test.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { StoryObj } from "@storybook/react";
-import deLocale from "date-fns/locale/de";
+import { de as deLocale } from "date-fns/locale/de";
 
 import DateInput, { DateChangeEvent } from "./date.component";
 import {

diff --git a/src/components/date/date.test.tsx b/src/components/date/date.test.tsx
@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import { act, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import enGBLocale from "date-fns/locale/en-GB";
-import deLocale from "date-fns/locale/de";
-import esLocale from "date-fns/locale/es";
-import enCALocale from "date-fns/locale/en-CA";
-import enZALocale from "date-fns/locale/en-ZA";
-import frLocale from "date-fns/locale/fr";
-import frCALocale from "date-fns/locale/fr-CA";
-import enUSLocale from "date-fns/locale/en-US";
+import { enGB as enGBLocale } from "date-fns/locale/en-GB";
+import { de as deLocale } from "date-fns/locale/de";
+import { es as esLocale } from "date-fns/locale/es";
+import { enCA as enCALocale } from "date-fns/locale/en-CA";
+import { enZA as enZALocale } from "date-fns/locale/en-ZA";
+import { fr as frLocale } from "date-fns/locale/fr";
+import { frCA as frCALocale } from "date-fns/locale/fr-CA";
+import { enUS as enUSLocale } from "date-fns/locale/en-US";
 
 import CarbonProvider from "../carbon-provider";
 import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";

diff --git a/src/locales/de-de.ts b/src/locales/de-de.ts
@@ -1,4 +1,4 @@
-import deDEDateLocale from "date-fns/locale/de";
+import { de as deDEDateLocale } from "date-fns/locale/de";
 
 import Locale from "./locale";
 

diff --git a/src/locales/en-ca.ts b/src/locales/en-ca.ts
@@ -1,4 +1,4 @@
-import enCADateLocale from "date-fns/locale/en-CA";
+import { enCA as enCADateLocale } from "date-fns/locale/en-CA";
 
 import Locale from "./locale";
 

diff --git a/src/locales/en-gb.ts b/src/locales/en-gb.ts
@@ -1,4 +1,4 @@
-import enGBDateLocale from "date-fns/locale/en-GB";
+import { enGB as enGBDateLocale } from "date-fns/locale/en-GB";
 
 import Locale from "./locale";
 

diff --git a/src/locales/en-us.ts b/src/locales/en-us.ts
@@ -1,4 +1,4 @@
-import enUSDateLocale from "date-fns/locale/en-US";
+import { enUS as enUSDateLocale } from "date-fns/locale/en-US";
 
 import Locale from "./locale";
 

diff --git a/src/locales/es-es.ts b/src/locales/es-es.ts
@@ -1,4 +1,4 @@
-import esESDateLocale from "date-fns/locale/es";
+import { es as esESDateLocale } from "date-fns/locale/es";
 
 import Locale from "./locale";
 

diff --git a/src/locales/fr-ca.ts b/src/locales/fr-ca.ts
@@ -1,4 +1,4 @@
-import frCADateLocale from "date-fns/locale/fr-CA";
+import { frCA as frCADateLocale } from "date-fns/locale/fr-CA";
 
 import Locale from "./locale";
 

diff --git a/src/locales/fr-fr.ts b/src/locales/fr-fr.ts
@@ -1,4 +1,4 @@
-import frFRDateLocale from "date-fns/locale/fr";
+import { fr as frFRDateLocale } from "date-fns/locale/fr";
 
 import Locale from "./locale";