diff --git a/.changeset/two-bugs-trade.md b/.changeset/two-bugs-trade.md new file mode 100644 index 00000000000..8e7b382742e --- /dev/null +++ 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 index e1c6c7aed78..f758dae3903 100644 --- 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 index 13ff911bcdb..7ed32d1c027 100644 --- 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 index 4c94d1674a4..1d0ae266f06 100644 --- 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 index 2238fa6879b..72fc35021eb 100644 --- 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 index 917ea5d9993..2bd5be26f53 100644 --- 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 index 96c09b9f3d1..f1b4c5c0655 100644 --- 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 index 2a0fcb14a98..ba3a56ec22b 100644 --- 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 index cf5a0b59b5e..751794f370a 100644 --- 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 index fe88b8b3f27..cc3a3750587 100644 --- 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 index ce67bbcc2e9..8af21fe225a 100644 --- 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/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js index 20bcdddd69f..8f03df90dca 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js +++ b/packages/components/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 index cd38e764204..551795e2dc4 100644 --- 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 index 819b83e3315..c0f7bac5d58 100644 --- 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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js index 695107fd480..2310379a81b 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js +++ b/packages/components/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js index 8e890f646f2..2569761e621 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.test.js +++ b/packages/components/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js index c724d9d7984..1acf73ccc52 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js +++ b/packages/components/src/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.test.js index 8aab083cd48..a97d637d6f7 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.test.js +++ b/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/startOfDay'; +import { startOfDay } from 'date-fns/startOfDay'; import dateMock from '../../../../../../../mocks/dateMock'; import DateTimePicker from './DateTimePicker.component'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js index b93c9126b9a..c60a0df826d 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js +++ b/packages/components/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 index f3755163125..f52197f8e52 100644 --- 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 index 1dd62bef382..bf228c8eea6 100644 --- 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 index bf241e92436..960531c451b 100644 --- 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 index 5b99592f0c1..da92ae8db80 100644 --- 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 index 3bb135b7cec..e219725a5c4 100644 --- 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'; diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js index 948fcafa7cd..ff9b084cf14 100644 --- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js +++ b/packages/components/src/DateTimePickers/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/ResourceList/Resource/Resource.component.js b/packages/components/src/ResourceList/Resource/Resource.component.js index 964524a90e3..bd4dbe0558e 100644 --- a/packages/components/src/ResourceList/Resource/Resource.component.js +++ b/packages/components/src/ResourceList/Resource/Resource.component.js @@ -2,7 +2,7 @@ import { Fragment } from 'react'; import { withTranslation } from 'react-i18next'; import classNames from 'classnames'; -import formatDistanceToNow from 'date-fns/formatDistanceToNow'; +import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'; import PropTypes from 'prop-types'; import I18N_DOMAIN_COMPONENTS from '../../constants'; diff --git a/packages/components/src/ResourceList/Resource/Resource.test.js b/packages/components/src/ResourceList/Resource/Resource.test.js index b56e4fea36f..19232cc48ac 100644 --- a/packages/components/src/ResourceList/Resource/Resource.test.js +++ b/packages/components/src/ResourceList/Resource/Resource.test.js @@ -1,7 +1,10 @@ import { render } from '@testing-library/react'; + import Resource from './Resource.component'; -jest.mock('date-fns/formatDistanceToNow', () => () => 'over 2 years ago'); +jest.mock('date-fns/formatDistanceToNow', () => ({ + formatDistanceToNow: () => 'over 2 years ago', +})); describe('Resource component snaps', () => { afterAll(() => { diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js index d0501360414..5c1e44353ba 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js @@ -2,10 +2,10 @@ import { Component } from 'react'; import { withTranslation } from 'react-i18next'; import classnames from 'classnames'; -import format from 'date-fns/format'; -import formatDistanceToNow from 'date-fns/formatDistanceToNow'; -import isValid from 'date-fns/isValid'; -import parseISO from 'date-fns/parseISO'; +import { format } from 'date-fns/format'; +import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'; +import { isValid } from 'date-fns/isValid'; +import { parseISO } from 'date-fns/parseISO'; import isEqual from 'lodash/isEqual'; import pick from 'lodash/pick'; import PropTypes from 'prop-types'; diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js index eeec1cb2a09..eac23203e22 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js @@ -2,8 +2,8 @@ /* eslint-disable react/display-name */ import { render, screen } from '@testing-library/react'; -import format from 'date-fns/format'; -import distanceInWordsToNow from 'date-fns/formatDistanceToNow'; +import { format } from 'date-fns/format'; +import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'; import { date as dateUtils } from '@talend/utils'; @@ -16,10 +16,12 @@ jest.mock('../../i18n/DateFnsLocale/locale'); jest.mock('date-fns/formatDistanceToNow', () => ({ __esModule: true, default: jest.fn(() => 'about 1 month ago'), + formatDistanceToNow: jest.fn(() => 'about 1 month ago'), })); jest.mock('date-fns/format', () => ({ __esModule: true, default: jest.fn(() => '2016-09-22 09:00:00'), + format: jest.fn(() => '2016-09-22 09:00:00'), })); jest.mock('../../TooltipTrigger', () => props => ( @@ -69,7 +71,7 @@ describe('CellDatetime', () => { , ); // then - expect(distanceInWordsToNow).toHaveBeenCalledWith(new Date(1474495200000), { + expect(formatDistanceToNow).toHaveBeenCalledWith(new Date(1474495200000), { addSuffix: true, locale: 'getLocale', }); @@ -89,7 +91,7 @@ describe('CellDatetime', () => { render(); // then - expect(distanceInWordsToNow).not.toHaveBeenCalled(); + expect(formatDistanceToNow).not.toHaveBeenCalled(); expect(format).not.toHaveBeenCalled(); expect(document.querySelector('.cell-datetime-container')).toBeEmptyDOMElement(); }); diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json index e7255569c7e..0f0e34892a6 100644 --- a/packages/dataviz/package.json +++ b/packages/dataviz/package.json @@ -40,7 +40,7 @@ "@talend/design-tokens": "^2.10.1", "classnames": "^2.3.2", "d3": "^7.8.5", - "date-fns": "^2.30.0", + "date-fns": "^3.0.0", "geojson": "^0.5.0", "lodash": "^4.17.21", "recharts": "^2.10.3", diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.test.tsx b/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.test.tsx index cb90c7e9745..69bb22cd553 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.test.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.test.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/prop-types */ -import { render, fireEvent, screen } from '@testing-library/react'; -import parseISO from 'date-fns/parseISO'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { parseISO } from 'date-fns/parseISO'; + import { DateInputField, DateRangeHandler } from './DateRangeHandler'; jest.unmock('@talend/design-system'); diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.tsx b/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.tsx index 7ddef5aad66..5cd3d069ad5 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/DateRangeHandler/DateRangeHandler.tsx @@ -1,12 +1,14 @@ -import isValid from 'date-fns/isValid'; -import startOfDay from 'date-fns/startOfDay'; -import endOfDay from 'date-fns/endOfDay'; -import parseISO from 'date-fns/parseISO'; +import { endOfDay } from 'date-fns/endOfDay'; +import { isValid } from 'date-fns/isValid'; +import { parseISO } from 'date-fns/parseISO'; +import { startOfDay } from 'date-fns/startOfDay'; + import { InputDatePicker } from '@talend/react-components'; + import { formatDate } from '../../../../formatters/formatters'; -import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; import { RangeHandler } from '../range-handler.types'; import { formatTimeTicks } from '../slider-ticks.utils'; +import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; export function getMinValue(value: number): number { return startOfDay(new Date(value)).getTime(); diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx index 68914041f5c..72266b02758 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx @@ -1,14 +1,18 @@ import { useRef } from 'react'; -import isValid from 'date-fns/isValid'; -import startOfSecond from 'date-fns/startOfSecond'; -import endOfSecond from 'date-fns/endOfSecond'; -import parseISO from 'date-fns/parseISO'; + +import { endOfSecond } from 'date-fns/endOfSecond'; +import { isValid } from 'date-fns/isValid'; +import { parseISO } from 'date-fns/parseISO'; +import { startOfSecond } from 'date-fns/startOfSecond'; + import { InputDateTimePicker } from '@talend/react-components'; + import { formatDate, formatDateTime } from '../../../../formatters/formatters'; -import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; -import styles from './DateTimeInputField.component.module.scss'; import { RangeHandler } from '../range-handler.types'; import { formatTimeTicks } from '../slider-ticks.utils'; +import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; + +import styles from './DateTimeInputField.component.module.scss'; function parser(input: string): number | null { // Create date in locale time zone diff --git a/packages/dataviz/src/components/RangeFilter/handlers/TimeRangeHandler/TimeRangeHandler.tsx b/packages/dataviz/src/components/RangeFilter/handlers/TimeRangeHandler/TimeRangeHandler.tsx index bef13961db3..065ed926079 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/TimeRangeHandler/TimeRangeHandler.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/TimeRangeHandler/TimeRangeHandler.tsx @@ -1,10 +1,12 @@ -import isValid from 'date-fns/isValid'; import { scaleTime } from 'd3'; +import { isValid } from 'date-fns/isValid'; + import { InputTimePicker } from '@talend/react-components'; -import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; -import { RangeHandler, Ticks } from '../range-handler.types'; + import { Range } from '../../../../types'; +import { RangeHandler, Ticks } from '../range-handler.types'; import { formatD3Ticks, formatTimeTicks } from '../slider-ticks.utils'; +import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; function parser(input: string): number | null { const date = new Date(`1970-01-01T${input}Z`); diff --git a/packages/dataviz/src/formatters/formatters.ts b/packages/dataviz/src/formatters/formatters.ts index 81fd9db9a01..8dea2a358be 100755 --- a/packages/dataviz/src/formatters/formatters.ts +++ b/packages/dataviz/src/formatters/formatters.ts @@ -1,4 +1,4 @@ -import format from 'date-fns/format'; +import { format } from 'date-fns/format'; import i18next from 'i18next'; // should use locale value diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json index 3eea139a0e0..73d77bfbde5 100644 --- a/packages/faceted-search/package.json +++ b/packages/faceted-search/package.json @@ -38,7 +38,7 @@ "@talend/utils": "^2.9.0", "@talend/design-tokens": "^2.11.0", "classnames": "^2.3.2", - "date-fns": "^2.30.0", + "date-fns": "^3.0.0", "invariant": "^2.2.4", "lodash": "^4.17.21" }, diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.js b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.js index 8d262ec2e2f..f589eb75ed0 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.js @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import format from 'date-fns/format'; +import { format } from 'date-fns/format'; import PropTypes from 'prop-types'; import Badge from '@talend/react-components/lib/Badge'; diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js index b17d42367ed..3d4ad9281a3 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import startOfDay from 'date-fns/startOfDay'; +import { startOfDay } from 'date-fns/startOfDay'; import PropTypes from 'prop-types'; import { Action, DatePicker, getTheme, Rich } from '@talend/react-components'; diff --git a/packages/utils/package.json b/packages/utils/package.json index 872f980bcbf..08aba10c98f 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -31,7 +31,7 @@ "cross-env": "^7.0.3" }, "dependencies": { - "date-fns": "^2.30.0", + "date-fns": "^3.0.0", "lodash": "^4.17.21" }, "publishConfig": { diff --git a/packages/utils/src/date/date.test.ts b/packages/utils/src/date/date.test.ts index 48a3be52e4e..9b9c9b439f0 100644 --- a/packages/utils/src/date/date.test.ts +++ b/packages/utils/src/date/date.test.ts @@ -1,5 +1,5 @@ -import dateFnsFormat from 'date-fns/format'; -import enGB from 'date-fns/locale/en-GB'; +import { format as dateFnsFormat } from 'date-fns/format'; +import { enGB } from 'date-fns/locale/en-GB'; import { convertToLocalTime, @@ -17,7 +17,8 @@ jest.mock('date-fns/format', () => { const actualFormat = jest.requireActual('date-fns/format'); return { __esModule: true, - default: jest.fn().mockImplementation(actualFormat), + default: jest.fn().mockImplementation(actualFormat.default), + format: jest.fn().mockImplementation(actualFormat.format), }; }); @@ -137,6 +138,7 @@ describe('date', () => { // then expect(localDate).toEqual('2020-05-14T01:00:00Z'); }); + it('should pass locale to datefns format method', () => { // given const dateObj = new Date('2020-12-20, 20:00'); diff --git a/packages/utils/src/date/generator.ts b/packages/utils/src/date/generator.ts index 090dd9ac10d..cbd03225ef7 100644 --- a/packages/utils/src/date/generator.ts +++ b/packages/utils/src/date/generator.ts @@ -1,11 +1,12 @@ -import addDays from 'date-fns/addDays'; -import startOfWeek from 'date-fns/startOfWeek'; +import { addDays } from 'date-fns/addDays'; +import { startOfWeek } from 'date-fns/startOfWeek'; +import { Day } from 'date-fns/types'; import chunk from 'lodash/chunk'; /** * Generate the set of weeks for a specific month */ -export function buildWeeks(year: number, monthIndex: number, firstDayOfWeek = 1) { +export function buildWeeks(year: number, monthIndex: number, firstDayOfWeek: Day = 1) { const firstDateOfMonth = new Date(year, monthIndex); const firstDateOfCalendar = startOfWeek(firstDateOfMonth, { weekStartsOn: firstDayOfWeek, diff --git a/packages/utils/src/date/index.ts b/packages/utils/src/date/index.ts index 1e06befdc90..f0e162d7ff9 100644 --- a/packages/utils/src/date/index.ts +++ b/packages/utils/src/date/index.ts @@ -1,5 +1,5 @@ -import dateFnsFormat from 'date-fns/format'; -import parseISO from 'date-fns/parseISO'; +import { format as dateFnsFormat, FormatOptions } from 'date-fns/format'; +import { parseISO } from 'date-fns/parseISO'; import * as generator from './generator'; @@ -159,7 +159,7 @@ export function formatToUnicode(formatString: string): string { export function formatToTimeZone( date: DateFnsFormatInput, formatString: string, - options: ConversionOptions, + options: FormatOptions & ConversionOptions, ): string { const dateConvertedToTimezone = convertToTimeZone(date, options); diff --git a/yarn.lock b/yarn.lock index 38898ce2f29..11f4da593f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8174,7 +8174,12 @@ data-urls@^3.0.2: whatwg-mimetype "^3.0.0" whatwg-url "^11.0.0" -date-fns@*, date-fns@^2.30.0: +date-fns@*, date-fns@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.0.1.tgz#a95b3e8296e72cf57c99819f37679aa27ca65ec4" + integrity sha512-cr9igCUa0QSqgAMj7JOrYTY6Nh1rmyGrFDko7ADqfmaQqP/I2N4rlfrLl7AWuzDaoIpz6MNjoEcTPzgZYIrhnA== + +date-fns@^2.30.0: version "2.30.0" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0" integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==