fix(storybook): ignore nx storybook plugin from sb eslint (#16725)

.eslintrc.json

@@ -20,6 +20,12 @@
           }
         ]
       }
+    ],
+    "storybook/no-uninstalled-addons": [
+      "error",
+      {
+        "ignore": ["@nx/react/plugins/storybook"]
+      }
     ]
   },
   "overrides": [

graph/client/.storybook/main.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
   stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: [

graph/ui-components/.storybook/main.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
   stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'],

graph/ui-graph/.storybook/main.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
   stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'],

graph/ui-tooltips/.storybook/main.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/no-uninstalled-addons */
 module.exports = {
   stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'],

package.json

@@ -154,7 +154,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",
+    "eslint-plugin-storybook": "^0.6.12",
     "express": "^4.18.1",
     "fast-xml-parser": "^4.0.9",
     "figures": "3.2.0",

packages/storybook/migrations.json

@@ -53,6 +53,12 @@
       "version": "16.0.0-beta.1",
       "description": "Update workspace to use Storybook v7",
       "implementation": "./src/migrations/update-16-0-0/update-sb-7"
+    },
+    "update-16-1-0": {
+      "cli": "nx",
+      "version": "16.1.0-beta.0",
+      "description": "Ignore @nx/react/plugins/storybook in Storybook eslint rules.",
+      "factory": "./src/migrations/update-16-1-0/eslint-ignore-react-plugin"
     }
   },
   "packageJsonUpdates": {
@@ -62,6 +68,10 @@
         "@storybook/core-server": ">=7.0.0 <7.0.8"
       },
       "packages": {
+        "eslint-plugin-storybook": {
+          "version": "^0.6.12",
+          "alwaysAddToPackageJson": false
+        },
         "@storybook/core-server": {
           "version": "^7.0.8",
           "alwaysAddToPackageJson": false

packages/storybook/src/migrations/update-16-1-0/eslint-ignore-react-plugin.spec.ts

@@ -0,0 +1,90 @@
+import {
+  addProjectConfiguration,
+  ProjectConfiguration,
+  readJson,
+  Tree,
+  updateJson,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import * as variousProjects from '../update-15-7-0/test-configs/various-configs.json';
+import eslintIgnoreReactPlugin from './eslint-ignore-react-plugin';
+
+describe('Ignore @nx/react/plugins/storybook in Storybook eslint plugin', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(
+      tree,
+      variousProjects['main-vite'].name,
+      variousProjects['main-vite'] as ProjectConfiguration
+    );
+    tree.write('apps/main-vite/tsconfig.json', `{}`);
+    tree.write(
+      `apps/main-vite/.storybook/main.js`,
+      `
+      module.exports = {
+        stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
+        addons: ['@storybook/addon-essentials'],
+        framework: {
+          name: '@storybook/react-vite',
+          options: {},
+        },
+      };
+      `
+    );
+    addProjectConfiguration(
+      tree,
+      variousProjects['main-webpack'].name,
+      variousProjects['main-webpack'] as ProjectConfiguration
+    );
+
+    if (!tree.exists('.eslintrc.json')) {
+      tree.write('.eslintrc.json', '{}');
+    }
+    updateJson(tree, '.eslintrc.json', (json) => {
+      json.extends ??= [];
+      json.extends.push('plugin:storybook/recommended');
+      return json;
+    });
+  });
+
+  it('should not ignore the plugin if it is not used', async () => {
+    await eslintIgnoreReactPlugin(tree);
+    const eslintConfig = readJson(tree, '.eslintrc.json');
+    expect(eslintConfig.rules).toBeUndefined();
+  });
+
+  it(`should add ignore @nx/react/plugins/storybook to eslint config`, async () => {
+    tree.write('apps/main-webpack/tsconfig.json', `{}`);
+    tree.write(
+      `apps/main-webpack/.storybook/main.js`,
+      `
+      module.exports = {
+        stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
+        addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'],
+        framework: {
+          name: '@storybook/react-webpack5',
+          options: {},
+        },
+      };
+      `
+    );
+
+    await eslintIgnoreReactPlugin(tree);
+
+    const eslintConfig = readJson(tree, '.eslintrc.json');
+    expect(eslintConfig.rules).toHaveProperty(
+      'storybook/no-uninstalled-addons'
+    );
+
+    expect(eslintConfig.rules['storybook/no-uninstalled-addons']).toMatchObject(
+      [
+        'error',
+        {
+          ignore: ['@nx/react/plugins/storybook'],
+        },
+      ]
+    );
+  });
+});

packages/storybook/src/migrations/update-16-1-0/eslint-ignore-react-plugin.ts

@@ -0,0 +1,49 @@
+import {
+  getProjects,
+  joinPathFragments,
+  Tree,
+  formatFiles,
+  updateJson,
+} from '@nx/devkit';
+
+export default async function (tree: Tree) {
+  const projects = getProjects(tree);
+  const reactPlugin = '@nx/react/plugins/storybook';
+  let shouldIgnoreReactPlugin = false;
+
+  for (const [, config] of projects) {
+    let sbConfigPath = joinPathFragments(config.root, '.storybook/main.ts');
+
+    if (!tree.exists(sbConfigPath)) {
+      sbConfigPath = joinPathFragments(config.root, '.storybook/main.js');
+    }
+
+    if (!tree.exists(sbConfigPath)) {
+      continue;
+    }
+
+    const sbConfig = tree.read(sbConfigPath, 'utf-8');
+    console.log('sbConfig', sbConfig);
+    if (sbConfig.includes(reactPlugin)) {
+      shouldIgnoreReactPlugin = true;
+      break;
+    }
+  }
+
+  if (shouldIgnoreReactPlugin && tree.exists('.eslintrc.json')) {
+    updateJson(tree, '.eslintrc.json', (json) => {
+      if (json.extends?.includes('plugin:storybook/recommended')) {
+        json.rules ??= {};
+        json.rules['storybook/no-uninstalled-addons'] = [
+          'error',
+          {
+            ignore: ['@nx/react/plugins/storybook'],
+          },
+        ];
+        return json;
+      }
+    });
+  }
+
+  await formatFiles(tree);
+}

pnpm-lock.yaml

@@ -551,8 +551,8 @@ devDependencies:
     specifier: 4.6.0
     version: 4.6.0(eslint@8.15.0)
   eslint-plugin-storybook:
-    specifier: ^0.6.11
+    specifier: ^0.6.12
-    version: 0.6.11(eslint@8.15.0)(typescript@5.0.2)
+    version: 0.6.12(eslint@8.15.0)(typescript@4.9.5)
   express:
     specifier: ^4.18.1
     version: 4.18.1
@@ -15501,8 +15501,8 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: true
 
-  /eslint-plugin-storybook@0.6.11(eslint@8.15.0)(typescript@5.0.2):
+  /eslint-plugin-storybook@0.6.12(eslint@8.15.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-lIVmCqQgA0bhcuS1yWYBFrnPHBKPEQI+LHPDtlN81UE1/17onCqgwUW7Nyt7gS2OHjCAiOR4npjTGEoe0hssKw==}
+    resolution: {integrity: sha512-XbIvrq6hNVG6rpdBr+eBw63QhOMLpZneQVSooEDow8aQCWGCk/5vqtap1yxpVydNfSxi3S/3mBBRLQqKUqQRww==}
     engines: {node: 12.x || 14.x || >= 16}
     peerDependencies:
       eslint: '>=6'