@storybook/cli 7.0.0-alpha.8 → 7.0.0-beta.0

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.0",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -22,13 +22,6 @@
   },
   "license": "MIT",
   "author": "Storybook Team",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "bin": {
     "getstorybook": "./bin/index.js",
     "sb": "./bin/index.js"
@@ -36,60 +29,74 @@
   "files": [
     "bin/**/*",
     "dist/**/*",
+    "rendererAssets/**/*",
+    "templates/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js",
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts",
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.8",
-    "@storybook/core-common": "7.0.0-alpha.8",
-    "@storybook/core-server": "7.0.0-alpha.8",
-    "@storybook/csf-tools": "7.0.0-alpha.8",
-    "@storybook/node-logger": "7.0.0-alpha.8",
-    "@storybook/semver": "^7.3.2",
-    "@storybook/telemetry": "7.0.0-alpha.8",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/codemod": "7.0.0-beta.0",
+    "@storybook/core-common": "7.0.0-beta.0",
+    "@storybook/core-server": "7.0.0-beta.0",
+    "@storybook/csf-tools": "7.0.0-beta.0",
+    "@storybook/node-logger": "7.0.0-beta.0",
+    "@storybook/telemetry": "7.0.0-beta.0",
+    "@storybook/types": "7.0.0-beta.0",
+    "@types/semver": "^7.3.4",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
-    "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
+    "detect-indent": "^6.1.0",
     "envinfo": "^7.7.3",
     "execa": "^5.0.0",
     "express": "^4.17.1",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",
+    "giget": "^1.0.0",
     "globby": "^11.0.2",
     "jscodeshift": "^0.13.1",
-    "json5": "^2.1.3",
     "leven": "^3.1.0",
     "prompts": "^2.4.0",
     "puppeteer-core": "^2.1.1",
     "read-pkg-up": "^7.0.1",
+    "semver": "^7.3.7",
     "shelljs": "^0.8.5",
     "strip-json-comments": "^3.0.1",
     "ts-dedent": "^2.0.0",
-    "update-notifier": "^5.0.1"
+    "update-notifier": "^6.0.2",
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.8",
+    "@storybook/client-api": "7.0.0-beta.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
     "@types/semver": "^7.3.4",
     "@types/shelljs": "^0.8.7",
-    "@types/update-notifier": "^5.0.0",
+    "@types/update-notifier": "^6.0.1",
+    "@types/util-deprecate": "^1.0.0",
     "strip-json-comments": "^3.1.1",
-    "update-notifier": "^5.0.1"
+    "typescript": "~4.9.3",
+    "update-notifier": "^6.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "24725501c32a073cebc6bf2674a47357136fbe3a"
+  "bundler": {
+    "entries": [
+      "./src/generate.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
 }

package/rendererAssets/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "rules": {
+    "no-undef": "off",
+    "@typescript-eslint/ban-types": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  },
+  "overrides": [
+    {
+      "files": ["nextjs/**/*.@(jsx|tsx)"],
+      "rules": {
+        "react/no-unknown-property": "off"
+      }
+    }
+  ]
+}

package/{dist/esm/frameworks/common/Introduction.stories.mdx → rendererAssets/common/Introduction.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';

package/templates/angular/template-csf/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "%SET_DURING_SB_INIT%",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}

package/templates/aurelia/template-csf/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "%SET_DURING_SB_INIT%",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}

package/templates/react-native/template-csf/storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

package/{dist/esm/generators/REACT_NATIVE → templates/react-native}/template-csf/storybook/index.js

@@ -10,9 +10,13 @@ import './rn-addons';
 addDecorator(withKnobs);
 
 // import stories
-configure(() => {
-  require('./stories');
-}, module);
+configure(
+  () => {
+    require('./stories');
+  },
+  module,
+  false
+);
 
 // Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
 // To find allowed options for getStorybookUI

package/templates/react-native/template-csf/storybook/rn-addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-knobs/register';

package/{dist/cjs/generators/REACT_NATIVE → templates/react-native}/template-csf/storybook/stories/Button/index.js

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableHighlight } from 'react-native';
 
-export default function Button({ onPress, children }) {
-  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+export default function Button({ onPress, label }) {
+  return <TouchableHighlight onPress={onPress}>{label}</TouchableHighlight>;
 }
 
 Button.defaultProps = {
-  children: null,
+  label: null,
   onPress: () => {},
 };
 
 Button.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
   onPress: PropTypes.func,
 };

package/{dist/esm/generators/REACT_NATIVE → templates/react-native}/template-csf/storybook/stories/CenterView/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import style from './style';
 
-export default function CenterView({ children }) {
-  return <View style={style.main}>{children}</View>;
+export default function CenterView({ label }) {
+  return <View style={style.main}>{label}</View>;
 }
 
 CenterView.defaultProps = {
-  children: null,
+  label: null,
 };
 
 CenterView.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
 };

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/NpmOptions.js

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

package/dist/cjs/add.js

@@ -1,151 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.add = add;
-exports.storybookAddonScope = exports.getPackageName = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.addStorybookAddonToFile = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _path = _interopRequireDefault(require("path"));
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _crossSpawn = require("cross-spawn");
-
-var _helpers = require("./helpers");
-
-var _jsPackageManager = require("./js-package-manager");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const logger = console;
-const storybookAddonScope = '@storybook/addon-';
-exports.storybookAddonScope = storybookAddonScope;
-
-const isAddon = async (packageManager, name) => {
-  try {
-    await packageManager.latestVersion(name);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isStorybookAddon = async (packageManager, name) => isAddon(packageManager, `${storybookAddonScope}${name}`);
-
-const getPackageName = (addonName, isOfficialAddon) => isOfficialAddon ? storybookAddonScope + addonName : addonName;
-
-exports.getPackageName = getPackageName;
-
-const getInstalledStorybookVersion = packageJson => packageJson.devDependencies[// This only considers the first occurrence.
-Object.keys(packageJson.devDependencies).find(devDep => /@storybook/.test(devDep))] || false;
-
-exports.getInstalledStorybookVersion = getInstalledStorybookVersion;
-
-const getPackageArg = (addonName, isOfficialAddon, packageJson) => {
-  if (isOfficialAddon) {
-    const addonNameNoTag = addonName.split('@')[0];
-    const installedStorybookVersion = getInstalledStorybookVersion(packageJson);
-    return installedStorybookVersion ? `${addonNameNoTag}@${getInstalledStorybookVersion(packageJson)}` : addonName;
-  }
-
-  return addonName;
-};
-
-exports.getPackageArg = getPackageArg;
-
-const installAddon = (packageManager, addonName, isOfficialAddon) => {
-  const prepareDone = (0, _helpers.commandLog)(`Preparing to install the ${addonName} Storybook addon`);
-  prepareDone();
-  logger.log();
-  const packageArg = getPackageArg(addonName, isOfficialAddon, packageManager.retrievePackageJson());
-  logger.log();
-  const installDone = (0, _helpers.commandLog)(`Installing the ${addonName} Storybook addon`);
-
-  try {
-    packageManager.addDependencies({}, [packageArg]);
-  } catch (e) {
-    installDone(`Something went wrong installing the addon: "${getPackageName(addonName, isOfficialAddon)}"`);
-    logger.log();
-    process.exit(1);
-  }
-
-  installDone();
-};
-
-const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
-  const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/manager`));
-
-  if (alreadyRegistered) {
-    return addonsFile;
-  }
-
-  const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1)];
-};
-
-exports.addStorybookAddonToFile = addStorybookAddonToFile;
-const LEGACY_CONFIGS = ['addons', 'config', 'presets'];
-
-const postinstallAddon = async (addonName, isOfficialAddon) => {
-  let skipMsg = null;
-
-  if (!isOfficialAddon) {
-    skipMsg = 'unofficial addon';
-  } else if (!_fs.default.existsSync('.storybook')) {
-    skipMsg = 'no .storybook config';
-  } else {
-    skipMsg = 'no codmods found';
-    LEGACY_CONFIGS.forEach(config => {
-      try {
-        const codemod = require.resolve(`${getPackageName(addonName, isOfficialAddon)}/postinstall/${config}.js`);
-
-        (0, _helpers.commandLog)(`Running postinstall script for ${addonName}`)();
-
-        let configFile = _path.default.join('.storybook', `${config}.ts`);
-
-        if (!_fs.default.existsSync(configFile)) {
-          configFile = _path.default.join('.storybook', `${config}.js`);
-
-          if (!_fs.default.existsSync(configFile)) {
-            _fs.default.writeFileSync(configFile, '', 'utf8');
-          }
-        }
-
-        (0, _crossSpawn.sync)('npx', ['jscodeshift', '-t', codemod, configFile], {
-          stdio: 'inherit'
-        });
-        skipMsg = null;
-      } catch (err) {// resolve failed, skip
-      }
-    });
-  }
-
-  if (skipMsg) {
-    (0, _helpers.commandLog)(`Skipping postinstall for ${addonName}, ${skipMsg}`)();
-  }
-};
-
-async function add(addonName, options) {
-  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(options.useNpm);
-
-  const addonCheckDone = (0, _helpers.commandLog)(`Verifying that ${addonName} is an addon`);
-  const isOfficialAddon = await isStorybookAddon(packageManager, addonName);
-
-  if (!isOfficialAddon) {
-    if (!(await isAddon(packageManager, addonName))) {
-      addonCheckDone(`The provided package was not a Storybook addon: ${addonName}.`);
-      return;
-    }
-  }
-
-  addonCheckDone();
-  installAddon(packageManager, addonName, isOfficialAddon);
-
-  if (!options.skipPostinstall) {
-    await postinstallAddon(addonName, isOfficialAddon);
-  }
-}

package/dist/cjs/automigrate/fixes/angular12.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.angular12 = 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 _webpack = require("./webpack5");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Is the user upgrading to Angular12?
- *
- * If so:
- * - Run webpack5 fix
- */
-const angular12 = {
-  id: 'angular12',
-
-  async check({
-    packageManager
-  }) {
-    var _semver$coerce;
-
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const angularVersion = dependencies['@angular/core'] || devDependencies['@angular/core'];
-    const angularCoerced = (_semver$coerce = _semver.default.coerce(angularVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
-
-    if (!angularCoerced || _semver.default.lt(angularCoerced, '12.0.0')) {
-      return null;
-    }
-
-    const builderInfo = await _webpack.webpack5.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      angularVersion
-    }, builderInfo) : null;
-  },
-
-  prompt({
-    angularVersion
-  }) {
-    const angularFormatted = _chalk.default.cyan(`Angular ${angularVersion}`);
-
-    return (0, _tsDedent.default)`
-      We've detected you are running ${angularFormatted} which is powered by webpack5.
-      Your Storybook's main.js files specifies webpack4, which is incompatible.
-
-      In order to work with your version of Angular, we need to install Storybook's ${_chalk.default.cyan('@storybook/builder-webpack5')}.
-
-      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular12-upgrade')}
-    `;
-  },
-
-  async run(options) {
-    return _webpack.webpack5.run(Object.assign({}, options, {
-      result: Object.assign({
-        webpackVersion: null
-      }, options.result)
-    }));
-  }
-
-};
-exports.angular12 = angular12;

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

@@ -1,122 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.builderVite = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _chalk = _interopRequireDefault(require("chalk"));
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _csfTools = require("@storybook/csf-tools");
-
-var _coreCommon = require("@storybook/core-common");
-
-var _jsPackageManager = require("../../js-package-manager");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const logger = console;
-
-/**
- * Is the user using 'storybook-builder-vite' in their project?
- *
- * If so, prompt them to upgrade to '@storybook/builder-vite'.
- *
- * - Add '@storybook/builder-vite' as dev dependency
- * - Remove 'storybook-builder-vite' dependency
- * - Add core.builder = '@storybook/builder-vite' to main.js
- */
-const builderVite = {
-  id: 'builder-vite',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      mainConfig
-    } = (0, _coreCommon.getStorybookInfo)(packageJson);
-
-    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']);
-    const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
-
-    if (builderName !== 'storybook-builder-vite') {
-      return null;
-    }
-
-    return {
-      builder,
-      main,
-      packageJson
-    };
-  },
-
-  prompt({
-    builder
-  }) {
-    const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
-
-    return (0, _tsDedent.default)`
-      We've detected you're using the community vite builder: ${builderFormatted}
-      
-      'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
-
-      We can upgrade your project to use the new builder automatically.
-      
-      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed')}
-    `;
-  },
-
-  async run({
-    result: {
-      builder,
-      main,
-      packageJson
-    },
-    packageManager,
-    dryRun
-  }) {
-    const {
-      dependencies = {},
-      devDependencies = {}
-    } = packageJson;
-    logger.info(`Removing existing 'storybook-builder-vite' dependency`);
-
-    if (!dryRun) {
-      delete dependencies['storybook-builder-vite'];
-      delete devDependencies['storybook-builder-vite'];
-      (0, _jsPackageManager.writePackageJson)(packageJson);
-    }
-
-    logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
-
-    if (!dryRun) {
-      packageManager.addDependencies({
-        installAsDevDependencies: true
-      }, ['@storybook/builder-vite']);
-    }
-
-    logger.info(`Updating main.js to use vite builder`);
-
-    if (!dryRun) {
-      const updatedBuilder = typeof builder === 'string' ? '@storybook/builder-vite' : {
-        name: '@storybook/builder-vite',
-        options: builder.options
-      };
-      main.setFieldValue(['core', 'builder'], updatedBuilder);
-      await (0, _csfTools.writeConfig)(main);
-    }
-  }
-
-};
-exports.builderVite = builderVite;