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

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/angular": "6.2.9",
-    "@storybook/core": "6.1.21",
-    "@storybook/react": "6.2.9",
+    "@storybook/addon-knobs": "~6.3.0",
+    "@storybook/angular": "~6.3.0",
+    "@storybook/core": "~6.3.0",
+    "@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') ||
-    workspaceStorybookVersion.startsWith('^6')
+    gte(
+      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",
-    "@storybook/addon-knobs": "6.2.9",
-    "@storybook/angular": "6.2.9",
-    "@storybook/builder-webpack5": "6.2.9",
+    "@nrwl/storybook": "~6.3.0",
+    "@storybook/addon-knobs": "~6.3.0",
+    "@storybook/angular": "~6.3.0",
+    "@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');
+    });
+  });
+});