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

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
@@ -54,7 +54,7 @@ const angular12 = {
   }) {
     const angularFormatted = _chalk.default.cyan(`Angular ${angularVersion}`);
 
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected you are running ${angularFormatted} which is powered by webpack5.
       Your Storybook's main.js files specifies webpack4, which is incompatible.
 

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _csfTools = require("@storybook/csf-tools");
 
@@ -66,7 +66,7 @@ const builderVite = {
   }) {
     const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
 
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       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')}.

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
@@ -62,7 +62,7 @@ const cra5 = {
     const craFormatted = _chalk.default.cyan(`Create React App (CRA) ${craVersion}`);
 
     console.log(Object.assign({}, rest));
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected you are running ${craFormatted} which is powered by webpack5.
       Your Storybook's main.js files specifies webpack4, which is incompatible.
 

package/dist/cjs/automigrate/fixes/eslint-plugin.js

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _csfTools = require("@storybook/csf-tools");
 
@@ -79,7 +79,7 @@ const eslintPlugin = {
   },
 
   prompt() {
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected you are not using our eslint-plugin.
 
       In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
@@ -103,7 +103,7 @@ const eslintPlugin = {
     }, deps);
 
     if (!dryRun && unsupportedExtension) {
-      throw new Error((0, _tsDedent.default)`
+      throw new Error((0, _tsDedent.dedent)`
           ⚠️ The plugin was successfuly installed but failed to configure.
           
           Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}.

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

@@ -22,6 +22,8 @@ var _eslintPlugin = require("./eslint-plugin");
 
 var _builderVite = require("./builder-vite");
 
+var _npm = require("./npm7");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -35,5 +37,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite, _npm.npm7];
 exports.fixes = fixes;

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
@@ -43,7 +43,7 @@ const mainjsFramework = {
     const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
 
     if (!storybookCoerced) {
-      logger.warn((0, _tsDedent.default)`
+      logger.warn((0, _tsDedent.dedent)`
         ❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('mainjsFramework')} fix.
         🤔 Are you running automigrate from your project directory?
       `);
@@ -65,7 +65,7 @@ const mainjsFramework = {
   }) {
     const frameworkFormatted = _chalk.default.cyan(`framework: '${framework}'`);
 
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected that your main.js configuration file does not specify the
       'framework' field, which is a requirement in SB7.0 and above. We can add one
       for you automatically:

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.npm7 = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = require("ts-dedent");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Is the user using npm7+? If so create a .npmrc with legacy-peer-deps=true
+ */
+const npm7 = {
+  id: 'npm7',
+
+  async check({
+    packageManager
+  }) {
+    if (packageManager.type !== 'npm') return null;
+    const npmVersion = packageManager.getNpmVersion();
+
+    if (packageManager.needsLegacyPeerDeps(npmVersion)) {
+      return {
+        npmVersion
+      };
+    }
+
+    return null;
+  },
+
+  prompt({
+    npmVersion
+  }) {
+    const npmFormatted = _chalk.default.cyan(`npm ${npmVersion}`);
+
+    return (0, _tsDedent.dedent)`
+      We've detected you are running ${npmFormatted} which has peer dependency semantics which Storybook is incompatible with.
+
+      In order to work with Storybook's package structure, you'll need to run \`npm\` with the
+      \`--legacy-peer-deps=true\` flag. We can generate an \`.npmrc\` which will do that automatically.
+      
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/issues/18298')}
+    `;
+  },
+
+  async run({
+    packageManager
+  }) {
+    packageManager.setLegacyPeerDeps();
+  }
+
+};
+exports.npm7 = npm7;

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
@@ -57,7 +57,7 @@ const vue3 = {
 
     const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
 
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected you are running ${vueFormatted} with Storybook.
       ${sbFormatted} runs webpack4 by default, which is incompatible.
 

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

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
@@ -44,7 +44,7 @@ const webpack5 = {
     const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
 
     if (!storybookCoerced) {
-      logger.warn((0, _tsDedent.default)`
+      logger.warn((0, _tsDedent.dedent)`
         ❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('webpack5')} fix.
         🤔 Are you running automigrate from your project directory?
       `);
@@ -52,7 +52,7 @@ const webpack5 = {
     }
 
     if (_semver.default.lt(storybookCoerced, '6.3.0')) {
-      logger.warn((0, _tsDedent.default)`
+      logger.warn((0, _tsDedent.dedent)`
           Detected SB 6.3 or below, please upgrade storybook to use webpack5.
 
           To upgrade to the latest stable release, run this from your project directory:
@@ -111,7 +111,7 @@ const webpack5 = {
   }) {
     const webpackFormatted = _chalk.default.cyan(`webpack ${webpackVersion}`);
 
-    return (0, _tsDedent.default)`
+    return (0, _tsDedent.dedent)`
       We've detected you're running ${webpackFormatted}.
       Your Storybook's main.js files specifies webpack4, which is incompatible.
       
@@ -130,7 +130,7 @@ const webpack5 = {
     packageManager,
     dryRun
   }) {
-    const deps = [`@storybook/manager-webpack5@${storybookVersion}`, `@storybook/builder-webpack5@${storybookVersion}`]; // this also gets called by 'cra5' fix so we need to add
+    const deps = [`@storybook/builder-webpack5@${storybookVersion}`]; // this also gets called by 'cra5' fix so we need to add
     // webpack5 at the project root so that it gets hoisted
 
     if (!webpackVersion) {

package/dist/cjs/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/cjs/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/cjs/dev.js

@@ -7,7 +7,7 @@ exports.dev = void 0;
 
 require("core-js/modules/es.promise.js");
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
 
 var _readPkgUp = require("read-pkg-up");
 
@@ -17,8 +17,6 @@ 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';
 
@@ -53,10 +51,10 @@ const dev = async cliOptions => {
 
     _nodeLogger.logger.line();
 
-    _nodeLogger.logger.warn(error.close ? (0, _tsDedent.default)`
+    _nodeLogger.logger.warn(error.close ? (0, _tsDedent.dedent)`
           FATAL broken build!, will close the process,
           Fix the error below and restart storybook.
-        ` : (0, _tsDedent.default)`
+        ` : (0, _tsDedent.dedent)`
           Broken build, fix the error above.
           You may need to refresh the browser.
         `);

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/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

@@ -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/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_SCRIPTS/index.js

@@ -30,10 +30,10 @@ const generator = async (packageManager, npmOptions, options) => {
       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;