Ncrs 4107 upgrade nhsuk react components extensions to react 19

.babelrc

@@ -1,9 +1,13 @@
 {
-  "presets": ["@babel/env", "@babel/typescript", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
   "plugins": [
-    "@babel/plugin-transform-numeric-separator",
-    "@babel/proposal-class-properties",
-    "@babel/proposal-object-rest-spread"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-numeric-separator"
   ],
   "ignore": ["**/__tests__/*", "*/__mocks__/*"]
 }

.github/workflows/ci.yml

@@ -7,9 +7,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-      - name: Yarn Install
-        run: yarn
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: yarn install
       - name: Lint
         run: yarn lint
       - name: Jest Tests

.github/workflows/storybook.yml

@@ -9,14 +9,15 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@master
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          persist-credentials: false
-
-      - name: Yarn Install
+          node-version: '20'
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
         run: yarn install
-
       - name: Deploy Storybook
         run: yarn storybook-to-ghpages --ci
         env:

.storybook/_storybook.scss

@@ -1,6 +1,8 @@
-@import '../src/styles/core.scss';
-@import '../src/styles/variables.scss';
-@import '../src/all.scss';
+@use '/node_modules/nhsuk-frontend/dist/nhsuk.scss';
+@use '../src/styles/core.scss';
+@use '../src/styles/variables.scss';
+@use '../src.all.scss';
+@use '../src/components.scss';
 
 %demo-centered {
   display: block;

.storybook/main.js

@@ -1,3 +1,25 @@
+// .storybook/main.js
+const path = require('path');
+const fs = require('fs');
+
+function nhsAssetsDir() {
+  // Find the installed package root
+  const pkgDir = path.dirname(require.resolve('nhsuk-frontend/package.json'));
+  // Try common locations across versions
+  const candidates = [
+    path.join(pkgDir, 'assets'),
+    path.join(pkgDir, 'dist', 'assets'),
+    path.join(pkgDir, 'packages', 'assets'),
+  ];
+  return candidates.find(fs.existsSync) || null;
+}
+
+const assets = nhsAssetsDir();
+
 module.exports = {
-  addons: ['@storybook/addon-storysource'],
+  framework: { name: '@storybook/react-vite', options: {} },
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  addons: [],
+  staticDirs: assets ? [{ from: assets, to: '/assets' }] : [],
+  typescript: { reactDocgen: 'react-docgen-typescript' },
 };

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/css/index.css" />

.storybook/preview.js

@@ -0,0 +1,11 @@
+
+import 'nhsuk-frontend/dist/nhsuk/index.scss';
+
+
+const preview = {
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default preview;

README.md

@@ -32,15 +32,15 @@ import SubNavigation from 'nhsuk-react-components/dist/src/components/sub-naviga
 
 ### Styles
 
-The package comes with two separate "master" stylesheets. These can be found at `~nhsuk-react-components-extensions/css/all.css` and `~nhsuk-react-components-extensions/css/components.css`.
+The package comes with two separate "master" stylesheets. These can be found at `~nhsuk-react-components-extensions/css.css` and `~nhsuk-react-components-extensions/css/components.css`.
 
 If you are already using components from `nhsuk-frontend` or the `nhsuk-react-components` packages, it is strongly recommended to use the `components.css` file as this only contains the additional styles required to use the extra components in this library.
 
 If you are not using any of those other packages, or the standard NHS.UK stylesheets, you will require the `all.css` file as this contains all of the core NHS.UK styles as well as the component styles.
 
 ```scss
 // Core NHS.UK Styles and Components
-@import '~nhsuk-react-components-extensions/css/all.css';
+@import '~nhsuk-react-components-extensions/css.css';
 
 // Just Components
 @import '~nhsuk-react-components-extensions/css/components.css';

eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import react from "eslint-plugin-react";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import jest from "eslint-plugin-jest";
@@ -41,11 +44,7 @@ export default [...compat.extends("airbnb-typescript"), {
             ecmaFeatures: {
                 jsx: true,
             },
-            projectService: {
-                // this is to allow the test files to be linted, even though they aren't included in tsconfig.json
-                allowDefaultProject: ["src/components/*/__tests__/*.test.tsx", ],
-                maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 10,
-            },
+            projectService: true,
             tsconfigRootDir: import.meta.dirname,
         },
     },
@@ -79,4 +78,4 @@ export default [...compat.extends("airbnb-typescript"), {
         "jsx-a11y/anchor-has-content": 0,
         "jsx-a11y/heading-has-content": 0,
     },
-}];
+}, ...storybook.configs["flat/recommended"]];

package.json

@@ -1,36 +1,51 @@
 {
   "name": "nhsuk-react-components-extensions",
-  "version": "2.3.0-beta",
+  "version": "2.3.5-beta",
+  "style": "dist/index.css",
   "author": {
     "email": "thomas.judd-cooper1@nhs.net",
     "name": "Thomas Judd-Cooper",
     "url": "https://tomjuddcooper.co.uk"
   },
   "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "nhsuk-react-components": "6.0.0-beta.2"
+  },
   "devDependencies": {
     "@babel/cli": "^7.25.9",
     "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-numeric-separator": "^7.25.9",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
+    "@babel/preset-typescript": "^7.27.1",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@storybook/addon-storysource": "^5.3.3",
-    "@storybook/react": "^5.2.1",
+    "@react-input/mask": "^2.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@storybook/addon-a11y": "9.1.3",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/react-vite": "9.1.3",
     "@storybook/storybook-deployer": "^2.8.16",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "~12.0.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/add": "^2",
+    "@types/babel__preset-env": "^7",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-input-mask": "^3.0.5",
+    "@types/stylus": "^0",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
+    "add": "^2.0.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.0",
     "css-loader": "^5.0.0",
@@ -44,48 +59,51 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "9.1.3",
     "globals": "^15.13.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "nhsuk-frontend": "8.1.0",
-    "nhsuk-react-components": "^5.0.0",
+    "less": "^4.4.1",
+    "nhsuk-frontend": "^10",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "react": "^16.9.3",
-    "react-dom": "^16.9.3",
-    "rollup": "^4.0.0",
-    "sass": "~1.70.0",
+    "react": "^19.1.1",
+    "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.1.1",
+    "rollup": "^4.50.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.92.1",
+    "sass-embedded": "^1.92.1",
     "sass-loader": "^10.0.0",
-    "storybook": "^8.4.6",
+    "storybook": "9.1.3",
     "style-loader": "^2.0.0",
     "stylelint": "^16.10.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-scss": "^6.8.1",
+    "stylus": "^0.64.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.3",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
     "webpack": "^5.0.0"
   },
   "peerDependencies": {
-    "nhsuk-react-components": "^5.0.0",
-    "react": "^16.9.3",
-    "react-dom": "^16.9.3"
-  },
-  "dependencies": {
-    "classnames": "^2.2.6",
-    "react-input-mask": "^2.0.4"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "scripts": {
     "build": "yarn build:dist && yarn build:lib && yarn build:sass",
     "build:dist": "rollup -c",
-    "build:lib": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline && tsc --emitDeclarationOnly",
+    "build:lib": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline && tsc --emitDeclarationOnly --skipLibCheck",
     "build:sass": "sass src:css",
+    "build-storybook": "storybook build",
     "cleanup": "bash scripts/cleanup.sh",
     "lint": "stylelint --fix src/**/*.scss src/**/**/*.scss && eslint --fix src/*.ts src/components/**/*.ts src/components/**/*.tsx",
     "prebuild": "yarn lint && yarn test --coverage && yarn cleanup",
-    "storybook": "start-storybook",
+    "storybook": "storybook dev -p 6006",
     "test": "jest",
     "test:ci": "jest --coverage"
   },
@@ -94,7 +112,8 @@
     "lib",
     "css"
   ],
-  "module": "dist/index.es.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "main": "dist/index.js"
+  "main": "dist/index.js",
+  "packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb"
 }

rollup.config.mjs

@@ -1,20 +1,58 @@
-import typescript from '@rollup/plugin-typescript';
-import pkg from './package.json' assert { type: 'json' };
-import { nodeResolve } from '@rollup/plugin-node-resolve';
+// rollup.config.mjs
+import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import dts from 'rollup-plugin-dts';
+import pkg from './package.json' with { type: 'json' };
+
+export default [
+  // JS + CSS bundle
+  {
+    input: 'src/index.ts',
+    // DO NOT externalize styles here — let postcss handle them
+    external: [
+      /^react($|\/)/,
+      /^react-dom($|\/)/,
+      /^@types\/react($|\/)/,
+      /^@types\/react-dom($|\/)/,
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        extract: 'index.css',   // make the output predictable
+        minimize: true,
+        // optional: quiet dart-sass deprecations if you use legacy APIs
+        modules: false,
+        use: {
+          sass: {
+            quietDeps: true,
+            silenceDeprecations: ['legacy-js-api', 'misplaced-rest']
+          },
+        }
+      }),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: true,
+        declarationDir: './dist/types',
+        rootDir: './src',
+        noEmitOnError: true
+      }),
+    ],
+    output: [
+      { file: "dist/index.js", format: "cjs" },
+      { file: "dist/index.esm.js", format: "esm" },
+    ],
+  },
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: pkg.main, format: 'cjs', sourcemap: true },
-    { file: pkg.module, format: 'es', sourcemap: true }
-  ],
-  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
-  plugins: [
-    typescript({
-      declarationDir: './dist'
-    }),
-    nodeResolve(),
-    commonjs()
-  ],
-};
+  // .d.ts bundle
+  {
+    input: 'dist/types/index.d.ts',
+    output: [{ file: pkg.types, format: 'esm' }],
+    plugins: [dts()],
+    // Tell dts bundler to ignore style imports
+    external: [/\.s?css$/i, /\.less$/i, /\.styl(us)?$/i],
+  },
+];