Make preset-create-react-app compatible with Yarn PnP/Yarn 2

[gaetanmaisse]

Related to storybookjs/storybook#9527.

What I did

• Add some missing peerDependencies 🔍
• Use Plug'n'Play API to find react-scripts package's location directly with the dependency tree. See https://yarnpkg.com/advanced/pnpapi 🚅
• Reformat README because I had to 🤷‍♂

How to test

Unfortunately, there is no great way to test it for now 😏. Locally:
Checkout this branch and build @storybook/preset-create-react-app, then in a tmp folder:

mkdir test-preset-cra && cd test-preset-cra

# Use Yarn 2 inside this folder
yarn set version berry
touch yarn.lock

# Generate app and init SB
yarn dlx create-react-app my-app && cd my-app
yarn dlx -p @storybook/cli@next sb init

# Hack to make `@storybook/addon-links` works with Yarn 2 for now
yarn add @storybook/client-api@next

Link preset-create-react-app package to the local version, to do so add in package.json:

"resolutions": {
    "@storybook/preset-create-react-app": "portal:/PATH_TO_SB_PRESETS_REPO/packages/preset-create-react-app"
}

Finally, run yarn storybook 🎉

[mrmckeb]

This looks great, thanks @gaetanmaisse. Just a few small notes, let me know if you have any questions.

[mrmckeb]

This is actually a dependency of react-scripts if you want to use Sass, and is not related to this preset in my opinion :)

[gaetanmaisse]

True, I added at the beginning of my work on Yarn 2 compatibility but cannot find any reason to keep it. I added a fixup commit and will rebase the branch properly after the PR gets validated ;)

[mrmckeb]

Can we put this in an @types folder instead, named the same as the missing types?

[mrmckeb]

We try very hard to avoid any in this codebase - can you try to define the type?

[mrmckeb]

This should also be converted to a boolean, as you aren't using the version.

[gaetanmaisse]

I added a commit to improve this by extending NodeJS type, with that no more any. I also improved the check used for IS_USING_YARN_PNP

[gaetanmaisse]

@mrmckeb Thanks for your feedback! I fixed them in a few more commits, however, I can't push them to my own branch on GH 🤔 (even with -f 😄) I have the following error:

remote: Resolving deltas: 100% (14/14), completed with 4 local objects.
remote: error: GH006: Protected branch update failed for refs/heads/add-yarn-2-support.
remote: error: 8 of 8 required status checks are expected.
To https://github.com/storybookjs/presets.git
 ! [remote rejected] add-yarn-2-support -> add-yarn-2-support (protected branch hook declined)
error: impossible de pousser des références vers 'https://github.com/storybookjs/presets.git'

I'm not admin for this repo, so can you check in the settings if this branch is listed as protected? Or anything else that can explain this error 🙃

[mrmckeb]

Sorry, there were some changes that @shilman and I were making yesterday.

When this PR is merged, we'll have a new CI - I think the check requirements were accidentally applied to all branches. I'll try to look this morning with @shilman.

#103

Maybe subscribe to that PR, then when it's merged you can rebase and we can merge this in. Again, I'll work on branch protection today)

[gaetanmaisse]

@mrmckeb new commits pushed 🚀!

[mrmckeb]

Thanks @gaetanmaisse. We're still waiting for this to merge unfortunately, I'll chase @shilman again :)
#103

[mrmckeb]

Hi @gaetanmaisse, this has finally been merged - if you can rebase/solve conflicts, I think we can get this out!

[gaetanmaisse]

@mrmckeb, great! I will do it as soon I have time too and tag you back 😉

[gaetanmaisse]

@mrmckeb rebase done ✅

[gaetanmaisse]

@mrmckeb thanks for merging this PR 🙇 🎉 ! Are you the release guy too or is it @shilman? Do you know when the next release is planned?