Ncrs 4111/ncrs 4106/upgrade of react storybook and scss

.eslintrc.js

@@ -1,41 +1,41 @@
 module.exports = {
-  parserOptions: {
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-  },
-  env: {
-    browser: true,
-    jest: true,
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {},
-    },
-    react: {
-      version: 'detect',
-    },
-  },
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-    'plugin:jsx-a11y/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  rules: {
-    'react/prop-types': 0,
-    'jsx-a11y/anchor-has-content': 0,
-    'jsx-a11y/alt-text': 0,
-    'jsx-a11y/heading-has-content': 0,
-    'react-hooks/exhaustive-deps': 0,
-  },
-  overrides: [
-    {
-      files: ['*.stories.tsx'],
-      rules: { '@typescript-eslint/no-unused-vars': 'off' },
-    },
-  ],
+	parserOptions: {
+		project: './tsconfig.json',
+		tsconfigRootDir: __dirname,
+	},
+	env: {
+		browser: true,
+		jest: true,
+	},
+	settings: {
+		'import/resolver': {
+			typescript: {},
+		},
+		react: {
+			version: 'detect',
+		},
+	},
+	extends: [
+		'plugin:react/recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+		'plugin:import/errors',
+		'plugin:import/warnings',
+		'plugin:import/typescript',
+		'plugin:jsx-a11y/recommended',
+		'plugin:react-hooks/recommended',
+		'plugin:storybook/recommended'],
+	rules: {
+		'react/prop-types': 0,
+		'jsx-a11y/anchor-has-content': 0,
+		'jsx-a11y/alt-text': 0,
+		'jsx-a11y/heading-has-content': 0,
+		'react-hooks/exhaustive-deps': 0,
+	},
+	overrides: [
+		{
+			files: ['*.stories.tsx'],
+			rules: { '@typescript-eslint/no-unused-vars': 'off' },
+		},
+	],
 };

.storybook/main.ts

@@ -3,22 +3,35 @@ import { mergeConfig } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: true,
-  },
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
-  viteFinal(config) {
-    return mergeConfig(config, {
-      plugins: [tsConfigPaths()],
-    });
-  },
+	stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
+	addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+	},
+
+	viteFinal(config) {
+		return mergeConfig(config, {
+		plugins: [tsConfigPaths()],
+		css: {
+			preprocessorOptions: {
+			scss: {
+				// Hide deprecation noise coming from dependencies like nhsuk-frontend
+				quietDeps: true,
+				// Specifically silence the Dart Sass "misplaced-rest" deprecation
+				// (Type cast to any in case your TS types don't include this yet)
+				silenceDeprecations: ['misplaced-rest'],
+				// Optional: ensure node_modules is in the Sass load path
+				// includePaths: ['node_modules'],
+			} as any,
+			},
+		},
+		});
+	}
 };
+
 export default config;

.storybook/manager.ts

@@ -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/preview.ts → .storybook/preview.mts

@@ -1,5 +1,5 @@
 import './storybook.scss';
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +10,7 @@ const preview: Preview = {
           'Welcome',
           'Migration Guides',
           'Form Elements',
+          'Extensions',
           'Content Presentation',
           'Navigation',
           'Layout',
@@ -18,5 +19,7 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs']
 };
 export default preview;

.storybook/storybook.scss

@@ -1,5 +1,7 @@
 // Allow current nhsuk styles to override legacy
-@import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
+@use '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
+@use '../src/styles/core.scss';
+@use '../src/styles/variables.scss';
 
 .tag-wrapper {
   display: flex;

.storybook/theme.ts

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

.vscode/settings.json

@@ -6,11 +6,25 @@
     "source.fixAll": "explicit",
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript", "typescript"],
+  "eslint.validate": [
+    "javascript",
+    "typescript"
+  ],
   "eslint.codeAction.showDocumentation": {
     "enable": true
   },
   "eslint.alwaysShowStatus": true,
-  "eslint.workingDirectories": ["src"],
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "eslint.workingDirectories": [
+    "src"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
+}

bundle-base.tsconfig.json

@@ -18,6 +18,7 @@
     "outDir": "./dist",
     "paths": {
       "@components/*": ["src/components/*"],
+      "@extensions/*": ["src/components/extension/*"],
       "@content-presentation/*": ["src/components/content-presentation/*"],
       "@form-elements/*": ["src/components/form-elements/*"],
       "@navigation/*": ["src/components/navigation/*"],

package.json

@@ -9,87 +9,81 @@
     "lib"
   ],
   "main": "dist/cjs/index.js",
-  "module": "dist/esm",
+  "module": "dist/esm/index.js",
+  "type": "module",
   "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": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.24.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
     "@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",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^15.0.2",
-    "@types/react": "^18.2.60",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-links": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/lodash": "^4",
+    "@types/react": "^19.1.12",
     "@types/react-dom": "^18.2.19",
-    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
-    "@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",
+    "@types/stylus": "^0",
+    "eslint-plugin-storybook": "9.1.3",
+    "less": "^4.4.1",
     "nhsuk-frontend": "^9.0.1",
-    "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-postcss": "^4.0.2",
     "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": "^1.91.0",
+    "sass-embedded": "^1.92.1",
+    "storybook": "^9.1.3",
+    "stylus": "^0.64.0",
+    "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": "yarn@4.1.1",
   "dependencies": {
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "nhsuk-frontend": ">=9.0.0 <10.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "classnames": "^2.5.1",
+    "i": "^0.3.7",
+    "lodash": "^4.17.21",
+    "npm": "^11.6.0"
   },
-  "packageManager": "yarn@4.1.1"
+  "typesVersions": {
+    "*": {
+      "react": [
+        "node_modules/react/index.d.ts"
+      ]
+    }
+  }
 }