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

.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

@@ -153,7 +153,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,9 +53,24 @@
  "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": {
+ "16.1.0": {
+ "version": "16.1.0-beta.0",
+ "packages": {
+ "eslint-plugin-storybook": {
+ "version": "^0.6.12",
+ "alwaysAddToPackageJson": false
+ }
+ }
+ },
  "16.0.0": {
  "version": "16.0.0-beta.1",
  "packages": {

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);
+}