@storybook/cli 7.0.0-alpha.2 → 7.0.0-alpha.20

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

@@ -1,57 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
-
 export default class Welcome extends React.Component {
-  styles = {
-    wrapper: {
-      flex: 1,
-      padding: 24,
-      justifyContent: 'center',
-    },
-    header: {
-      fontSize: 18,
-      marginBottom: 18,
-    },
-    content: {
-      fontSize: 12,
-      marginBottom: 10,
-      lineHeight: 18,
-    },
-  };
+  constructor(...args) {
+    super(...args);
+    this.styles = {
+      wrapper: {
+        flex: 1,
+        padding: 24,
+        justifyContent: 'center'
+      },
+      header: {
+        fontSize: 18,
+        marginBottom: 18
+      },
+      content: {
+        fontSize: 12,
+        marginBottom: 10,
+        lineHeight: 18
+      }
+    };
 
-  showApp = (event) => {
-    const { showApp } = this.props;
-    event.preventDefault();
+    this.showApp = event => {
+      const {
+        showApp
+      } = this.props;
+      event.preventDefault();
 
-    if (showApp) {
-      showApp();
-    }
-  };
+      if (showApp) {
+        showApp();
+      }
+    };
+  }
 
   render() {
-    return (
-      <View style={this.styles.wrapper}>
-        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
-        <Text style={this.styles.content}>
-          This is a UI Component development environment for your React Native app. Here you can
-          display and interact with your UI components as stories. A story is a single state of one
-          or more UI components. You can have as many stories as you want. In other words a story is
-          like a visual test case.
-        </Text>
-        <Text style={this.styles.content}>
-          We have added some stories inside the "storybook/stories" directory for examples. Try
-          editing the "storybook/stories/Welcome.js" file to edit this message.
-        </Text>
-      </View>
-    );
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.wrapper
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.header
+    }, "Welcome to React Native Storybook"), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.content
+    }, "This is a UI Component development environment for your React Native app. Here you can display and interact with your UI components as stories. A story is a single state of one or more UI components. You can have as many stories as you want. In other words a story is like a visual test case."), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.content
+    }, "We have added some stories inside the \"storybook/stories\" directory for examples. Try editing the \"storybook/stories/Welcome.js\" file to edit this message."));
   }
-}
 
+}
 Welcome.defaultProps = {
-  showApp: null,
+  showApp: null
 };
-
 Welcome.propTypes = {
-  showApp: PropTypes.func,
-};
+  showApp: PropTypes.func
+};

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

@@ -1,2 +1,2 @@
 import './Button/Button.stories';
-import './Welcome/Welcome.stories';
+import './Welcome/Welcome.stories';

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

@@ -1,47 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-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 }; }
+import path from 'path';
+import fs from 'fs';
+import semver from '@storybook/semver';
+import { baseGenerator } from '../baseGenerator';
+import { CoreBuilder } from '../../project_types';
 
 const generator = async (packageManager, npmOptions, options) => {
-  var _semver$coerce;
-
-  const monorepoRootPath = _path.default.join(__dirname, '..', '..', '..', '..', '..', '..');
-
+  const monorepoRootPath = path.join(__dirname, '..', '..', '..', '..', '..', '..');
   const extraMain = options.linkable ? {
     webpackFinal: `%%(config) => {
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
           p.appSrcs.push('${monorepoRootPath}');
-        }
-      });
-      return config;
-    }
+              }
+            });
+          return config;
+          }
     %%`
   } : {};
-  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 craVersion = semver.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])?.version;
+  const isCra5 = craVersion && semver.gte(craVersion, '5.0.0');
   const updatedOptions = isCra5 ? Object.assign({}, options, {
-    builder: _project_types.CoreBuilder.Webpack5
+    builder: CoreBuilder.Webpack5
   }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
 
   const extraPackages = ['@storybook/node-logger'];
@@ -56,15 +36,14 @@ const generator = async (packageManager, npmOptions, options) => {
 
 
   const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {
+  await baseGenerator(packageManager, npmOptions, updatedOptions, 'react', {
     extraAddons,
     extraPackages,
-    staticDir: _fs.default.existsSync(_path.default.resolve('./public')) ? 'public' : undefined,
+    staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
     addBabel: false,
     addESLint: true,
     extraMain
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,19 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
+  await baseGenerator(packageManager, npmOptions, options, 'riot', {
     extraPackages: ['riot-tag-loader']
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,22 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
-
-var _helpers = require("../../helpers");
+import { baseGenerator } from '../baseGenerator';
+import { copyTemplate } from '../../helpers';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
+  await baseGenerator(packageManager, npmOptions, options, 'server', {
     extensions: ['json']
   });
-  (0, _helpers.copyTemplate)(__dirname);
+  copyTemplate(__dirname);
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

package/dist/esm/generators/SERVER/template-csf/.storybook/preview.js

@@ -1,5 +1,5 @@
 export const parameters = {
   server: {
-    url: 'http://storybook-server-demo.netlify.app/api',
-  },
-};
+    url: 'http://storybook-server-demo.netlify.app/api'
+  }
+};

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

@@ -1,17 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
+  await baseGenerator(packageManager, npmOptions, options, 'vue');
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,36 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _fsExtra = _interopRequireDefault(require("fs-extra"));
-
-var _nodeLogger = require("@storybook/node-logger");
-
-var _baseGenerator = require("../baseGenerator");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import fse from 'fs-extra';
+import { logger } from '@storybook/node-logger';
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  let extraMain;
-  let commonJs = false; // svelte.config.js ?
-
-  if (_fsExtra.default.existsSync('./svelte.config.js')) {
-    _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.js'");
+  let extraMain; // svelte.config.js ?
 
+  if (fse.existsSync('./svelte.config.js')) {
+    logger.info("Configuring preprocessor from 'svelte.config.js'");
     extraMain = {
       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;
+  } else if (fse.existsSync('./svelte.config.cjs')) {
+    logger.info("Configuring preprocessor from 'svelte.config.cjs'");
     extraMain = {
       svelteOptions: {
         preprocess: '%%require("../svelte.config.cjs").preprocess%%'
@@ -41,8 +24,7 @@ const generator = async (packageManager, npmOptions, options) => {
     const packageJson = packageManager.retrievePackageJson();
 
     if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
-      _nodeLogger.logger.info("Configuring preprocessor with 'svelte-preprocess'");
-
+      logger.info("Configuring preprocessor with 'svelte-preprocess'");
       extraMain = {
         svelteOptions: {
           preprocess: '%%require("svelte-preprocess")()%%'
@@ -51,13 +33,12 @@ const generator = async (packageManager, npmOptions, options) => {
     }
   }
 
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
+  await baseGenerator(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
     extraMain,
-    commonJs
+    commonJs: true
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,19 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
+  await baseGenerator(packageManager, npmOptions, options, 'vue', {
     extraPackages: ['vue-loader@^15.7.0']
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,19 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
+  await baseGenerator(packageManager, npmOptions, options, 'vue3', {
     extraPackages: ['vue-loader@^16.0.0']
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

package/dist/esm/generators/WEB-COMPONENTS/index.js

@@ -1,19 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  return (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'web-components', {
+  return baseGenerator(packageManager, npmOptions, options, 'web-components', {
     extraPackages: ['lit-html']
   });
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

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

@@ -1,17 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _baseGenerator = require("../baseGenerator");
+import { baseGenerator } from '../baseGenerator';
 
 const generator = async (packageManager, npmOptions, options) => {
-  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
+  await baseGenerator(packageManager, npmOptions, options, 'react');
 };
 
-var _default = generator;
-exports.default = _default;
+export default generator;

package/dist/esm/generators/baseGenerator.js

@@ -1,30 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.baseGenerator = baseGenerator;
-
-require("core-js/modules/es.promise.js");
-
-var _fsExtra = _interopRequireDefault(require("fs-extra"));
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _project_types = require("../project_types");
-
-var _helpers = require("../helpers");
-
-var _configure = require("./configure");
-
-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 }; }
-
+import fse from 'fs-extra';
+import { dedent } from 'ts-dedent';
+import { CoreBuilder } from '../project_types';
+import { getBabelDependencies, copyComponents } from '../helpers';
+import { configureMain, configurePreview } from './configure';
+import { getPackageDetails } from '../js-package-manager';
+import { generateStorybookBabelConfigInCWD } from '../babel-config';
+import packageVersions from '../versions';
 const defaultOptions = {
   extraPackages: [],
   extraAddons: [],
@@ -34,12 +15,13 @@ const defaultOptions = {
   addBabel: true,
   addESLint: false,
   extraMain: undefined,
+  framework: undefined,
   extensions: undefined,
   commonJs: false
 };
 
 const getBuilderDetails = builder => {
-  const map = _versions.default;
+  const map = packageVersions;
 
   if (map[builder]) {
     return builder;
@@ -63,8 +45,8 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
   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 isKnownFramework = !!packageVersions[frameworkPackage];
+  const isKnownRenderer = !!packageVersions[rendererPackage];
 
   if (renderer === 'angular') {
     return {
@@ -94,14 +76,15 @@ const getFrameworkDetails = (renderer, builder, pnp) => {
   throw new Error(`Could not find the framework (${frameworkPackage}) or renderer (${rendererPackage}) package`);
 };
 
-const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
+const stripVersions = addons => addons.map(addon => getPackageDetails(addon)[0]);
 
 const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
 
-async function baseGenerator(packageManager, npmOptions, {
+export async function baseGenerator(packageManager, npmOptions, {
   language,
-  builder = _project_types.CoreBuilder.Webpack5,
-  pnp
+  builder = CoreBuilder.Webpack5,
+  pnp,
+  commonJs
 }, renderer, options = defaultOptions) {
   const {
     extraAddons: extraAddonPackages,
@@ -114,11 +97,10 @@ async function baseGenerator(packageManager, npmOptions, {
     extraMain,
     extensions
   } = 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', ...stripVersions(extraAddonPackages)]; // added to package.json
 
-  const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-actions', ...extraAddonPackages];
+  const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', ...extraAddonPackages];
 
   if (hasInteractiveStories(renderer)) {
     addons.push('@storybook/addon-interactions');
@@ -126,7 +108,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 files = await fse.readdir(process.cwd());
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies)));
   const {
@@ -134,57 +116,58 @@ async function baseGenerator(packageManager, npmOptions, {
     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)`
+    throw new Error(dedent`
         Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5
 
         https://github.com/storybookjs/storybook/issues/18360
       `);
   }
 
-  const packages = ['sb', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const packages = ['storybook', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has(getPackageDetails(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(packages);
-  await _fsExtra.default.ensureDir('./.storybook');
-  await (0, _configure.configureMain)(Object.assign({
+  await fse.ensureDir('./.storybook');
+  await configureMain(Object.assign({
     framework: {
       name: frameworkInclude,
-      options: {}
+      options: options.framework || {}
     },
     addons: pnp ? addons.map(wrapForPnp) : addons,
     extensions,
-    commonJs: options.commonJs
+    commonJs
   }, extraMain, type !== 'framework' ? {
     core: {
       builder: builderInclude
     }
   } : {}));
-  await (0, _configure.configurePreview)(renderer, options.commonJs);
+  await configurePreview(renderer, options.commonJs);
 
   if (addComponents) {
-    (0, _helpers.copyComponents)(renderer, language);
+    copyComponents(renderer, language);
   } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
 
 
   if (frameworkPackages.includes('@storybook/builder-vite')) {
-    const previewHead = (0, _tsDedent.default)`
+    const previewHead = dedent`
       <script>
         window.global = window;
       </script>
     `;
-    await _fsExtra.default.writeFile(`.storybook/preview-head.html`, previewHead, {
+    await fse.writeFile(`.storybook/preview-head.html`, previewHead, {
       encoding: 'utf8'
     });
   }
 
-  const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
+  const babelDependencies = addBabel ? await getBabelDependencies(packageManager, packageJson) : [];
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
 
   if (isNewFolder) {
-    await (0, _babelConfig.generateStorybookBabelConfigInCWD)();
+    await generateStorybookBabelConfigInCWD();
   }
 
   packageManager.addDependencies(Object.assign({}, npmOptions, {