CLI: Add pnpm support

[IanVS]

Issue: #19412

What I did

This adds support for the use of pnpm during CLI operations. I kept the same strategy as was used for npm, giving it a --use-pnpm flag to force its use. Otherwise, we'll check if it's installed and look for a pnpm-lock.yaml file to determine if we should use it.

Note: this also adds support for forcing npm (as well as pnpm) for sb automigrate, which was missing before.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

I didn't add any end-to-end style test here, but it is possible to verify it's working manually:

# Compile the branch
yarn task --task compile --start-from compile

# from somewhere else outside of the storybook repo:
pnpm create vite@latest --template=react

# cd into your new project and run
pnpm install

# Initialize storybook
node ../../../storybook/storybook/code/lib/cli/dist/generate.js init

You should see pnpm being used to install dependencies. Without the changes in this PR, the installation step would fail.

[shilman]

@IanVS Should we change this to --package-manager=npm|yarn1|yarn2|pnpm & deprecate the old flags now that we support a variety of options?

[ndelangen]

I like that idea a lot @shilman

[IanVS]

Closed by a misclick.

I wanted to say I got this note from @jonniebigodes:

I wanted to follow up with you on this pr, I've checked and it's good on my end. I've also scanned other repos in both organizations and so far there's a couple of changes in the tutorials, more specifically some translations that are still using the deprecated version. Once this is out I'll update the tutorials accordingly.

And, I've made the change suggested by @shilman. I think that's a much better approach.

[kasperpeulen]

LGTM!

[NatoBoram]

Is there anything special we need to do to use it?

pnpx storybook init --use-pnpm

 ERROR  Command failed with exit code 1: /home/nato/.local/share/pnpm/store/v3/tmp/dlx-82902/node_modules/.bin/storybook init --use-pnpm

pnpm: Command failed with exit code 1: /home/nato/.local/share/pnpm/store/v3/tmp/dlx-82902/node_modules/.bin/storybook init --use-pnpm
    at makeError (/home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:22415:17)
    at handlePromise (/home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:22986:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.handler [as dlx] (/home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:193613:7)
    at async /home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:200906:21
    at async main (/home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:200877:34)
    at async runPnpm (/home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:201101:5)
    at async /home/nato/.cache/node/corepack/pnpm/7.15.0/dist/pnpm.cjs:201093:7

[IanVS]

@NatoBoram it is only released in the storybook@next tag.

[NatoBoram]

🤦‍♂️

Thanks. For future reference, the steps are:

pnpm i -g storybook@next

pnpm create svelte@latest test_project
cd test_project
pnpm i
storybook init

[IanVS]

That works, or you can use pnpx sb@next init (sb is an alias for storybook)

[NatoBoram]

I wasn't able to make it work with @next personally

[IanVS]

@NatoBoram could you please open an issue with a set of reproduction steps and the error you are seeing?

[NatoBoram]

Looks like the situation changed, it works now.

The command I had used was pnpx storybook@next init but it used the @latest tag instead of @next. I don't know if I made a typo at that time or if another program got updated and fixed it. I even uninstalled storybook globally and pruned the store just to make sure it's not merely installing storybook that fixed it but it still works.

Regardless, thanks for your help!