CLI: Generate a new project on init in empty directory

.circleci/config.yml

@@ -472,6 +472,98 @@ jobs:
           command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
+  test-empty-init:
+    executor:
+      class: medium
+      name: sb_node_16_browsers
+    parameters:
+      packageManager:
+        type: string
+      template:
+        type: string
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - when:
+          condition:
+            equal: ["npm", << parameters.packageManager >>]
+          steps:
+            - run:
+                name: Storybook init from empty directory (NPM)
+                command: |
+                  cd code
+                  yarn local-registry --open &
+                  cd ../../
+                  mkdir empty-<< parameters.template >>
+                  cd empty-<< parameters.template >>
+                  npm set registry http://localhost:6001
+                  npx storybook init --yes --package-manager npm
+                  npm run storybook -- --smoke-test
+                environment:
+                  IN_STORYBOOK_SANDBOX: true
+                  STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
+                  STORYBOOK_DISABLE_TELEMETRY: true
+      - when:
+          condition:
+            equal: ["yarn1", << parameters.packageManager >>]
+          steps:
+            - run:
+                name: Storybook init from empty directory (Yarn 1)
+                command: |
+                  cd code
+                  yarn local-registry --open &
+                  cd ../../
+                  mkdir empty-<< parameters.template >>
+                  cd empty-<< parameters.template >>
+                  npx storybook init --yes --package-manager yarn1
+                  yarn storybook --smoke-test
+                environment:
+                  IN_STORYBOOK_SANDBOX: true
+                  STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
+                  STORYBOOK_DISABLE_TELEMETRY: true
+      - when:
+          condition:
+            equal: ["yarn2", << parameters.packageManager >>]
+          steps:
+            - run:
+                name: Storybook init from empty directory (Yarn 2)
+                command: |
+                  cd code
+                  yarn local-registry --open &
+                  cd ../../
+                  mkdir empty-<< parameters.template >>
+                  cd empty-<< parameters.template >>
+                  yarn set version berry
+                  yarn config set registry http://localhost:6001
+                  yarn dlx storybook init --yes --package-manager yarn2
+                  yarn storybook --smoke-test
+                environment:
+                  IN_STORYBOOK_SANDBOX: true
+                  STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
+                  STORYBOOK_DISABLE_TELEMETRY: true
+      - when:
+          condition:
+            equal: ["pnpm", << parameters.packageManager >>]
+          steps:
+            - run:
+                name: Storybook init from empty directory (PNPM)
+                command: |
+                  cd code
+                  yarn local-registry --open &
+                  cd ../../
+                  mkdir empty-<< parameters.template >>
+                  cd empty-<< parameters.template >>
+                  npm i -g pnpm
+                  pnpm config set registry http://localhost:6001
+                  pnpm dlx storybook init --yes --package-manager pnpm
+                  pnpm run storybook --smoke-test
+                environment:
+                  IN_STORYBOOK_SANDBOX: true
+                  STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
+                  STORYBOOK_DISABLE_TELEMETRY: true
+      - report-workflow-on-failure
 
 workflows:
   docs:
@@ -640,6 +732,26 @@ workflows:
           parallelism: 31
           requires:
             - build-sandboxes
+
+      - test-empty-init:
+          requires:
+            - build
+          matrix:
+            parameters:
+              packageManager:
+                - "npm"
+                # TODO: reenable once we find out the source of failure
+                # - "yarn1"
+                # - "yarn2"
+                # - "pnpm"
+              template: 
+                - "react-vite-ts"
+                - "nextjs-ts"
+                - "vue-vite-ts"
+                # --smoke-test is not supported for the angular builder right now
+                # - "angular-cli"
+                - "lit-vite-ts"
+
       # TODO: reenable once we find out the source of flakyness
       # - test-runner-dev:
       #     parallelism: 4

code/lib/cli/src/helpers.test.ts

@@ -177,4 +177,39 @@ describe('Helpers', () => {
       }).toThrowError(`Could not coerce ${invalidSemverString} into a semver.`);
     });
   });
+  describe('inferPackageManagerFromUserAgent', () => {
+    afterEach(() => {
+      delete process.env.npm_config_user_agent;
+    });
+
+    it('should return npm for invalid user agent', () => {
+      process.env.npm_config_user_agent = '';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('npm');
+    });
+
+    it('should infer pnpm from user agent', () => {
+      process.env.npm_config_user_agent = 'pnpm/7.4.0';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('pnpm');
+    });
+
+    it('should infer npm from user agent', () => {
+      process.env.npm_config_user_agent = 'npm/7.24.0';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('npm');
+    });
+
+    it('should infer yarn 1 from user agent', () => {
+      process.env.npm_config_user_agent = 'yarn/1.22.11';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('yarn1');
+    });
+
+    it('should infer yarn 2 from user agent', () => {
+      process.env.npm_config_user_agent = 'yarn/2.4.0';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('yarn2');
+    });
+
+    it('should return npm for unknown package manager', () => {
+      process.env.npm_config_user_agent = 'unknown';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBe('npm');
+    });
+  });
 });

code/lib/cli/src/helpers.ts

@@ -13,6 +13,7 @@ import type {
   JsPackageManager,
   PackageJson,
   PackageJsonWithDepsAndDevDeps,
+  PackageManagerName,
 } from './js-package-manager';
 import type { SupportedFrameworks, SupportedRenderers } from './project_types';
 import { SupportedLanguage } from './project_types';
@@ -314,3 +315,29 @@ export function coerceSemver(version: string) {
   invariant(coercedSemver != null, `Could not coerce ${version} into a semver.`);
   return coercedSemver;
 }
+
+/**
+ * Infer the package manager based on the command the user is running.
+ * Each package manager sets the `npm_config_user_agent` environment variable with its name and version e.g. "npm/7.24.0"
+ * Which is really useful when invoking commands via npx/pnpx/yarn create/etc.
+ */
+export function inferPackageManagerFromUserAgent(): PackageManagerName {
+  const userAgent = process.env.npm_config_user_agent;
+  if (!userAgent) return 'npm';
+  const packageSpec = userAgent.split(' ')[0];
+  const [pkgMgrName, pkgMgrVersion] = packageSpec.split('/');
+
+  if (pkgMgrName === 'pnpm') {
+    return 'pnpm';
+  }
+
+  if (pkgMgrName === 'npm') {
+    return 'npm';
+  }
+
+  if (pkgMgrName === 'yarn') {
+    return `yarn${pkgMgrVersion?.startsWith('1.') ? '1' : '2'}`;
+  }
+
+  return 'npm';
+}

code/lib/cli/src/initiate.ts

@@ -8,11 +8,10 @@ import { NxProjectDetectedError } from '@storybook/core-events/server-errors';
 
 import dedent from 'ts-dedent';
 import boxen from 'boxen';
-import { readdirSync } from 'fs-extra';
 import type { Builder } from './project_types';
 import { installableProjectTypes, ProjectType } from './project_types';
 import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
-import { commandLog, codeLog, paddedLog } from './helpers';
+import { commandLog, codeLog, paddedLog, inferPackageManagerFromUserAgent } from './helpers';
 import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import reactGenerator from './generators/REACT';
@@ -31,11 +30,13 @@ import qwikGenerator from './generators/QWIK';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
 import serverGenerator from './generators/SERVER';
-import type { JsPackageManager, PackageManagerName } from './js-package-manager';
+import type { JsPackageManager } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions, GeneratorOptions } from './generators/types';
 import { HandledError } from './HandledError';
+import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-project';
+import versions from './versions';
 
 const logger = console;
 
@@ -234,45 +235,6 @@ const projectTypeInquirer = async (
   process.exit(0);
 };
 
-const getEmptyDirMessage = (packageManagerType: PackageManagerName) => {
-  const generatorCommandsMap = {
-    vite: {
-      npm: 'npm create vite@latest',
-      yarn1: 'yarn create vite',
-      yarn2: 'yarn create vite',
-      pnpm: 'pnpm create vite',
-    },
-    angular: {
-      npm: 'npx -p @angular/cli ng new my-project --package-manager=npm',
-      yarn1: 'npx -p @angular/cli ng new my-project --package-manager=yarn',
-      yarn2: 'npx -p @angular/cli ng new my-project --package-manager=yarn',
-      pnpm: 'npx -p @angular/cli ng new my-project --package-manager=pnpm',
-    },
-  };
-
-  return dedent`
-      Storybook cannot be installed into an empty project. We recommend creating a new project with the following:
-
-      📦 Vite CLI for React/Vue/Web Components => ${chalk.green(
-        generatorCommandsMap.vite[packageManagerType]
-      )}
-      See ${chalk.yellowBright('https://vitejs.dev/guide/#scaffolding-your-first-vite-project')}
-
-      📦 Angular CLI => ${chalk.green(generatorCommandsMap.angular[packageManagerType])}
-      See ${chalk.yellowBright('https://angular.io/cli/new')}
-
-      📦 Any other tooling of your choice
-
-      Once you've created a project, please re-run ${chalk.green(
-        'npx storybook@latest init'
-      )} inside the project root. For more information, see ${chalk.yellowBright(
-    'https://storybook.js.org/docs'
-  )}
-
-      Good luck! 🚀
-    `;
-};
-
 async function doInitiate(
   options: CommandOptions,
   pkg: PackageJson
@@ -292,11 +254,10 @@ async function doInitiate(
     pkgMgr = 'npm';
   }
 
-  const cwdFolderEntries = readdirSync(process.cwd());
-  const isEmptyDir =
-    cwdFolderEntries.length === 0 || cwdFolderEntries.every((entry) => entry.startsWith('.'));
+  const packageManager = JsPackageManagerFactory.getPackageManager({
+    force: pkgMgr || inferPackageManagerFromUserAgent(),
+  });
 
-  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
   logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
 
@@ -307,15 +268,16 @@ async function doInitiate(
     updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
   });
 
-  if (options.force !== true && isEmptyDir) {
-    logger.log(
-      boxen(getEmptyDirMessage(packageManager.type), {
-        borderStyle: 'round',
-        padding: 1,
-        borderColor: '#F1618C',
-      })
-    );
-    throw new HandledError('Project was initialized in an empty directory.');
+  // Check if the current directory is empty.
+  if (options.force !== true && currentDirectoryIsEmpty(packageManager.type)) {
+    // Prompt the user to create a new project from our list.
+    await scaffoldNewProject(packageManager.type);
+
+    if (process.env.IN_STORYBOOK_SANDBOX === 'true' || process.env.CI === 'true') {
+      packageManager.addPackageResolutions({
+        '@storybook/telemetry': versions['@storybook/telemetry'],
+      });
+    }
   }
 
   let projectType: ProjectType;
@@ -398,6 +360,7 @@ async function doInitiate(
     projectType === ProjectType.ANGULAR
       ? `ng run ${installResult.projectName}:storybook`
       : packageManager.getRunStorybookCommand();
+
   logger.log(
     boxen(
       dedent`