deps: bump date-fns to 3.X (#5080)

* deps: bump date-fns to 3.X * chore: yarn-deduplicate * Fix date-fns import in DatePicker component * Bump dependencies and update date-fns to version 3.X * Fix import statement in date.test.ts --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Talend · Dec 20, 2023 · 922e3eb · 922e3eb
1 parent cfb72db
commit 922e3eb
Show file tree

Hide file tree

Showing 43 changed files with 187 additions and 146 deletions.
diff --git a/.changeset/two-bugs-trade.md b/.changeset/two-bugs-trade.md
@@ -0,0 +1,9 @@
+---
+'@talend/react-faceted-search': major
+'@talend/react-components': major
+'@talend/react-dataviz': major
+'@talend/utils': major
+'@talend/react-a11y': major
+---
+
+deps: bump date-fns to 3.X
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
@@ -37,7 +37,7 @@
     "@types/jest": "^29.5.10",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.0",
     "jest-in-case": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/packages/a11y/src/__mocks__/day-calendar.tsx b/packages/a11y/src/__mocks__/day-calendar.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { useRef } from 'react';
 
-import getDate from 'date-fns/getDate';
-import getMonth from 'date-fns/getMonth';
+import { getDate } from 'date-fns/getDate';
+import { getMonth } from 'date-fns/getMonth';
 
 import { date } from '@talend/utils';
 

diff --git a/packages/components/__mocks__/day-calendar.js b/packages/components/__mocks__/day-calendar.js
@@ -1,7 +1,9 @@
 import { Component } from 'react';
+
+import { getDate } from 'date-fns/getDate';
+import { getMonth } from 'date-fns/getMonth';
 import PropTypes from 'prop-types';
-import getDate from 'date-fns/getDate';
-import getMonth from 'date-fns/getMonth';
+
 import { buildWeeks } from '../src/DateTimePickers/generator';
 
 class DayCalendar extends Component {

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -45,7 +45,7 @@
     "ally.js": "^1.4.1",
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.0",
     "dom-helpers": "^3.4.0",
     "focus-outline-manager": "^1.0.2",
     "immutable": "^3.8.2",

diff --git a/packages/components/src/DateTimePickers/Date/date-extraction.js b/packages/components/src/DateTimePickers/Date/date-extraction.js
@@ -1,7 +1,7 @@
-import format from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import lastDayOfMonth from 'date-fns/lastDayOfMonth';
-import setDate from 'date-fns/setDate';
+import { format } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { setDate } from 'date-fns/setDate';
 
 import { date as dateUtils } from '@talend/utils';
 

diff --git a/packages/components/src/DateTimePickers/Date/date-extraction.test.js b/packages/components/src/DateTimePickers/Date/date-extraction.test.js
@@ -1,12 +1,13 @@
-import isAfter from 'date-fns/isAfter';
-import subHours from 'date-fns/subHours';
+import { isAfter } from 'date-fns/isAfter';
+import { subHours } from 'date-fns/subHours';
+
 import {
 	checkSupportedDateFormat,
 	checkSupportedTimezone,
 	extractDate,
-	extractPartsFromTextInput,
-	extractPartsFromDate,
 	extractDateOnly,
+	extractPartsFromDate,
+	extractPartsFromTextInput,
 } from './date-extraction';
 
 describe('Date extraction', () => {

diff --git a/packages/components/src/DateTimePickers/DateRange/Manager/Manager.component.js b/packages/components/src/DateTimePickers/DateRange/Manager/Manager.component.js
@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import isBefore from 'date-fns/isBefore';
+import { useEffect, useState } from 'react';
 
-import { DateRangeContext } from '../Context';
-import getErrorMessage from '../../shared/error-messages';
+import { isBefore } from 'date-fns/isBefore';
+import PropTypes from 'prop-types';
 
 import {
 	extractDate,
 	extractFromDate,
 	extractPartsFromTextInput,
 } from '../../Date/date-extraction';
+import getErrorMessage from '../../shared/error-messages';
+import { DateRangeContext } from '../Context';
 
 export function DateRangePickerException(code, message) {
 	this.message = getErrorMessage(message);

diff --git a/packages/components/src/DateTimePickers/DateTime/datetime-extraction.js b/packages/components/src/DateTimePickers/DateTime/datetime-extraction.js
@@ -1,5 +1,5 @@
-import format from 'date-fns/format';
-import setSeconds from 'date-fns/setSeconds';
+import { format } from 'date-fns/format';
+import { setSeconds } from 'date-fns/setSeconds';
 
 import { date as dateUtils } from '@talend/utils';
 

diff --git a/packages/components/src/DateTimePickers/DateTimeRange/Manager/Manager.component.js b/packages/components/src/DateTimePickers/DateTimeRange/Manager/Manager.component.js
@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+import { isBefore } from 'date-fns/isBefore';
+import { isEqual } from 'date-fns/isEqual';
 import PropTypes from 'prop-types';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
 
-import { DateTimeRangeContext } from '../Context';
 import getErrorMessage from '../../shared/error-messages';
+import { DateTimeRangeContext } from '../Context';
 
 export function DateTimeRangePickerException(code, message) {
 	this.message = getErrorMessage(message);

diff --git a/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js b/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js
@@ -1,11 +1,10 @@
 import { action } from '@storybook/addon-actions';
-import isBefore from 'date-fns/isBefore';
-import startOfDay from 'date-fns/startOfDay';
-
-import InputDatePicker from './InputDatePicker.component';
+import { isBefore } from 'date-fns/isBefore';
+import { startOfDay } from 'date-fns/startOfDay';
 
 import DateManager from '../Date/Manager';
 import DatePicker from '../Date/Picker';
+import InputDatePicker from './InputDatePicker.component';
 
 export default {
 	title: 'Components/Form - Controls/DatePicker/Date',

diff --git a/...omponents/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js b/...omponents/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js
@@ -1,7 +1,17 @@
 import { Component } from 'react';
+
+import { isSameSecond } from 'date-fns/isSameSecond';
 import PropTypes from 'prop-types';
-import isSameSecond from 'date-fns/isSameSecond';
 
+import {
+	FIELD_HOURS,
+	FIELD_MINUTES,
+	FIELD_SECONDS,
+	HOUR_ERRORS,
+	INPUT_ERRORS,
+	MINUTES_ERRORS,
+	SECONDS_ERRORS,
+} from '../constants';
 import { DateTimeContext } from '../Context';
 import {
 	check,
@@ -14,15 +24,6 @@ import {
 	extractPartsFromTextInput,
 	getFullDateFormat,
 } from '../date-extraction';
-import {
-	HOUR_ERRORS,
-	MINUTES_ERRORS,
-	SECONDS_ERRORS,
-	FIELD_HOURS,
-	FIELD_MINUTES,
-	FIELD_SECONDS,
-	INPUT_ERRORS,
-} from '../constants';
 
 class ContextualManager extends Component {
 	static displayName = 'DateTime.Manager';

diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/date-extraction.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/date-extraction.js
@@ -1,9 +1,9 @@
-import format from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import lastDayOfMonth from 'date-fns/lastDayOfMonth';
-import setDate from 'date-fns/setDate';
-import setSeconds from 'date-fns/setSeconds';
-import startOfSecond from 'date-fns/startOfSecond';
+import { format } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { setDate } from 'date-fns/setDate';
+import { setSeconds } from 'date-fns/setSeconds';
+import { startOfSecond } from 'date-fns/startOfSecond';
 
 import { date as dateUtils } from '@talend/utils';
 

diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/generator.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/generator.js
@@ -1,9 +1,9 @@
-import addDays from 'date-fns/addDays';
-import addMonths from 'date-fns/addMonths';
-import format from 'date-fns/format';
-import getYear from 'date-fns/getYear';
-import setDay from 'date-fns/setDay';
-import startOfWeek from 'date-fns/startOfWeek';
+import { addDays } from 'date-fns/addDays';
+import { addMonths } from 'date-fns/addMonths';
+import { format } from 'date-fns/format';
+import { getYear } from 'date-fns/getYear';
+import { setDay } from 'date-fns/setDay';
+import { startOfWeek } from 'date-fns/startOfWeek';
 import chunk from 'lodash/chunk';
 import memoize from 'lodash/memoize';
 

diff --git a/...ents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js b/...ents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js
@@ -1,14 +1,14 @@
 import { PureComponent } from 'react';
 
 import classNames from 'classnames';
-import format from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import getMonth from 'date-fns/getMonth';
-import getYear from 'date-fns/getYear';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
-import setMonth from 'date-fns/setMonth';
-import startOfMonth from 'date-fns/startOfMonth';
+import { format } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { getMonth } from 'date-fns/getMonth';
+import { getYear } from 'date-fns/getYear';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
+import { setMonth } from 'date-fns/setMonth';
+import { startOfMonth } from 'date-fns/startOfMonth';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
 

diff --git a/...omponents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js b/...omponents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
 
 import DatePicker from './DatePicker.component';
 

diff --git a/.../DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js b/.../DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js
@@ -1,16 +1,19 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import getMonth from 'date-fns/getMonth';
-import getYear from 'date-fns/getYear';
-import startOfDay from 'date-fns/startOfDay';
+
 import classNames from 'classnames';
+import { getMonth } from 'date-fns/getMonth';
+import { getYear } from 'date-fns/getYear';
+import { startOfDay } from 'date-fns/startOfDay';
+import PropTypes from 'prop-types';
 
-import theme from './DateTimePicker.module.scss';
-import DateTimeView from '../../views/DateTimeView';
-import MonthYearView from '../../views/MonthYearView';
 import { focus } from '@talend/react-a11y';
+
 import Action from '../../../../Actions/Action/Action.component';
 import getDefaultT from '../../../../translate';
+import DateTimeView from '../../views/DateTimeView';
+import MonthYearView from '../../views/MonthYearView';
+
+import theme from './DateTimePicker.module.scss';
 
 class DateTimePicker extends Component {
 	constructor(props) {

diff --git a/...s/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.test.js b/...s/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable testing-library/no-container */
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import startOfDay from 'date-fns/startOfDay';
+import { startOfDay } from 'date-fns/startOfDay';
 
 import dateMock from '../../../../../../../mocks/dateMock';
 import DateTimePicker from './DateTimePicker.component';

diff --git a/...ents/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/...ents/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import format from 'date-fns/format';
-import setMonth from 'date-fns/setMonth';
-import setYear from 'date-fns/setYear';
+import { format } from 'date-fns/format';
+import { setMonth } from 'date-fns/setMonth';
+import { setYear } from 'date-fns/setYear';
 import PropTypes from 'prop-types';
 
 import { Action, ActionDropdown } from '../../../../Actions';

diff --git a/packages/components/src/DateTimePickers/generator.js b/packages/components/src/DateTimePickers/generator.js
@@ -1,7 +1,7 @@
-import addMonths from 'date-fns/addMonths';
-import format from 'date-fns/format';
-import getYear from 'date-fns/getYear';
-import setDay from 'date-fns/setDay';
+import { addMonths } from 'date-fns/addMonths';
+import { format } from 'date-fns/format';
+import { getYear } from 'date-fns/getYear';
+import { setDay } from 'date-fns/setDay';
 import chunk from 'lodash/chunk';
 import memoize from 'lodash/memoize';
 

diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js
@@ -1,16 +1,19 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import getMonth from 'date-fns/getMonth';
-import getYear from 'date-fns/getYear';
-import startOfDay from 'date-fns/startOfDay';
+
 import classNames from 'classnames';
+import { getMonth } from 'date-fns/getMonth';
+import { getYear } from 'date-fns/getYear';
+import { startOfDay } from 'date-fns/startOfDay';
+import PropTypes from 'prop-types';
 
-import theme from './CalendarPicker.module.scss';
-import DateView from '../../views/DateView';
-import MonthYearView from '../../views/MonthYearView';
 import { focus } from '@talend/react-a11y';
+
 import Action from '../../../Actions/Action/Action.component';
 import getDefaultT from '../../../translate';
+import DateView from '../../views/DateView';
+import MonthYearView from '../../views/MonthYearView';
+
+import theme from './CalendarPicker.module.scss';
 
 class CalendarPicker extends Component {
 	constructor(props) {

diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js
@@ -4,7 +4,7 @@
 // rewrite using rtl
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import startOfDay from 'date-fns/startOfDay';
+import { startOfDay } from 'date-fns/startOfDay';
 
 import dateMock from '../../../../../../mocks/dateMock';
 import CalendarPicker from './CalendarPicker.component';

diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
@@ -1,18 +1,18 @@
 import { PureComponent } from 'react';
 
 import classNames from 'classnames';
-import format from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import getMonth from 'date-fns/getMonth';
-import getYear from 'date-fns/getYear';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
-import isWithinRange from 'date-fns/isWithinInterval';
-import setMonth from 'date-fns/setMonth';
-import startOfDay from 'date-fns/startOfDay';
-import startOfMonth from 'date-fns/startOfMonth';
+import { format } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { getMonth } from 'date-fns/getMonth';
+import { getYear } from 'date-fns/getYear';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
+import { isWithinInterval } from 'date-fns/isWithinInterval';
+import { setMonth } from 'date-fns/setMonth';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfMonth } from 'date-fns/startOfMonth';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
 
@@ -68,15 +68,15 @@ class DatePicker extends PureComponent {
 		const { calendar } = this.props;
 		const { year, monthIndex } = calendar;
 		const weeks = this.getWeeks(year, monthIndex, 1);
-		return isWithinRange(date, { start: weeks[0][0], end: weeks[5][6] });
+		return isWithinInterval(date, { start: weeks[0][0], end: weeks[5][6] });
 	}
 
 	isDateWithinRange(date) {
 		const { selectedDate, startDate, endDate } = this.props;
 		if (startDate && isAfter(selectedDate, startDate)) {
-			return isWithinRange(date, { start: startOfDay(startDate), end: selectedDate });
+			return isWithinInterval(date, { start: startOfDay(startDate), end: selectedDate });
 		} else if (endDate && isBefore(selectedDate, endDate)) {
-			return isWithinRange(date, { start: selectedDate, end: endDate });
+			return isWithinInterval(date, { start: selectedDate, end: endDate });
 		}
 		return false;
 	}

diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
 
 import DatePicker from './DatePicker.component';