fix: Dependency conflict: react-day-picker@8.10.1 not compatible with date-fns@4.x

[BerrySeriousCoder]

Describe the bug

Currently the repo's package.json specifies:

• date-fns: ^4.1.0
• react-day-picker: ^8.10.1

However, react-day-picker@8.10.1 declares a peer dependency of
date-fns ^2.28.0 || ^3.0.0 and does not support v4.

To Reproduce

Steps to reproduce the behavior:

1. Clone the repo
2. Run npm install
3. Installation fails with ERESOLVE dependency conflict.

Expected behavior

Dependencies should install cleanly without conflict.

Screenshots

Environment

• OS: Ubuntu 22.04
• Browser: Chrome
• Node version: v20.19.4
• App version/commit: 4457957 (Sep 29, 2025)

Additional context

This seems to be caused by a dependency mismatch:

• react-day-picker@8.10.1 has a peer dependency of date-fns ^2.28.0 || ^3.0.0
• The repo currently specifies date-fns ^4.1.0, which is not supported yet.

Possible solutions:

• Downgrade date-fns to ^3.x (e.g. 3.6.0), or
• Upgrade react-day-picker once it adds support for date-fns v4.

For now, running npm install --legacy-peer-deps bypasses the error, but it may lead to runtime issues.

[mateenshamsi]

pls assign me this task

[BerrySeriousCoder]

I initially proposed downgrading date-fns to ^3 to satisfy react-day-picker@8’s peer dependency. After testing, upgrading react-day-picker to ^9.11.0 is the better fix.

• Why upgrade:
  • React 19 support: v8’s peers exclude React 19; v9 supports it. This removes the React peer conflict.
  • date-fns compatibility: v9 no longer peers on date-fns v2/v3, so we can keep the project’s date-fns@^4.x instead of downgrading the ecosystem.
  • Minimal code change: only src/components/ui/calendar.tsx needed an icon API update (IconLeft/IconRight → single Chevron component). No other behavioral changes.
  • Non-breaking for our usage: DayPicker props we use (mode="range", selected, onSelect, defaultMonth, numberOfMonths, classNames) remain compatible. Confirmed in:
    • src/components/ui/date-range.tsx
    • src/components/custom/date-filter.tsx
• Result:
  • npm install succeeds with React 19 and date-fns@^4.1.0.
  • Build succeeds; calendar renders with the same UI.
• I’ll open a PR upgrading react-day-picker to ^9.11.0 and updating calendar.tsx accordingly.

Next I’ll raise the PR referencing this issue.

[adityagupta0251]

Hi @BerrySeriousCoder 👋,

I’m participating in Hacktoberfest and would love to contribute to this issue.
Since you’ve already proposed the upgrade to react-day-picker@^9.11.0, I can help by:

• Testing the PR changes across different flows (calendar, date filter, range picker),
• Ensuring compatibility with date-fns@^4.x and React 19,
• Updating any related documentation if needed.

If it’s okay, could you please assign me to support on this issue? 🙏

[nikunj-kohli]

I would like to contribute here, I request you to assign me