fixes typing with @types/react@18

[agnlez]

Fixes some typing issues through:

• update of react-query@3 to @tanstack/react-query@4
• framer-motion@7
• @artsy/[email protected]
• bumps @react-aria and @react-stately libraries. Removes temporary @react-stately/slider resolution.

Most updates (but @fresnel) fix the children typing issue in React@18 by upgrading to latest versions.

There's an issue with @fresnel: the library doesn't specify the prop children in its provider when @types/react@18 is enabled so we need to wait for an update that changes this. Meanwhile, instead of dealing with weird typing on our end to fix the error, I think it's better to disable TS for that specific line, add a comment and wait for the solution coming from the library itself.

Please, run rm -rf node_modules && yarn for a fresh install and ensure types are correct running yarn check-types command.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
front-end-scaffold-docs	✅ Ready (Inspect)	Visit Preview	Aug 8, 2022 at 8:14AM (UTC)

[anamontiaga]

Watching the fixes into Fresnel I remembered how responsive is done in HeCo and I found this hook interesting:
https://github.com/Vizzuality/heco-invest/blob/develop/frontend/hooks/use-breakpoint.ts

Its use seems simpler than the Fresnel denominators.
A use case: https://github.com/Vizzuality/heco-invest/blob/develop/frontend/containers/home/start-banner/component.tsx

[mbarrenechea]

Watching the fixes into Fresnel I remembered how responsive is done in HeCo and I found this hook interesting: https://github.com/Vizzuality/heco-invest/blob/develop/frontend/hooks/use-breakpoint.ts

Its use seems simpler than the Fresnel denominators. A use case: https://github.com/Vizzuality/heco-invest/blob/develop/frontend/containers/home/start-banner/component.tsx

The main reason is that in nextjs we need a SSR way of dealing with media queries. Otherwise we will see a first render that doesn't match the final view in some cases. Like showing the full header before it transforms to a hamburger icon...
https://github.com/artsy/fresnel#server-side-rendering-ssr-usage

[mbarrenechea]

artsy/fresnel#260

[mbarrenechea]

It seems that they have a fix, they will show something next week. I think it's safe to merge this PR right now, but we need to add a reminder to check this in the following weeks