handle csnx storybooks from central storybooks app

.github/workflows/chromatic.yml

@@ -33,8 +33,7 @@ jobs:
         with:
           projectToken: ${{ secrets[matrix.token] }}
           token: ${{ secrets.GITHUB_TOKEN }}
-          storybookBaseDir: 'libs/@guardian/${{ matrix.lib }}'
-          storybookBuildDir: 'libs/@guardian/${{ matrix.lib }}/storybook-static'
+          storybookBuildDir: 'apps/storybooks/storybook-static/${{ matrix.lib }}'
           exitOnceUploaded: true
           onlyChanged: '!(main)' # turbosnap on non-main branches
           skip: |

.npmrc

@@ -1,7 +1 @@
-# Youtube types declare an ambient 'YT' namespace which is normally
-# inaccesible to the @csnx/npm-package (because pnpm doesn't hoist by default).
-# This means projects which use 'YT' fail at build time.
-# This hoists youtube types to the root node_modules folder so they are discoverable
-# from anywhere.
-public-hoist-pattern[]=@types/youtube
 link-workspace-packages=true

Makefile

@@ -13,10 +13,10 @@ ls:
 ###################################### DEV #####################################
 
 # runs storybook for all projects in single instance
-.PHONY: storybooks
-storybooks: env
+.PHONY: storybook
+storybook: env
 	$(call log,"Starting storybooks")
-	@corepack pnpm --filter=storybooks dev
+	@corepack pnpm --filter=storybooks storybook
 
 # runs the dev targets for all projects in single instance
 .PHONY: dev
@@ -101,7 +101,7 @@ build: env
 .PHONY: build-storybook
 build-storybook: env
 	$(call log,"Building storybooks")
-	@corepack pnpm run -r build-storybook
+	@corepack pnpm --filter storybooks --parallel "/^build-storybook:.*/"
 
 ############################### MANAGING PACKAGES ##############################
 
@@ -489,8 +489,24 @@ github-pages\:start: env
 github-pages\:tsc: env
 	@corepack pnpm --filter github-pages tsc
 
-.PHONY: storybooks\:dev
-storybooks\:dev: env
-	@corepack pnpm --filter storybooks dev
+.PHONY: storybooks\:build-storybook\:source
+storybooks\:build-storybook\:source: env
+	@corepack pnpm --filter storybooks build-storybook:source
+
+.PHONY: storybooks\:build-storybook\:source-development-kitchen
+storybooks\:build-storybook\:source-development-kitchen: env
+	@corepack pnpm --filter storybooks build-storybook:source-development-kitchen
+
+.PHONY: storybooks\:storybook
+storybooks\:storybook: env
+	@corepack pnpm --filter storybooks storybook
+
+.PHONY: storybooks\:storybook\:source
+storybooks\:storybook\:source: env
+	@corepack pnpm --filter storybooks storybook:source
+
+.PHONY: storybooks\:storybook\:source-development-kitchen
+storybooks\:storybook\:source-development-kitchen: env
+	@corepack pnpm --filter storybooks storybook:source-development-kitchen
 
 ############################### END PROJECT_TASKS ##############################

README.md

@@ -61,7 +61,7 @@ Tasks that apply to all projects are defined in the [`Makefile`](./Makefile):
 - `make formatting:check` _check repo for formatting errors_
 - `make lint` _checks all projects for lint errors_
 - `make ls` _lists available `make` targets_
-- `make storybooks` _runs storybook for all projects in single instance_
+- `make storybook` _runs storybook for all projects in single instance_
 - `make test` _runs the unit tests for all projects_
 - `make test:coverage` _get test coverage for CSTI projects_
 - `make tsc` _type-checking all projects_
@@ -196,7 +196,11 @@ Project-specific tasks are defined as `scripts` in their `package.json`, and can
 
 #### storybooks
 
-- `make storybooks:dev`
+- `make storybooks:build-storybook:source`
+- `make storybooks:build-storybook:source-development-kitchen`
+- `make storybooks:storybook`
+- `make storybooks:storybook:source`
+- `make storybooks:storybook:source-development-kitchen`
 
 <!-- END TASKS -->
 

apps/storybooks/.storybook/main.ts

@@ -1,7 +1,47 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { env } from 'node:process';
+import { isOneOf, isUndefined } from '@guardian/libs';
+
+const configName = env.CONFIG;
+
+if (isUndefined(configName)) {
+	throw new Error('process.env.CONFIG is not defined');
+}
+
+const projectConfigs = {
+	composed: {
+		stories: ['../src/README.mdx'],
+		refs: () => ({
+			source: {
+				title: 'source',
+				url: 'http://localhost:4401',
+			},
+			'source-development-kitchen': {
+				title: 'source-development-kitchen',
+				url: 'http://localhost:4402',
+			},
+		}),
+	},
+	source: {
+		stories: [
+			'../../../libs/@guardian/source/src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+		],
+	},
+	'source-development-kitchen': {
+		stories: [
+			'../../../libs/@guardian/source-development-kitchen/src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+		],
+	},
+};
+
+const isValidConfigName = isOneOf(Object.keys(projectConfigs));
+
+if (!isValidConfigName(configName)) {
+	throw new Error(`No config exists for '${configName}'.`);
+}
 
 const config: StorybookConfig = {
-	stories: ['../src/README.mdx'],
+	...projectConfigs[configName as keyof typeof projectConfigs],
 	framework: {
 		name: '@storybook/react-vite',
 		options: {},
@@ -12,20 +52,6 @@ const config: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
 	],
-	refs: () => {
-		return {
-			source: {
-				title: 'source',
-				// port set in libs/@guardian/source/package.json
-				url: 'http://localhost:4401',
-			},
-			'source-development-kitchen': {
-				title: 'source-development-kitchen',
-				// port set in libs/@guardian/source-development-kitchen/package.json
-				url: 'http://localhost:4402',
-			},
-		};
-	},
 };
 
 // eslint-disable-next-line import/no-default-export -- it's the storybook way

apps/storybooks/package.json

@@ -3,40 +3,78 @@
 	"version": "1.0.0",
 	"private": true,
 	"description": "Collates storybooks of the CSNX monorepo.",
+	"type": "module",
 	"scripts": {
-		"dev": "wireit"
+		"build-storybook:source": "wireit",
+		"build-storybook:source-development-kitchen": "wireit",
+		"storybook": "wireit",
+		"storybook:source": "wireit",
+		"storybook:source-development-kitchen": "wireit"
 	},
 	"devDependencies": {
-		"@emotion/react": "11.11.3",
+		"@emotion/react": "11.13.3",
+		"@guardian/libs": "workspace:*",
 		"@guardian/source": "workspace:*",
-		"@storybook/addon-a11y": "8.2.9",
-		"@storybook/addon-essentials": "8.2.9",
-		"@storybook/addon-interactions": "8.2.9",
-		"@storybook/addon-links": "8.2.9",
-		"@storybook/blocks": "8.2.9",
-		"@storybook/react": "8.2.9",
-		"@storybook/react-vite": "8.2.9",
-		"@types/react": "18.2.79",
-		"react": "18.2.0",
-		"storybook": "8.2.9",
+		"@storybook/addon-a11y": "8.3.3",
+		"@storybook/addon-essentials": "8.3.3",
+		"@storybook/addon-interactions": "8.3.3",
+		"@storybook/addon-links": "8.3.3",
+		"@storybook/blocks": "8.3.3",
+		"@storybook/react": "8.3.3",
+		"@storybook/react-vite": "8.3.3",
+		"@types/react": "18.3.8",
+		"react": "18.3.1",
+		"storybook": "8.3.3",
 		"wireit": "0.14.8"
 	},
 	"wireit": {
-		"dev": {
-			"command": "storybook dev --port 4400 --quiet",
+		"build-storybook:source": {
+			"command": "CONFIG=source NODE_ENV=production storybook build --stats-json -o storybook-static/source",
 			"dependencies": [
-				"storybooks",
-				"wait"
+				"../../libs/@guardian/source:build"
 			],
-			"service": true
+			"output": [
+				"./storybook-static/source"
+			]
+		},
+		"build-storybook:source-development-kitchen": {
+			"command": "CONFIG=source-development-kitchen NODE_ENV=production storybook build --stats-json -o storybook-static/source-development-kitchen",
+			"dependencies": [
+				"../../libs/@guardian/source-development-kitchen:build"
+			],
+			"output": [
+				"./storybook-static/source-development-kitchen"
+			]
 		},
-		"storybooks": {
-			"command": "pnpm -r --parallel storybook --no-open --quiet",
+		"storybook": {
+			"command": "CONFIG=composed storybook dev --port 4400",
+			"dependencies": [
+				"storybook:source",
+				"storybook:source-development-kitchen"
+			],
 			"service": true
 		},
-		"wait": {
-			"//": "wait for project storybooks to start before starting the composed one",
-			"command": "sleep 5"
+		"storybook:source": {
+			"command": "CONFIG=source storybook dev --no-open --port 4401",
+			"dependencies": [
+				"../../libs/@guardian/source:build"
+			],
+			"service": {
+				"readyWhen": {
+					"lineMatches": "localhost:4401"
+				}
+			}
+		},
+		"storybook:source-development-kitchen": {
+			"command": "CONFIG=source-development-kitchen storybook dev --no-open --port 4402",
+			"dependencies": [
+				"../../libs/@guardian/source-development-kitchen:build"
+			],
+			"service": {
+				"readyWhen": {
+					"lineMatches": "localhost:4402"
+				}
+			}
 		}
 	}
 }

libs/@guardian/ab-react/package.json

@@ -28,9 +28,10 @@
 	"devDependencies": {
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/eslint-config": "workspace:*",
-		"@testing-library/react": "14.2.1",
+		"@testing-library/react": "16.0.1",
 		"@types/jest": "29.5.8",
 		"@types/react": "18.2.79",
+		"@types/react-dom": "18.2.25",
 		"eslint": "9.9.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
@@ -46,7 +47,6 @@
 		"@guardian/ab-core": "^8.0.0",
 		"@types/react": "^18.2.79",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
 		"tslib": "^2.6.2",
 		"typescript": "~5.5.2"
 	},

libs/@guardian/ab-react/tsconfig.json

@@ -3,6 +3,10 @@
 	"include": ["**/*"],
 	"exclude": ["node_modules", "dist", ".wireit", "jest.dist.setup.js"],
 	"compilerOptions": {
-		"jsxImportSource": "react"
+		"jsxImportSource": "react",
+		"paths": {
+			// https://github.com/pnpm/pnpm/issues/7158#issuecomment-1783974123
+			"react": ["./node_modules/@types/react"]
+		}
 	}
 }

libs/@guardian/source-development-kitchen/package.json

@@ -20,7 +20,7 @@
 		"dev": "jest --watch",
 		"fix": "wireit",
 		"lint": "wireit",
-		"storybook": "storybook dev --port 4402",
+		"storybook": "wireit",
 		"test": "wireit",
 		"tsc": "wireit",
 		"verify-dist": "wireit"
@@ -30,20 +30,13 @@
 		"@guardian/eslint-config": "workspace:*",
 		"@guardian/libs": "19.0.0",
 		"@guardian/source": "8.0.0",
-		"@storybook/addon-a11y": "8.2.9",
-		"@storybook/addon-essentials": "8.2.9",
-		"@storybook/addon-interactions": "8.2.9",
-		"@storybook/addon-links": "8.2.9",
-		"@storybook/blocks": "8.2.9",
-		"@storybook/react": "8.2.9",
-		"@storybook/react-vite": "8.2.9",
+		"@storybook/react": "8.3.3",
 		"@types/jest": "29.5.8",
 		"@types/react": "18.2.79",
 		"eslint": "9.9.0",
 		"jest": "29.7.0",
 		"react": "18.2.0",
 		"rollup": "4.21.0",
-		"storybook": "8.2.9",
 		"ts-jest": "29.2.3",
 		"tslib": "2.6.2",
 		"typescript": "5.5.2",
@@ -53,7 +46,7 @@
 		"@emotion/react": "^11.11.3",
 		"@guardian/libs": "^19.0.0",
 		"@guardian/source": "^8.0.0",
-		"@types/react": "^18.2.79",
+		"@types/react": "^18.2.11",
 		"react": "^18.2.0",
 		"tslib": "^2.6.2",
 		"typescript": "~5.5.2"
@@ -95,18 +88,9 @@
 			]
 		},
 		"build-storybook": {
-			"command": "NODE_ENV=production storybook build --webpack-stats-json",
+			"//": "just a convenience task so you can build it from here",
 			"dependencies": [
-				"__deps__"
-			],
-			"files": [
-				"**",
-				"!storybook-static/**",
-				"!jest*",
-				"!.eslintcache"
-			],
-			"output": [
-				"storybook-static"
+				"../../../apps/storybooks:build-storybook:source-development-kitchen"
 			]
 		},
 		"fix": {
@@ -136,6 +120,12 @@
 			],
 			"output": []
 		},
+		"storybook": {
+			"//": "Just a convenience task so you can run it from here. `make storybook` is probably a better option.",
+			"dependencies": [
+				"../../../apps/storybooks:storybook:source-development-kitchen"
+			]
+		},
 		"test": {
 			"command": "jest",
 			"dependencies": [