Run Chromatic on PRs, update GitHub Actions + Dependabot (#276)

* Enable Dependabot updates

* GitHub Actions formatting etc

* Update GitHub Actions

* Default to development build without `NODE_ENV=production`

* Configure Storybook JSX runtime

* Configure Storybook projects manually

* Formatting

* Use corepack to verify yarn version

* Add Chromatic to PR checks

* Add colour output to GitHub Actions

* Skip Rollup `"use client"`directive warnings in Storybook

Author: colinrotherham

.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'

.github/workflows/ci.yml

@@ -2,30 +2,62 @@ name: CI Build
 
 on:
   push:
-    branches: main
+    branches: [main]
+
   pull_request:
 
 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:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Enable corepack
+        run: corepack enable
+
       - 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
-        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
+
+      - 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 }}

.github/workflows/release.yml

@@ -9,20 +9,19 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
-      - 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: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          cache: yarn
+          node-version-file: .nvmrc
 
       - name: Yarn Install
         run: yarn

.github/workflows/storybook.yml

@@ -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,7 +17,17 @@ const config: StorybookConfig = {
 
   viteFinal(config) {
     return mergeConfig(config, {
-      plugins: [tsConfigPaths()],
+      build: {
+        rollupOptions: {
+          onwarn(warning, handler) {
+            if (isLogIgnored(warning)) {
+              return;
+            }
+
+            handler(warning);
+          },
+        },
+      },
       css: {
         preprocessorOptions: {
           scss: {
@@ -25,7 +36,15 @@ const config: StorybookConfig = {
           },
         },
       },
-    });
+      esbuild: {
+        jsx: 'automatic',
+      },
+      plugins: [
+        tsConfigPaths({
+          projects: ['./tsconfig.dev.json', './tsconfig.build.json'],
+        }),
+      ],
+    } satisfies InlineConfig);
   },
 };
 

.storybook/main.ts

@@ -7,11 +7,9 @@ packageExtensions:
     peerDependencies:
       "@types/react": "*"
       "@types/react-dom": "*"
-
   "@storybook/react-vite@*":
     peerDependencies:
       typescript: "*"
-
-  "storybook@*":
+  storybook@*:
     peerDependencies:
       "@testing-library/dom": "*"

.yarnrc.yml

@@ -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,
       },

babel.config.cjs

@@ -52,16 +52,16 @@
   ],
   "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",
+    "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"

package.json

@@ -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'
  */