feat(storybook): upgrade to Storybook v6.3 support (#6104)

e2e/angular/src/storybook.test.ts

@@ -34,7 +34,7 @@ describe('Storybook schematics', () => {
       `
         module.exports = {
           stories: [],
-          addons: ['@storybook/addon-knobs/register'],
+          addons: ['@storybook/addon-knobs'],
         };
 
         console.log('hi there');

package.json

@@ -79,10 +79,10 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "7.1.1",
     "@schematics/angular": "^12.0.0",
-    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-knobs": "~6.3.0",
-    "@storybook/angular": "6.2.9",
+    "@storybook/angular": "~6.3.0",
-    "@storybook/core": "6.1.21",
+    "@storybook/core": "~6.3.0",
-    "@storybook/react": "6.2.9",
+    "@storybook/react": "~6.3.0",
     "@svgr/webpack": "^5.4.0",
     "@tailwindcss/typography": "^0.4.0",
     "@testing-library/react": "11.2.5",

packages/storybook/migrations.json

@@ -48,6 +48,12 @@
       "cli": "nx",
       "description": "Update storybook if installed and above 6 but below 6.2.7",
       "factory": "./src/migrations/update-11-6-0/update-storybook"
+    },
+    "update-12-5-0": {
+      "version": "12.5.0-beta.5",
+      "cli": "nx",
+      "description": "Upgrade Storybook to v6.3",
+      "factory": "./src/migrations/update-12-5-0/migrate-storybook-6-3"
     }
   },
   "packageJsonUpdates": {

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -86,7 +86,7 @@ describe('@nrwl/storybook:configuration', () => {
 
     const newContents = `module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register', 'new-addon'],
+  addons: ['@storybook/addon-knobs', 'new-addon'],
 };
 `;
     // Setup a new lib

packages/storybook/src/generators/configuration/configuration.ts

@@ -24,6 +24,8 @@ import { cypressProjectGenerator } from '../cypress-project/cypress-project';
 import { StorybookConfigureSchema } from './schema';
 import { storybookVersion } from '../../utils/versions';
 import { initGenerator } from '../init/init';
+import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
+import { gte } from 'semver';
 
 export async function configurationGenerator(
   tree: Tree,
@@ -353,8 +355,10 @@ function readCurrentWorkspaceStorybookVersion(tree: Tree): string {
     }
   }
   if (
-    workspaceStorybookVersion.startsWith('6') ||
+    gte(
-    workspaceStorybookVersion.startsWith('^6')
+      checkAndCleanWithSemver('@storybook/core', workspaceStorybookVersion),
+      '6.0.0'
+    )
   ) {
     workspaceStorybookVersion = '6';
   }

packages/storybook/src/generators/configuration/root-files/.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register'],
+  addons: ['@storybook/addon-knobs'],
 };

packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap

@@ -7,10 +7,11 @@ Object {
   },
   "devDependencies": Object {
     "@angular/forms": "*",
-    "@nrwl/storybook": "6.2.9",
+    "@nrwl/storybook": "~6.3.0",
-    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-knobs": "~6.3.0",
-    "@storybook/angular": "6.2.9",
+    "@storybook/angular": "~6.3.0",
-    "@storybook/builder-webpack5": "6.2.9",
+    "@storybook/builder-webpack5": "~6.3.0",
+    "@storybook/manager-webpack5": "~6.3.0",
     "existing": "1.0.0",
   },
   "name": "test-name",

packages/storybook/src/generators/init/init.ts

@@ -56,6 +56,13 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
       devDependencies['@storybook/builder-webpack5'] = storybookVersion;
     }
 
+    if (
+      !packageJson.dependencies['@storybook/manager-webpack5'] &&
+      !packageJson.devDependencies['@storybook/manager-webpack5']
+    ) {
+      devDependencies['@storybook/manager-webpack5'] = storybookVersion;
+    }
+
     if (
       !packageJson.dependencies['@angular/forms'] &&
       !packageJson.devDependencies['@angular/forms']

packages/storybook/src/migrations/update-12-5-0/migrate-storybook-6-3.spec.ts

@@ -0,0 +1,203 @@
+import { readJson, Tree, writeJson } from '@nrwl/devkit';
+import { createTree, createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import updateStorybookv63 from './migrate-storybook-6-3';
+
+describe('Upgrade to Storybook v6.3', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  describe('migrate addon-knobs registration', () => {
+    beforeEach(() => {
+      writeJson(tree, 'workspace.json', {
+        projects: {
+          ['home-ui-react']: {
+            projectType: 'library',
+            root: 'libs/home/ui-react',
+            sourceRoot: 'libs/home/ui-react/src',
+            targets: {
+              storybook: {
+                builder: '@nrwl/storybook:storybook',
+                options: {
+                  uiFramework: '@storybook/react',
+                  port: 4400,
+                  config: {
+                    configFolder: 'libs/home/ui-react/.storybook',
+                  },
+                },
+              },
+            },
+          },
+          ['home-ui-angular']: {
+            projectType: 'library',
+            root: 'libs/home/ui-angular',
+            sourceRoot: 'libs/home/ui-angular/src',
+            targets: {
+              storybook: {
+                builder: '@nrwl/storybook:storybook',
+                options: {
+                  uiFramework: '@storybook/angular',
+                  port: 4400,
+                  config: {
+                    configFolder: 'libs/home/ui-angular/.storybook',
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const mainJSFile = `
+      module.exports = {
+        stories: [],
+        addons: ['@storybook/addon-knobs/register'],
+      };
+      `;
+
+      tree.write('.storybook/main.js', mainJSFile);
+      tree.write('libs/home/ui-angular/.storybook/main.js', mainJSFile);
+      tree.write('libs/home/ui-react/.storybook/main.js', mainJSFile);
+
+      writeJson(tree, 'package.json', {
+        devDependencies: {
+          '@storybook/addon-knobs': '6.3.0',
+        },
+      });
+    });
+
+    it('should update the main config files to fix the addon-knobs registration', async () => {
+      await updateStorybookv63(tree);
+
+      const globalMainJS = tree.read('.storybook/main.js', 'utf-8');
+      const angularMainJS = tree.read(
+        'libs/home/ui-angular/.storybook/main.js',
+        'utf-8'
+      );
+      const reactMainJS = tree.read(
+        'libs/home/ui-react/.storybook/main.js',
+        'utf-8'
+      );
+
+      const regex = /@storybook\/addon-knobs\/register/;
+      expect(regex.test(globalMainJS)).toBeFalsy();
+      expect(regex.test(angularMainJS)).toBeFalsy();
+      expect(regex.test(reactMainJS)).toBeFalsy();
+
+      const correctRegistrationRegex = /@storybook\/addon-knobs/;
+      expect(correctRegistrationRegex.test(globalMainJS)).toBeTruthy();
+      expect(correctRegistrationRegex.test(angularMainJS)).toBeTruthy();
+      expect(correctRegistrationRegex.test(reactMainJS)).toBeTruthy();
+    });
+  });
+
+  describe('package.json version upgrades', () => {
+    it('should update storybook packages', async () => {
+      writeJson(tree, 'package.json', {
+        devDependencies: {
+          '@storybook/angular': '^6.0.0',
+          '@storybook/react': '^6.0.0',
+          '@storybook/addon-knobs': '^6.0.0',
+          '@storybook/addon-controls': '^6.0.0',
+        },
+      });
+      await updateStorybookv63(tree);
+
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/angular']
+      ).toBe('~6.3.0');
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/react']
+      ).toBe('~6.3.0');
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/addon-knobs']
+      ).toBe('~6.3.0');
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/addon-controls'
+        ]
+      ).toBe('~6.3.0');
+    });
+
+    it('should install the webpack5 packages when Angular 12 is being used', async () => {
+      writeJson(tree, 'package.json', {
+        dependencies: {
+          '@angular/core': '12.0.0',
+        },
+        devDependencies: {
+          '@storybook/angular': '~6.0.0',
+          '@storybook/react': '^6.0.0',
+          '@storybook/addon-knobs': '^6.0.0',
+          '@storybook/addon-controls': '^6.0.0',
+        },
+      });
+      await updateStorybookv63(tree);
+
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/builder-webpack5'
+        ]
+      ).toBe('~6.3.0');
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/manager-webpack5'
+        ]
+      ).toBe('~6.3.0');
+    });
+
+    it('should not install the Storybook Webpack 5 deps if not Angular 12 is being used', async () => {
+      writeJson(tree, 'package.json', {
+        dependencies: {
+          '@angular/core': '11.0.0',
+        },
+        devDependencies: {
+          '@storybook/angular': '^6.0.0',
+          '@storybook/react': '^6.0.0',
+          '@storybook/addon-knobs': '^6.0.0',
+          '@storybook/addon-controls': '^6.0.0',
+        },
+      });
+      await updateStorybookv63(tree);
+
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/builder-webpack5'
+        ]
+      ).toBeUndefined();
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/manager-webpack5'
+        ]
+      ).toBeUndefined();
+    });
+
+    it('should not update storybook packages that are below v6.x', async () => {
+      writeJson(tree, 'package.json', {
+        devDependencies: {
+          '@storybook/angular': '^5.3.1',
+          '@storybook/react': '^5.3.1',
+          '@storybook/addon-knobs': '^5.3.1',
+          '@storybook/addon-controls': '^5.3.1',
+        },
+      });
+      await updateStorybookv63(tree);
+
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/angular']
+      ).toBe('^5.3.1');
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/react']
+      ).toBe('^5.3.1');
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/addon-knobs']
+      ).toBe('^5.3.1');
+      expect(
+        readJson(tree, 'package.json').devDependencies[
+          '@storybook/addon-controls'
+        ]
+      ).toBe('^5.3.1');
+    });
+  });
+});

packages/storybook/src/migrations/update-12-5-0/migrate-storybook-6-3.ts

@@ -0,0 +1,159 @@
+import {
+  formatFiles,
+  getProjects,
+  joinPathFragments,
+  logger,
+  readJson,
+  Tree,
+  updateJson,
+} from '@nrwl/devkit';
+import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
+import { gte, lt } from 'semver';
+
+let needsInstall = false;
+const targetStorybookVersion = '6.3.0';
+
+function getPackageVersion(json, packageName: string) {
+  let packageVersion = json.dependencies[packageName];
+
+  if (!packageVersion) {
+    packageVersion = json.devDependencies[packageName];
+  }
+
+  if (packageVersion) {
+    return checkAndCleanWithSemver(packageName, packageVersion);
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Upgrades to Storybook v6.3 (if currently a 6.x version is installed).
+ * Also for Angular projects makes sure the `@storybook/builder-webpack5` and `@storybook/manager-webpack5`
+ * are installed
+ */
+function upgradeStorybook63(tree: Tree) {
+  updateJson(tree, 'package.json', (json) => {
+    json.dependencies = json.dependencies || {};
+    json.devDependencies = json.devDependencies || {};
+
+    function updatePackageSection(
+      storybookPackageName: string,
+      packageSection: 'dependencies' | 'devDependencies'
+    ) {
+      if (json[packageSection][storybookPackageName]) {
+        const version = checkAndCleanWithSemver(
+          storybookPackageName,
+          json[packageSection][storybookPackageName]
+        );
+        if (gte(version, '6.0.0') && lt(version, targetStorybookVersion)) {
+          json[packageSection][
+            storybookPackageName
+          ] = `~${targetStorybookVersion}`;
+          needsInstall = true;
+        }
+      }
+    }
+
+    const storybookPackages = [
+      '@storybook/angular',
+      '@storybook/react',
+      '@storybook/addon-knobs',
+      '@storybook/addon-controls',
+    ];
+
+    storybookPackages.forEach((storybookPackageName) => {
+      updatePackageSection(storybookPackageName, 'dependencies');
+      updatePackageSection(storybookPackageName, 'devDependencies');
+    });
+
+    // check if Angular & Angular 12 => install Storybook Webpack 5 deps
+    const storybookAngularVersion = getPackageVersion(
+      json,
+      '@storybook/angular'
+    );
+    if (storybookAngularVersion && gte(storybookAngularVersion, '6.0.0')) {
+      const angularVersion = getPackageVersion(json, '@angular/core');
+      if (angularVersion && gte(angularVersion, '12.0.0')) {
+        json.devDependencies[
+          '@storybook/builder-webpack5'
+        ] = `~${targetStorybookVersion}`;
+        json.devDependencies[
+          '@storybook/manager-webpack5'
+        ] = `~${targetStorybookVersion}`;
+
+        needsInstall = true;
+      }
+    }
+
+    return json;
+  });
+}
+
+function replaceStorybookAddonKnobRegistration(
+  tree: Tree,
+  storybookMainJSpath
+) {
+  let storybookMainContent = tree.read(storybookMainJSpath, 'utf-8');
+  storybookMainContent = storybookMainContent.replace(
+    /'(@storybook\/addon-knobs)\/register'/g,
+    "'$1'"
+  );
+
+  tree.write(storybookMainJSpath, storybookMainContent);
+}
+
+function migrateKnobsRegistration(tree: Tree) {
+  const projects = getProjects(tree);
+
+  // we only need to migrate if we are on Storybook v6.3
+  const json = readJson(tree, 'package.json');
+  const storybookKnobVersion = getPackageVersion(
+    json,
+    '@storybook/addon-knobs'
+  );
+
+  if (storybookKnobVersion && gte(storybookKnobVersion, '6.3.0')) {
+    // migrate the root config
+    const rootStoryMainFilePath = `.storybook/main.js`;
+    if (tree.exists(rootStoryMainFilePath)) {
+      replaceStorybookAddonKnobRegistration(tree, rootStoryMainFilePath);
+    }
+
+    projects.forEach((projConfig, projName) => {
+      const targets = projConfig.targets;
+      const storybookMainJS = joinPathFragments(
+        projConfig.root,
+        '.storybook/main.js'
+      );
+
+      const storybookExecutor = Object.keys(targets).find(
+        (x) => targets[x].executor === '@nrwl/storybook:storybook'
+      );
+
+      const hasStorybookConfig =
+        storybookExecutor && tree.exists(storybookMainJS);
+
+      if (!hasStorybookConfig) {
+        return;
+      }
+
+      replaceStorybookAddonKnobRegistration(tree, storybookMainJS);
+    });
+  }
+}
+
+export default async function updateStorybookv63(tree: Tree) {
+  upgradeStorybook63(tree);
+
+  // we only need to migrate knobs if the current storybook version is 6.3 or higher
+  migrateKnobsRegistration(tree);
+
+  await formatFiles(tree);
+
+  if (needsInstall) {
+    logger.info(
+      'Please make sure to run npm install or yarn install to get the latest packages added by this migration'
+    );
+  }
+}

packages/storybook/src/utils/versions.ts

@@ -1,5 +1,5 @@
 export const nxVersion = '*';
-export const storybookVersion = '6.2.9';
+export const storybookVersion = '~6.3.0';
 export const babelCoreVersion = '7.12.13';
 export const babelLoaderVersion = '8.1.0';
 export const babelPresetTypescriptVersion = '7.12.13';