updating compoment library to react 19

Author: richard smith

.eslintignore

@@ -4,21 +4,29 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
   viteFinal(config) {
     return mergeConfig(config, {
       plugins: [tsConfigPaths()],
+      css: {
+        preprocessorOptions: {
+          scss: {
+            quietDeps: true,
+            loadPaths: ['node_modules'],
+          },
+        },
+      },
     });
   },
 };
+
 export default config;

.eslintrc.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import nhsTheme from './theme';
 import { startCase, upperFirst } from 'lodash';
 

.storybook/main.ts

@@ -1,5 +1,5 @@
 import './storybook.scss';
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -18,5 +18,7 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs']
 };
 export default preview;

.storybook/manager.ts

@@ -1,5 +1,4 @@
-// Allow current nhsuk styles to override legacy
-@import 'nhsuk-frontend/dist/nhsuk';
+@forward 'nhsuk-frontend/dist/nhsuk';
 
 .tag-wrapper {
   display: flex;

.storybook/preview.ts .storybook/preview.mts.storybook/preview.ts renamed to .storybook/preview.mts

@@ -1,5 +1,8 @@
-import { create } from '@storybook/theming/create';
-const version = require('../package.json').version;
+import { create } from 'storybook/theming/create';
+import packageJson from '../package.json' assert { type: 'json' };
+
+const version = packageJson.version;
+
 
 export default create({
   base: 'light',

.storybook/storybook.scss

@@ -13,4 +13,4 @@
   "eslint.alwaysShowStatus": true,
   "eslint.workingDirectories": ["src"],
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

.storybook/theme.ts

@@ -0,0 +1,70 @@
+import js from '@eslint/js';
+import typescript from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import importPlugin from 'eslint-plugin-import';
+import storybook from 'eslint-plugin-storybook';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    ignores: ['jest.config.js', '.eslintrc.js', 'rollup.config.mjs', 'dist/**/*'],
+  },
+  {
+    files: ['src/**/*.{js,ts,tsx}', 'stories/**/*.{js,ts,tsx}'],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        project: './tsconfig.json',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescript,
+      react,
+      'react-hooks': reactHooks,
+      'jsx-a11y': jsxA11y,
+      import: importPlugin,
+      storybook,
+    },
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: './tsconfig.json',
+        },
+      },
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...typescript.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      ...jsxA11y.configs.recommended.rules,
+      'react/prop-types': 0,
+      'react/react-in-jsx-scope': 0,
+      'jsx-a11y/anchor-has-content': 0,
+      'jsx-a11y/alt-text': 0,
+      'jsx-a11y/heading-has-content': 0,
+      'react-hooks/exhaustive-deps': 0,
+      'no-redeclare': 'off',
+    },
+  },
+  {
+    files: ['*.stories.tsx'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+];

.vscode/settings.json

@@ -9,88 +9,106 @@
     "lib"
   ],
   "main": "dist/cjs/index.js",
-  "module": "dist/esm",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": false,
   "scripts": {
-    "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
-    "storybook": "storybook dev -p 6006",
+    "cleanup": "rm -rf dist/ lib/ >/dev/null 2>&1 || true",
     "build": "yarn cleanup && rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:ci": "jest --coverage",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
     "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
-    "build-storybook": "storybook build",
     "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn storybook --smoke-test"
   },
-  "license": "MIT",
+  "peerDependencies": {
+    "nhsuk-frontend": ">=10.0.0 <11.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.24.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/js": "^9.36.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-actions": "^8.0.5",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/manager-api": "^8.0.5",
-    "@storybook/preview-api": "^8.0.5",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-vite": "^8.0.5",
-    "@storybook/theming": "^8.0.5",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/babel__core": "^7",
-    "@types/jest": "^29.5.12",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-links": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/babel__preset-env": "^7",
+    "@types/eslint-plugin-jsx-a11y": "^6",
+    "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^15.0.2",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
-    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
+    "@types/lodash": "^4",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19",
+    "@types/stylus": "^0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "babel-jest": "^29.7.0",
-    "chromatic": "^6.17.3",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "babel-jest": "^30.2.0",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "9.1.3",
+    "globals": "^16.4.0",
+    "jest": "^30.1.3",
+    "jest-axe": "^10.0.0",
+    "jest-environment-jsdom": "^30.1.2",
     "nhsuk-frontend": "^10.0.0",
     "outdent": "^0.8.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.13.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass": "^1.53.0",
-    "storybook": "^8.0.5",
-    "ts-jest": "^29.1.2",
+    "sass-embedded": "^1.93.2",
+    "storybook": "^9.1.3",
+    "stylus": "^0.64.0",
+    "ts-jest": "^29.4.4",
+    "tslib": "^2.8.1",
     "typescript": "5.3.3",
-    "vite": "^4.5.3",
+    "vite": "^7.1.3",
     "vite-tsconfig-paths": "^4.3.2"
   },
+  "license": "MIT",
+  "packageManager": "[email protected]",
   "dependencies": {
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "nhsuk-frontend": ">=10.0.0 <11.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "chalk": "^5.6.2",
+    "classnames": "^2.5.1",
+    "i": "^0.3.7",
+    "lodash": "^4.17.21",
+    "npm": "^11.6.0"
   },
-  "packageManager": "[email protected]"
+  "typesVersions": {
+    "*": {
+      "react": [
+        "node_modules/react/index.d.ts"
+      ]
+    }
+  }
 }