Try out wireit on the storybook workflows (#1273)

Co-authored-by: Oliver Abrahams <[email protected]>

.github/actions/setup-node-env/action.yml

@@ -12,6 +12,9 @@ runs:
         node-version-file: '.nvmrc'
         cache: 'pnpm'
 
+    # Set up GitHub Actions caching for Wireit.
+    - uses: google/wireit@setup-github-actions-caching/v1
+
     - run: pnpm install --frozen-lockfile
       shell: bash
 

.github/workflows/chromatic.yml

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

.gitignore

@@ -12,3 +12,10 @@ dist
 tsconfig.tsbuildinfo
 
 **/cypress/screenshots
+
+# wireit cache dirs
+# https://github.com/google/wireit
+.wireit
+
+# storybook build dirs
+storybook-static

.vscode/extensions.json

@@ -4,6 +4,7 @@
 		"esbenp.prettier-vscode",
 		"dbaeumer.vscode-eslint",
 		"EditorConfig.EditorConfig",
-		"astro-build.astro-vscode"
+		"astro-build.astro-vscode",
+		"google.wireit"
 	]
 }

Makefile

@@ -15,7 +15,7 @@ ls:
 .PHONY: storybooks
 storybooks: env
 	$(call log,"Starting storybooks")
-	@corepack pnpm nx run storybooks:dev --skip-nx-cache=$(SKIP_NX_CACHE)
+	@corepack pnpm --filter=storybooks dev
 
 # runs the dev targets for all projects in single instance
 .PHONY: dev
@@ -85,7 +85,7 @@ build: env clean
 .PHONY: build-storybooks
 build-storybooks: env
 	$(call log,"Building storybooks")
-	@corepack pnpm nx run-many --target=build-storybook --skip-nx-cache=$(SKIP_NX_CACHE)
+	@corepack pnpm run -r build-storybook
 
 ############################### MANAGING PACKAGES ##############################
 

README.md

@@ -71,17 +71,7 @@ Tasks that apply to all projects are defined in the [`Makefile`](./Makefile):
 
 ### Project-specific tasks
 
-Project-specific are defined in their `project.json`, and can be run with `make <project>:<task>`:
-
-#### github-pages
-
-- `make github-pages:build`
-- `make github-pages:dev`
-- `make github-pages:serve:e2e`
-
-#### storybooks
-
-- `make storybooks:dev`
+Project-specific tasks are defined as `scripts` in a `package.json` or `targets` in a `project.json` files, and can be run with `make <project>:<script>`/`make <project>:<target>`:
 
 #### @guardian/ab-core
 
@@ -104,6 +94,7 @@ Project-specific are defined in their `project.json`, and can be run with `make
 #### @guardian/browserslist-config
 
 - `make @guardian/browserslist-config:build`
+- `make @guardian/browserslist-config:update-readme`
 - `make @guardian/browserslist-config:verify-dist`
 
 #### @guardian/cobalt-plugin-ts
@@ -208,6 +199,7 @@ Project-specific are defined in their `project.json`, and can be run with `make
 
 - `make @guardian/source-react-components:build`
 - `make @guardian/source-react-components:build-storybook`
+- `make @guardian/source-react-components:create-icons`
 - `make @guardian/source-react-components:dev`
 - `make @guardian/source-react-components:fix`
 - `make @guardian/source-react-components:lint`
@@ -231,6 +223,16 @@ Project-specific are defined in their `project.json`, and can be run with `make
 - `make @guardian/tsconfig:build`
 - `make @guardian/tsconfig:verify-dist`
 
+#### github-pages
+
+- `make github-pages:build`
+- `make github-pages:dev`
+- `make github-pages:serve:e2e`
+
+#### storybooks
+
+- `make storybooks:dev`
+
 <!-- END TASKS -->
 
 ### Task caching
@@ -240,7 +242,7 @@ Tasks are managed by [Nx](https://nx.dev/).
 <!-- START CACHED_TASKS -->
 <!-- THIS CONTENT IS AUTOGENERATED BY tools/scripts/maintain-readme/index.mjs -->
 
-[Nx remotely caches the output](https://nx.dev/using-nx/mental-model#computation-hashing-and-caching) of `build`, `build-storybook`, `e2e`, `lint`, `test`, and `verify-dist`.
+[Nx remotely caches the output](https://nx.dev/using-nx/mental-model#computation-hashing-and-caching) of `build`, `e2e`, `lint`, `test`, and `verify-dist`.
 
 <!-- END CACHED_TASKS -->
 

apps/storybooks/README.md

@@ -7,3 +7,7 @@ This project collates projects of the CSNX monorepo.
 _Note that all the individual project's storybooks must be running before starting this one._
 
 That's why we wait 5 seconds in the `storybooks` target of this application's `project.json` before starting this one (you cannnot put comments in there, otherwise this comment would be there instead)
+
+## Production
+
+There is a production version of the collated wider Guardian storybooks at https://github.com/guardian/storybooks.

apps/storybooks/package.json

@@ -2,5 +2,34 @@
 	"name": "storybooks",
 	"version": "1.0.0",
 	"private": true,
-	"description": "Collates storybooks of the CSNX monorepo."
+	"description": "Collates storybooks of the CSNX monorepo.",
+	"scripts": {
+		"dev": "wireit"
+	},
+	"devDependencies": {
+		"wireit": "0.14.4"
+	},
+	"wireit": {
+		"dev": {
+			"command": "sleep 5 && storybook dev --port 4400 --quiet",
+			"dependencies": [
+				"dev:foundations",
+				"dev:react-components",
+				"dev:react-components-development-kitchen"
+			],
+			"service": true
+		},
+		"dev:foundations": {
+			"command": "cd ../../libs/@guardian/source-foundations && storybook dev --no-open --port 4401 --quiet",
+			"service": true
+		},
+		"dev:react-components": {
+			"command": "cd ../../libs/@guardian/source-react-components && storybook dev --no-open --port 4402 --quiet",
+			"service": true
+		},
+		"dev:react-components-development-kitchen": {
+			"command": "cd ../../libs/@guardian/source-react-components-development-kitchen && storybook dev --no-open --port 4403 --quiet",
+			"service": true
+		}
+	}
 }

libs/@guardian/source-foundations/package.json

@@ -3,17 +3,22 @@
 	"version": "14.1.4",
 	"license": "Apache-2.0",
 	"sideEffects": false,
+	"scripts": {
+		"build-storybook": "wireit",
+		"storybook": "storybook dev"
+	},
 	"dependencies": {
 		"mini-svg-data-uri": "1.4.4"
 	},
 	"devDependencies": {
 		"@emotion/react": "11.11.1",
-		"@guardian/design-tokens": "workspace:0.1.0--pre.0",
+		"@guardian/design-tokens": "workspace:*",
 		"lightningcss": "1.24.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"tslib": "2.6.2",
-		"typescript": "5.3.3"
+		"typescript": "5.3.3",
+		"wireit": "0.14.4"
 	},
 	"peerDependencies": {
 		"tslib": "^2.6.2",
@@ -23,5 +28,18 @@
 		"typescript": {
 			"optional": true
 		}
+	},
+	"wireit": {
+		"build-storybook": {
+			"command": "NODE_ENV=production storybook build --webpack-stats-json",
+			"files": [
+				"**/*.{ts,tsx,js,json,mdx,md}",
+				"!storybook-static/**",
+				"!jest*"
+			],
+			"output": [
+				"storybook-static/**/*"
+			]
+		}
 	}
 }

libs/@guardian/source-foundations/project.json

@@ -54,24 +54,6 @@
 				"passWithNoTests": false,
 				"watch": true
 			}
-		},
-		"storybook": {
-			"executor": "nx:run-commands",
-			"options": {
-				"commands": ["storybook dev"],
-				"cwd": "libs/@guardian/source-foundations"
-			}
-		},
-		"build-storybook": {
-			"executor": "nx:run-commands",
-			"outputs": [
-				"{workspaceRoot}/dist/storybook/libs/@guardian/source-foundations"
-			],
-			"options": {
-				"command": "NODE_ENV=production storybook build -o ../../../dist/storybook/libs/@guardian/source-foundations --webpack-stats-json",
-				"cwd": "libs/@guardian/source-foundations",
-				"color": true
-			}
 		}
 	},
 	"tags": []

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

@@ -2,6 +2,10 @@
 	"name": "@guardian/source-react-components-development-kitchen",
 	"version": "19.0.0",
 	"sideEffects": false,
+	"scripts": {
+		"build-storybook": "wireit",
+		"storybook": "storybook dev"
+	},
 	"devDependencies": {
 		"@babel/core": "7.24.0",
 		"@emotion/react": "11.11.1",
@@ -11,7 +15,8 @@
 		"@types/react": "18.2.11",
 		"react": "18.2.0",
 		"tslib": "2.6.2",
-		"typescript": "5.3.3"
+		"typescript": "5.3.3",
+		"wireit": "0.14.4"
 	},
 	"peerDependencies": {
 		"@emotion/react": "^11.11.1",
@@ -26,5 +31,18 @@
 		"typescript": {
 			"optional": true
 		}
+	},
+	"wireit": {
+		"build-storybook": {
+			"command": "NODE_ENV=production storybook build --webpack-stats-json",
+			"files": [
+				"**/*.{ts,tsx,js,json,mdx,md}",
+				"!storybook-static/**",
+				"!jest*"
+			],
+			"output": [
+				"storybook-static"
+			]
+		}
 	}
 }

libs/@guardian/source-react-components-development-kitchen/project.json

@@ -66,24 +66,6 @@
 				"passWithNoTests": false,
 				"watch": true
 			}
-		},
-		"storybook": {
-			"executor": "nx:run-commands",
-			"options": {
-				"commands": ["storybook dev"],
-				"cwd": "libs/@guardian/source-react-components-development-kitchen"
-			}
-		},
-		"build-storybook": {
-			"executor": "nx:run-commands",
-			"outputs": [
-				"{workspaceRoot}/dist/storybook/libs/@guardian/source-react-components-development-kitchen"
-			],
-			"options": {
-				"command": "NODE_ENV=production storybook build -o ../../../dist/storybook/libs/@guardian/source-react-components-development-kitchen --webpack-stats-json",
-				"cwd": "libs/@guardian/source-react-components-development-kitchen",
-				"color": true
-			}
 		}
 	},
 	"tags": []

libs/@guardian/source-react-components/package.json

@@ -4,7 +4,9 @@
 	"license": "Apache-2.0",
 	"sideEffects": false,
 	"scripts": {
-		"create-icons": "ts-node scripts/create-icons"
+		"build-storybook": "wireit",
+		"create-icons": "ts-node scripts/create-icons",
+		"storybook": "storybook dev"
 	},
 	"devDependencies": {
 		"@babel/core": "7.24.0",
@@ -24,7 +26,8 @@
 		"react": "18.2.0",
 		"ts-node": "10.9.2",
 		"tslib": "2.6.2",
-		"typescript": "5.3.3"
+		"typescript": "5.3.3",
+		"wireit": "0.14.4"
 	},
 	"peerDependencies": {
 		"@emotion/react": "^11.11.1",
@@ -37,5 +40,18 @@
 		"typescript": {
 			"optional": true
 		}
+	},
+	"wireit": {
+		"build-storybook": {
+			"command": "NODE_ENV=production storybook build --webpack-stats-json",
+			"files": [
+				"**/*.{ts,tsx,js,json,mdx,md}",
+				"!storybook-static/**",
+				"!jest*"
+			],
+			"output": [
+				"storybook-static"
+			]
+		}
 	}
 }

libs/@guardian/source-react-components/project.json

@@ -60,24 +60,6 @@
 				"passWithNoTests": false,
 				"watch": true
 			}
-		},
-		"storybook": {
-			"executor": "nx:run-commands",
-			"options": {
-				"commands": ["storybook dev"],
-				"cwd": "libs/@guardian/source-react-components"
-			}
-		},
-		"build-storybook": {
-			"executor": "nx:run-commands",
-			"outputs": [
-				"{workspaceRoot}/dist/storybook/libs/@guardian/source-react-components"
-			],
-			"options": {
-				"command": "NODE_ENV=production storybook build -o ../../../dist/storybook/libs/@guardian/source-react-components --webpack-stats-json",
-				"cwd": "libs/@guardian/source-react-components",
-				"color": true
-			}
 		}
 	},
 	"tags": []