@storybook/cli 7.0.0-alpha.0 → 7.0.0-alpha.3

package/dist/cjs/versions.js

@@ -6,76 +6,78 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '7.0.0-alpha.0',
-  '@storybook/addon-actions': '7.0.0-alpha.0',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.0',
-  '@storybook/addon-controls': '7.0.0-alpha.0',
-  '@storybook/addon-docs': '7.0.0-alpha.0',
-  '@storybook/addon-essentials': '7.0.0-alpha.0',
-  '@storybook/addon-interactions': '7.0.0-alpha.0',
-  '@storybook/addon-jest': '7.0.0-alpha.0',
-  '@storybook/addon-links': '7.0.0-alpha.0',
-  '@storybook/addon-measure': '7.0.0-alpha.0',
-  '@storybook/addon-outline': '7.0.0-alpha.0',
-  '@storybook/addon-storyshots': '7.0.0-alpha.0',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.0',
-  '@storybook/addon-storysource': '7.0.0-alpha.0',
-  '@storybook/addon-toolbars': '7.0.0-alpha.0',
-  '@storybook/addon-viewport': '7.0.0-alpha.0',
-  '@storybook/addons': '7.0.0-alpha.0',
-  '@storybook/angular': '7.0.0-alpha.0',
-  '@storybook/api': '7.0.0-alpha.0',
-  '@storybook/builder-webpack5': '7.0.0-alpha.0',
-  '@storybook/channel-postmessage': '7.0.0-alpha.0',
-  '@storybook/channel-websocket': '7.0.0-alpha.0',
-  '@storybook/channels': '7.0.0-alpha.0',
-  '@storybook/cli': '7.0.0-alpha.0',
-  '@storybook/client-api': '7.0.0-alpha.0',
-  '@storybook/client-logger': '7.0.0-alpha.0',
-  '@storybook/codemod': '7.0.0-alpha.0',
-  '@storybook/components': '7.0.0-alpha.0',
-  '@storybook/core-client': '7.0.0-alpha.0',
-  '@storybook/core-common': '7.0.0-alpha.0',
-  '@storybook/core-events': '7.0.0-alpha.0',
-  '@storybook/core-server': '7.0.0-alpha.0',
-  '@storybook/core-webpack': '7.0.0-alpha.0',
-  '@storybook/csf-tools': '7.0.0-alpha.0',
-  '@storybook/docs-tools': '7.0.0-alpha.0',
-  '@storybook/ember': '7.0.0-alpha.0',
-  '@storybook/html': '7.0.0-alpha.0',
-  '@storybook/html-webpack5': '7.0.0-alpha.0',
-  '@storybook/instrumenter': '7.0.0-alpha.0',
-  '@storybook/manager-webpack5': '7.0.0-alpha.0',
-  '@storybook/node-logger': '7.0.0-alpha.0',
-  '@storybook/postinstall': '7.0.0-alpha.0',
-  '@storybook/preact': '7.0.0-alpha.0',
-  '@storybook/preact-webpack5': '7.0.0-alpha.0',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.0',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.0',
-  '@storybook/preview-web': '7.0.0-alpha.0',
-  '@storybook/react': '7.0.0-alpha.0',
-  '@storybook/react-webpack5': '7.0.0-alpha.0',
-  '@storybook/router': '7.0.0-alpha.0',
-  '@storybook/server': '7.0.0-alpha.0',
-  '@storybook/server-webpack5': '7.0.0-alpha.0',
-  '@storybook/source-loader': '7.0.0-alpha.0',
-  '@storybook/store': '7.0.0-alpha.0',
-  '@storybook/svelte': '7.0.0-alpha.0',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.0',
-  '@storybook/telemetry': '7.0.0-alpha.0',
-  '@storybook/theming': '7.0.0-alpha.0',
-  '@storybook/ui': '7.0.0-alpha.0',
-  '@storybook/vue': '7.0.0-alpha.0',
-  '@storybook/vue-webpack5': '7.0.0-alpha.0',
-  '@storybook/vue3': '7.0.0-alpha.0',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.0',
-  '@storybook/web-components': '7.0.0-alpha.0',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.0'
+  '@storybook/addon-a11y': '7.0.0-alpha.3',
+  '@storybook/addon-actions': '7.0.0-alpha.3',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.3',
+  '@storybook/addon-controls': '7.0.0-alpha.3',
+  '@storybook/addon-docs': '7.0.0-alpha.3',
+  '@storybook/addon-essentials': '7.0.0-alpha.3',
+  '@storybook/addon-interactions': '7.0.0-alpha.3',
+  '@storybook/addon-jest': '7.0.0-alpha.3',
+  '@storybook/addon-links': '7.0.0-alpha.3',
+  '@storybook/addon-measure': '7.0.0-alpha.3',
+  '@storybook/addon-outline': '7.0.0-alpha.3',
+  '@storybook/addon-storyshots': '7.0.0-alpha.3',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.3',
+  '@storybook/addon-storysource': '7.0.0-alpha.3',
+  '@storybook/addon-toolbars': '7.0.0-alpha.3',
+  '@storybook/addon-viewport': '7.0.0-alpha.3',
+  '@storybook/addons': '7.0.0-alpha.3',
+  '@storybook/angular': '7.0.0-alpha.3',
+  '@storybook/api': '7.0.0-alpha.3',
+  '@storybook/builder-webpack5': '7.0.0-alpha.3',
+  '@storybook/channel-postmessage': '7.0.0-alpha.3',
+  '@storybook/channel-websocket': '7.0.0-alpha.3',
+  '@storybook/channels': '7.0.0-alpha.3',
+  '@storybook/cli': '7.0.0-alpha.3',
+  '@storybook/client-api': '7.0.0-alpha.3',
+  '@storybook/client-logger': '7.0.0-alpha.3',
+  '@storybook/codemod': '7.0.0-alpha.3',
+  '@storybook/components': '7.0.0-alpha.3',
+  '@storybook/core-client': '7.0.0-alpha.3',
+  '@storybook/core-common': '7.0.0-alpha.3',
+  '@storybook/core-events': '7.0.0-alpha.3',
+  '@storybook/core-server': '7.0.0-alpha.3',
+  '@storybook/core-webpack': '7.0.0-alpha.3',
+  '@storybook/csf-tools': '7.0.0-alpha.3',
+  '@storybook/docs-tools': '7.0.0-alpha.3',
+  '@storybook/ember': '7.0.0-alpha.3',
+  '@storybook/html': '7.0.0-alpha.3',
+  '@storybook/html-webpack5': '7.0.0-alpha.3',
+  '@storybook/instrumenter': '7.0.0-alpha.3',
+  '@storybook/manager-webpack5': '7.0.0-alpha.3',
+  '@storybook/node-logger': '7.0.0-alpha.3',
+  '@storybook/postinstall': '7.0.0-alpha.3',
+  '@storybook/preact': '7.0.0-alpha.3',
+  '@storybook/preact-webpack5': '7.0.0-alpha.3',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.3',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.3',
+  '@storybook/preview-web': '7.0.0-alpha.3',
+  '@storybook/react': '7.0.0-alpha.3',
+  '@storybook/react-webpack5': '7.0.0-alpha.3',
+  '@storybook/router': '7.0.0-alpha.3',
+  '@storybook/server': '7.0.0-alpha.3',
+  '@storybook/server-webpack5': '7.0.0-alpha.3',
+  '@storybook/source-loader': '7.0.0-alpha.3',
+  '@storybook/store': '7.0.0-alpha.3',
+  '@storybook/svelte': '7.0.0-alpha.3',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.3',
+  '@storybook/telemetry': '7.0.0-alpha.3',
+  '@storybook/theming': '7.0.0-alpha.3',
+  '@storybook/ui': '7.0.0-alpha.3',
+  '@storybook/vue': '7.0.0-alpha.3',
+  '@storybook/vue-webpack5': '7.0.0-alpha.3',
+  '@storybook/vue3': '7.0.0-alpha.3',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.3',
+  '@storybook/web-components': '7.0.0-alpha.3',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.3',
+  sb: '7.0.0-alpha.3',
+  storybook: '7.0.0-alpha.3'
 };
 exports.default = _default;

package/dist/esm/automigrate/index.js

@@ -34,9 +34,15 @@ const automigrate = async ({
 
   for (let i = 0; i < filtered.length; i += 1) {
     const f = _fixes.fixes[i];
-    const result = await f.check({
-      packageManager
-    });
+    let result;
+
+    try {
+      result = await f.check({
+        packageManager
+      });
+    } catch (e) {
+      logger.info(`failed to check fix: ${f.id}`);
+    }
 
     if (result) {
       logger.info(`🔎 found a '${_chalk.default.cyan(f.id)}' migration:`);

package/dist/esm/babel-config.js

@@ -11,8 +11,6 @@ var _fsExtra = require("fs-extra");
 
 var _nodeLogger = require("@storybook/node-logger");
 
-var _coreCommon = require("@storybook/core-common");
-
 var _path = _interopRequireDefault(require("path"));
 
 var _prompts = _interopRequireDefault(require("prompts"));
@@ -33,8 +31,11 @@ const generateStorybookBabelConfig = async ({
 }) => {
   _nodeLogger.logger.info(`Generating the storybook default babel config at ${target}`);
 
-  const config = (0, _coreCommon.getStorybookBabelConfig)();
-  const contents = JSON.stringify(config, null, 2);
+  const contents = JSON.stringify({
+    sourceType: 'unambiguous',
+    presets: [],
+    plugins: []
+  }, null, 2);
   const fileName = '.babelrc.json';
 
   const location = _path.default.join(target, fileName);

package/dist/esm/frameworks/angular/Button.stories.ts

@@ -13,9 +13,11 @@ export default {
 } as Meta;
 
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: Story<Button> = (args: Button) => ({
-  props: args,
-});
+const Template: Story<Button> = (args: Button) => {
+  return {
+    props: { backgroundColor: null, ...args },
+  };
+};
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/angular/writing-stories/args

package/dist/esm/generate.js

@@ -52,7 +52,7 @@ process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMET
 
 _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));
 

package/dist/esm/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/esm/generators/baseGenerator.js

@@ -54,33 +54,39 @@ const getBuilderDetails = builder => {
   return builder;
 };
 
-const getFrameworkDetails = (renderer, 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];
-  const builderPackage = getBuilderDetails(builder);
 
   if (renderer === 'angular') {
     return {
-      package: rendererPackage,
-      builder: builderPackage,
+      packages: [rendererPackage],
+      framework: rendererPackagePath,
       type: 'framework'
     };
   }
 
   if (isKnownFramework) {
     return {
-      package: frameworkPackage,
-      builder: builderPackage,
+      packages: [frameworkPackage],
+      framework: frameworkPackagePath,
       type: 'framework'
     };
   }
 
   if (isKnownRenderer) {
     return {
-      package: rendererPackage,
-      builder: builderPackage,
+      packages: [rendererPackage, builderPackage],
+      builder: builderPackagePath,
+      renderer: rendererPackagePath,
       type: 'renderer'
     };
   }
@@ -94,7 +100,8 @@ const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelt
 
 async function baseGenerator(packageManager, npmOptions, {
   language,
-  builder = _project_types.CoreBuilder.Webpack5
+  builder = _project_types.CoreBuilder.Webpack5,
+  pnp
 }, renderer, options = defaultOptions) {
   const {
     extraAddons: extraAddonPackages,
@@ -109,9 +116,9 @@ 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(renderer)) {
     addons.push('@storybook/addon-interactions');
@@ -123,20 +130,15 @@ async function baseGenerator(packageManager, npmOptions, {
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies)));
   const {
-    package: frameworkPackage,
+    packages: frameworkPackages,
     type,
-    builder: builderPackage
-  } = getFrameworkDetails(renderer, builder); // temp
+    // @ts-ignore
+    renderer: rendererInclude,
+    framework: frameworkInclude,
+    builder: builderInclude
+  } = getFrameworkDetails(renderer, builder, pnp); // TODO: We need to start supporting this at some point
 
   if (type === 'renderer') {
-    console.log({
-      language,
-      builder,
-      renderer,
-      builderPackage,
-      frameworkPackage,
-      type
-    });
     throw new Error((0, _tsDedent.default)`
         Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5
 
@@ -144,32 +146,30 @@ async function baseGenerator(packageManager, npmOptions, {
       `);
   }
 
-  const packages = ['sb', frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddonPackages, ...yarn2ExtraPackages, ...(type === 'framework' ? [] : [builderPackage])].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const packages = ['storybook', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(packages);
-  console.log({
-    versionedPackages
-  });
-  const mainOptions = type !== 'framework' ? Object.assign({
-    core: {
-      builder: builderPackage
-    }
-  }, extraMain) : extraMain;
-  (0, _configure.configure)(renderer, Object.assign({
+  await _fsExtra.default.ensureDir('./.storybook');
+  await (0, _configure.configureMain)(Object.assign({
     framework: {
-      name: frameworkPackage,
+      name: frameworkInclude,
       options: {}
     },
-    addons: [...addons, ...stripVersions(extraAddonPackages)],
+    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)(renderer, language);
   } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
 
 
-  if (builderPackage === '@storybook/builder-vite') {
+  if (frameworkPackages.includes('@storybook/builder-vite')) {
     const previewHead = (0, _tsDedent.default)`
       <script>
         window.global = window;

package/dist/esm/generators/configure.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.configure = configure;
+exports.configureMain = configureMain;
+exports.configurePreview = configurePreview;
+
+require("core-js/modules/es.promise.js");
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
@@ -15,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function configureMain(_ref) {
+async function configureMain(_ref) {
   let {
     addons,
     extensions = ['js', 'jsx', 'ts', 'tsx'],
@@ -23,17 +26,20 @@ function configureMain(_ref) {
   } = _ref,
       custom = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
+  const prefix = (await _fsExtra.default.pathExists('./src')) ? '../src' : '../stories';
   const config = Object.assign({
     stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
     addons
   }, custom); // replace escaped values and delimiters
 
-  const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/, '').replace(/\\n/g, '\r\n')}`;
-
-  _fsExtra.default.ensureDirSync('./.storybook');
+  const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/g, '').replace(/\\n/g, '\r\n')}`; // main.js isn't actually JSON, but we used JSON.stringify to convert the runtime-object into code.
+  // un-stringify the value for referencing packages by string
+  // .replaceAll(/"(path\.dirname\(require\.resolve\(path\.join\('.*\))"/g, (_, a) => a)}`;
 
-  _fsExtra.default.writeFileSync(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, stringified, {
+  await _fsExtra.default.writeFile(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, (0, _tsDedent.default)`
+      const path = require('path');
+      ${stringified}
+    `, {
     encoding: 'utf8'
   });
 }
@@ -50,14 +56,14 @@ const frameworkToPreviewParts = {
   }
 };
 
-function configurePreview(framework, commonJs) {
+async function configurePreview(framework, commonJs) {
   const {
     prefix = '',
     extraParameters = ''
   } = frameworkToPreviewParts[framework] || {};
   const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; // If the framework template included a preview then we have nothing to do
 
-  if (_fsExtra.default.existsSync(previewPath)) {
+  if (await _fsExtra.default.pathExists(previewPath)) {
     return;
   }
 
@@ -73,15 +79,7 @@ function configurePreview(framework, commonJs) {
       },
       ${extraParameters}
     }`.replace('  \n', '').trim();
-
-  _fsExtra.default.writeFileSync(previewPath, preview, {
+  await _fsExtra.default.writeFile(previewPath, preview, {
     encoding: 'utf8'
   });
-}
-
-function configure(framework, mainOptions) {
-  _fsExtra.default.ensureDirSync('./.storybook');
-
-  configureMain(mainOptions);
-  configurePreview(framework, mainOptions.commonJs);
 }

package/dist/esm/generators/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/helpers.js

@@ -189,51 +189,49 @@ function copyTemplate(templateRoot) {
   });
 }
 
-function copyComponents(framework, language) {
+async function copyComponents(framework, language) {
   const languageFolderMapping = {
     javascript: 'js',
     typescript: 'ts'
   };
 
-  const componentsPath = () => {
+  const componentsPath = async () => {
     const frameworkPath = `frameworks/${framework}`;
 
     const languageSpecific = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping[language]}`);
 
-    if (_fsExtra.default.existsSync(languageSpecific)) {
+    if (await _fsExtra.default.pathExists(languageSpecific)) {
       return languageSpecific;
     }
 
     const jsFallback = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping.javascript}`);
 
-    if (_fsExtra.default.existsSync(jsFallback)) {
+    if (await _fsExtra.default.pathExists(jsFallback)) {
       return jsFallback;
     }
 
     const frameworkRootPath = _path.default.resolve(__dirname, frameworkPath);
 
-    if (_fsExtra.default.existsSync(frameworkRootPath)) {
+    if (await _fsExtra.default.pathExists(frameworkRootPath)) {
       return frameworkRootPath;
     }
 
     throw new Error(`Unsupported framework: ${framework}`);
   };
 
-  const targetPath = () => {
-    if (_fsExtra.default.existsSync('./src')) {
+  const targetPath = async () => {
+    if (await _fsExtra.default.pathExists('./src')) {
       return './src/stories';
     }
 
     return './stories';
   };
 
-  const destinationPath = targetPath();
-
-  _fsExtra.default.copySync(componentsPath(), destinationPath, {
+  const destinationPath = await targetPath();
+  await _fsExtra.default.copy(await componentsPath(), destinationPath, {
     overwrite: true
   });
-
-  _fsExtra.default.copySync(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
+  await _fsExtra.default.copy(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
     overwrite: true
   });
 }

package/dist/esm/initiate.js

@@ -81,7 +81,8 @@ const installStorybook = (projectType, packageManager, options) => {
     language,
     builder: options.builder || (0, _detect.detectBuilder)(packageManager),
     linkable: !!options.linkable,
-    commonJs: options.commonJs
+    commonJs: options.commonJs,
+    pnp: options.usePnp
   };
 
   const runGenerator = async () => {

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

@@ -176,7 +176,7 @@ class JsPackageManager {
   async getVersion(packageName, constraint) {
     let current;
 
-    if (/@storybook/.test(packageName)) {
+    if (/(@storybook|^sb$|^storybook$)/.test(packageName)) {
       // @ts-ignore
       current = _versions.default[packageName];
     }
@@ -221,8 +221,8 @@ class JsPackageManager {
     var _options$port;
 
     const sbPort = (_options$port = options === null || options === void 0 ? void 0 : options.port) !== null && _options$port !== void 0 ? _options$port : 6006;
-    const storybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx sb dev -p ${sbPort} -s ${options.staticFolder}` : `npx sb dev -p ${sbPort}`;
-    const buildStorybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx sb build -s ${options.staticFolder}` : `npx sb build`;
+    const storybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx storybook dev -p ${sbPort} -s ${options.staticFolder}` : `npx storybook dev -p ${sbPort}`;
+    const buildStorybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx storybook build -s ${options.staticFolder}` : `npx storybook build`;
     const preCommand = options !== null && options !== void 0 && options.preCommand ? this.getRunCommand(options.preCommand) : undefined;
     this.addScripts({
       storybook: [preCommand, storybookCmd].filter(Boolean).join(' && '),