chore: upgrade date-fns to 2.x and fix

.changeset/great-ears-pretend.md

@@ -0,0 +1,9 @@
+---
+'@talend/react-faceted-search': minor
+'@talend/design-system': minor
+'@talend/react-components': minor
+'@talend/utils': minor
+'@talend/react-a11y': minor
+---
+
+chore: upgrade date-fns to 2.x and fix

packages/a11y/package.json

@@ -33,11 +33,11 @@
     "@talend/scripts-config-typescript": "^11.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/date-fns": "^0.0.2",
+    "@types/date-fns": "^2.6.0",
     "@types/jest": "^29.5.10",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.30.0",
     "jest-in-case": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/a11y/src/__mocks__/day-calendar.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { useRef } from 'react';
-import getDate from 'date-fns/get_date';
-import getMonth from 'date-fns/get_month';
+
+import getDate from 'date-fns/getDate';
+import getMonth from 'date-fns/getMonth';
+
 import { date } from '@talend/utils';
+
 import { WithCalendarGestureInjectedProps } from '../Gesture/propTypes';
 
 const buildWeeks = date.buildWeeks;

packages/components/__mocks__/day-calendar.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import getDate from 'date-fns/get_date';
-import getMonth from 'date-fns/get_month';
+import getDate from 'date-fns/getDate';
+import getMonth from 'date-fns/getMonth';
 import { buildWeeks } from '../src/DateTimePickers/generator';
 
 class DayCalendar extends Component {

packages/components/package.json

@@ -44,7 +44,7 @@
     "ally.js": "^1.4.1",
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.30.0",
     "dom-helpers": "^3.4.0",
     "focus-outline-manager": "^1.0.2",
     "immutable": "^3.8.2",
@@ -88,7 +88,6 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/classnames": "^2.3.1",
     "@types/d3": "^7.4.3",
-    "@types/date-fns": "^0.0.2",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.202",
     "@types/prop-types": "^15.7.11",

packages/components/src/DateTimePickers/Date/date-extraction.js

@@ -1,7 +1,8 @@
 import format from 'date-fns/format';
-import getDate from 'date-fns/get_date';
-import lastDayOfMonth from 'date-fns/last_day_of_month';
-import setDate from 'date-fns/set_date';
+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';
 
 import getErrorMessage from '../shared/error-messages';
@@ -47,7 +48,7 @@ function isDateValid(date, options) {
  * @param {Object} options
  */
 function dateToStr(date, { dateFormat }) {
-	return format(date, dateFormat);
+	return format(date, dateUtils.formatToUnicode(dateFormat));
 }
 
 function convertDateToTimezone(date, { useUTC, timezone }) {
@@ -248,7 +249,7 @@ function extractFromDate(date, options) {
 	return {
 		localDate: date,
 		date: convertDateToTimezone(date, options),
-		textInput: format(date, options.dateFormat),
+		textInput: format(date, dateUtils.formatToUnicode(options.dateFormat)),
 		errors: [],
 		errorMessage: null,
 	};

packages/components/src/DateTimePickers/Date/date-extraction.test.js

@@ -1,5 +1,5 @@
-import isAfter from 'date-fns/is_after';
-import subHours from 'date-fns/sub_hours';
+import isAfter from 'date-fns/isAfter';
+import subHours from 'date-fns/subHours';
 import {
 	checkSupportedDateFormat,
 	checkSupportedTimezone,

packages/components/src/DateTimePickers/DateRange/Manager/Manager.component.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isBefore from 'date-fns/is_before';
+import isBefore from 'date-fns/isBefore';
 
 import { DateRangeContext } from '../Context';
 import getErrorMessage from '../../shared/error-messages';

packages/components/src/DateTimePickers/DateTime/datetime-extraction.js

@@ -1,10 +1,11 @@
 import format from 'date-fns/format';
-import setSeconds from 'date-fns/set_seconds';
+import setSeconds from 'date-fns/setSeconds';
+
 import { date as dateUtils } from '@talend/utils';
 
-import getErrorMessage from '../shared/error-messages';
 import { convertDateToTimezone, extractDateOnly } from '../Date/date-extraction';
-import { checkTime, pad, timeToStr, strToTime } from '../Time/time-extraction';
+import getErrorMessage from '../shared/error-messages';
+import { checkTime, pad, strToTime, timeToStr } from '../Time/time-extraction';
 
 const INTERNAL_INVALID_DATE = new Date('INTERNAL_INVALID_DATE');
 
@@ -85,7 +86,8 @@ function dateAndTimeToDateTime(date, time, options) {
 }
 
 function dateAndTimeToStr(date = '', time = '', options) {
-	const dateStr = date instanceof Date ? format(date, options.dateFormat) : date;
+	const dateStr =
+		date instanceof Date ? format(date, dateUtils.formatToUnicode(options.dateFormat)) : date;
 	const timeStr = typeof time === 'string' ? time : timeToStr(time, options.useSeconds);
 
 	return `${dateStr} ${timeStr}`.trim();
@@ -147,7 +149,7 @@ function extractPartsFromTextInput(textInput, options) {
 		const splitMatches = textInput.split(/\s/);
 		date = splitMatches[0];
 		time = splitMatches[1];
-		datetime = dateAndTimeToDateTime(date, time, options);
+		datetime = dateAndTimeToDateTime(new Date(date), time, options);
 	} catch (error) {
 		datetime = INTERNAL_INVALID_DATE;
 		errors = [error];

packages/components/src/DateTimePickers/DateTimeRange/Manager/Manager.component.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isBefore from 'date-fns/is_before';
-import isEqual from 'date-fns/is_equal';
+import isBefore from 'date-fns/isBefore';
+import isEqual from 'date-fns/isEqual';
 
 import { DateTimeRangeContext } from '../Context';
 import getErrorMessage from '../../shared/error-messages';

packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
-import isBefore from 'date-fns/is_before';
-import startOfDay from 'date-fns/start_of_day';
+import isBefore from 'date-fns/isBefore';
+import startOfDay from 'date-fns/startOfDay';
 
 import InputDatePicker from './InputDatePicker.component';
 

packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import isSameSecond from 'date-fns/is_same_second';
+import isSameSecond from 'date-fns/isSameSecond';
 
 import { DateTimeContext } from '../Context';
 import {

packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/date-extraction.js

@@ -1,9 +1,10 @@
 import format from 'date-fns/format';
-import getDate from 'date-fns/get_date';
-import lastDayOfMonth from 'date-fns/last_day_of_month';
-import setSeconds from 'date-fns/set_seconds';
-import setDate from 'date-fns/set_date';
-import startOfSecond from 'date-fns/start_of_second';
+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';
 
 import getErrorMessage from './error-messages';
@@ -249,27 +250,35 @@ function dateTimeToStr(date, time, options) {
 
 	const { dateFormat, useTime } = options;
 	if (time === undefined || useTime === false) {
-		return format(date, dateFormat);
+		return format(date, dateUtils.formatToUnicode(dateFormat));
 	}
 
+	const typedDate = date instanceof Date ? date : new Date(date);
 	try {
 		const timeInSeconds = timeToSeconds(hours, minutes, seconds, options);
-		const fullDate = setSeconds(date, timeInSeconds);
+		const fullDate = setSeconds(typedDate, timeInSeconds);
 
 		if (hybridMode && isTimeEmpty(time)) {
-			return format(fullDate, getFullDateFormat({ ...options, useTime: false }));
+			return format(
+				fullDate,
+				dateUtils.formatToUnicode(getFullDateFormat({ ...options, useTime: false })),
+			);
 		}
 
-		return format(fullDate, getFullDateFormat(options));
+		return format(fullDate, dateUtils.formatToUnicode(getFullDateFormat(options)));
 	} catch (e) {
-		const dateStr = format(date, dateFormat);
-		if (hours !== '' && minutes !== '') {
-			if (options.useSeconds && seconds !== '') {
-				return `${dateStr} ${hours}:${minutes}:${seconds}`;
+		try {
+			const dateStr = format(typedDate, dateUtils.formatToUnicode(dateFormat));
+			if (hours !== '' && minutes !== '') {
+				if (options.useSeconds && seconds !== '') {
+					return `${dateStr} ${hours}:${minutes}:${seconds}`;
+				}
+				return `${dateStr} ${hours}:${minutes}`;
 			}
-			return `${dateStr} ${hours}:${minutes}`;
+			return dateStr;
+		} catch (_) {
+			return 'Invalid Date';
 		}
-		return dateStr;
 	}
 }
 

packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/date-extraction.test.js

@@ -1,11 +1,11 @@
 import {
+	check,
 	checkSupportedDateFormat,
 	extractParts,
 	extractPartsFromDateAndTime,
 	extractPartsFromDateTime,
 	extractPartsFromTextInput,
 	getFullDateFormat,
-	check,
 } from './date-extraction';
 
 describe('Date extraction', () => {

packages/components/src/DateTimePickers/LegacyDateTimePickers/generator.js

@@ -1,16 +1,16 @@
-import addDays from 'date-fns/add_days';
-import chunk from 'lodash/chunk';
-import addMonths from 'date-fns/add_months';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
 import format from 'date-fns/format';
-import getYear from 'date-fns/get_year';
-import setDay from 'date-fns/set_day';
-import startOfWeek from 'date-fns/start_of_week';
+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';
+
 import getLocale from '../../i18n/DateFnsLocale/locale';
-import getDefaultT from '../../translate';
 
-function buildDateFnsLocale(t) {
-	return { locale: getLocale(t || getDefaultT()) };
+function buildDateFnsLocale() {
+	return { locale: getLocale() };
 }
 
 export const getPickerLocale = memoize(buildDateFnsLocale);
@@ -25,8 +25,8 @@ export function buildDayNames(firstDayOfweek = 1, t) {
 		.map((_, i) => (i + firstDayOfweek) % 7)
 		.map(dayOfWeek => setDay(new Date(0), dayOfWeek))
 		.map(headerDate => ({
-			abbr: format(headerDate, 'd', pickerLocale),
-			full: format(headerDate, 'dddd', pickerLocale),
+			abbr: format(headerDate, 'EEEEE', pickerLocale),
+			full: format(headerDate, 'EEEE', pickerLocale),
 		}));
 }
 

packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js

@@ -1,20 +1,23 @@
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+
 import classNames from 'classnames';
-import memoize from 'lodash/memoize';
-import isToday from 'date-fns/is_today';
-import getDate from 'date-fns/get_date';
-import getMonth from 'date-fns/get_month';
-import getYear from 'date-fns/get_year';
-import isSameDay from 'date-fns/is_same_day';
-import setMonth from 'date-fns/set_month';
 import format from 'date-fns/format';
-import startOfMonth from 'date-fns/start_of_month';
+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';
 
-import theme from './DatePicker.module.scss';
-import { buildDayNames, buildWeeks, getPickerLocale } from '../../generator';
 import { Gesture } from '@talend/react-a11y';
+
 import getDefaultT from '../../../../translate';
+import { buildDayNames, buildWeeks, getPickerLocale } from '../../generator';
+
+import theme from './DatePicker.module.scss';
 
 const getDayNames = memoize(buildDayNames);
 
@@ -124,7 +127,7 @@ class DatePicker extends PureComponent {
 									'btn-default',
 								);
 
-								let ariaLabel = format(date, 'dddd DD MMMM YYYY', pickerLocale);
+								let ariaLabel = format(date, 'EEEE dd MMMM yyyy', pickerLocale);
 								const tdProps = {
 									key: j,
 									className: theme['calendar-col'],

packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import isSameDay from 'date-fns/is_same_day';
-import isToday from 'date-fns/is_today';
+import isSameDay from 'date-fns/isSameDay';
+import isToday from 'date-fns/isToday';
 
 import DatePicker from './DatePicker.component';
 
-jest.mock('date-fns/is_today');
+jest.mock('date-fns/isToday');
 
 function mockIsTodayWith(newToday) {
 	isToday.mockImplementation(date => isSameDay(date, newToday));

packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import getMonth from 'date-fns/get_month';
-import getYear from 'date-fns/get_year';
-import startOfDay from 'date-fns/start_of_day';
+import getMonth from 'date-fns/getMonth';
+import getYear from 'date-fns/getYear';
+import startOfDay from 'date-fns/startOfDay';
 import classNames from 'classnames';
 
 import theme from './DateTimePicker.module.scss';

packages/components/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/start_of_day';
+import startOfDay from 'date-fns/startOfDay';
 
 import dateMock from '../../../../../../../mocks/dateMock';
 import DateTimePicker from './DateTimePicker.component';

packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js

@@ -1,13 +1,15 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import setYear from 'date-fns/set_year';
-import setMonth from 'date-fns/set_month';
 import format from 'date-fns/format';
-import theme from './HeaderTitle.module.scss';
+import setMonth from 'date-fns/setMonth';
+import setYear from 'date-fns/setYear';
+import PropTypes from 'prop-types';
+
+import { Action, ActionDropdown } from '../../../../Actions';
 import { getPickerLocale } from '../../generator';
-import { ActionDropdown, Action } from '../../../../Actions';
 import YearPicker from '../../pickers/YearPicker';
 
+import theme from './HeaderTitle.module.scss';
+
 function HeaderTitle(props) {
 	const isButton = !!props.button;
 	const className = classNames(
@@ -21,10 +23,10 @@ function HeaderTitle(props) {
 		...(isButton ? props.button : {}),
 	};
 
-	const pickerLocale = getPickerLocale(props.t);
+	const pickerLocale = getPickerLocale();
 	const date = setYear(setMonth(new Date(0), props.monthIndex), props.year);
-	const label = format(date, 'MMMM YYYY', pickerLocale);
-	const yearLabel = format(date, 'YYYY', pickerLocale);
+	const label = format(date, 'MMMM yyyy', pickerLocale);
+	const yearLabel = format(date, 'yyyy', pickerLocale);
 	const monthLabel = format(date, 'MMMM', pickerLocale);
 
 	if (isButton) {