Update main client dependencies to next major versions: React 18, NextJS 13, Chakra 2

NevilleS commented 1 year ago

Description

We're falling behind from the latest-and-greatest, and there are some really excellent improvements in the latest versions of our "main" client dependencies:

React 18: https://react.dev/blog/2022/03/08/react-18-upgrade-guide
NextJS 13: https://nextjs.org/docs/upgrading#v13-summary
Chakra 2: https://chakra-ui.com/getting-started/migration

NextJS 13+ supports some important improvements to API routes and bundling optimizations (like transpilePackages) that we'll need to keep building our Fides UI components quickly without having to start relying on backports and other 3rd-party libs.

Chakra 2+ is better all around, including lots of little hard-won UX details we might not notice at first. For example, I noticed in 2.2+ they improved the "focus" indicator to only display when navigating the page with an a11y device, making those annoying blue borders on some of our buttons and form elements disappear 👍

Acceptance Criteria

[ ] Update to React 18+ in all client code
[ ] Update to NextJS 13+ in all client code
[ ] Update to Chakra 2+ in all client code

Implementation Notes/Details

Lots of tiny details to work through on this one, and you never really know what's going to be easy and hard. Overall I think the NextJS update looks the trickiest and involves a couple codemods like these:

new-link
next-image-to-legacy-image
next-image-experimental (I think?)

See https://nextjs.org/docs/advanced-features/codemods#nextjs-13 for notes on those.

rsilvery commented 1 year ago

@adamsachs have we done these updates?

adamsachs commented 1 year ago

@adamsachs have we done these updates?

needs confirmation from a FE dev, but looking at our package.jsons it does not seem like we've made these updates.

ethyca / fides