chore(eslint-config): remove storybook as transitive dep

Author: coldlink

.changeset/thin-adults-yawn.md

@@ -0,0 +1,10 @@
+---
+'@guardian/eslint-config': major
+---
+
+Make `eslint-plugin-storybook` into an optional peer dependency
+
+tl;dr if using the `storybook` config from `@guardian/eslint-config`, then you must have both `eslint-plugin-storybook` and `storybook` installed. If you are not using the `storybook` config, then you do not need to have either of these installed.
+
+- Issue was found that since `eslint-plugin-storybook` is a direct dependency of `@guardian/eslint-config`, and that `storybook` is a peer dependency of `eslint-plugin-storybook`, then `storybook` is always installed as a transitive dependency of `@guardian/eslint-config`. This causes issues for projects that use `@guardian/eslint-config` but do not use Storybook, as they will have an unnecessary dependency on Storybook and may encounter issues if they have a different version of Storybook installed.
+- Now we've moved `eslint-plugin-storybook` from `dependencies` to `peerDependencies` and mark it as optional via `peerDependenciesMeta`. This means that projects that use `@guardian/eslint-config` but do not use Storybook will not have `eslint-plugin-storybook` or `storybook` installed, and will not encounter any issues. Projects that do use the `storybook` config from `@guardian/eslint-config` will need to have both `eslint-plugin-storybook` and `storybook` installed as direct dependencies.

libs/@guardian/eslint-config/README.md

@@ -106,3 +106,5 @@ Provides a collection of configs for checking React components.
 #### [`configs.storybook`](./configs/storybook.js)
 
 Provides a collection of configs for checking Storybook stories.
+
+When using the storybook config, be sure to also have `eslint-plugin-storybook` and `storybook` installed in your project, otherwise the config will be ignored.

libs/@guardian/eslint-config/configs/storybook.js

@@ -1,15 +1,16 @@
-// eslint-plugin-storybook has a dependency on on Storybook which causes it
-// to crash eslint when it is imported if Storybook is not installed.
+// eslint-plugin-storybook is an optional peer dependency.
+// It also has its own peer dependency on Storybook which can cause it
+// to crash eslint when imported if Storybook is not installed.
 const loadStorybookRecommended = async () => {
 	try {
-		// eslint-disable-next-line import/no-unresolved -- We're checking if Storybook is resolveable
+		// eslint-disable-next-line import/no-unresolved -- We're checking if Storybook is resolvable
 		await import('storybook');
+		// Check that plugin is also available
+		const storybook = await import('eslint-plugin-storybook');
+		return storybook.configs['flat/recommended'];
 	} catch {
 		return [];
 	}
-
-	const storybook = await import('eslint-plugin-storybook');
-	return storybook.configs['flat/recommended'];
 };
 
 export default [

libs/@guardian/eslint-config/package.json

@@ -22,7 +22,6 @@
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "7.0.1",
-		"eslint-plugin-storybook": "10.2.13",
 		"globals": "17.3.0",
 		"read-package-up": "12.0.0",
 		"typescript-eslint": "8.55.0"
@@ -32,7 +31,13 @@
 		"wireit": "0.14.12"
 	},
 	"peerDependencies": {
-		"eslint": "^9.39.1"
+		"eslint": "^9.39.1",
+		"eslint-plugin-storybook": "^10.2.13"
+	},
+	"peerDependenciesMeta": {
+		"eslint-plugin-storybook": {
+			"optional": true
+		}
 	},
 	"wireit": {
 		"lint": {

package.json

@@ -28,6 +28,7 @@
 			"ignoreMissing": [
 				"@types/node",
 				"eslint",
+				"eslint-plugin-storybook",
 				"prettier"
 			]
 		},