CLI: Add pnpm support

code/lib/cli/src/add.ts

@@ -66,8 +66,12 @@ const getVersionSpecifier = (addon: string) => {
  * it will try to use the version specifier matching your current
  * Storybook install version.
  */
-export async function add(addon: string, options: { useNpm: boolean; skipPostinstall: boolean }) {
-  const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
+export async function add(
+  addon: string,
+  options: { useNpm: boolean; usePnpm: boolean; skipPostinstall: boolean }
+) {
+  const { useNpm, usePnpm } = options;
+  const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm });
   const packageJson = packageManager.retrievePackageJson();
   const [addonName, versionSpecifier] = getVersionSpecifier(addon);
 

code/lib/cli/src/automigrate/index.ts

@@ -12,10 +12,12 @@ interface FixOptions {
   fixId?: string;
   yes?: boolean;
   dryRun?: boolean;
+  useNpm?: boolean;
+  usePnpm?: boolean;
 }
 
-export const automigrate = async ({ fixId, dryRun, yes }: FixOptions = {}) => {
-  const packageManager = JsPackageManagerFactory.getPackageManager();
+export const automigrate = async ({ fixId, dryRun, yes, useNpm, usePnpm }: FixOptions = {}) => {
+  const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm });
   const filtered = fixId ? fixes.filter((f) => f.id === fixId) : fixes;
 
   logger.info('🔎 checking possible migrations..');

code/lib/cli/src/generate.ts

@@ -7,6 +7,7 @@ import { sync as readUpSync } from 'read-pkg-up';
 
 import { logger } from '@storybook/node-logger';
 
+import { CommandOptions } from './generators/types';
 import { initiate } from './initiate';
 import { add } from './add';
 import { migrate } from './migrate';
@@ -39,13 +40,14 @@ program
   .option('-f --force', 'Force add Storybook')
   .option('-s --skip-install', 'Skip installing deps')
   .option('-N --use-npm', 'Use npm to install deps')
+  .option('--use-pnpm', 'Use pnpm to install deps')
   .option('--use-pnp', 'Enable pnp mode')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
   .option('-t --type <type>', 'Add Storybook for a specific project type')
   .option('-y --yes', 'Answer yes to all prompts')
-  .option('-b --builder <builder>', 'Builder library')
+  .option('-b --builder <webpack5 | vite>', 'Builder library')
   .option('-l --linkable', 'Prepare installation for link (contributor helper)')
-  .action((options) =>
+  .action((options: CommandOptions) =>
     initiate(options, pkg).catch((err) => {
       logger.error(err);
       process.exit(1);
@@ -56,6 +58,7 @@ program
   .command('add <addon>')
   .description('Add an addon to your Storybook')
   .option('-N --use-npm', 'Use NPM to build the Storybook server')
+  .option('--use-pnpm', 'Use PNPM to build the Storybook server')
   .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
   .action((addonName, options) => add(addonName, options));
 
@@ -68,6 +71,7 @@ program
   .command('upgrade')
   .description('Upgrade your Storybook packages to the latest')
   .option('-N --use-npm', 'Use NPM to build the Storybook server')
+  .option('--use-pnpm', 'Use PNPM to build the Storybook server')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for upgrades, do not install')
   .option('-p --prerelease', 'Upgrade to the pre-release packages')
@@ -177,6 +181,8 @@ program
   .description('Check storybook for known problems or migrations and apply fixes')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for fixes, do not actually run them')
+  .option('-N --use-npm', 'Use npm as package manager')
+  .option('--use-pnpm', 'Use pnpm as package manager')
   .action((fixId, options) =>
     automigrate({ fixId, ...options }).catch((e) => {
       logger.error(e);

code/lib/cli/src/generators/types.ts

@@ -32,6 +32,7 @@ export type Generator = (
 
 export type CommandOptions = {
   useNpm?: boolean;
+  usePnpm?: boolean;
   usePnp?: boolean;
   type?: ProjectType;
   force?: any;

code/lib/cli/src/initiate.ts

@@ -251,7 +251,8 @@ const projectTypeInquirer = async (
 };
 
 export async function initiate(options: CommandOptions, pkg: Package): Promise<void> {
-  const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
+  const { useNpm, usePnpm } = options;
+  const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm });
   const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
   logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
 
@@ -307,7 +308,7 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
     packageManager.installDependencies();
   }
 
-  await automigrate({ yes: options.yes || process.env.CI === 'true' });
+  await automigrate({ yes: options.yes || process.env.CI === 'true', useNpm, usePnpm });
 
   logger.log('\nTo run your Storybook, type:\n');
   codeLog([packageManager.getRunStorybookCommand()]);

code/lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -31,7 +31,7 @@ interface JsPackageManagerOptions {
   cwd?: string;
 }
 export abstract class JsPackageManager {
-  public abstract readonly type: 'npm' | 'yarn1' | 'yarn2';
+  public abstract readonly type: 'npm' | 'yarn1' | 'yarn2' | 'pnpm';
 
   public abstract initPackageJson(): void;