feat(repo): update storybook to v7

nrwl · Apr 7, 2023 · 091d84e · 091d84e
1 parent 9ba8444
commit 091d84e
Show file tree

Hide file tree

Showing 17 changed files with 2,247 additions and 4,794 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/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",

diff --git a/...src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap b/...src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
@@ -1,12 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StorybookConfiguration generator should configure storybook to use webpack 5 1`] = `
-"module.exports = {
-  core: { builder: 'webpack5' },
-  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+"const config = {
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
 };
 
+export default config;
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs

diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts
@@ -24,27 +24,35 @@ describe('Build storybook', () => {
   beforeEach(async () => {
     options = {
       configDir: join(__dirname, `/../../utils/test-configs/.storybook`),
-      uiFramework: '@storybook/react',
       outputDir: `/root/dist/storybook`,
     };
 
     context = executorContext as ExecutorContext;
   });
 
-  it('should call the storybook buildStaticStandalone', async () => {
+  it('should call the storybook build', async () => {
     const loggerSpy = jest.spyOn(logger, 'info');
 
-    const standaloneSpy = jest
-      .spyOn(build, 'buildStaticStandalone')
+    const buildSpy = jest
+      .spyOn(build, 'build')
       .mockImplementation(() => Promise.resolve());
 
     const result = await storybookBuilder(options, context);
 
-    expect(standaloneSpy).toHaveBeenCalled();
-    expect(loggerSpy).toHaveBeenCalledWith(`NX ui framework: @storybook/react`);
-    expect(loggerSpy).toHaveBeenCalledWith(
-      `NX Storybook files available in /root/dist/storybook`
+    expect(buildSpy).toHaveBeenCalled();
+    expect(loggerSpy).toHaveBeenNthCalledWith(
+      1,
+      'NX Storybook builder starting ...'
     );
+    expect(loggerSpy).toHaveBeenNthCalledWith(
+      2,
+      'NX Storybook builder finished ...'
+    );
+    expect(loggerSpy).toHaveBeenNthCalledWith(
+      3,
+      'NX Storybook files available in /root/dist/storybook'
+    );
+
     expect(result.success).toBeTruthy();
   });
 });
diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts
@@ -51,15 +51,22 @@ export default async function buildStorybookExecutor(
   }
 }
 
-function runInstance(options: CLIOptions, storybook7: boolean): Promise<void> {
+function runInstance(
+  options: CLIOptions,
+  storybook7: boolean
+): Promise<void | {
+  port: number;
+  address: string;
+  networkAddress: string;
+}> {
   const env = process.env.NODE_ENV ?? 'production';
   process.env.NODE_ENV = env;
 
   if (storybook7) {
-    return build['build']({
+    return build.build({
       ...options,
       mode: 'static',
-    } as any); // TODO(katerina): Change to actual types when Storybook 7
+    });
   } else {
     const nodeVersion = process.version.slice(1).split('.');
     if (+nodeVersion[0] === 18) {

diff --git a/packages/storybook/src/executors/storybook/storybook.impl.spec.ts b/packages/storybook/src/executors/storybook/storybook.impl.spec.ts
@@ -1,45 +1,31 @@
-import { fs as fsMock, vol } from 'memfs';
-import * as fs from 'fs';
-
 import { ExecutorContext } from '@nrwl/devkit';
 
 jest.mock('@storybook/core-server', () => ({
   buildDev: jest.fn().mockImplementation(() => Promise.resolve()),
-  build: jest.fn().mockImplementation(() => Promise.resolve()),
+  build: jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      port: 4400,
+    })
+  ),
 }));
-import { buildDev } from '@storybook/core-server';
+import { build } from '@storybook/core-server';
 
 import storybookExecutor from './storybook.impl';
 import { join } from 'path';
-import { readFileSync } from 'fs-extra';
 import { CLIOptions } from '@storybook/types';
 import { CommonNxStorybookConfig } from '../../utils/models';
 
-// TODO(katerina): Update when Storybook 7
-
 describe('@nrwl/storybook:storybook', () => {
   let context: ExecutorContext;
   let options: CLIOptions & CommonNxStorybookConfig;
   beforeEach(() => {
-    // preserve original package.json file to memory
     const rootPath = join(__dirname, `../../../../../`);
-    const packageJsonPath = join(
-      rootPath,
-      `node_modules/@storybook/react/package.json`
-    );
-    const storybookPath = join(rootPath, '.storybook');
 
     options = {
-      uiFramework: '@storybook/react',
       port: 4400,
-      configDir: storybookPath,
+      configDir: join(__dirname, `/../../utils/test-configs/.storybook`),
     };
-    vol.fromJSON({
-      [packageJsonPath]: readFileSync(packageJsonPath).toString(),
-    });
-    vol.mkdirSync(storybookPath, {
-      recursive: true,
-    });
+
     context = {
       root: rootPath,
       cwd: rootPath,
@@ -54,22 +40,7 @@ describe('@nrwl/storybook:storybook', () => {
             targets: {
               build: {
                 executor: '@nrwl/web:webpack',
-                options: {
-                  compiler: 'babel',
-                  outputPath: 'dist/apps/webre',
-                  index: 'apps/webre/src/index.html',
-                  baseHref: '/',
-                  main: 'apps/webre/src/main.tsx',
-                  polyfills: 'apps/webre/src/polyfills.ts',
-                  tsConfig: 'apps/webre/tsconfig.app.json',
-                  assets: [
-                    'apps/webre/src/favicon.ico',
-                    'apps/webre/src/assets',
-                  ],
-                  styles: ['apps/webre/src/styles.css'],
-                  scripts: [],
-                  webpackConfig: '@nrwl/react/plugins/webpack',
-                },
+                options: {},
               },
               storybook: {
                 executor: '@nrwl/storybook:storybook',
@@ -82,16 +53,18 @@ describe('@nrwl/storybook:storybook', () => {
       nxJsonConfiguration: {},
       isVerbose: false,
     };
-    jest.mock('fs', () => fsMock);
-    jest.spyOn(fs, 'statSync').mockReturnValue({
-      isDirectory: () => true,
-    } as fs.Stats);
   });
 
   it('should provide options to storybook', async () => {
     const iterator = storybookExecutor(options, context);
     const { value } = await iterator.next();
-    expect(value).toEqual({ success: true });
-    expect(buildDev).toHaveBeenCalled();
+    expect(value).toEqual({
+      success: true,
+      info: {
+        baseUrl: 'http://localhost:4400',
+        port: 4400,
+      },
+    });
+    expect(build).toHaveBeenCalled();
   });
 });