@storybook/cli 6.4.0-beta.2 → 6.4.0-beta.20

package/dist/esm/automigrate/fixes/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  fixes: true
+};
+exports.fixes = void 0;
+
+var _cra = require("./cra5");
+
+var _webpack = require("./webpack5");
+
+var _angular = require("./angular12");
+
+var _mainjsFramework = require("./mainjsFramework");
+
+var _types = require("../types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework];
+exports.fixes = fixes;

package/dist/esm/automigrate/fixes/mainjsFramework.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mainjsFramework = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+const mainjsFramework = {
+  id: 'mainjsFramework',
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig,
+      framework,
+      version: storybookVersion
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
+
+    if (!storybookCoerced) {
+      logger.warn((0, _tsDedent.default)`
+        ❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('mainjsFramework')} fix.
+        🤔 Are you running automigrate from your project directory?
+      `);
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const currentFramework = main.getFieldValue(['framework']);
+    const features = main.getFieldValue(['features']);
+    if (currentFramework) return null;
+    return features !== null && features !== void 0 && features.breakingChangesV7 || features !== null && features !== void 0 && features.storyStoreV7 || _semver.default.gte(storybookCoerced, '7.0.0') ? {
+      main,
+      framework: `@storybook/${framework}`
+    } : null;
+  },
+
+  prompt({
+    framework
+  }) {
+    const frameworkFormatted = _chalk.default.cyan(`framework: '${framework}'`);
+
+    return (0, _tsDedent.default)`
+      We've detected that your main.js configuration file does not specify the
+      'framework' field, which is a requirement in SB7.0 and above. We can add one
+      for you automatically:
+
+      ${frameworkFormatted}
+
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field')}
+    `;
+  },
+
+  async run({
+    result: {
+      main,
+      framework
+    },
+    dryRun
+  }) {
+    logger.info(`✅ Setting 'framework' to '${framework}' in main.js`);
+
+    if (!dryRun) {
+      main.setFieldValue(['framework'], framework);
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.mainjsFramework = mainjsFramework;

package/dist/esm/automigrate/fixes/webpack5.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webpack5 = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+
+/**
+ * Is the user using webpack5 in their project?
+ *
+ * If the user is using a version of SB >= 6.3,
+ * prompt them to upgrade to webpack5.
+ *
+ * - Add manager-webpack5 builder-webpack5 as dev dependencies
+ * - Add core.builder = 'webpack5' to main.js
+ * - Add 'webpack5' as a project dependency
+ */
+const webpack5 = {
+  id: 'webpack5',
+
+  async checkWebpack5Builder(packageJson) {
+    var _semver$coerce;
+
+    const {
+      mainConfig,
+      version: storybookVersion
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
+
+    if (!storybookCoerced) {
+      logger.warn((0, _tsDedent.default)`
+        ❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('webpack5')} fix.
+        🤔 Are you running automigrate from your project directory?
+      `);
+      return null;
+    }
+
+    if (_semver.default.lt(storybookCoerced, '6.3.0')) {
+      logger.warn((0, _tsDedent.default)`
+          Detected SB 6.3 or below, please upgrade storybook to use webpack5.
+
+          To upgrade to the latest stable release, run this from your project directory:
+
+          ${_chalk.default.cyan('npx sb upgrade')}
+
+          Add the ${_chalk.default.cyan('--prerelease')} flag to get the latest prerelease.
+        `.trim());
+      return null;
+    }
+
+    if (_semver.default.gte(storybookCoerced, '7.0.0')) {
+      return null;
+    }
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+
+    if (builder && builder !== 'webpack4') {
+      logger.info(`Found builder ${builder}, skipping`);
+      return null;
+    }
+
+    return {
+      storybookVersion,
+      main
+    };
+  },
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce2;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      dependencies,
+      devDependencies
+    } = packageJson;
+    const webpackVersion = dependencies.webpack || devDependencies.webpack;
+    const webpackCoerced = (_semver$coerce2 = _semver.default.coerce(webpackVersion)) === null || _semver$coerce2 === void 0 ? void 0 : _semver$coerce2.version;
+    if (!webpackCoerced || _semver.default.lt(webpackCoerced, '5.0.0') || _semver.default.gte(webpackCoerced, '6.0.0')) return null;
+    const builderInfo = await this.checkWebpack5Builder(packageJson);
+    return builderInfo ? Object.assign({
+      webpackVersion
+    }, builderInfo) : null;
+  },
+
+  prompt({
+    webpackVersion,
+    storybookVersion
+  }) {
+    const webpackFormatted = _chalk.default.cyan(`webpack ${webpackVersion}`);
+
+    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
+
+    return (0, _tsDedent.default)`
+      We've detected you're running ${webpackFormatted}.
+      ${sbFormatted} runs webpack4 by default, which may not be compatible.
+      
+      To run Storybook in webpack5-mode, we can install Storybook's ${_chalk.default.cyan('webpack5 builder')} for you.
+
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build')}
+    `;
+  },
+
+  async run({
+    result: {
+      main,
+      storybookVersion,
+      webpackVersion
+    },
+    packageManager,
+    dryRun
+  }) {
+    const deps = [`@storybook/manager-webpack5@${storybookVersion}`, `@storybook/builder-webpack5@${storybookVersion}`]; // this also gets called by 'cra5' fix so we need to add
+    // webpack5 at the project root so that it gets hoisted
+
+    if (!webpackVersion) {
+      deps.push('webpack@5');
+    }
+
+    logger.info(`✅ Adding dependencies: ${deps}`);
+    if (!dryRun) packageManager.addDependencies({
+      installAsDevDependencies: true
+    }, deps);
+    logger.info('✅ Setting `core.builder` to `webpack5` in main.js');
+
+    if (!dryRun) {
+      main.setFieldValue(['core', 'builder'], 'webpack5');
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.webpack5 = webpack5;

package/dist/esm/automigrate/helpers/getStorybookConfiguration.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookConfiguration = getStorybookConfiguration;
+
+/*
+ * Lifted from chromatic-cli
+ *
+ * This is not exactly clever but it works most of the time
+ * we receive the full text of the npm script, and we look if we can find the cli flag
+ */
+function getStorybookConfiguration(storybookScript, shortName, longName) {
+  const parts = storybookScript.split(/[\s='"]+/);
+  let index = parts.indexOf(longName);
+
+  if (index === -1) {
+    index = parts.indexOf(shortName);
+  }
+
+  if (index === -1) {
+    return null;
+  }
+
+  return parts[index + 1];
+}

package/dist/esm/automigrate/helpers/getStorybookInfo.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookInfo = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _getStorybookConfiguration = require("./getStorybookConfiguration");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const viewLayers = {
+  '@storybook/react': 'react',
+  '@storybook/vue': 'vue',
+  '@storybook/vue3': 'vue3',
+  '@storybook/angular': 'angular',
+  '@storybook/html': 'html',
+  '@storybook/web-components': 'web-components',
+  '@storybook/polymer': 'polymer',
+  '@storybook/ember': 'ember',
+  '@storybook/marko': 'marko',
+  '@storybook/mithril': 'mithril',
+  '@storybook/riot': 'riot',
+  '@storybook/svelte': 'svelte',
+  '@storybook/preact': 'preact',
+  '@storybook/rax': 'rax'
+};
+const logger = console;
+
+const findDependency = ({
+  dependencies,
+  devDependencies,
+  peerDependencies
+}, predicate) => [Object.entries(dependencies || {}).find(predicate), Object.entries(devDependencies || {}).find(predicate), Object.entries(peerDependencies || {}).find(predicate)];
+
+const getFrameworkInfo = packageJson => {
+  // Pull the viewlayer from dependencies in package.json
+  const [dep, devDep, peerDep] = findDependency(packageJson, ([key]) => viewLayers[key]);
+  const [pkg, version] = dep || devDep || peerDep || [];
+  const framework = viewLayers[pkg];
+
+  if (dep && devDep && dep[0] === devDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`);
+  }
+
+  if (dep && peerDep && dep[0] === peerDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`);
+  }
+
+  return {
+    framework,
+    version
+  };
+};
+
+const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
+
+const findConfigFile = (prefix, configDir) => {
+  const filePrefix = _path.default.join(configDir, prefix);
+
+  const extension = validConfigExtensions.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
+  return extension ? `${filePrefix}.${extension}` : null;
+};
+
+const getConfigInfo = packageJson => {
+  var _packageJson$scripts;
+
+  let configDir = '.storybook';
+  const storybookScript = (_packageJson$scripts = packageJson.scripts) === null || _packageJson$scripts === void 0 ? void 0 : _packageJson$scripts.storybook;
+
+  if (storybookScript) {
+    const configParam = (0, _getStorybookConfiguration.getStorybookConfiguration)(storybookScript, '-c', '--config-dir');
+    if (configParam) configDir = configParam;
+  }
+
+  return {
+    configDir,
+    mainConfig: findConfigFile('main', configDir),
+    previewConfig: findConfigFile('preview', configDir),
+    managerConfig: findConfigFile('manager', configDir)
+  };
+};
+
+const getStorybookInfo = packageJson => {
+  const frameworkInfo = getFrameworkInfo(packageJson);
+  const configInfo = getConfigInfo(packageJson);
+  return Object.assign({}, frameworkInfo, configInfo);
+};
+
+exports.getStorybookInfo = getStorybookInfo;

package/dist/esm/automigrate/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.automigrate = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _boxen = _interopRequireDefault(require("boxen"));
+
+var _jsPackageManager = require("../js-package-manager");
+
+var _fixes = require("./fixes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-await-in-loop */
+const logger = console;
+
+const automigrate = async ({
+  fixId,
+  dryRun,
+  yes
+}) => {
+  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager();
+
+  const filtered = fixId ? _fixes.fixes.filter(f => f.id === fixId) : _fixes.fixes;
+
+  for (let i = 0; i < filtered.length; i += 1) {
+    const f = _fixes.fixes[i];
+    logger.info(`🔎 checking '${_chalk.default.cyan(f.id)}'`);
+    const result = await f.check({
+      packageManager
+    });
+
+    if (result) {
+      const message = f.prompt(result);
+      logger.info((0, _boxen.default)(message, {
+        borderStyle: 'round',
+        padding: 1,
+        borderColor: '#F1618C'
+      }));
+      const runAnswer = yes || dryRun ? {
+        fix: false
+      } : await (0, _prompts.default)([{
+        type: 'confirm',
+        name: 'fix',
+        message: `Do you want to run the '${_chalk.default.cyan(f.id)}' fix on your project?`
+      }]);
+
+      if (runAnswer.fix) {
+        await f.run({
+          result,
+          packageManager,
+          dryRun
+        });
+        logger.info(`✅ fixed ${_chalk.default.cyan(f.id)}`);
+      } else {
+        logger.info(`Skipping the ${_chalk.default.cyan(f.id)} fix.`);
+        logger.info();
+        logger.info(`If you change your mind, run '${_chalk.default.cyan('npx sb@next fix')}'`);
+      }
+    }
+  }
+};
+
+exports.automigrate = automigrate;

package/dist/esm/automigrate/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/frameworks/web-components/js/Button.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import './button.css';
 
 /**

package/dist/esm/frameworks/web-components/ts/Button.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import './button.css';
 
 export interface ButtonProps {

package/dist/esm/generate.js

@@ -28,6 +28,8 @@ var _repro = require("./repro");
 
 var _link = require("./link");
 
+var _automigrate = require("./automigrate");
+
 var _babelConfig = require("./babel-config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,13 +39,13 @@ const pkg = (0, _readPkgUp.sync)({
 }).packageJson;
 const logger = console;
 
-_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
+_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').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('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
 
 _commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
 
 _commander.default.command('babelrc').description('generate the default storybook babel config into your current working directory').action(() => (0, _babelConfig.generateStorybookBabelConfigInCWD)());
 
-_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version consistency checks').action(options => (0, _upgrade.upgrade)(options));
+_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM 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').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => (0, _upgrade.upgrade)(options));
 
 _commander.default.command('info').description('Prints debugging information about the local environment').action(() => {
   logger.log(_chalk.default.bold('\nEnvironment Info:'));
@@ -114,6 +116,13 @@ _commander.default.command('link <repo-url-or-directory>').description('Pull dow
   process.exit(1);
 }));
 
+_commander.default.command('automigrate [fixId]').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').action((fixId, options) => (0, _automigrate.automigrate)(Object.assign({
+  fixId
+}, options)).catch(e => {
+  logger.error(e);
+  process.exit(1);
+}));
+
 _commander.default.on('command:*', ([invalidCmd]) => {
   logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
 

package/dist/esm/generators/ANGULAR/index.js

@@ -59,7 +59,7 @@ const generator = async (packageManager, npmOptions, options) => {
     extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
     addScripts: false
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
   editAngularAppTsConfig();
   (0, _angularHelpers.editStorybookTsConfig)(_path.default.resolve('./.storybook/tsconfig.json')); // edit scripts to generate docs
 

package/dist/esm/generators/AURELIA/index.js

@@ -36,7 +36,7 @@ const generator = async (packageManager, npmOptions, options) => {
   (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
     extraPackages: ['aurelia']
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/esm/generators/REACT_NATIVE/index.js

@@ -15,7 +15,7 @@ var _helpers = require("../../helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const generator = async (packageManager, npmOptions, installServer, options) => {
+const generator = async (packageManager, npmOptions, installServer) => {
   // set correct project name on entry files if possible
   const dirname = _shelljs.default.ls('-d', 'ios/*.xcodeproj').stdout; // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
 
@@ -50,7 +50,7 @@ const generator = async (packageManager, npmOptions, installServer, options) =>
     });
   }
 
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/index.js

@@ -14,7 +14,7 @@ configure(() => {
   require('./stories');
 }, module);
 
-// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
+// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
 // To find allowed options for getStorybookUI
 const StorybookUIRoot = getStorybookUI({});
 

package/dist/esm/generators/REACT_SCRIPTS/index.js

@@ -11,11 +11,17 @@ var _path = _interopRequireDefault(require("path"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
 var _baseGenerator = require("../baseGenerator");
 
+var _project_types = require("../../project_types");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const generator = async (packageManager, npmOptions, options) => {
+  var _semver$coerce;
+
   const extraMain = options.linkable ? {
     webpackFinal: `%%(config) => {
       const path = require('path');
@@ -29,10 +35,21 @@ const generator = async (packageManager, npmOptions, options) => {
     }
     %%`
   } : {};
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
-    extraAddons: ['@storybook/preset-create-react-app'],
-    // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
-    extraPackages: ['@storybook/node-logger'],
+  const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
+
+  const isCra5 = craVersion && _semver.default.gte(craVersion, '5.0.0');
+
+  const updatedOptions = isCra5 ? Object.assign({}, options, {
+    builder: _project_types.CoreBuilder.Webpack5
+  }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
+
+  const extraPackages = ['@storybook/node-logger'];
+  if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
+
+  const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {
+    extraAddons,
+    extraPackages,
     staticDir: _fs.default.existsSync(_path.default.resolve('./public')) ? 'public' : undefined,
     addBabel: false,
     addESLint: true,

package/dist/esm/generators/SERVER/index.js

@@ -15,7 +15,7 @@ const generator = async (packageManager, npmOptions, options) => {
   (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
     extensions: ['json']
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/esm/generators/baseGenerator.js

@@ -49,6 +49,8 @@ const builderDependencies = builder => {
   }
 };
 
+const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
+
 async function baseGenerator(packageManager, npmOptions, {
   language,
   builder
@@ -74,7 +76,8 @@ async function baseGenerator(packageManager, npmOptions, {
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(packageJson.dependencies));
-  const packages = [`@storybook/${framework}`, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const frameworkPackage = `@storybook/${framework}`;
+  const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
   const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
     core: {
@@ -82,7 +85,8 @@ async function baseGenerator(packageManager, npmOptions, {
     }
   }, extraMain) : extraMain;
   (0, _configure.configure)(framework, Object.assign({
-    addons: [...addons, ...extraAddons],
+    framework: frameworkPackage,
+    addons: [...addons, ...stripVersions(extraAddons)],
     extensions,
     commonJs: options.commonJs
   }, mainOptions));