From 3afa67cf02ac25d650e2ba2cdc3efb4b4abdc493 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 10:47:48 +0100 Subject: [PATCH 01/11] Enable Dependabot updates --- .github/dependabot.yml | 78 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 000000000..3c7361087 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,78 @@ +version: 2 + +updates: + # Update npm packages + - package-ecosystem: npm + directory: / + + # Group packages into shared PR + groups: + build: + patterns: + - '@babel/*' + - '@rollup/*' + - '@types/react' + - '@types/react-*' + - 'classnames' + - 'nhsuk-frontend' + - 'react' + - 'react-dom' + - 'rollup' + - 'tslib' + + lint: + patterns: + - '@eslint/*' + - '@types/*' + - 'eslint' + - 'eslint-*' + - 'globals' + - 'prettier' + - 'typescript' + - 'typescript-*' + + # Exclude packages in other groups + exclude-patterns: + - '@types/jest' + - '@types/jest-*' + - '@types/react' + - '@types/react-*' + + test: + patterns: + - '@testing-library/*' + - '@types/jest' + - '@types/jest-*' + - 'babel-*' + - 'jest' + - 'jest-*' + + tools: + patterns: + - '@storybook/*' + - 'lodash' + - 'outdent' + - 'sass-embedded' + - 'storybook' + - 'vite' + - 'vite-*' + + schedule: + interval: monthly + + versioning-strategy: increase + + allow: + # Include direct package.json updates + - dependency-type: direct + + # Include indirect browser data updates + # https://caniuse.com + - dependency-name: caniuse-lite + + # Update GitHub Actions + - package-ecosystem: github-actions + directory: / + + schedule: + interval: 'monthly' From 48597d2438125b98ce397a706c6d817c1ac0f61b Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 10:56:25 +0100 Subject: [PATCH 02/11] GitHub Actions formatting etc --- .github/workflows/ci.yml | 14 ++++++++++++-- .github/workflows/release.yml | 3 ++- .github/workflows/storybook.yml | 3 +-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0079701cb..670b1cb87 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -2,7 +2,8 @@ name: CI Build on: push: - branches: main + branches: [main] + pull_request: jobs: @@ -10,22 +11,31 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Node.js uses: actions/setup-node@v2 with: node-version-file: .nvmrc + - name: Enable corepack run: corepack enable + - name: Set Yarn version run: yarn set version stable + - name: Yarn Install run: yarn + - name: Lint run: yarn lint + - name: Jest Tests run: yarn test --coverage + - name: Typescript build run: yarn build + - name: Storybook build run: yarn build-storybook diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index da2ef3182..c11cdea56 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,7 +9,8 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - name: Checkout + uses: actions/checkout@v4 with: fetch-depth: 0 diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 5e1b5da38..ae1373927 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -2,8 +2,7 @@ name: Build & Deploy Storybook on: push: - branches: - - main + branches: [main] jobs: build-and-deploy: From fbe281001a257f936182057dddc76f2ee21cb84d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 14:34:27 +0100 Subject: [PATCH 03/11] Update GitHub Actions --- .github/workflows/ci.yml | 5 +++-- .github/workflows/release.yml | 5 +++-- .github/workflows/storybook.yml | 7 ++++--- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 670b1cb87..2f7b55107 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,11 +12,12 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v4 + uses: actions/checkout@v5 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v5 with: + cache: yarn node-version-file: .nvmrc - name: Enable corepack diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c11cdea56..8eb8cb266 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -10,13 +10,14 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v4 + uses: actions/checkout@v5 with: fetch-depth: 0 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v5 with: + cache: yarn node-version-file: .nvmrc - name: Enable corepack diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index ae1373927..1edf00987 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -9,13 +9,14 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v4 + uses: actions/checkout@v5 with: fetch-depth: 0 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v5 with: + cache: yarn node-version-file: .nvmrc - name: Enable corepack @@ -28,7 +29,7 @@ jobs: run: yarn install - name: Deploy Storybook - uses: chromaui/action@v1 + uses: chromaui/action@v13 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }} From 9def35cf6c33c697f42201aa2195c669b4a0a8e4 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 13:53:41 +0100 Subject: [PATCH 04/11] Default to development build without `NODE_ENV=production` --- babel.config.cjs | 6 ++++-- package.json | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/babel.config.cjs b/babel.config.cjs index 114f1daf9..26f171e80 100644 --- a/babel.config.cjs +++ b/babel.config.cjs @@ -1,4 +1,6 @@ -const { NODE_ENV } = process.env; +// Node.js environment with default +// https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production +const { NODE_ENV = 'development' } = process.env; /** * Babel config @@ -25,7 +27,7 @@ module.exports = { [ '@babel/preset-react', { - development: NODE_ENV === 'development', + development: NODE_ENV === 'test' || NODE_ENV === 'development', runtime: 'automatic', useBuiltIns: true, }, diff --git a/package.json b/package.json index d0cc1bd23..4f87e8939 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ ], "scripts": { "cleanup": "rm -rf dist/ > /dev/null", - "build": "yarn cleanup && rollup -c", - "storybook": "NODE_ENV=development storybook dev -p 6006", + "build": "NODE_ENV=production yarn cleanup && rollup -c", + "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "test": "jest", "test:watch": "jest --watch", From 630c48e4fc86f6919ab135d01a4d63834ae76178 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 13:54:01 +0100 Subject: [PATCH 05/11] Configure Storybook JSX runtime --- .storybook/main.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.storybook/main.ts b/.storybook/main.ts index 41dbb8186..bde4ba636 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -25,6 +25,9 @@ const config: StorybookConfig = { }, }, }, + esbuild: { + jsx: 'automatic', + }, }); }, }; From 216eb3f8390e48cd178b450cc2c915a9a576cf6b Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 13:54:16 +0100 Subject: [PATCH 06/11] Configure Storybook projects manually --- .storybook/main.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index bde4ba636..dfe3875f8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -16,7 +16,6 @@ const config: StorybookConfig = { viteFinal(config) { return mergeConfig(config, { - plugins: [tsConfigPaths()], css: { preprocessorOptions: { scss: { @@ -28,6 +27,11 @@ const config: StorybookConfig = { esbuild: { jsx: 'automatic', }, + plugins: [ + tsConfigPaths({ + projects: ['./tsconfig.dev.json', './tsconfig.build.json'], + }), + ], }); }, }; From 5417842838a6fe571891c419f91069d3d109bce8 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 11:27:56 +0100 Subject: [PATCH 07/11] Formatting --- .yarnrc.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index 52c22f2df..b3fa21cff 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -7,11 +7,9 @@ packageExtensions: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@storybook/react-vite@*": peerDependencies: typescript: "*" - - "storybook@*": + storybook@*: peerDependencies: "@testing-library/dom": "*" From 4efc3474d4df8ed61b34096dce2d3cd18fcef01c Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 11:51:06 +0100 Subject: [PATCH 08/11] Use corepack to verify yarn version --- .github/workflows/ci.yml | 9 +++------ .github/workflows/release.yml | 9 +++------ .github/workflows/storybook.yml | 9 +++------ 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2f7b55107..94250c441 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,18 +14,15 @@ jobs: - name: Checkout uses: actions/checkout@v5 + - name: Enable corepack + run: corepack enable + - name: Set up Node.js uses: actions/setup-node@v5 with: cache: yarn node-version-file: .nvmrc - - name: Enable corepack - run: corepack enable - - - name: Set Yarn version - run: yarn set version stable - - name: Yarn Install run: yarn diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8eb8cb266..54ad07efd 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -14,18 +14,15 @@ jobs: with: fetch-depth: 0 + - name: Enable corepack + run: corepack enable + - name: Set up Node.js uses: actions/setup-node@v5 with: cache: yarn node-version-file: .nvmrc - - name: Enable corepack - run: corepack enable - - - name: Set Yarn version - run: yarn set version stable - - name: Yarn Install run: yarn diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 1edf00987..31853ed61 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -13,18 +13,15 @@ jobs: with: fetch-depth: 0 + - name: Enable corepack + run: corepack enable + - name: Set up Node.js uses: actions/setup-node@v5 with: cache: yarn node-version-file: .nvmrc - - name: Enable corepack - run: corepack enable - - - name: Set Yarn version - run: yarn set version stable - - name: Yarn Install run: yarn install From 89e03cf97c210eaba2b8641e5a3ea0bf3017975e Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 13:32:56 +0100 Subject: [PATCH 09/11] Add Chromatic to PR checks --- .github/workflows/ci.yml | 24 ++++++++++++++++++++++++ .github/workflows/storybook.yml | 32 -------------------------------- 2 files changed, 24 insertions(+), 32 deletions(-) delete mode 100644 .github/workflows/storybook.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 94250c441..aafa47b8c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -10,6 +10,13 @@ jobs: build: runs-on: ubuntu-latest + env: + CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }} + CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.ref }} + CHROMATIC_SLUG: ${{ github.repository }} + CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + steps: - name: Checkout uses: actions/checkout@v5 @@ -37,3 +44,20 @@ jobs: - name: Storybook build run: yarn build-storybook + + - name: Switch to PR branch + if: ${{ github.event_name == 'pull_request' && env.CHROMATIC_PROJECT_TOKEN }} + uses: actions/checkout@v5 + with: + clean: false + fetch-depth: 0 + ref: ${{ env.CHROMATIC_BRANCH }} + + - name: Storybook deploy + uses: chromaui/action@v13 + with: + autoAcceptChanges: main + branchName: ${{ env.CHROMATIC_BRANCH}} + onlyChanged: ${{ github.event_name == 'pull_request' }} + projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }} + token: ${{ env.GITHUB_TOKEN }} diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml deleted file mode 100644 index 31853ed61..000000000 --- a/.github/workflows/storybook.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Build & Deploy Storybook - -on: - push: - branches: [main] - -jobs: - build-and-deploy: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v5 - with: - fetch-depth: 0 - - - name: Enable corepack - run: corepack enable - - - name: Set up Node.js - uses: actions/setup-node@v5 - with: - cache: yarn - node-version-file: .nvmrc - - - name: Yarn Install - run: yarn install - - - name: Deploy Storybook - uses: chromaui/action@v13 - with: - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - token: ${{ secrets.GITHUB_TOKEN }} From 04281586abed88c8360d6c2473f69c306dcf2aa7 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 11:50:41 +0100 Subject: [PATCH 10/11] Add colour output to GitHub Actions --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 4f87e8939..862ab6539 100644 --- a/package.json +++ b/package.json @@ -55,13 +55,13 @@ "build": "NODE_ENV=production yarn cleanup && rollup -c", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "test": "jest", - "test:watch": "jest --watch", + "test": "jest --color", + "test:watch": "yarn test --watch", "lint": "yarn lint:types && yarn lint:js && yarn lint:prettier", "lint:fix": "yarn lint:js:fix && yarn lint:prettier:fix", "lint:prettier": "prettier --check .", "lint:prettier:fix": "prettier --write .", - "lint:js": "eslint . --max-warnings 0", + "lint:js": "eslint . --color --max-warnings 0", "lint:js:fix": "yarn lint:js --fix", "lint:types": "tsc --build tsconfig.json --pretty", "prepublishOnly": "yarn lint && yarn test && yarn storybook --smoke-test" From 2578e87e36e25c8fc73b6ab8a918ea5d8e6f903a Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Wed, 8 Oct 2025 16:06:57 +0100 Subject: [PATCH 11/11] Skip Rollup `"use client"`directive warnings in Storybook --- .storybook/main.ts | 18 +++++++++++++++--- rollup.config.js | 25 +++++++++++++++++++------ 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index dfe3875f8..193423c10 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,6 +1,7 @@ -import type { StorybookConfig } from '@storybook/react-vite'; -import { mergeConfig } from 'vite'; +import { type StorybookConfig } from '@storybook/react-vite'; +import { mergeConfig, type InlineConfig } from 'vite'; import tsConfigPaths from 'vite-tsconfig-paths'; +import { isLogIgnored } from '../rollup.config.js'; const config: StorybookConfig = { stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'], @@ -16,6 +17,17 @@ const config: StorybookConfig = { viteFinal(config) { return mergeConfig(config, { + build: { + rollupOptions: { + onwarn(warning, handler) { + if (isLogIgnored(warning)) { + return; + } + + handler(warning); + }, + }, + }, css: { preprocessorOptions: { scss: { @@ -32,7 +44,7 @@ const config: StorybookConfig = { projects: ['./tsconfig.dev.json', './tsconfig.build.json'], }), ], - }); + } satisfies InlineConfig); }, }; diff --git a/rollup.config.js b/rollup.config.js index fadfee86c..3de4a7c56 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -40,7 +40,7 @@ export default defineConfig( }, ], external: ['react/jsx-runtime', ...external], - jsx: /** @type {const} */ ('react-jsx'), + jsx: 'react-jsx', treeshake: false, plugins: [ nodeResolve({ @@ -63,10 +63,7 @@ export default defineConfig( // Handle warnings as errors onwarn(warning) { - const { code, message } = warning; - - // Skip warnings about "use client" directives - if (code === 'MODULE_LEVEL_DIRECTIVE' && message.includes(`"use client"`)) { + if (isLogIgnored(warning)) { return; } @@ -77,5 +74,21 @@ export default defineConfig( ); /** - * @import { OutputOptions, RollupOptions } from 'rollup' + * Whether to ignore Rollup log messages + * + * @param {RollupLog} warning + */ +export function isLogIgnored(warning) { + const { code, message } = warning; + + // Skip warnings related to "use client" directives including + // source map issues when directives are bundled by Storybook + return ( + code === 'SOURCEMAP_ERROR' || + (code === 'MODULE_LEVEL_DIRECTIVE' && message.includes('"use client"')) + ); +} + +/** + * @import { OutputOptions, RollupLog, RollupOptions } from 'rollup' */