@storybook/cli 7.0.0-alpha.21 → 7.0.0-alpha.25

package/dist/cjs/automigrate/fixes/builder-vite.js

@@ -13,8 +13,6 @@ var _csfTools = require("@storybook/csf-tools");
 
 var _coreCommon = require("@storybook/core-common");
 
-var _jsPackageManager = require("../../js-package-manager");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const logger = console;
@@ -93,7 +91,7 @@ const builderVite = {
     if (!dryRun) {
       delete dependencies['storybook-builder-vite'];
       delete devDependencies['storybook-builder-vite'];
-      (0, _jsPackageManager.writePackageJson)(packageJson);
+      packageManager.writePackageJson(packageJson);
     }
 
     logger.info(`Adding '@storybook/builder-vite' as dev dependency`);

package/dist/cjs/detect.js

@@ -19,8 +19,6 @@ var _project_types = require("./project_types");
 
 var _helpers = require("./helpers");
 
-var _jsPackageManager = require("./js-package-manager");
-
 var _detectNextjs = require("./detect-nextjs");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -145,15 +143,8 @@ function isStorybookInstalled(dependencies, force) {
   return false;
 }
 
-function detectLanguage() {
+function detectLanguage(packageJson) {
   let language = _project_types.SupportedLanguage.JAVASCRIPT;
-  let packageJson;
-
-  try {
-    packageJson = (0, _jsPackageManager.readPackageJson)();
-  } catch (err) {//
-  }
-
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {
@@ -167,14 +158,7 @@ function detectLanguage() {
   return language;
 }
 
-function detect(options = {}) {
-  let packageJson;
-
-  try {
-    packageJson = (0, _jsPackageManager.readPackageJson)();
-  } catch (err) {//
-  }
-
+function detect(packageJson, options = {}) {
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {

package/dist/cjs/generators/RAX/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _baseGenerator = require("../baseGenerator");
 
-var _jsPackageManager = require("../../js-package-manager");
-
 const generator = async (packageManager, npmOptions, options) => {
   const [latestRaxVersion] = await packageManager.getVersions('rax');
   const packageJson = packageManager.retrievePackageJson();
@@ -20,7 +18,7 @@ const generator = async (packageManager, npmOptions, options) => {
   packageJson.dependencies['rax-link'] = packageJson.dependencies['rax-link'] || raxVersion;
   packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
   packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
-  (0, _jsPackageManager.writePackageJson)(packageJson);
+  packageManager.writePackageJson(packageJson);
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
     extraPackages: ['rax']
   });

package/dist/cjs/generators/baseGenerator.js

@@ -69,6 +69,7 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
     return {
       packages: [rendererPackage],
       framework: rendererPackagePath,
+      rendererId: 'angular',
       type: 'framework'
     };
   }
@@ -77,6 +78,7 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
     return {
       packages: [frameworkPackage],
       framework: frameworkPackagePath,
+      rendererId: renderer,
       type: 'framework'
     };
   }
@@ -86,6 +88,7 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
       packages: [rendererPackage, builderPackage],
       builder: builderPackagePath,
       renderer: rendererPackagePath,
+      rendererId: renderer,
       type: 'renderer'
     };
   }
@@ -95,7 +98,7 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
+const hasInteractiveStories = rendererId => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(rendererId);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,
@@ -113,13 +116,23 @@ async function baseGenerator(packageManager, npmOptions, {
     addESLint,
     extraMain,
     extensions
-  } = Object.assign({}, defaultOptions, options); // added to main.js
+  } = Object.assign({}, defaultOptions, options);
+  const {
+    packages: frameworkPackages,
+    type,
+    // @ts-ignore
+    renderer: rendererInclude,
+    // deepscan-disable-line UNUSED_DECL
+    rendererId,
+    framework: frameworkInclude,
+    builder: builderInclude
+  } = getFrameworkDetails(renderer, builder, pnp); // added to main.js
 
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials', ...stripVersions(extraAddonPackages)]; // added to package.json
 
   const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', ...extraAddonPackages];
 
-  if (hasInteractiveStories(renderer)) {
+  if (hasInteractiveStories(rendererId)) {
     addons.push('@storybook/addon-interactions');
     addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
   }
@@ -127,16 +140,7 @@ async function baseGenerator(packageManager, npmOptions, {
   const yarn2ExtraPackages = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
   const packageJson = packageManager.retrievePackageJson();
-  const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies)));
-  const {
-    packages: frameworkPackages,
-    type,
-    // @ts-ignore
-    renderer: rendererInclude,
-    // deepscan-disable-line UNUSED_DECL
-    framework: frameworkInclude,
-    builder: builderInclude
-  } = getFrameworkDetails(renderer, builder, pnp); // TODO: We need to start supporting this at some point
+  const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies))); // TODO: We need to start supporting this at some point
 
   if (type === 'renderer') {
     throw new Error((0, _tsDedent.dedent)`
@@ -169,7 +173,7 @@ async function baseGenerator(packageManager, npmOptions, {
   } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
 
 
-  if (frameworkPackages.includes('@storybook/builder-vite')) {
+  if (frameworkPackages.find(pkg => pkg.match(/^@storybook\/.*-vite$/))) {
     const previewHead = (0, _tsDedent.dedent)`
       <script>
         window.global = window;

package/dist/cjs/initiate.js

@@ -72,7 +72,14 @@ const installStorybook = (projectType, packageManager, options) => {
     installAsDevDependencies: true,
     skipInstall: options.skipInstall
   };
-  const language = (0, _detect.detectLanguage)();
+  let packageJson;
+
+  try {
+    packageJson = packageManager.readPackageJson();
+  } catch (err) {//
+  }
+
+  const language = (0, _detect.detectLanguage)(packageJson);
   const generatorOptions = {
     language,
     builder: options.builder || (0, _detect.detectBuilder)(packageManager),
@@ -249,7 +256,7 @@ async function initiate(options, pkg) {
         process.exit(1);
       }
     } else {
-      projectType = (0, _detect.detect)(options);
+      projectType = (0, _detect.detect)(packageJson, options);
     }
   } catch (ex) {
     done(ex.message);
@@ -266,7 +273,7 @@ async function initiate(options, pkg) {
   }
 
   await (0, _automigrate.automigrate)({
-    yes: process.env.CI === 'true'
+    yes: options.yes || process.env.CI === 'true'
   });
   logger.log('\nTo run your Storybook, type:\n');
   (0, _helpers.codeLog)([packageManager.getRunStorybookCommand()]);

package/dist/cjs/js-package-manager/JsPackageManager.js

@@ -12,9 +12,11 @@ var _semver = require("@storybook/semver");
 
 var _crossSpawn = require("cross-spawn");
 
-var _helpers = require("../helpers");
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
 
-var _PackageJsonHelper = require("./PackageJsonHelper");
+var _helpers = require("../helpers");
 
 var _versions = _interopRequireDefault(require("../versions"));
 
@@ -42,13 +44,31 @@ function getPackageDetails(pkg) {
 }
 
 class JsPackageManager {
-  constructor() {
-    this.type = void 0;
+  // NOTE: for some reason yarn prefers the npm registry in
+  // local development, so always use npm
+  setRegistryURL(url) {
+    if (url) {
+      this.executeCommand('npm', ['config', 'set', 'registry', url]);
+    } else {
+      this.executeCommand('npm', ['config', 'delete', 'registry']);
+    }
   }
 
+  getRegistryURL() {
+    const url = this.executeCommand('npm', ['config', 'get', 'registry']).trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
+  constructor(options) {
+    this.type = void 0;
+    this.cwd = void 0;
+    this.cwd = options === null || options === void 0 ? void 0 : options.cwd;
+  }
   /**
    * Install dependencies listed in `package.json`
    */
+
+
   installDependencies() {
     let done = (0, _helpers.commandLog)('Preparing to install dependencies');
     done();
@@ -65,6 +85,28 @@ class JsPackageManager {
 
     done();
   }
+
+  packageJsonPath() {
+    return this.cwd ? _path.default.resolve(this.cwd, 'package.json') : _path.default.resolve('package.json');
+  }
+
+  readPackageJson() {
+    const packageJsonPath = this.packageJsonPath();
+
+    if (!_fs.default.existsSync(packageJsonPath)) {
+      throw new Error(`Could not read package.json file at ${packageJsonPath}`);
+    }
+
+    const jsonContent = _fs.default.readFileSync(packageJsonPath, 'utf8');
+
+    return JSON.parse(jsonContent);
+  }
+
+  writePackageJson(packageJson) {
+    const content = `${JSON.stringify(packageJson, null, 2)}\n`;
+
+    _fs.default.writeFileSync(this.packageJsonPath(), content, 'utf8');
+  }
   /**
    * Read the `package.json` file available in the directory the command was call from
    * If there is no `package.json` it will create one.
@@ -75,10 +117,10 @@ class JsPackageManager {
     let packageJson;
 
     try {
-      packageJson = (0, _PackageJsonHelper.readPackageJson)();
+      packageJson = this.readPackageJson();
     } catch (err) {
       this.initPackageJson();
-      packageJson = (0, _PackageJsonHelper.readPackageJson)();
+      packageJson = this.readPackageJson();
     }
 
     return Object.assign({}, packageJson, {
@@ -123,7 +165,7 @@ class JsPackageManager {
         packageJson.dependencies = Object.assign({}, packageJson.dependencies, dependenciesMap);
       }
 
-      (0, _PackageJsonHelper.writePackageJson)(packageJson);
+      this.writePackageJson(packageJson);
     } else {
       try {
         this.runAddDeps(dependencies, options.installAsDevDependencies);
@@ -165,7 +207,7 @@ class JsPackageManager {
           delete packageJson.dependencies[dep];
         }
       });
-      (0, _PackageJsonHelper.writePackageJson)(packageJson);
+      this.writePackageJson(packageJson);
     } else {
       try {
         this.runRemoveDeps(dependencies);
@@ -272,7 +314,7 @@ class JsPackageManager {
     var _packageJson$eslintCo;
 
     const packageJson = this.retrievePackageJson();
-    (0, _PackageJsonHelper.writePackageJson)(Object.assign({}, packageJson, {
+    this.writePackageJson(Object.assign({}, packageJson, {
       eslintConfig: Object.assign({}, packageJson.eslintConfig, {
         overrides: [...(((_packageJson$eslintCo = packageJson.eslintConfig) === null || _packageJson$eslintCo === void 0 ? void 0 : _packageJson$eslintCo.overrides) || []), {
           files: ['**/*.stories.*'],
@@ -286,13 +328,20 @@ class JsPackageManager {
 
   addScripts(scripts) {
     const packageJson = this.retrievePackageJson();
-    (0, _PackageJsonHelper.writePackageJson)(Object.assign({}, packageJson, {
+    this.writePackageJson(Object.assign({}, packageJson, {
       scripts: Object.assign({}, packageJson.scripts, scripts)
     }));
   }
 
+  addPackageResolutions(versions) {
+    const packageJson = this.retrievePackageJson();
+    const resolutions = this.getResolutions(packageJson, versions);
+    this.writePackageJson(Object.assign({}, packageJson, resolutions));
+  }
+
   executeCommand(command, args, stdio) {
     const commandResult = (0, _crossSpawn.sync)(command, args, {
+      cwd: this.cwd,
       stdio: stdio ?? 'pipe',
       encoding: 'utf-8'
     });

package/dist/cjs/js-package-manager/JsPackageManagerFactory.js

@@ -16,21 +16,31 @@ var _Yarn2Proxy = require("./Yarn2Proxy");
 var _Yarn1Proxy = require("./Yarn1Proxy");
 
 class JsPackageManagerFactory {
-  static getPackageManager(forceNpmUsage = false) {
+  static getPackageManager(forceNpmUsage = false, cwd) {
     if (forceNpmUsage) {
-      return new _NPMProxy.NPMProxy();
+      return new _NPMProxy.NPMProxy({
+        cwd
+      });
     }
 
-    const yarnVersion = getYarnVersion();
-    const hasYarnLockFile = (0, _findUp.sync)('yarn.lock');
-    const hasNPMCommand = hasNPM();
+    const yarnVersion = getYarnVersion(cwd);
+    const hasYarnLockFile = (0, _findUp.sync)('yarn.lock', {
+      cwd
+    });
+    const hasNPMCommand = hasNPM(cwd);
 
     if (yarnVersion && (hasYarnLockFile || !hasNPMCommand)) {
-      return yarnVersion === 1 ? new _Yarn1Proxy.Yarn1Proxy() : new _Yarn2Proxy.Yarn2Proxy();
+      return yarnVersion === 1 ? new _Yarn1Proxy.Yarn1Proxy({
+        cwd
+      }) : new _Yarn2Proxy.Yarn2Proxy({
+        cwd
+      });
     }
 
     if (hasNPMCommand) {
-      return new _NPMProxy.NPMProxy();
+      return new _NPMProxy.NPMProxy({
+        cwd
+      });
     }
 
     throw new Error('Unable to find a usable package manager within NPM, Yarn and Yarn 2');
@@ -40,13 +50,17 @@ class JsPackageManagerFactory {
 
 exports.JsPackageManagerFactory = JsPackageManagerFactory;
 
-function hasNPM() {
-  const npmVersionCommand = (0, _crossSpawn.sync)('npm', ['--version']);
+function hasNPM(cwd) {
+  const npmVersionCommand = (0, _crossSpawn.sync)('npm', ['--version'], {
+    cwd
+  });
   return npmVersionCommand.status === 0;
 }
 
-function getYarnVersion() {
-  const yarnVersionCommand = (0, _crossSpawn.sync)('yarn', ['--version']);
+function getYarnVersion(cwd) {
+  const yarnVersionCommand = (0, _crossSpawn.sync)('yarn', ['--version'], {
+    cwd
+  });
 
   if (yarnVersionCommand.status !== 0) {
     return undefined;

package/dist/cjs/js-package-manager/NPMProxy.js

@@ -64,6 +64,12 @@ class NPMProxy extends _JsPackageManager.JsPackageManager {
     return this.uninstallArgs;
   }
 
+  getResolutions(packageJson, versions) {
+    return {
+      overrides: Object.assign({}, packageJson.overrides, versions)
+    };
+  }
+
   runInstall() {
     this.executeCommand('npm', this.getInstallArgs(), 'inherit');
   }

package/dist/cjs/js-package-manager/Yarn1Proxy.js

@@ -25,6 +25,12 @@ class Yarn1Proxy extends _JsPackageManager.JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getResolutions(packageJson, versions) {
+    return {
+      resolutions: Object.assign({}, packageJson.resolutions, versions)
+    };
+  }
+
   runInstall() {
     this.executeCommand('yarn', [], 'inherit');
   }

package/dist/cjs/js-package-manager/Yarn2Proxy.js

@@ -25,6 +25,12 @@ class Yarn2Proxy extends _JsPackageManager.JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getResolutions(packageJson, versions) {
+    return {
+      resolutions: Object.assign({}, packageJson.resolutions, versions)
+    };
+  }
+
   runInstall() {
     this.executeCommand('yarn', [], 'inherit');
   }

package/dist/cjs/js-package-manager/index.js

@@ -41,17 +41,4 @@ Object.keys(_PackageJson).forEach(function (key) {
       return _PackageJson[key];
     }
   });
-});
-
-var _PackageJsonHelper = require("./PackageJsonHelper");
-
-Object.keys(_PackageJsonHelper).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _PackageJsonHelper[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _PackageJsonHelper[key];
-    }
-  });
 });

package/dist/cjs/repro-generators/scripts.js

@@ -138,7 +138,7 @@ const configureYarn2ForE2E = async ({
   cwd
 }) => {
   const command = [// ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
-  `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }'`, // Some required magic to be able to fetch deps from local registry
+  `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6001/" } }'`, // Some required magic to be able to fetch deps from local registry
   `yarn config set unsafeHttpWhitelist --json '["localhost"]'`, // Disable fallback mode to make sure everything is required correctly
   `yarn config set pnpFallbackMode none`, // We need to be able to update lockfile when bootstrapping the examples
   `yarn config set enableImmutableInstalls false`, // Discard all YN0013 - FETCH_NOT_CACHED messages

package/dist/cjs/repro-templates.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = {
+const craTemplates = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
     script: 'npx create-react-app .',
@@ -24,18 +24,53 @@ var _default = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5'
     }
-  } // FIXME: missing documentation.json
-  // 'angular/latest': {
-  //   name: 'Angular (latest)',
-  //   script:
-  //     'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict',
-  //   cadence: ['ci', 'daily', 'weekly'],
-  //   expected: {
-  //     framework: '@storybook/angular',
-  //     renderer: '@storybook/angular',
-  //     builder: '@storybook/builder-webpack5',
-  //   },
-  // },
-
+  }
+};
+const reactViteTemplates = {
+  'react-vite/default-js': {
+    name: 'React Vite (JS)',
+    script: 'yarn create vite . --template react',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/react-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite'
+    }
+  },
+  'react-vite/default-ts': {
+    name: 'React Vite (TS)',
+    script: 'yarn create vite . --template react-ts',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/react-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite'
+    }
+  }
 };
+const vue3ViteTemplates = {
+  'vue3-vite/default-js': {
+    name: 'Vue3 Vite (JS)',
+    script: 'yarn create vite . --template vue',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/vue3-vite',
+      renderer: '@storybook/vue3',
+      builder: '@storybook/builder-vite'
+    }
+  },
+  'vue3-vite/default-ts': {
+    name: 'Vue3 Vite (TS)',
+    script: 'yarn create vite . --template vue-ts',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/vue3-vite',
+      renderer: '@storybook/vue3',
+      builder: '@storybook/builder-vite'
+    }
+  }
+};
+
+var _default = Object.assign({}, craTemplates, reactViteTemplates, vue3ViteTemplates);
+
 exports.default = _default;