build: upgrade to yarn 3

[castastrophe]

Description

Why upgrade from yarn 1.x (aka classic)?

Stability: Yarn Modern came after years of experience with maintaining Classic; its design was informed by the shortcomings we saw, and as a result the software is much more stable than it ever was.

New features: Yarn Modern provides many new features that didn't exist in Yarn 1.x - or any other package managers for that matter. As an example, Constraints are exclusive to Yarn Modern.

Flexibility: Yarn Modern supports all three installation strategies: Yarn PnP, node_modules, and via a pnpm-like content-addressed cache. No matter which one you prefer, you have it at your disposal.

Extensibility: Yarn Modern's architecture allows you to build your own features as you need it. No need to wait for us to implement this feature you hope for - you can now implement it yourself, according to your own specs, and use it straight away! Focused workspaces, custom installs, project validation, ...

Future proof: Yarn Modern was built after we started to see how difficult it was to build new features on Yarn Classic, with most changes having unpredictable consequences. This plateau has been solved, as evidenced by the slate of features that we released in the past few major releases.

My reasons for support an upgrade to Yarn Modern is it's tooling around monorepo management (see constraints, versioning, interactive upgrades, and a strong set of command-line tools).

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Setting up your environment:

1. corepack enable more detailed instructions
2. nvm use to ensure you are using the right version of node
3. yarn install - expect the output formatting to be quite colorful compared with yarn 1

Regression testing

Validate:

1. No command line regressions:

• [ ] yarn install
• [ ] yarn build
• [ ] yarn dev
• [ ] yarn start

2. The documentation pages for at least two other components are still loading, including:

• [x] The pages render correctly, are accessible, and are responsive.

3. If components have been modified, VRTs have been run on this branch:

• [ ] VRTs have been run and looked at.
• [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

• [x] I have read the contribution guidelines.
• [x] I have updated relevant storybook stories and templates.
• [x] I have tested these changes in Windows High Contrast mode.
• [x] If my change impacts other components, I have tested to make sure they don't break.
• [x] If my change impacts documentation, I have updated the documentation accordingly.
• [x] ✨ This pull request is ready to merge. ✨

[github-actions[bot]]

🚀 Deployed on https://pr-2546--spectrum-css.netlify.app

[github-actions[bot]]

File metrics

Summary

Total size: 4.57 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[castastrophe]

Looks good! These steps all appear to be working. After it built successfully, I clicked through a bunch of components in the docs and in Storybook and did not see anything off.

One thing I wanted to note were a few of the warnings after yarn install. These might be worth some followup work. The prettier version caught my attention.

Yes I noticed the prettier warning too. The others are expected due to how we're supporting deprecated components in storybook and some tools require types even if you don't use typescript. I think we should downgrade the eslint prettier plugin though in a separate PR and that should correct the issue we're seeing. We might also be able to update prettier soon if we transition to changesets because lerna is our prettier blocker at the moment.