Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Datepicker] Bumped react-day-picker to v9. #3525

Open
wants to merge 48 commits into
base: main
Choose a base branch
from
Open

Conversation

KenAJoh
Copy link
Collaborator

@KenAJoh KenAJoh commented Jan 26, 2025

Description

As a result users will now not get peer-dependency warnings when running npm install since rdp v9 has react: ">= 16.8.0" set

While the upgrade-guide doesn't look that bad: https://daypicker.dev/upgrading, this major-update came with a bunch of small undocumented changes and gotchas 😭 In the end it turned into a refactor of most of our Datepicker and MonthPicker-code. While it looks like a lot has been done, most of the touched files are just small refactors like renaming and re-structuring.

Steps taken to ensure backwards compat and no breaking changes

  • Set up tests in old DatePicker/MonthPicker code that ensures same output between the versions
  • Storybook-tests that validates that DOM-structure matches old structure for HTML-structure, classNames and a11y-tags on elements. UX should be 1-1 🤞

Highlights

  • DateWrapper -> DateDialog: Modal now has placement="top" to avoid layout-shifts with fixedWeeks set
  • DateInput: Context co-located with code
  • Locale -> Date.locale: Context co-located with code
  • All /context-dir code is now co-located and use our own createContext-util where possible
  • Because of this bug, we use the new util clamp-dates to make sure shown month/year is never "outside" the possible view.
  • Moved /utils -> /date-utils for clarity
  • Added new stories in DatePicker.test.stories.tsx and MonthPicker.test.stories.tsx for testing code while refactoring.
  • Re-written all our "custom"-components used in rdp. The major updated how all of these worked so needed to be built from scratch. Notice that they now have useCallback when used to avoid re-renders.
  • Extracted the ReactDayPicker component itself to be re-used between standalone and dialog-version
  • In an effort to slowly migrate away from react-day-picker, some utilities have been extracted
    • Typeutils
    • dropdown-options

MonthPicker

Component could no longer use old utilities from rdp. We didn't use it for much before anyways, so features were extracted and replicated locally.

Component Checklist 📝

  • JSDoc
  • Examples
  • Documentation / Decision Records
  • Storybook
  • Style mappings (@navikt/core/css/config/_mappings.js)
  • Component tokens (@navikt/core/css/tokens.json)
  • CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
  • Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
  • New component? CSS import (@navikt/core/css/index.css)
  • Breaking change? Update migration guide. Consider codemod.
  • Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

@KenAJoh KenAJoh self-assigned this Jan 26, 2025
Copy link

changeset-bot bot commented Jan 26, 2025

🦋 Changeset detected

Latest commit: a5c33f5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

Copy link
Contributor

github-actions bot commented Jan 26, 2025

Storybook demo / Chromatic

📝 Changes to review: 1

3918aeaa8 | 91 components | 135 stories

@gpbl
Copy link

gpbl commented Jan 27, 2025

Thanks for pinging your PR and the feedback here. I don’t often get the chance to see how the react-day-picker is used in real-world scenarios 👀

Sorry to hear that upgrading to DayPicker 9 has been such a difficult task. If you have a moment, please share your main pain points with other devs and maintainers. That would be a huge help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants