CLI: Create sandbox on init in empty folders

.circleci/config.yml

@@ -259,6 +259,8 @@ jobs:
           path: test-results
   ## new workflow
   create-sandboxes:
+    environment:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: 'false'
     parameters:
       parallelism:
         type: integer

.github/workflows/generate-sandboxes-main.yml

@@ -16,7 +16,6 @@ jobs:
   generate:
     runs-on: ubuntu-latest
     env:
-      YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
     steps:
       - uses: actions/setup-node@v3
@@ -29,6 +28,8 @@ jobs:
         run: |
           git config --global user.name "Storybook Bot"
           git config --global user.email "bot@storybook.js.org"
+      - name: Install PNPM
+        run: npm i -g pnpm
       - name: Install dependencies
         run: node ./scripts/check-dependencies.js
       - name: Compile Storybook libraries

.github/workflows/generate-sandboxes-next.yml

@@ -6,29 +6,30 @@ on:
   workflow_dispatch:
   # To test fixes on push rather than wait for the scheduling, do the following:
   # 1. Uncomment the lines below and add your branch.
-  # push:
-  #   branches:
-  #     - <your-branch-name>
+  push:
+    branches:
+      - valentin/create-sandbox-in-empty-project
   # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
   # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `next` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
     runs-on: ubuntu-latest
     env:
-      YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
     steps:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: next
+          ref: valentin/create-sandbox-in-empty-project
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
           git config --global user.email "bot@storybook.js.org"
+      - name: Install PNPM
+        run: npm i -g pnpm
       - name: Install dependencies
         run: node ./scripts/check-dependencies.js
       - name: Compile Storybook libraries
@@ -43,7 +44,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --debug
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next

code/lib/cli/package.json

@@ -113,7 +113,8 @@
   "bundler": {
     "entries": [
       "./src/generate.ts",
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/scaffolding-readme-template.md"
     ],
     "platform": "node"
   },

code/lib/cli/src/detect.ts

@@ -6,15 +6,10 @@ import { logger } from '@storybook/node-logger';
 import { resolve } from 'path';
 import prompts from 'prompts';
 import type { TemplateConfiguration, TemplateMatcher } from './project_types';
-import {
-  ProjectType,
-  supportedTemplates,
-  SupportedLanguage,
-  unsupportedTemplate,
-  CoreBuilder,
-} from './project_types';
+import { ProjectType, SupportedLanguage, CoreBuilder } from './project_types';
 import { commandLog, isNxProject } from './helpers';
 import type { JsPackageManager, PackageJsonWithMaybeDeps } from './js-package-manager';
+import { supportedTemplates, unsupportedTemplate } from './templates';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 const webpackConfigFiles = ['webpack.config.js'];

code/lib/cli/src/generate.ts

@@ -142,6 +142,7 @@ command('sandbox [filterValue]')
   .description('Create a sandbox from a set of possible templates')
   .option('-o --output <outDir>', 'Define an output directory')
   .option('-b --branch <branch>', 'Define the branch to download from', 'next')
+  .option('-s --silent', 'Do not log any information to the console', false)
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
     sandbox({ filterValue, ...options }).catch((e) => {

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

@@ -168,4 +168,40 @@ describe('Helpers', () => {
       }).toThrowError("Couldn't find any official storybook packages in package.json");
     });
   });
+
+  describe('inferPackageManagerFromUserAgent', () => {
+    afterEach(() => {
+      delete process.env.npm_config_user_agent;
+    });
+
+    it('should return undefined for invalid user agent', () => {
+      process.env.npm_config_user_agent = '';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBeUndefined();
+    });
+
+    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 undefined for unknown package manager', () => {
+      process.env.npm_config_user_agent = 'unknown';
+      expect(helpers.inferPackageManagerFromUserAgent()).toBeUndefined();
+    });
+  });
 });

code/lib/cli/src/helpers.ts

@@ -12,6 +12,7 @@ import type {
   JsPackageManager,
   PackageJson,
   PackageJsonWithDepsAndDevDeps,
+  PackageManagerName,
 } from './js-package-manager';
 import type { SupportedFrameworks, SupportedRenderers } from './project_types';
 import { SupportedLanguage } from './project_types';
@@ -303,3 +304,43 @@ export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAnd
 export async function isNxProject() {
   return findUp.sync('nx.json');
 }
+
+/**
+ * Use this in switch statements in the default expression to assert that all enum values are handled.
+ * @example
+ * switch (foo: 'bar' | 'baz') {
+ *  case 'bar':
+ *   return 'bar';
+ * default:
+ *  // Typescript will error here because `baz` is not handled
+ *  return assertNever(foo);
+ */
+export function assertNever(x: never): never {
+  throw new Error(`Unexpected object: ${x}`);
+}
+
+/**
+ * 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 undefined;
+  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 undefined;
+}