Skip to content

Commit 211baf7

Browse files
TrevorBurnhamTrevorBurnham
committed
feat: Replace date-fns with dayjs
This PR replaces the date-fns dependency with dayjs, a more lightweight alternative.
1 parent 8c37834 commit 211baf7

33 files changed

+473
-351
lines changed

‎eslint.config.mjs‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,6 @@ export default tsEslint.config(
170170
message:
171171
'`react-virtual` gets shipped as a bundled dependency. Use `src/internal/vendor/react-virtual` as import source.',
172172
},
173-
{
174-
group: ['date-fns/*'],
175-
message:
176-
"Disallowed import '{{ path }}'. These imports are not allowed because are not specified as package exports in date-fns package.json.",
177-
},
178173
],
179174
},
180175
],

‎package-lock.json‎

Lines changed: 6 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"ace-builds": "^1.34.0",
3939
"clsx": "^1.1.0",
4040
"d3-shape": "^1.3.7",
41-
"date-fns": "^2.25.0",
41+
"dayjs": "^1.11.13",
4242
"intl-messageformat": "^10.3.1",
4343
"mnth": "^2.0.0",
4444
"react-keyed-flatten-children": "^2.2.1",

‎pages/date-range-picker/custom-control.page.tsx‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,10 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import React from 'react';
5-
import {
6-
endOfMonth,
7-
endOfQuarter,
8-
endOfWeek,
9-
endOfYear,
10-
startOfMonth,
11-
startOfQuarter,
12-
startOfWeek,
13-
startOfYear,
14-
sub,
15-
} from 'date-fns';
5+
import dayjs from 'dayjs';
6+
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
7+
8+
dayjs.extend(quarterOfYear);
169

1710
import { DateRangePicker, DateRangePickerProps, FormField, Link } from '~components';
1811
import { formatDate } from '~components/internal/utils/date-time';
@@ -48,11 +41,11 @@ export default function DatePickerScenario() {
4841
onFollow={() =>
4942
setSelectedDate({
5043
start: {
51-
date: formatDate(startOfWeek(new Date())),
44+
date: formatDate(dayjs().startOf('week').toDate()),
5245
time: '',
5346
},
5447
end: {
55-
date: formatDate(endOfWeek(new Date())),
48+
date: formatDate(dayjs().endOf('week').toDate()),
5649
time: '',
5750
},
5851
})
@@ -63,8 +56,8 @@ export default function DatePickerScenario() {
6356
<Link
6457
onFollow={() =>
6558
setSelectedDate({
66-
start: { date: formatDate(startOfMonth(new Date())), time: '' },
67-
end: { date: formatDate(endOfMonth(new Date())), time: '' },
59+
start: { date: formatDate(dayjs().startOf('month').toDate()), time: '' },
60+
end: { date: formatDate(dayjs().endOf('month').toDate()), time: '' },
6861
})
6962
}
7063
>
@@ -88,9 +81,9 @@ export default function DatePickerScenario() {
8881
setSelectedDate: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>
8982
) => {
9083
const today = new Date();
91-
const lastMonth = sub(today, { months: 1 });
92-
const oneQuarterAgoDate = sub(today, { months: 3 });
93-
const oneYearAgoDate = sub(today, { years: 1 });
84+
const lastMonth = dayjs(today).subtract(1, 'month').toDate();
85+
const oneQuarterAgoDate = dayjs(today).subtract(3, 'month').toDate();
86+
const oneYearAgoDate = dayjs(today).subtract(1, 'year').toDate();
9487
return (
9588
<>
9689
Auto-select:{' '}
@@ -109,11 +102,11 @@ export default function DatePickerScenario() {
109102
onFollow={() =>
110103
setSelectedDate({
111104
start: {
112-
date: formatDate(startOfQuarter(oneQuarterAgoDate)),
105+
date: formatDate(dayjs(oneQuarterAgoDate).startOf('quarter').toDate()),
113106
time: '',
114107
},
115108
end: {
116-
date: formatDate(endOfQuarter(oneQuarterAgoDate)),
109+
date: formatDate(dayjs(oneQuarterAgoDate).endOf('quarter').toDate()),
117110
time: '',
118111
},
119112
})
@@ -124,8 +117,8 @@ export default function DatePickerScenario() {
124117
<Link
125118
onFollow={() =>
126119
setSelectedDate({
127-
start: { date: formatDate(startOfYear(oneYearAgoDate)), time: '' },
128-
end: { date: formatDate(endOfYear(oneYearAgoDate)), time: '' },
120+
start: { date: formatDate(dayjs(oneYearAgoDate).startOf('year').toDate()), time: '' },
121+
end: { date: formatDate(dayjs(oneYearAgoDate).endOf('year').toDate()), time: '' },
129122
})
130123
}
131124
>

‎pages/property-filter/property-filter-editor-permutations.page.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import React, { useState } from 'react';
5-
import { format } from 'date-fns';
5+
import dayjs from 'dayjs';
66

77
import { DatePicker, FormField, TimeInput } from '~components';
88
import { I18nProvider } from '~components/i18n';
@@ -57,12 +57,15 @@ const dateProperty: InternalFilteringProperty = {
5757
operators: ['=', '!='],
5858
defaultOperator: '=',
5959
getTokenType: () => 'value',
60-
getValueFormatter: () => (value: Date) => (value ? format(value, 'yyyy-MM-dd') : ''),
60+
getValueFormatter: () => (value: Date) => (value ? dayjs(value).format('YYYY-MM-DD') : ''),
6161
getValueFormRenderer:
6262
() =>
6363
({ value }) => (
6464
<FormField>
65-
<DatePicker value={value ? format(value, 'yyyy-MM-dd') : ''} openCalendarAriaLabel={openCalendarAriaLabel} />
65+
<DatePicker
66+
value={value ? dayjs(value).format('YYYY-MM-DD') : ''}
67+
openCalendarAriaLabel={openCalendarAriaLabel}
68+
/>
6669
</FormField>
6770
),
6871
externalProperty,
@@ -75,16 +78,19 @@ const dateTimeProperty: InternalFilteringProperty = {
7578
operators: ['=', '!='],
7679
defaultOperator: '=',
7780
getTokenType: () => 'value',
78-
getValueFormatter: () => (value: Date) => (value ? format(value, 'yyyy-MM-dd hh:mm') : ''),
81+
getValueFormatter: () => (value: Date) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : ''),
7982
getValueFormRenderer:
8083
() =>
8184
({ value }) => (
8285
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
8386
<FormField description="Date">
84-
<DatePicker value={value ? format(value, 'yyyy-MM-dd') : ''} openCalendarAriaLabel={openCalendarAriaLabel} />
87+
<DatePicker
88+
value={value ? dayjs(value).format('YYYY-MM-DD') : ''}
89+
openCalendarAriaLabel={openCalendarAriaLabel}
90+
/>
8591
</FormField>
8692
<FormField description="Time">
87-
<TimeInput value={value ? format(value, 'hh:mm:ss') : ''} />
93+
<TimeInput value={value ? dayjs(value).format('HH:mm:ss') : ''} />
8894
</FormField>
8995
</div>
9096
),

‎src/calendar/__tests__/calendar.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import * as React from 'react';
55
import { fireEvent, render } from '@testing-library/react';
6-
import addMonths from 'date-fns/addMonths';
6+
import dayjs from 'dayjs';
77
import range from 'lodash/range';
88
import MockDate from 'mockdate';
99

@@ -50,7 +50,7 @@ test('check a11y', async () => {
5050
});
5151

5252
const eachMonthOfTheYear = range(0, 11).map(
53-
month => addMonths(new Date('2025-01-01'), month).toISOString().split('T')[0]
53+
month => dayjs(new Date('2025-01-01')).add(month, 'month').toISOString().split('T')[0]
5454
);
5555
test.each(eachMonthOfTheYear)('always renders 42 days, value=%s', value => {
5656
renderCalendar({ value });

‎src/calendar/grid/use-calendar-grid-keyboard-navigation.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import React from 'react';
5-
import { isSameMonth, isSameYear } from 'date-fns';
5+
import dayjs from 'dayjs';
66

77
import { KeyCode } from '../../internal/keycode';
88
import handleKey from '../../internal/utils/handle-key';
@@ -38,7 +38,9 @@ export default function useCalendarGridKeyboardNavigation({
3838
const moveRight = isMonthPicker ? moveNextMonth : moveNextDay;
3939
const moveUp = isMonthPicker ? moveMonthUp : movePrevWeek;
4040

41-
const isSamePage = isMonthPicker ? isSameYear : isSameMonth;
41+
const isSamePage = isMonthPicker
42+
? (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'year')
43+
: (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'month');
4244

4345
const onGridKeyDownHandler = (event: React.KeyboardEvent<HTMLElement>) => {
4446
let updatedFocusDate;

‎src/calendar/internal.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import React, { useEffect, useRef, useState } from 'react';
55
import clsx from 'clsx';
6-
import { addMonths, addYears, isSameDay, isSameMonth, isSameYear } from 'date-fns';
6+
import dayjs from 'dayjs';
77

88
import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
99

@@ -71,9 +71,13 @@ export default function Calendar({
7171
? getBaseMonth(displayedDate, isDateEnabled)
7272
: getBaseDay(displayedDate, isDateEnabled);
7373

74-
const isSameDate = isMonthPicker ? isSameMonth : isSameDay;
75-
const isSamePage = isMonthPicker ? isSameYear : isSameMonth;
76-
const isCurrentPage = (date: Date) => isMonthPicker || isSameMonth(date, baseDate);
74+
const isSameDate = isMonthPicker
75+
? (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'month')
76+
: (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'day');
77+
const isSamePage = isMonthPicker
78+
? (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'year')
79+
: (date1: Date, date2: Date) => dayjs(date1).isSame(date2, 'month');
80+
const isCurrentPage = (date: Date) => isMonthPicker || dayjs(date).isSame(baseDate, 'month');
7781

7882
const { previousButtonLabel, nextButtonLabel, renderDate, renderDateAnnouncement, renderHeaderText } =
7983
useCalendarLabels({
@@ -111,7 +115,9 @@ export default function Calendar({
111115
const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);
112116

113117
const onHeaderChangePageHandler = (amount: number) => {
114-
const movePage = isMonthPicker ? addYears : addMonths;
118+
const movePage = isMonthPicker
119+
? (date: Date, amt: number) => dayjs(date).add(amt, 'year').toDate()
120+
: (date: Date, amt: number) => dayjs(date).add(amt, 'month').toDate();
115121
const newDate = movePage(baseDate, amount);
116122
onChangePageHandler(newDate);
117123
};

0 commit comments

Comments
 (0)