Merge pull request #31743 from storybookjs/yann/fix-empty-dir-init

CLI: Fix package manager instantiation in empty directories
(cherry picked from commit ee73339)

Author: yannbf

code/core/src/common/js-package-manager/JsPackageManagerFactory.ts

@@ -45,28 +45,14 @@ export class JsPackageManagerFactory {
     this.cache.clear();
   }
 
-  public static getPackageManager(
-    {
-      force,
-      configDir = '.storybook',
-      storiesPaths,
-    }: { force?: PackageManagerName; configDir?: string; storiesPaths?: string[] } = {},
-    cwd = process.cwd()
-  ): JsPackageManager {
-    // Check cache first
-    const cacheKey = this.getCacheKey(force, configDir, cwd, storiesPaths);
-    const cached = this.cache.get(cacheKey);
-    if (cached) {
-      return cached;
-    }
-
-    // Option 1: If the user has provided a forcing flag, we use it
-    if (force && force in this.PROXY_MAP) {
-      const packageManager = new this.PROXY_MAP[force]({ cwd, configDir, storiesPaths });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
-    }
-
+  /**
+   * Determine which package manager type to use based on lockfiles, commands, and environment
+   *
+   * @param cwd - Current working directory
+   * @returns Package manager type as string: 'npm', 'pnpm', 'bun', 'yarn1', or 'yarn2'
+   * @throws Error if no usable package manager is found
+   */
+  public static getPackageManagerType(cwd = process.cwd()): PackageManagerName {
     const root = getProjectRoot();
 
     const lockFiles = [
@@ -94,66 +80,81 @@ export class JsPackageManagerFactory {
         return 1;
       });
 
-    // Option 2: We try to infer the package manager from the closest lockfile
+    // Option 1: We try to infer the package manager from the closest lockfile
     const closestLockfilePath = lockFiles[0];
-
     const closestLockfile = closestLockfilePath && basename(closestLockfilePath);
 
     const yarnVersion = getYarnVersion(cwd);
 
     if (yarnVersion && closestLockfile === YARN_LOCKFILE) {
-      const packageManager =
-        yarnVersion === 1
-          ? new Yarn1Proxy({ cwd, configDir, storiesPaths })
-          : new Yarn2Proxy({ cwd, configDir, storiesPaths });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
+      return yarnVersion === 1 ? 'yarn1' : 'yarn2';
     }
 
     if (hasPNPM(cwd) && closestLockfile === PNPM_LOCKFILE) {
-      const packageManager = new PNPMProxy({ cwd, configDir, storiesPaths });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
+      return 'pnpm';
     }
 
     const isNPMCommandOk = hasNPM(cwd);
 
     if (isNPMCommandOk && closestLockfile === NPM_LOCKFILE) {
-      const packageManager = new NPMProxy({ cwd, configDir, storiesPaths });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
+      return 'npm';
     }
 
     if (
       hasBun(cwd) &&
       (closestLockfile === BUN_LOCKFILE || closestLockfile === BUN_LOCKFILE_BINARY)
     ) {
-      const packageManager = new BUNProxy({ cwd, configDir, storiesPaths });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
+      return 'bun';
     }
 
-    // Option 3: If the user is running a command via npx/pnpx/yarn create/etc, we infer the package manager from the command
+    // Option 2: If the user is running a command via npx/pnpx/yarn create/etc, we infer the package manager from the command
     const inferredPackageManager = this.inferPackageManagerFromUserAgent();
     if (inferredPackageManager && inferredPackageManager in this.PROXY_MAP) {
-      const packageManager = new this.PROXY_MAP[inferredPackageManager]({
-        cwd,
-        storiesPaths,
-        configDir,
-      });
-      this.cache.set(cacheKey, packageManager);
-      return packageManager;
+      return inferredPackageManager;
     }
 
     // Default fallback, whenever users try to use something different than NPM, PNPM, Yarn,
     // but still have NPM installed
     if (isNPMCommandOk) {
-      const packageManager = new NPMProxy({ cwd, configDir, storiesPaths });
+      return 'npm';
+    }
+
+    throw new Error('Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2');
+  }
+
+  public static getPackageManager(
+    {
+      force,
+      configDir = '.storybook',
+      storiesPaths,
+      ignoreCache = false,
+    }: {
+      force?: PackageManagerName;
+      configDir?: string;
+      storiesPaths?: string[];
+      ignoreCache?: boolean;
+    } = {},
+    cwd = process.cwd()
+  ): JsPackageManager {
+    // Check cache first, unless ignored
+    const cacheKey = this.getCacheKey(force, configDir, cwd, storiesPaths);
+    const cached = this.cache.get(cacheKey);
+    if (cached && !ignoreCache) {
+      return cached;
+    }
+
+    // Option 1: If the user has provided a forcing flag, we use it
+    if (force && force in this.PROXY_MAP) {
+      const packageManager = new this.PROXY_MAP[force]({ cwd, configDir, storiesPaths });
       this.cache.set(cacheKey, packageManager);
       return packageManager;
     }
 
-    throw new Error('Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2');
+    // Option 2: Detect package managers based on some heuristics
+    const packageManagerType = this.getPackageManagerType(cwd);
+    const packageManager = new this.PROXY_MAP[packageManagerType]({ cwd, configDir, storiesPaths });
+    this.cache.set(cacheKey, packageManager);
+    return packageManager;
   }
 
   /** Look up map of package manager proxies by name */

code/lib/create-storybook/src/initiate.ts

@@ -387,24 +387,28 @@ export async function doInitiate(options: CommandOptions): Promise<
 > {
   const { packageManager: pkgMgr } = options;
 
-  let packageManager = JsPackageManagerFactory.getPackageManager({
-    force: pkgMgr,
-  });
+  const isEmptyDirProject = options.force !== true && currentDirectoryIsEmpty();
+  let packageManagerType = JsPackageManagerFactory.getPackageManagerType();
 
   // Check if the current directory is empty.
-  if (options.force !== true && currentDirectoryIsEmpty(packageManager.type)) {
+  if (isEmptyDirProject) {
     // Initializing Storybook in an empty directory with yarn1
-    // will very likely fail due to different kind of hoisting issues
+    // will very likely fail due to different kinds of hoisting issues
     // which doesn't get fixed anymore in yarn1.
     // We will fallback to npm in this case.
-    if (packageManager.type === 'yarn1') {
-      packageManager = JsPackageManagerFactory.getPackageManager({ force: 'npm' });
+    if (packageManagerType === 'yarn1') {
+      packageManagerType = 'npm';
     }
+
     // Prompt the user to create a new project from our list.
-    await scaffoldNewProject(packageManager.type, options);
+    await scaffoldNewProject(packageManagerType, options);
     invalidateProjectRootCache();
   }
 
+  const packageManager = JsPackageManagerFactory.getPackageManager({
+    force: pkgMgr,
+  });
+
   if (!options.skipInstall) {
     await packageManager.installDependencies();
   }

code/lib/create-storybook/src/scaffold-new-project.ts

@@ -231,22 +231,21 @@ export const scaffoldNewProject = async (
   logger.line(1);
 };
 
-const BASE_IGNORED_FILES = ['.git', '.gitignore', '.DS_Store', '.cache', 'node_modules'];
-
-const IGNORED_FILES_BY_PACKAGE_MANAGER: Record<CoercedPackageManagerName, string[]> = {
-  npm: [...BASE_IGNORED_FILES],
-  yarn: [...BASE_IGNORED_FILES, '.yarnrc.yml', '.yarn'],
-  pnpm: [...BASE_IGNORED_FILES],
-};
-
-export const currentDirectoryIsEmpty = (packageManager: PackageManagerName) => {
-  const packageManagerName = packageManagerToCoercedName(packageManager);
+const FILES_TO_IGNORE = [
+  '.git',
+  '.gitignore',
+  '.DS_Store',
+  '.cache',
+  'node_modules',
+  '.yarnrc.yml',
+  '.yarn',
+];
+
+export const currentDirectoryIsEmpty = () => {
   const cwdFolderEntries = readdirSync(process.cwd());
 
-  const filesToIgnore = IGNORED_FILES_BY_PACKAGE_MANAGER[packageManagerName];
-
   return (
     cwdFolderEntries.length === 0 ||
-    cwdFolderEntries.every((entry) => filesToIgnore.includes(entry))
+    cwdFolderEntries.every((entry) => FILES_TO_IGNORE.includes(entry))
   );
 };