Merge pull request #273 from NHSDigital/react

colinrotherham · web-flow · commit 2bcc3a06ee0e · 2025-10-07T12:18:52.000+01:00
Upgrade to React v19 alongside v18
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -3,36 +3,20 @@ nodeLinker: node-modules
 npmRegistryServer: "https://registry.yarnpkg.com"
 
 packageExtensions:
-  "@storybook/addon-essentials@*":
+  "@storybook/addon-docs@*":
     peerDependencies:
-      react: "*"
-      react-dom: "*"
+      "@types/react": "*"
+      "@types/react-dom": "*"
 
-  "@storybook/addon-controls@*":
+  "@storybook/addon-essentials@*":
     peerDependencies:
-      react: "*"
-      react-dom: "*"
+      "@types/react": "*"
+      "@types/react-dom": "*"
 
-  "@storybook/manager-api@*":
+  "@storybook/core@*":
     peerDependencies:
-      react: "*"
-      react-dom: "*"
+      storybook: "*"
 
   "@storybook/react-vite@*":
     peerDependencies:
       typescript: "*"
-
-  "@storybook/cli@*":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
-
-  "@storybook/core-server@*":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
-
-  "storybook@*":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
diff --git a/package.json b/package.json
@@ -77,24 +77,23 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@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",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.3.0",
     "@types/eslint": "^9.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash": "^4.17.20",
     "@types/node": "^24.6.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "babel-jest": "^30.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-replace-import-extension": "^1.1.5",
@@ -115,12 +114,12 @@
     "nhsuk-frontend": "^10.0.0",
     "outdent": "^0.8.0",
     "prettier": "^3.6.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "rollup": "^4.52.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sass": "^1.53.0",
-    "storybook": "^8.0.5",
+    "storybook": "^8.6.14",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.45.0",
@@ -130,8 +129,8 @@
   "peerDependencies": {
     "classnames": ">=2.5.0",
     "nhsuk-frontend": ">=10.0.0 <11.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
     "tslib": ">=2.8.0"
   },
   "packageManager": "yarn@4.10.3"
diff --git a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   createContext,
diff --git a/src/components/content-presentation/table/Table.tsx b/src/components/content-presentation/table/Table.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   forwardRef,
diff --git a/src/components/content-presentation/table/TableContext.ts b/src/components/content-presentation/table/TableContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, type ReactNode } from 'react';
 
 export interface ITableContext {
diff --git a/src/components/content-presentation/table/TableSectionContext.ts b/src/components/content-presentation/table/TableSectionContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 
 export enum TableSection {
diff --git a/src/components/content-presentation/table/components/TableCell.tsx b/src/components/content-presentation/table/components/TableCell.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { useContext, type ComponentPropsWithoutRef, type FC } from 'react';
 import { TableContext, type ITableContext } from '../TableContext.js';
diff --git a/src/components/content-presentation/table/components/TableHead.tsx b/src/components/content-presentation/table/components/TableHead.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { useContext, type ComponentPropsWithoutRef, type FC } from 'react';
 import { TableContext, type ITableContext } from '../TableContext.js';
diff --git a/src/components/content-presentation/table/components/TableRow.tsx b/src/components/content-presentation/table/components/TableRow.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   Children,
diff --git a/src/components/content-presentation/tabs/Tabs.tsx b/src/components/content-presentation/tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type Tabs as TabsModule } from 'nhsuk-frontend';
 import {
diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type Button as ButtonModule } from 'nhsuk-frontend';
 import {
diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type CharacterCount as CharacterCountModule } from 'nhsuk-frontend';
 import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type Checkboxes as CheckboxesModule } from 'nhsuk-frontend';
 import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
diff --git a/src/components/form-elements/checkboxes/CheckboxesContext.ts b/src/components/form-elements/checkboxes/CheckboxesContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 
 export interface ICheckboxesContext {
diff --git a/src/components/form-elements/checkboxes/components/Item.tsx b/src/components/form-elements/checkboxes/components/Item.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   forwardRef,
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   createRef,
diff --git a/src/components/form-elements/date-input/DateInputContext.ts b/src/components/form-elements/date-input/DateInputContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, type ChangeEvent } from 'react';
 
 export type IDateInputContext = {
diff --git a/src/components/form-elements/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap b/src/components/form-elements/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap
@@ -44,7 +44,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -67,7 +66,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -90,7 +88,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -241,7 +238,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -264,7 +260,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -287,7 +282,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -453,7 +447,6 @@ exports[`DateInput matches snapshot with custom date fields and error message 1`
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -565,7 +558,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -588,7 +580,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -611,7 +602,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>
diff --git a/src/components/form-elements/date-input/components/IndividualDateInputs.tsx b/src/components/form-elements/date-input/components/IndividualDateInputs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { forwardRef, useContext, type ChangeEvent, type ComponentPropsWithoutRef } from 'react';
 import { DateInputContext, type IDateInputContext } from '../DateInputContext.js';
diff --git a/src/components/form-elements/error-summary/ErrorSummary.tsx b/src/components/form-elements/error-summary/ErrorSummary.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type ErrorSummary as ErrorSummaryModule } from 'nhsuk-frontend';
 import {
diff --git a/src/components/form-elements/form/FormContext.ts b/src/components/form-elements/form/FormContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 
 export interface IFormContext {
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type Radios as RadiosModule } from 'nhsuk-frontend';
 import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
diff --git a/src/components/form-elements/radios/RadiosContext.ts b/src/components/form-elements/radios/RadiosContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 
 export type IRadiosContext = {
diff --git a/src/components/form-elements/radios/components/Item.tsx b/src/components/form-elements/radios/components/Item.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   forwardRef,
diff --git a/src/components/navigation/card/CardContext.ts b/src/components/navigation/card/CardContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 import { type CardType } from '#util/types/index.js';
 
diff --git a/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap b/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -148,6 +148,11 @@ exports[`Card Care card variant urgent matches the snapshot 1`] = `
 
 exports[`Card matches snapshot (via server): client 1`] = `
 <div>
+  <link
+    as="image"
+    href="imageSrc"
+    rel="preload"
+  />
   <div
     class="nhsuk-card"
   >
@@ -187,6 +192,11 @@ exports[`Card matches snapshot (via server): client 1`] = `
 
 exports[`Card matches snapshot (via server): server 1`] = `
 <div>
+  <link
+    as="image"
+    href="imageSrc"
+    rel="preload"
+  />
   <div
     class="nhsuk-card"
   >
diff --git a/src/components/navigation/card/components/CardContent.tsx b/src/components/navigation/card/components/CardContent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { forwardRef, useContext, type ComponentPropsWithoutRef } from 'react';
 import { CardContext } from '../CardContext.js';
diff --git a/src/components/navigation/card/components/CardHeading.tsx b/src/components/navigation/card/components/CardHeading.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { forwardRef, useContext } from 'react';
 import { CardContext } from '../CardContext.js';
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type Header as HeaderModule } from 'nhsuk-frontend';
 import {
diff --git a/src/components/navigation/header/HeaderContext.ts b/src/components/navigation/header/HeaderContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, type Dispatch, type SetStateAction } from 'react';
 
 export interface IHeaderContext {
diff --git a/src/components/navigation/header/components/Logo.tsx b/src/components/navigation/header/components/Logo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useContext, useEffect, type FC } from 'react';
 import { HeaderContext, type IHeaderContext } from '../HeaderContext.js';
 
diff --git a/src/components/navigation/header/components/Navigation.tsx b/src/components/navigation/header/components/Navigation.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { useContext, useEffect, type ComponentPropsWithoutRef, type FC } from 'react';
 import { HeaderContext, type IHeaderContext } from '../HeaderContext.js';
diff --git a/src/components/navigation/header/components/ServiceName.tsx b/src/components/navigation/header/components/ServiceName.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useContext, type ComponentPropsWithoutRef, type FC } from 'react';
 import { HeaderContext, type IHeaderContext } from '../HeaderContext.js';
 
diff --git a/src/components/navigation/skip-link/SkipLink.tsx b/src/components/navigation/skip-link/SkipLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import { type SkipLink as SkipLinkModule } from 'nhsuk-frontend';
 import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import {
   useContext,
diff --git a/src/components/utils/FormGroupContext.ts b/src/components/utils/FormGroupContext.ts
diff --git a/src/util/components/index.ts b/src/util/components/index.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import classNames from 'classnames';`
`2`	`4`	`import {`
`3`	`5`	`createContext,`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import { createContext, type ReactNode } from 'react';`
`2`	`4`
`3`	`5`	`export interface ITableContext {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import { createContext } from 'react';`
`2`	`4`
`3`	`5`	`export enum TableSection {`