Skip to content

Conversation

renejfc
Copy link
Member

@renejfc renejfc commented Aug 25, 2025

What

Refactor Calendar component from react-aria-components to react-day-picker with enhanced selection modes and improved styling

Why

This refactoring migrates from react-aria-components to react-day-picker, which provides better flexibility and more intuitive APIs for calendar functionality. The change enables support for multiple selection modes and improves the overall user experience.

How

  • Migrated Calendar component from react-aria-components to react-day-picker
  • Added support for multiple selection types: single, range, and multiple selection modes
  • Enhanced styling system with improved data attributes for better CSS targeting:
    • Added data-selected-single for single day selection
    • Added data-selected-multiple for multiple day selection
  • Enhanced range selection styling with proper border radius handling
  • Improved component architecture:
    • Created custom CalendarDayButton component with proper focus management
    • Added proper date formatting with date-fns
    • Implemented custom chevron components using existing Wave icons
  • Updated Storybook stories to demonstrate new functionality including multiple selection mode
  • Maintained API compatibility while extending functionality with new selection types

Breaking?

The refactor includes minor visual and ux changes, not necessarily breaking or "worse", i just thought that i should clear this out.

Copy link

pkg-pr-new bot commented Aug 25, 2025

Open in StackBlitz

npm i https://pkg.pr.new/@freenow/wave@558

commit: d9b8f73

@renejfc renejfc self-assigned this Aug 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants