feat(repo): update storybook to v7

nrwl · Apr 7, 2023 · 15b4a65 · 15b4a65
1 parent 9ba8444
commit 15b4a65
Show file tree

Hide file tree

Showing 21 changed files with 2,283 additions and 4,852 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,7 @@
   },
   "ignorePatterns": ["**/*.ts"],
   "plugins": ["@typescript-eslint", "@nrwl/nx"],
-  "extends": [],
+  "extends": ["plugin:storybook/recommended"],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "no-restricted-imports": ["error", "create-nx-workspace"]

diff --git a/e2e/storybook-angular/src/storybook-angular.test.ts b/e2e/storybook-angular/src/storybook-angular.test.ts
@@ -15,7 +15,7 @@ describe('Storybook executors for Angular', () => {
   const angularStorybookLib = uniq('test-ui-ng-lib');
   beforeAll(() => {
     newProject();
-    createTestUILib(angularStorybookLib);
+    runCLI(`g @nrwl/angular:library ${angularStorybookLib} --no-interactive`);
     runCLI(
       `generate @nrwl/angular:storybook-configuration ${angularStorybookLib} --configureCypress --generateStories --generateCypressSpecs --no-interactive`
     );
@@ -25,8 +25,7 @@ describe('Storybook executors for Angular', () => {
     cleanupProject();
   });
 
-  // TODO: Enable on SB7
-  xdescribe('serve and build storybook', () => {
+  describe('serve and build storybook', () => {
     afterAll(() => killPorts());
 
     it('should serve an Angular based Storybook setup', async () => {
@@ -49,6 +48,7 @@ describe('Storybook executors for Angular', () => {
   xdescribe('run cypress tests using storybook', () => {
     it('should execute e2e tests using Cypress running against Storybook', async () => {
       if (runCypressTests()) {
+        addTestButtonToUILib(angularStorybookLib);
         writeFileSync(
           tmpProjPath(
             `apps/${angularStorybookLib}-e2e/src/e2e/test-button/test-button.component.cy.ts`
@@ -82,8 +82,7 @@ describe('Storybook executors for Angular', () => {
   });
 });
 
-export function createTestUILib(libName: string): void {
-  runCLI(`g @nrwl/angular:library ${libName} --no-interactive`);
+function addTestButtonToUILib(libName: string): void {
   runCLI(
     `g @nrwl/angular:component test-button --project=${libName} --no-interactive`
   );

diff --git a/e2e/storybook/src/storybook-nested.test.ts b/e2e/storybook/src/storybook-nested.test.ts
@@ -1,6 +1,7 @@
 import {
   checkFilesExist,
   cleanupProject,
+  getSelectedPackageManager,
   killPorts,
   readJson,
   runCLI,
@@ -10,6 +11,7 @@ import {
   uniq,
 } from '@nrwl/e2e/utils';
 import { writeFileSync } from 'fs';
+import { createFileSync } from 'fs-extra';
 
 describe('Storybook generators and executors for standalone workspaces - using React + Vite', () => {
   const wsName = uniq('react');
@@ -22,6 +24,7 @@ describe('Storybook generators and executors for standalone workspaces - using R
       appName,
       style: 'css',
       bundler: 'vite',
+      packageManager: getSelectedPackageManager(),
     });
 
     runCLI(
@@ -50,64 +53,60 @@ describe('Storybook generators and executors for standalone workspaces - using R
     });
   });
 
-  // TODO: Use --storybook7Configuration and re-enable this test - or else it NEEDS NODE 16
-  xdescribe('serve storybook', () => {
+  describe('serve storybook', () => {
     afterEach(() => killPorts());
 
     it('should serve a React based Storybook setup that uses Vite', async () => {
       const p = await runCommandUntil(`run ${appName}:storybook`, (output) => {
         return /Storybook.*started/gi.test(output);
       });
       p.kill();
-    }, 40000);
+    }, 60000);
   });
 
-  // TODO: Use --storybook7Configuration and re-enable this test - or else it NEEDS NODE 16
-  xdescribe('build storybook', () => {
+  describe('build storybook', () => {
     it('should build a React based storybook that uses Vite', () => {
       runCLI(`run ${appName}:build-storybook --verbose`);
       checkFilesExist(`dist/storybook/${appName}/index.html`);
-    }, 40000);
+    }, 60000);
 
     // This test makes sure path resolution works
-    xit('should build a React based storybook that references another lib and uses Vite', () => {
-      const reactLib = uniq('test-lib-react');
-      runCLI(`generate @nrwl/react:lib ${reactLib} --no-interactive`);
+    it('should build a React based storybook that references another lib and uses Vite', () => {
+      const anotherReactLib = uniq('test-another-lib-react');
+      runCLI(`generate @nrwl/react:lib ${anotherReactLib} --no-interactive`);
       // create a React component we can reference
+      createFileSync(
+        tmpProjPath(`libs/${anotherReactLib}/src/lib/mytestcmp.tsx`)
+      );
       writeFileSync(
-        tmpProjPath(`${reactLib}/src/lib/mytestcmp.tsx`),
+        tmpProjPath(`libs/${anotherReactLib}/src/lib/mytestcmp.tsx`),
         `
-            import React from 'react';
-
-            /* eslint-disable-next-line */
-            export interface MyTestCmpProps {}
-
-            export const MyTestCmp = (props: MyTestCmpProps) => {
-              return (
-                <div>
-                  <h1>Welcome to test cmp!</h1>
-                </div>
-              );
-            };
-
-            export default MyTestCmp;
+        export function MyTestCmp() {
+          return (
+            <div>
+              <h1>Welcome to OtherLib!</h1>
+            </div>
+          );
+        }
+        
+        export default MyTestCmp;
         `
       );
       // update index.ts and export it
       writeFileSync(
-        tmpProjPath(`${reactLib}/src/index.ts`),
+        tmpProjPath(`libs/${anotherReactLib}/src/index.ts`),
         `
             export * from './lib/mytestcmp';
         `
       );
 
       // create a story in the first lib to reference the cmp from the 2nd lib
       writeFileSync(
-        tmpProjPath(`${reactLib}/src/lib/myteststory.stories.tsx`),
+        tmpProjPath(`src/lib/myteststory.stories.tsx`),
         `
             import React from 'react';
 
-            import { MyTestCmp, MyTestCmpProps } from '@${wsName}/${reactLib}';
+            import { MyTestCmp, MyTestCmpProps } from '@${wsName}/${anotherReactLib}';
 
             export default {
               component: MyTestCmp,
@@ -124,8 +123,8 @@ describe('Storybook generators and executors for standalone workspaces - using R
       );
 
       // build React lib
-      runCLI(`run ${reactLib}:build-storybook --verbose`);
-      checkFilesExist(`dist/storybook/${reactLib}/index.html`);
-    }, 40000);
+      runCLI(`run ${appName}:build-storybook --verbose`);
+      checkFilesExist(`dist/storybook/${appName}/index.html`);
+    }, 60000);
   });
 });
diff --git a/e2e/storybook/src/storybook.test.ts b/e2e/storybook/src/storybook.test.ts
@@ -2,47 +2,27 @@ import {
   checkFilesExist,
   cleanupProject,
   killPorts,
+  newProject,
   runCLI,
   runCommandUntil,
   tmpProjPath,
   uniq,
-  getPackageManagerCommand,
-  runCommand,
-  newProject,
-  updateJson,
 } from '@nrwl/e2e/utils';
 import { writeFileSync } from 'fs';
 
 describe('Storybook generators and executors for monorepos', () => {
-  const previousPM = process.env.SELECTED_PM;
   const reactStorybookLib = uniq('test-ui-lib-react');
   let proj;
   beforeAll(() => {
-    process.env.SELECTED_PM = 'yarn';
-    proj = newProject({
-      packageManager: 'yarn',
-    });
+    proj = newProject();
     runCLI(`generate @nrwl/react:lib ${reactStorybookLib} --no-interactive`);
     runCLI(
       `generate @nrwl/react:storybook-configuration ${reactStorybookLib} --generateStories --no-interactive --bundler=webpack`
     );
-
-    // TODO(jack): Overriding enhanced-resolve to 5.10.0 now until the package is fixed.
-    // TODO: Use --storybook7Configuration and remove this
-    // See: https://github.com/webpack/enhanced-resolve/issues/362
-    updateJson('package.json', (json) => {
-      json['overrides'] = {
-        'enhanced-resolve': '5.10.0',
-      };
-
-      return json;
-    });
-    runCommand(getPackageManagerCommand().install);
   });
 
   afterAll(() => {
     cleanupProject();
-    process.env.SELECTED_PM = previousPM;
   });
 
   describe('serve and build storybook', () => {

diff --git a/graph/client/.storybook/main.js b/graph/client/.storybook/main.js
@@ -1,12 +1,16 @@
+/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
-  core: { builder: 'webpack5' },
-  stories: [
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-essentials',
     '@nrwl/react/plugins/storybook',
     'storybook-dark-mode',
   ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };
diff --git a/graph/client/project.json b/graph/client/project.json
@@ -245,7 +245,6 @@
     "storybook": {
       "executor": "@nrwl/storybook:storybook",
       "options": {
-        "uiFramework": "@storybook/react",
         "port": 4400,
         "configDir": "graph/client/.storybook"
       },
@@ -259,7 +258,6 @@
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputDir}"],
       "options": {
-        "uiFramework": "@storybook/react",
         "configDir": "graph/client/.storybook",
         "outputDir": "dist/storybook/graph-client"
       },

diff --git a/graph/ui-components/.storybook/main.js b/graph/ui-components/.storybook/main.js
@@ -1,8 +1,12 @@
+/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
-  core: { builder: 'webpack5' },
-  stories: [
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };
diff --git a/graph/ui-components/project.json b/graph/ui-components/project.json
@@ -10,7 +10,6 @@
     "storybook": {
       "executor": "@nrwl/storybook:storybook",
       "options": {
-        "uiFramework": "@storybook/react",
         "port": 4400,
         "configDir": "graph/ui-components/.storybook"
       },
@@ -24,7 +23,6 @@
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputDir}"],
       "options": {
-        "uiFramework": "@storybook/react",
         "configDir": "graph/ui-components/.storybook",
         "outputDir": "dist/storybook/graph-ui-components"
       },

diff --git a/graph/ui-graph/.storybook/main.js b/graph/ui-graph/.storybook/main.js
@@ -1,8 +1,12 @@
+/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
-  core: { builder: 'webpack5' },
-  stories: [
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };
diff --git a/graph/ui-graph/project.json b/graph/ui-graph/project.json
@@ -10,7 +10,6 @@
     "storybook": {
       "executor": "@nrwl/storybook:storybook",
       "options": {
-        "uiFramework": "@storybook/react",
         "port": 4400,
         "configDir": "graph/ui-graph/.storybook"
       },
@@ -24,7 +23,6 @@
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputDir}"],
       "options": {
-        "uiFramework": "@storybook/react",
         "configDir": "graph/ui-graph/.storybook",
         "outputDir": "dist/storybook/graph-ui-graph"
       },

diff --git a/graph/ui-tooltips/.storybook/main.js b/graph/ui-tooltips/.storybook/main.js
@@ -1,8 +1,12 @@
+/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
-  core: { builder: 'webpack5' },
-  stories: [
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };
diff --git a/graph/ui-tooltips/project.json b/graph/ui-tooltips/project.json
@@ -10,7 +10,6 @@
     "storybook": {
       "executor": "@nrwl/storybook:storybook",
       "options": {
-        "uiFramework": "@storybook/react",
         "port": 4400,
         "configDir": "graph/ui-tooltips/.storybook"
       },
@@ -24,7 +23,6 @@
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputDir}"],
       "options": {
-        "uiFramework": "@storybook/react",
         "configDir": "graph/ui-tooltips/.storybook",
         "outputDir": "dist/storybook/graph-ui-tooltips"
       },

diff --git a/package.json b/package.json
@@ -82,13 +82,12 @@
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^7.0.0",
     "@schematics/angular": "~15.2.0",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/angular": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/core-server": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/types": "^7.0.0-alpha.44",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/angular": "^7.0.2",
+    "@storybook/core-server": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-webpack5": "^7.0.2",
+    "@storybook/types": "^7.0.2",
     "@svgr/rollup": "^6.1.2",
     "@svgr/webpack": "^6.1.2",
     "@swc-node/register": "^1.4.2",
@@ -159,6 +158,7 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "express": "^4.18.1",
     "fast-xml-parser": "^4.0.9",
     "file-loader": "^6.2.0",
@@ -232,7 +232,7 @@
     "source-map": "0.7.3",
     "source-map-loader": "^3.0.0",
     "source-map-support": "0.5.19",
-    "storybook-dark-mode": "^1.1.2",
+    "storybook-dark-mode": "^3.0.0",
     "style-loader": "^3.3.0",
     "styled-components": "5.3.6",
     "stylus": "^0.55.0",