@storybook/cli 6.5.9 → 7.0.0-alpha.10

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

@@ -107,18 +107,15 @@ const webpack5 = {
   },
 
   prompt({
-    webpackVersion,
-    storybookVersion
+    webpackVersion
   }) {
     const webpackFormatted = _chalk.default.cyan(`webpack ${webpackVersion}`);
 
-    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
-
     return (0, _tsDedent.default)`
       We've detected you're running ${webpackFormatted}.
-      ${sbFormatted} runs webpack4 by default, which may not be compatible.
+      Your Storybook's main.js files specifies webpack4, which is incompatible.
       
-      To run Storybook in webpack5-mode, we can install Storybook's ${_chalk.default.cyan('webpack5 builder')} for you.
+      To run Storybook in webpack5-mode, we can install Storybook's ${_chalk.default.cyan('@storybook/builder-webpack5')} for you.
 
       More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build')}
     `;
@@ -144,10 +141,10 @@ const webpack5 = {
     if (!dryRun) packageManager.addDependencies({
       installAsDevDependencies: true
     }, deps);
-    logger.info('✅ Setting `core.builder` to `webpack5` in main.js');
+    logger.info('✅ Setting `core.builder` to `@storybook/builder-webpack5` in main.js');
 
     if (!dryRun) {
-      main.setFieldValue(['core', 'builder'], 'webpack5');
+      main.setFieldValue(['core', 'builder'], '@storybook/builder-webpack5');
       await (0, _csfTools.writeConfig)(main);
     }
   }

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,10 +31,11 @@ const generateStorybookBabelConfig = async ({
 }) => {
   _nodeLogger.logger.info(`Generating the storybook default babel config at ${target}`);
 
-  const config = (0, _coreCommon.getStorybookBabelConfig)({
-    local: true
-  });
-  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/build.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.build = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _readPkgUp = require("read-pkg-up");
+
+var _nodeLogger = require("@storybook/node-logger");
+
+var _coreServer = require("@storybook/core-server");
+
+var _coreCommon = require("@storybook/core-common");
+
+const build = async cliOptions => {
+  try {
+    await (0, _coreServer.buildStaticStandalone)(Object.assign({}, cliOptions, {
+      configDir: cliOptions.configDir || './.storybook',
+      outputDir: cliOptions.outputDir || './storybook-static',
+      ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
+      docsMode: !!cliOptions.docs,
+      configType: 'PRODUCTION',
+      cache: _coreCommon.cache,
+      packageJson: (0, _readPkgUp.sync)({
+        cwd: __dirname
+      }).packageJson
+    }));
+  } catch (e) {
+    _nodeLogger.logger.error(e);
+
+    process.exit(1);
+  }
+};
+
+exports.build = build;

package/dist/esm/detect.js

@@ -21,8 +21,6 @@ var _helpers = require("./helpers");
 
 var _jsPackageManager = require("./js-package-manager");
 
-var _detectWebpack = require("./detect-webpack");
-
 var _detectNextjs = require("./detect-nextjs");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -107,7 +105,7 @@ function detectFrameworkPreset(packageJson = {}) {
 }
 /**
  * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
- * will be used, otherwise, webpack4 is the default.
+ * will be used, otherwise, webpack5 is the default.
  *
  * @returns CoreBuilder
  */
@@ -127,22 +125,10 @@ function detectBuilder(packageManager) {
     if (nextJSVersion >= 11) {
       return _project_types.CoreBuilder.Webpack5;
     }
-  }
-
-  const webpackVersion = (0, _detectWebpack.detectWebpack)(packageManager);
-
-  if (webpackVersion) {
-    if (webpackVersion <= 4) {
-      return _project_types.CoreBuilder.Webpack4;
-    }
-
-    if (webpackVersion >= 5) {
-      return _project_types.CoreBuilder.Webpack5;
-    }
-  } // Fallback to webpack4
+  } // Fallback to webpack5
 
 
-  return _project_types.CoreBuilder.Webpack4;
+  return _project_types.CoreBuilder.Webpack5;
 }
 
 function isStorybookInstalled(dependencies, force) {
@@ -151,13 +137,9 @@ function isStorybookInstalled(dependencies, force) {
   }
 
   if (!force && dependencies.devDependencies) {
-    if (_project_types.SUPPORTED_FRAMEWORKS.reduce((storybookPresent, framework) => storybookPresent || !!dependencies.devDependencies[`@storybook/${framework}`], false)) {
+    if (_project_types.SUPPORTED_RENDERERS.reduce((storybookPresent, framework) => storybookPresent || !!dependencies.devDependencies[`@storybook/${framework}`], false)) {
       return _project_types.ProjectType.ALREADY_HAS_STORYBOOK;
     }
-
-    if (dependencies.devDependencies['@kadira/storybook'] || dependencies.devDependencies['@kadira/react-native-storybook']) {
-      return _project_types.ProjectType.UPDATE_PACKAGE_ORGANIZATIONS;
-    }
   }
 
   return false;

package/dist/esm/dev.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dev = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _readPkgUp = require("read-pkg-up");
+
+var _nodeLogger = require("@storybook/node-logger");
+
+var _coreServer = require("@storybook/core-server");
+
+var _coreCommon = require("@storybook/core-common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const dev = async cliOptions => {
+  process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+  try {
+    await (0, _coreServer.buildDevStandalone)(Object.assign({}, cliOptions, {
+      configDir: cliOptions.configDir || './.storybook',
+      configType: 'DEVELOPMENT',
+      ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
+      docsMode: !!cliOptions.docs,
+      cache: _coreCommon.cache,
+      packageJson: (0, _readPkgUp.sync)({
+        cwd: __dirname
+      }).packageJson
+    }));
+  } catch (error) {
+    var _error$compilation;
+
+    // this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header
+    _nodeLogger.instance.heading = '';
+
+    if (error instanceof Error) {
+      if (error.error) {
+        _nodeLogger.logger.error(error.error);
+      } else if (error.stats && error.stats.compilation.errors) {
+        error.stats.compilation.errors.forEach(e => _nodeLogger.logger.plain(e));
+      } else {
+        _nodeLogger.logger.error(error);
+      }
+    } else if ((_error$compilation = error.compilation) !== null && _error$compilation !== void 0 && _error$compilation.errors) {
+      error.compilation.errors.forEach(e => _nodeLogger.logger.plain(e));
+    }
+
+    _nodeLogger.logger.line();
+
+    _nodeLogger.logger.warn(error.close ? (0, _tsDedent.default)`
+          FATAL broken build!, will close the process,
+          Fix the error below and restart storybook.
+        ` : (0, _tsDedent.default)`
+          Broken build, fix the error above.
+          You may need to refresh the browser.
+        `);
+
+    _nodeLogger.logger.line();
+
+    process.exit(1);
+  }
+};
+
+exports.dev = dev;

package/dist/esm/extract.js

@@ -32,7 +32,6 @@ const read = async url => {
     (window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract())
   `);
   const data = JSON.parse(await page.evaluate(async () => {
-    // eslint-disable-next-line no-undef
     return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);
   }));
   setImmediate(() => {

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

@@ -1,5 +1,5 @@
 // also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Meta, StoryFn } from '@storybook/angular';
 import Button from './button.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
@@ -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: StoryFn<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/frameworks/angular/Header.stories.ts

@@ -1,6 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -20,7 +20,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<Header> = (args: Header) => ({
+const Template: StoryFn<Header> = (args: Header) => ({
   props: args,
 });
 

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

@@ -1,4 +1,4 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
@@ -10,7 +10,7 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on StoryFn layout: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
   decorators: [
@@ -21,7 +21,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<Page> = (args: Page) => ({
+const Template: StoryFn<Page> = (args: Page) => ({
   props: args,
 });
 

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

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createButton, ButtonProps } from './Button';
 
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
@@ -15,10 +15,10 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+} as Meta<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   // You can either use a function to create DOM elements or use a plain html string!
   // return `<div>${label}</div>`;
   return createButton(args);

package/dist/esm/frameworks/html/ts/Button.ts

@@ -36,12 +36,16 @@ export const createButton = ({
   const btn = document.createElement('button');
   btn.type = 'button';
   btn.innerText = label;
-  btn.addEventListener('click', onClick);
+  if (onClick) {
+    btn.addEventListener('click', onClick);
+  }
 
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
 
-  btn.style.backgroundColor = backgroundColor;
+  if (backgroundColor) {
+    btn.style.backgroundColor = backgroundColor;
+  }
 
   return btn;
 };

package/dist/esm/frameworks/html/ts/Header.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createHeader, HeaderProps } from './Header';
 
 export default {
@@ -13,9 +13,9 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta;
+} as Meta<HeaderProps>;
 
-const Template: Story<HeaderProps> = (args) => createHeader(args);
+const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/dist/esm/frameworks/html/ts/Page.stories.ts

@@ -1,5 +1,5 @@
 import { within, userEvent } from '@storybook/testing-library';
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createPage } from './Page';
 
 export default {
@@ -10,7 +10,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => createPage();
+const Template: StoryFn = () => createPage();
 
 export const LoggedOut = Template.bind({});
 

package/dist/esm/frameworks/html/ts/Page.ts

@@ -7,12 +7,12 @@ type User = {
 
 export const createPage = () => {
   const article = document.createElement('article');
-  let user: User = null;
-  let header = null;
+  let user: User | undefined;
+  let header: HTMLElement | null = null;
 
   const rerenderHeader = () => {
     const wrapper = document.getElementsByTagName('article')[0];
-    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement);
   };
 
   const onLogin = () => {
@@ -21,7 +21,7 @@ export const createPage = () => {
   };
 
   const onLogout = () => {
-    user = null;
+    user = undefined;
     rerenderHeader();
   };
 

package/dist/esm/frameworks/react/ts/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -14,7 +14,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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 = {