feat(react/date-pickers)!: deprecate Calendar and replace it with DateCalendar

[cheton]

No description provided.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

⚠️ No Changeset found

Latest commit: ae03b20

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Bundle Report

Changes will increase total bundle size by 5.22kB (0.19%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@tonic-ui/react-cjs	832.62kB	2.64kB (0.32%) ⬆️
@tonic-ui/react-esm	780.56kB	2.58kB (0.33%) ⬆️

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Attention: Patch coverage is 82.85714% with 6 lines in your changes missing coverage. Please review.

Project coverage is 78.41%. Comparing base (a6597a2) to head (ae03b20).
Report is 1 commits behind head on v2.

Files with missing lines	Patch %	Lines
packages/react/src/deprecated/Calendar.js	20.00%	4 Missing ⚠️
...eact/src/date-pickers/DateCalendar/DateCalendar.js	86.66%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##               v2     #961      +/-   ##
==========================================
- Coverage   78.46%   78.41%   -0.06%     
==========================================
  Files         403      404       +1     
  Lines        6692     6704      +12     
==========================================
+ Hits         5251     5257       +6     
- Misses       1441     1447       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[trendmicro-frontend-bot]

Tonic UI Demo

On 2024-12-21 13:12:54 +0000, PR #961 (ae03b20) was successfully deployed. You can view it at the following link:
https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-961/

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Duplication The deprecation warning logic and prop mapping could be moved to a separate utility function to avoid code duplication between DateCalendar and Calendar components { // deprecation warning const prefix = `${DateCalendar.displayName}:`; useOnceWhen(() => { warnDeprecatedProps('date', { prefix, alternative: 'value', willRemove: true, }); }, (dateProp !== undefined)); useOnceWhen(() => { warnDeprecatedProps('defaultDate', { prefix, alternative: 'defaultValue', willRemove: true, }); }, (defaultDateProp !== undefined)); // TODO: remove `date` and `defaultDate` props in next major version valueProp = valueProp ?? dateProp; defaultValueProp = defaultValueProp ?? defaultDateProp; } Naming Consistency The callback handlers onDateCalendarChange and onDateCalendarError should be renamed to match the component prop names onChange and onError for better consistency const onDateCalendarChange = useCallback((nextDate) => { const isControlled = (valueProp !== undefined); if (!isControlled) { setValue(nextDate); } if (isValid(nextDate)) { setInputValue(format(nextDate, inputFormat)); } if (typeof onChangeProp === 'function') { onChangeProp(nextDate); } if (closeOnSelect) { onClose(); } }, [valueProp, inputFormat, onChangeProp, closeOnSelect, onClose]); const onDateCalendarError = useCallback((error, value) => { setError(error); if (typeof onErrorProp === 'function') { onErrorProp(error, value); } }, [onErrorProp]);

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Add date validation before triggering the onChange callback to prevent invalid dates from being set The onChange callback should validate the date before calling onChangeProp to ensure data consistency. Add validation before the callback. packages/react/src/date-pickers/DateCalendar/DateCalendar.js [190-197] const onChange = useCallback((nextDate) => { + const validationError = validateDate(nextDate, minDate, maxDate, shouldDisableDate); + if (validationError) { + onErrorProp?.(validationError, nextDate); + return; + } const isControlled = (valueProp !== undefined); if (!isControlled) { setDate(nextDate); } onChangeProp?.(nextDate); -}, [valueProp, onChangeProp]); +}, [valueProp, onChangeProp, minDate, maxDate, shouldDisableDate, onErrorProp]); Apply this suggestion Suggestion importance[1-10]: 8 Why: The suggestion adds important validation logic to prevent invalid dates from being propagated through the onChange callback, which could prevent bugs and improve data consistency.	8
	Add missing dependencies to useEffect to ensure proper validation when min/max dates change The useEffect dependency array for date validation is missing minDate and maxDate dependencies, which could cause stale validations. packages/react/src/date-pickers/DateCalendar/DateCalendar.js [148-154] useEffect(() => { const validationError = validateDate(date, minDate, maxDate, shouldDisableDate); if (validationError !== previousValidationError) { onErrorProp?.(validationError, date); } -}, [date, onErrorProp, previousValidationError, validationError]); +}, [date, minDate, maxDate, shouldDisableDate, onErrorProp, previousValidationError, validationError]); Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding missing dependencies (minDate, maxDate, shouldDisableDate) to the useEffect dependency array is important to ensure date validation is re-run when these constraints change.	7