@storybook/cli 6.5.9 → 7.0.0-alpha.10

package/dist/cjs/frameworks/react/ts/Header.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Header } from './Header';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/dist/cjs/frameworks/react/ts/Page.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { Page } from './Page';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
 
 export const LoggedOut = Template.bind({});
 

package/dist/cjs/frameworks/web-components/ts/Button.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import { Button, ButtonProps } from './Button';
 
 // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
@@ -16,7 +16,7 @@ export default {
 } as Meta;
 
 // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template: Story<Partial<ButtonProps>> = (args) => Button(args);
+const Template: StoryFn<ButtonProps> = (args) => Button(args);
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/web-components/writing-stories/args

package/dist/cjs/frameworks/web-components/ts/Header.stories.ts

@@ -1,11 +1,11 @@
-import { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import { Header, HeaderProps } from './Header';
 
 export default {
   title: 'Example/Header',
 } as Meta;
 
-const Template: Story<Partial<HeaderProps>> = (args) => Header(args);
+const Template: StoryFn<HeaderProps> = (args) => Header(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/dist/cjs/frameworks/web-components/ts/Page.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import { Page, PageProps } from './Page';
 import * as HeaderStories from './Header.stories';
 
@@ -6,7 +6,7 @@ export default {
   title: 'Example/Page',
 } as Meta;
 
-const Template: Story<Partial<PageProps>> = (args) => Page(args);
+const Template: StoryFn<PageProps> = (args) => Page(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/dist/cjs/generate.js

@@ -14,6 +14,8 @@ var _leven = _interopRequireDefault(require("leven"));
 
 var _readPkgUp = require("read-pkg-up");
 
+var _nodeLogger = require("@storybook/node-logger");
+
 var _initiate = require("./initiate");
 
 var _add = require("./add");
@@ -32,19 +34,25 @@ var _automigrate = require("./automigrate");
 
 var _babelConfig = require("./babel-config");
 
+var _dev = require("./dev");
+
+var _build = require("./build");
+
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pkg = (0, _readPkgUp.sync)({
   cwd: __dirname
 }).packageJson;
-const logger = console;
+const consoleLogger = console;
 
 _commander.default.option('--disable-telemetry', 'disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
 process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false');
 
 _commander.default.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
 
-_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('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('--use-pnp', 'Enable pnp mode').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));
 
@@ -53,7 +61,7 @@ _commander.default.command('babelrc').description('generate the default storyboo
 _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:'));
+  consoleLogger.log(_chalk.default.bold('\nEnvironment Info:'));
 
   _envinfo.default.run({
     System: ['OS', 'CPU'],
@@ -61,7 +69,7 @@ _commander.default.command('info').description('Prints debugging information abo
     Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
     npmPackages: '@storybook/*',
     npmGlobalPackages: '@storybook/*'
-  }).then(logger.log);
+  }).then(consoleLogger.log);
 });
 
 _commander.default.command('migrate [migration]').description('Run a Storybook codemod migration on your source files').option('-l --list', 'List available migrations').option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-n --dry-run', 'Dry run: verify the migration exists and show the files to which it will be applied').option('-r --rename <from-to>', 'Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"').action((migration, {
@@ -79,35 +87,40 @@ _commander.default.command('migrate [migration]').description('Run a Storybook c
     list,
     rename,
     parser,
-    logger
+    logger: consoleLogger
   }).catch(err => {
-    logger.error(err);
+    _nodeLogger.logger.error(err);
+
     process.exit(1);
   });
 });
 
 _commander.default.command('extract [location] [output]').description('extract stories.json from a built version').action((location = 'storybook-static', output = _path.default.join(location, 'stories.json')) => (0, _extract.extract)(location, output).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
-_commander.default.command('repro [outputDirectory]').description('Create a reproduction from a set of possible templates').option('-f --framework <framework>', 'Filter on given framework').option('-t --template <template>', 'Use the given template').option('-l --list', 'List available templates').option('-g --generator <generator>', 'Use custom generator command').option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one").option('--e2e', 'Used in e2e context').action((outputDirectory, {
-  framework,
+_commander.default.command('repro [outputDirectory]').description('Create a reproduction from a set of possible templates').option('-f --renderer <renderer>', 'Filter on given renderer').option('-t --template <template>', 'Use the given template').option('-l --list', 'List available templates').option('-g --generator <generator>', 'Use custom generator command').option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one").option('--local', "use storybook's local packages instead of yarn's registry").option('--e2e', 'Used in e2e context').action((outputDirectory, {
+  renderer,
   template,
   list,
   e2e,
   generator,
-  pnp
+  pnp,
+  local
 }) => (0, _repro.repro)({
   outputDirectory,
-  framework,
+  renderer,
   template,
   list,
   e2e,
+  local,
   generator,
   pnp
 }).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
@@ -117,26 +130,69 @@ _commander.default.command('link <repo-url-or-directory>').description('Pull dow
   target,
   local
 }).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   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);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
+_commander.default.command('dev').option('-p, --port <number>', 'Port to run Storybook', str => parseInt(str, 10)).option('-h, --host <string>', 'Host to run Storybook').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--https', 'Serve Storybook over HTTPS. Note: You must provide your own certificate information.').option('--ssl-ca <ca>', 'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)', _utils.parseList).option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)').option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)').option('--smoke-test', 'Exit after successful start').option('--ci', "CI mode (skip interactive prompts, don't open browser)").option('--no-open', 'Do not open Storybook automatically in the browser').option('--loglevel <level>', 'Control level of logging during build').option('--quiet', 'Suppress verbose build output').option('--no-version-updates', 'Suppress update check', true).option('--no-release-notes', 'Suppress automatic redirects to the release notes after upgrading', true).option('--no-manager-cache', 'Do not cache the manager UI').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').action(options => {
+  _nodeLogger.logger.setLevel(_commander.default.loglevel);
+
+  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}`) + _chalk.default.reset('\n')); // The key is the field created in `program` variable for
+  // each command line argument. Value is the env variable.
+
+  (0, _utils.getEnvConfig)(_commander.default, {
+    port: 'SBCONFIG_PORT',
+    host: 'SBCONFIG_HOSTNAME',
+    staticDir: 'SBCONFIG_STATIC_DIR',
+    configDir: 'SBCONFIG_CONFIG_DIR',
+    ci: 'CI'
+  });
+
+  if (typeof _commander.default.port === 'string' && _commander.default.port.length > 0) {
+    _commander.default.port = parseInt(_commander.default.port, 10);
+  }
+
+  (0, _dev.dev)(Object.assign({}, options, {
+    packageJson: pkg
+  }));
+});
+
+_commander.default.command('build').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-o, --output-dir <dir-name>', 'Directory where to store built files').option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--quiet', 'Suppress verbose build output').option('--loglevel <level>', 'Control level of logging during build').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').option('--no-manager-cache', 'Do not cache the manager UI').action(options => {
+  process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+  _nodeLogger.logger.setLevel(_commander.default.loglevel);
+
+  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}\n`)); // The key is the field created in `program` variable for
+  // each command line argument. Value is the env variable.
+
+  (0, _utils.getEnvConfig)(_commander.default, {
+    staticDir: 'SBCONFIG_STATIC_DIR',
+    outputDir: 'SBCONFIG_OUTPUT_DIR',
+    configDir: 'SBCONFIG_CONFIG_DIR'
+  });
+  (0, _build.build)(Object.assign({}, options, {
+    packageJson: pkg
+  }));
+});
+
 _commander.default.on('command:*', ([invalidCmd]) => {
-  logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
+  consoleLogger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
 
   const availableCommands = _commander.default.commands.map(cmd => cmd._name);
 
   const suggestion = availableCommands.find(cmd => (0, _leven.default)(cmd, invalidCmd) < 3);
 
   if (suggestion) {
-    logger.log(`\n Did you mean ${suggestion}?`);
+    consoleLogger.info(`\n Did you mean ${suggestion}?`);
   }
 
   process.exit(1);

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

@@ -57,7 +57,30 @@ const generator = async (packageManager, npmOptions, options) => {
     addScripts: false
   });
   (0, _helpers.copyTemplate)(__dirname);
-  editAngularAppTsConfig();
+  editAngularAppTsConfig(); // TODO: we need to add the following:
+
+  /*
+  "storybook": {
+    "builder": "@storybook/angular:start-storybook",
+    "options": {
+      "browserTarget": "angular-cli:build",
+      "port": 4400
+    }
+  },
+  "build-storybook": {
+    "builder": "@storybook/angular:build-storybook",
+    "options": {
+      "browserTarget": "angular-cli:build"
+    }
+  }
+  */
+  // to the user's angular.json file. see: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78
+  // then we want to add these scripts to package.json
+  // packageManager.addScripts({
+  //   storybook: 'ng storybook',
+  //   'build-storybook': 'ng build-storybook',
+  // });
+
   (0, _angularHelpers.editStorybookTsConfig)(_path.default.resolve('./.storybook/tsconfig.json')); // edit scripts to generate docs
 
   const tsConfigFile = await (0, _angularHelpers.getBaseTsConfigName)();

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

@@ -37,7 +37,7 @@ const generator = async (packageManager, npmOptions, installServer) => {
   const webAddonsV5 = ['@storybook/addon-links@^5.3', '@storybook/addon-knobs@^5.3', '@storybook/addon-actions@^5.3'];
   const nativeAddons = ['@storybook/addon-ondevice-knobs', '@storybook/addon-ondevice-actions'];
   const packagesToResolve = [...nativeAddons, '@storybook/react-native', installServer && '@storybook/react-native-server'].filter(Boolean);
-  const resolvedPackages = await packageManager.getVersionedPackages(...packagesToResolve);
+  const resolvedPackages = await packageManager.getVersionedPackages(packagesToResolve);
   const babelDependencies = await (0, _helpers.getBabelDependencies)(packageManager, packageJson);
   const packages = [...babelDependencies, ...resolvedPackages, ...webAddonsV5, missingReactDom && reactVersion && `react-dom@${reactVersion}`].filter(Boolean);
   packageManager.addDependencies(Object.assign({}, npmOptions, {

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

@@ -22,17 +22,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const generator = async (packageManager, npmOptions, options) => {
   var _semver$coerce;
 
+  const monorepoRootPath = _path.default.join(__dirname, '..', '..', '..', '..', '..', '..');
+
   const extraMain = options.linkable ? {
     webpackFinal: `%%(config) => {
-      const path = require('path');
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
-          p.appSrcs.push(path.join(__dirname, '..', '..', '..', 'storybook'));
-        }
-      });
-      return config;
-    }
+          p.appSrcs.push('${monorepoRootPath}');
+              }
+            });
+          return config;
+          }
     %%`
   } : {};
   const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;

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

@@ -16,25 +16,21 @@ var _baseGenerator = require("../baseGenerator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const generator = async (packageManager, npmOptions, options) => {
-  let extraMain;
+  let svelteOptions;
   let commonJs = false; // svelte.config.js ?
 
   if (_fsExtra.default.existsSync('./svelte.config.js')) {
     _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.js'");
 
-    extraMain = {
-      svelteOptions: {
-        preprocess: '%%require("../svelte.config.js").preprocess%%'
-      }
+    svelteOptions = {
+      preprocess: '%%require("../svelte.config.js").preprocess%%'
     };
   } else if (_fsExtra.default.existsSync('./svelte.config.cjs')) {
     _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.cjs'");
 
     commonJs = true;
-    extraMain = {
-      svelteOptions: {
-        preprocess: '%%require("../svelte.config.cjs").preprocess%%'
-      }
+    svelteOptions = {
+      preprocess: '%%require("../svelte.config.cjs").preprocess%%'
     };
   } else {
     // svelte-preprocess dependencies ?
@@ -43,10 +39,8 @@ const generator = async (packageManager, npmOptions, options) => {
     if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
       _nodeLogger.logger.info("Configuring preprocessor with 'svelte-preprocess'");
 
-      extraMain = {
-        svelteOptions: {
-          preprocess: '%%require("svelte-preprocess")()%%'
-        }
+      svelteOptions = {
+        preprocess: '%%require("svelte-preprocess")()%%'
       };
     }
   }
@@ -54,7 +48,7 @@ const generator = async (packageManager, npmOptions, options) => {
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
-    extraMain,
+    framework: svelteOptions,
     commonJs
   });
 };

package/dist/cjs/generators/baseGenerator.js

@@ -11,8 +11,6 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
-var _coreCommon = require("@storybook/core-common");
-
 var _project_types = require("../project_types");
 
 var _helpers = require("../helpers");
@@ -23,6 +21,8 @@ var _jsPackageManager = require("../js-package-manager");
 
 var _babelConfig = require("../babel-config");
 
+var _versions = _interopRequireDefault(require("../versions"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultOptions = {
@@ -34,24 +34,65 @@ const defaultOptions = {
   addBabel: true,
   addESLint: false,
   extraMain: undefined,
+  framework: undefined,
   extensions: undefined,
   commonJs: false
 };
 
-const builderDependencies = builder => {
-  switch (builder) {
-    case _project_types.CoreBuilder.Webpack4:
-      return ['@storybook/builder-webpack4', '@storybook/manager-webpack4'];
+const getBuilderDetails = builder => {
+  const map = _versions.default;
 
-    case _project_types.CoreBuilder.Webpack5:
-      return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+  if (map[builder]) {
+    return builder;
+  }
 
-    case _project_types.CoreBuilder.Vite:
-      return ['@storybook/builder-vite'];
+  const builderPackage = `@storybook/${builder}`;
 
-    default:
-      return [builder];
+  if (map[builderPackage]) {
+    return builderPackage;
   }
+
+  return builder;
+};
+
+const wrapForPnp = packageName => `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%`;
+
+const getFrameworkDetails = (renderer, builder, pnp) => {
+  const frameworkPackage = `@storybook/${renderer}-${builder}`;
+  const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage;
+  const rendererPackage = `@storybook/${renderer}`;
+  const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage;
+  const builderPackage = getBuilderDetails(builder);
+  const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage;
+  const isKnownFramework = !!_versions.default[frameworkPackage];
+  const isKnownRenderer = !!_versions.default[rendererPackage];
+
+  if (renderer === 'angular') {
+    return {
+      packages: [rendererPackage],
+      framework: rendererPackagePath,
+      type: 'framework'
+    };
+  }
+
+  if (isKnownFramework) {
+    return {
+      packages: [frameworkPackage],
+      framework: frameworkPackagePath,
+      type: 'framework'
+    };
+  }
+
+  if (isKnownRenderer) {
+    return {
+      packages: [rendererPackage, builderPackage],
+      builder: builderPackagePath,
+      renderer: rendererPackagePath,
+      type: 'renderer'
+    };
+  }
+
+  throw new Error(`Could not find the framework (${frameworkPackage}) or renderer (${rendererPackage}) package`);
 };
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
@@ -60,10 +101,11 @@ const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelt
 
 async function baseGenerator(packageManager, npmOptions, {
   language,
-  builder
-}, framework, options = defaultOptions) {
+  builder = _project_types.CoreBuilder.Webpack5,
+  pnp
+}, renderer, options = defaultOptions) {
   const {
-    extraAddons,
+    extraAddons: extraAddonPackages,
     extraPackages,
     staticDir,
     addScripts,
@@ -75,50 +117,61 @@ async function baseGenerator(packageManager, npmOptions, {
   } = Object.assign({}, defaultOptions, options); // added to main.js
   // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
 
-  const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
+  const addons = ['@storybook/addon-links', '@storybook/addon-essentials', ...stripVersions(extraAddonPackages)]; // added to package.json
 
-  const addonPackages = [...addons, '@storybook/addon-actions'];
+  const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-actions', ...extraAddonPackages];
 
-  if (hasInteractiveStories(framework)) {
+  if (hasInteractiveStories(renderer)) {
     addons.push('@storybook/addon-interactions');
     addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
   }
 
-  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
+  const yarn2ExtraPackages = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
-  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 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 coreBuilders = [_project_types.CoreBuilder.Webpack4, _project_types.CoreBuilder.Webpack5, _project_types.CoreBuilder.Vite];
-  const expandedBuilder = coreBuilders.includes(builder) ? `@storybook/builder-${builder}` : builder;
-  const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
-    core: {
-      builder: expandedBuilder
-    }
-  }, extraMain) : extraMain; // Default vite builder to storyStoreV7
-
-  if (expandedBuilder === '@storybook/builder-vite') {
-    mainOptions.features = Object.assign({}, mainOptions.features, {
-      storyStoreV7: true
-    });
+  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
+
+  if (type === 'renderer') {
+    throw new Error((0, _tsDedent.default)`
+        Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5
+
+        https://github.com/storybookjs/storybook/issues/18360
+      `);
   }
 
-  (0, _configure.configure)(framework, Object.assign({
-    framework: frameworkPackage,
-    addons: [...addons, ...stripVersions(extraAddons)],
+  const packages = ['storybook', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const versionedPackages = await packageManager.getVersionedPackages(packages);
+  await _fsExtra.default.ensureDir('./.storybook');
+  await (0, _configure.configureMain)(Object.assign({
+    framework: {
+      name: frameworkInclude,
+      options: options.framework || {}
+    },
+    addons: pnp ? addons.map(wrapForPnp) : addons,
     extensions,
     commonJs: options.commonJs
-  }, mainOptions));
+  }, extraMain, type !== 'framework' ? {
+    core: {
+      builder: builderInclude
+    }
+  } : {}));
+  await (0, _configure.configurePreview)(renderer, options.commonJs);
 
   if (addComponents) {
-    (0, _helpers.copyComponents)(framework, language);
+    (0, _helpers.copyComponents)(renderer, language);
   } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
 
 
-  if (expandedBuilder === '@storybook/builder-vite') {
+  if (frameworkPackages.includes('@storybook/builder-vite')) {
     const previewHead = (0, _tsDedent.default)`
       <script>
         window.global = window;
@@ -130,9 +183,9 @@ async function baseGenerator(packageManager, npmOptions, {
   }
 
   const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
+  const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
 
   if (isNewFolder) {
-    babelDependencies.push(...(0, _coreCommon.getStorybookBabelDependencies)());
     await (0, _babelConfig.generateStorybookBabelConfigInCWD)();
   }