1. Fixed missing imports: Added React and JSX imports where needed

ricksmith130 · ricksmith130 · commit 73d0c12e3892 · 2025-09-22T12:33:14.000+01:00
2. Removed unused eslint-disable directives: Cleaned up all unnecessary disable comments
  3. Fixed unused args parameters in story files: Either removed them when not used or kept them when actually referenced in the render
  functions
  4. Maintained React imports: Made sure not to remove React imports that are actually needed
diff --git a/eslint.config.js b/eslint.config.js
@@ -55,6 +55,7 @@ export default [
 			'jsx-a11y/alt-text': 0,
 			'jsx-a11y/heading-has-content': 0,
 			'react-hooks/exhaustive-deps': 0,
+			'no-redeclare': 'off',
 		},
 	},
 	{
diff --git a/package.json b/package.json
@@ -54,8 +54,8 @@
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19",
     "@types/stylus": "^0",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
diff --git a/src/components/content-presentation/images/Images.tsx b/src/components/content-presentation/images/Images.tsx
@@ -10,7 +10,6 @@ interface ImageProps extends HTMLProps<HTMLImageElement> {
 
 const Images: FC<ImageProps> = ({ className, caption, ...rest }) => (
   <figure className="nhsuk-image">
-    {/* eslint-disable-next-line jsx-a11y/alt-text */}
     <img className={classNames('nhsuk-image__img', className)} {...rest} />
     {caption ? <figcaption className="nhsuk-image__caption">{caption}</figcaption> : null}
   </figure>
diff --git a/src/components/content-presentation/table/TableContext.ts b/src/components/content-presentation/table/TableContext.ts
@@ -7,7 +7,6 @@ export interface ITableContext {
 }
 
 const TableContext = createContext<ITableContext>({
-  /* eslint-disable @typescript-eslint/no-empty-function */
   isResponsive: false,
   headings: [],
   setHeadings: () => {},
diff --git a/src/components/content-presentation/table/components/__tests__/TableCell.test.tsx b/src/components/content-presentation/table/components/__tests__/TableCell.test.tsx
@@ -26,9 +26,7 @@ describe('Table.Cell', () => {
       </table>,
     );
 
-    // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenCalledTimes(1);
-    // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenLastCalledWith(
       'Table.Cell used outside of a Table.Head or Table.Body component. Unable to determine section type from context.',
     );
diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
@@ -76,7 +76,6 @@ export const Button: FC<ButtonProps> = ({
   const debouncedHandleClick = useDebounceTimeout(onClick, debounceTimeout);
 
   return (
-    // eslint-disable-next-line react/button-has-type
     <button
       className={classNames(
         'nhsuk-button',
diff --git a/src/components/form-elements/checkboxes/CheckboxContext.ts b/src/components/form-elements/checkboxes/CheckboxContext.ts
@@ -8,7 +8,6 @@ export interface ICheckboxContext {
 }
 
 export default createContext<ICheckboxContext>({
-  /* eslint-disable @typescript-eslint/no-empty-function */
   name: '',
   getBoxId: () => undefined,
   leaseReference: () => '',
diff --git a/src/components/form-elements/date-input/DateInputContext.ts b/src/components/form-elements/date-input/DateInputContext.ts
@@ -11,7 +11,6 @@ export type IDateInputContext = {
 };
 
 const DateInputContext = createContext<IDateInputContext>({
-  /* eslint-disable @typescript-eslint/no-empty-function */
   id: '',
   name: '',
   registerRef: () => {},
diff --git a/src/components/form-elements/radios/RadioContext.ts b/src/components/form-elements/radios/RadioContext.ts
@@ -10,7 +10,6 @@ export type IRadiosContext = {
 };
 
 export const RadiosContext = createContext<IRadiosContext>({
-  /* eslint-disable @typescript-eslint/no-empty-function */
   name: '',
   selectedRadio: '',
   getRadioId: () => '',
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { Children, cloneElement, FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 import { Container } from '@components/layout';
diff --git a/src/components/navigation/header/HeaderContext.ts b/src/components/navigation/header/HeaderContext.ts
@@ -17,7 +17,6 @@ export interface IHeaderContext {
 }
 
 export default createContext<IHeaderContext>({
-  /* eslint-disable @typescript-eslint/no-empty-function */
   orgName: undefined,
   serviceName: undefined,
   orgSplit: undefined,
diff --git a/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx b/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef, JSX } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import SkipLink from '../';
 
diff --git a/src/components/utils/__tests__/HeadingLevel.test.tsx b/src/components/utils/__tests__/HeadingLevel.test.tsx
@@ -23,7 +23,6 @@ describe('HeadingLevel', () => {
   });
 
   it('console.warn when headingLevel is invalid', () => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     // @ts-expect-error - testing invalid prop
     render(<HeadingLevel headingLevel="h7" />);
diff --git a/src/resources/character-count.js b/src/resources/character-count.js
@@ -104,9 +104,9 @@ class CharacterCount {
     let length;
     if (this.options.maxwords) {
       const tokens = text.match(/\S+/g) || []; // Matches consecutive non-whitespace chars
-      length = tokens.length; // eslint-disable-line prefer-destructuring
+      length = tokens.length;
     } else {
-      length = text.length; // eslint-disable-line prefer-destructuring
+      length = text.length;
     }
     return length;
   }
diff --git a/src/resources/checkboxes.js b/src/resources/checkboxes.js
@@ -30,7 +30,7 @@ const unCheckAllInputsExcept = function unCheckAllInputsExcept(input) {
   allInputsInSameExclusiveGroup.forEach((inputWithSameName) => {
     const hasSameFormOwner = input.form === inputWithSameName.form;
     if (hasSameFormOwner && inputWithSameName !== input) {
-      inputWithSameName.checked = false; // eslint-disable-line no-param-reassign
+      inputWithSameName.checked = false;
     }
   });
 
@@ -54,7 +54,7 @@ const unCheckExclusiveInputs = function unCheckExclusiveInputs(input) {
   allExclusiveInputsInSameExclusiveGroup.forEach((exclusiveInput) => {
     const hasSameFormOwner = input.form === exclusiveInput.form;
     if (hasSameFormOwner) {
-      exclusiveInput.checked = false; // eslint-disable-line no-param-reassign
+      exclusiveInput.checked = false;
     }
   });
 
diff --git a/src/resources/tabs.js b/src/resources/tabs.js
@@ -71,9 +71,7 @@ class Tabs {
       this.setAttributes($tab);
 
       // Save bounded functions to use when removing event listeners during teardown
-      // eslint-disable-next-line no-param-reassign
       $tab.boundTabClick = this.onTabClick.bind(this);
-      // eslint-disable-next-line no-param-reassign
       $tab.boundTabKeydown = this.onTabKeydown.bind(this);
 
       // Handle events
diff --git a/src/util/hooks/UseDevWarning.tsx b/src/util/hooks/UseDevWarning.tsx
@@ -7,7 +7,6 @@ type ConditionFn = () => boolean;
 const useDevWarning = (warning: string, condition: ConditionFn = () => true): void => {
   useEffect(() => {
     if (isDev() && condition()) {
-      // eslint-disable-next-line no-console
       console.warn(warning);
     }
   }, [warning]);
diff --git a/src/util/types/NHSUKTypes.ts b/src/util/types/NHSUKTypes.ts
@@ -14,6 +14,8 @@ export type ColWidth =
   | 'one-third'
   | 'one-quarter';
 
+import React from 'react';
+
 export type HTMLAttributesWithData<T> = React.HTMLAttributes<T> & {
   [key: `data-${string}`]: unknown;
 };
diff --git a/stories/Content Presentation/Details.stories.tsx b/stories/Content Presentation/Details.stories.tsx
@@ -129,7 +129,7 @@ export const Expander: Story = {
 };
 
 export const ExpanderGroup: Story = {
-  render: (args) => (
+  render: () => (
     <Details.ExpanderGroup>
       <Details expander>
         <Details.Summary>How to measure your blood glucose levels</Details.Summary>
diff --git a/stories/Content Presentation/DoAndDontList.stories.tsx b/stories/Content Presentation/DoAndDontList.stories.tsx
@@ -48,7 +48,7 @@ type Story = StoryObj<typeof DoAndDontList>;
 DoAndDontList.Item.displayName = 'DoAndDontList.Item';
 
 export const Do: Story = {
-  render: (args) => (
+  render: () => (
     <DoAndDontList listType="do">
       <DoAndDontList.Item>
         cover blisters that are likely to burst with a soft plaster or dressing
@@ -62,7 +62,7 @@ export const Do: Story = {
 };
 
 export const Dont: Story = {
-  render: (args) => (
+  render: () => (
     <DoAndDontList listType="dont">
       <DoAndDontList.Item>burst a blister yourself</DoAndDontList.Item>
       <DoAndDontList.Item>peel the skin off a burst blister</DoAndDontList.Item>
diff --git a/stories/Content Presentation/Hero.stories.tsx b/stories/Content Presentation/Hero.stories.tsx
@@ -13,7 +13,7 @@ Hero.Heading.displayName = 'Hero.Heading';
 Hero.Text.displayName = 'Hero.Text';
 
 export const HeroWithHeadingAndContent: Story = {
-  render: (args) => (
+  render: () => (
     <Hero>
       <Hero.Heading>We&apos;re here for you.</Hero.Heading>
       <Hero.Text>Helping you take control of your health and wellbeing.</Hero.Text>
@@ -22,7 +22,7 @@ export const HeroWithHeadingAndContent: Story = {
 };
 
 export const HeroWithImageHeadingAndContent: Story = {
-  render: (args) => (
+  render: () => (
     <Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg">
       <Hero.Heading>We&apos;re here for you.</Hero.Heading>
       <Hero.Text>Helping you take control of your health and wellbeing.</Hero.Text>
@@ -31,7 +31,7 @@ export const HeroWithImageHeadingAndContent: Story = {
 };
 
 export const HeroWithImageOnly: Story = {
-  render: (args) => (
+  render: () => (
     <Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg" />
   ),
 };
diff --git a/stories/Content Presentation/Icons.stories.tsx b/stories/Content Presentation/Icons.stories.tsx
@@ -22,16 +22,16 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<Element>;
 
-export const ArrowLeft: Story = { render: (args) => <ArrowLeftIcon /> };
-export const ArrowRight: Story = { render: (args) => <ArrowRightIcon /> };
-export const ArrowRightCircle: Story = { render: (args) => <ArrowRightCircleIcon /> };
-export const ChevronLeft: Story = { render: (args) => <ChevronLeftIcon /> };
-export const ChevronRight: Story = { render: (args) => <ChevronRightIcon /> };
-export const Close: Story = { render: (args) => <CloseIcon /> };
-export const Cross: Story = { render: (args) => <CrossIcon /> };
-export const SmallEmdash: Story = { render: (args) => <SmallEmdashIcon /> };
-export const Emdash: Story = { render: (args) => <EmdashIcon /> };
-export const Minus: Story = { render: (args) => <MinusIcon /> };
-export const Plus: Story = { render: (args) => <PlusIcon /> };
-export const Search: Story = { render: (args) => <SearchIcon /> };
-export const Tick: Story = { render: (args) => <TickIcon /> };
+export const ArrowLeft: Story = { render: () => <ArrowLeftIcon /> };
+export const ArrowRight: Story = { render: () => <ArrowRightIcon /> };
+export const ArrowRightCircle: Story = { render: () => <ArrowRightCircleIcon /> };
+export const ChevronLeft: Story = { render: () => <ChevronLeftIcon /> };
+export const ChevronRight: Story = { render: () => <ChevronRightIcon /> };
+export const Close: Story = { render: () => <CloseIcon /> };
+export const Cross: Story = { render: () => <CrossIcon /> };
+export const SmallEmdash: Story = { render: () => <SmallEmdashIcon /> };
+export const Emdash: Story = { render: () => <EmdashIcon /> };
+export const Minus: Story = { render: () => <MinusIcon /> };
+export const Plus: Story = { render: () => <PlusIcon /> };
+export const Search: Story = { render: () => <SearchIcon /> };
+export const Tick: Story = { render: () => <TickIcon /> };
diff --git a/stories/Content Presentation/Table.stories.tsx b/stories/Content Presentation/Table.stories.tsx
@@ -16,7 +16,7 @@ Table.Cell.displayName = 'Table.Cell';
 Table.Panel.displayName = 'Table.Panel';
 
 export const StandardTable: Story = {
-  render: (args) => (
+  render: () => (
     <Table caption="Skin symptoms and possible causes">
       <Table.Head>
         <Table.Row>
@@ -43,7 +43,7 @@ export const StandardTable: Story = {
 };
 
 export const TablePanel: Story = {
-  render: (args) => (
+  render: () => (
     <Table.Panel heading="Conditions similar to impetigo">
       <Table caption="Other possible causes of your symptoms">
         <Table.Head>
@@ -104,7 +104,7 @@ export const ResponsiveTable: Story = {
 };
 
 export const NumericCells: Story = {
-  render: (args) => (
+  render: () => (
     <Row>
       <Col width="one-half">
         <HintText>Right-aligned cells are used for numeric values</HintText>
diff --git a/stories/Content Presentation/Tag.stories.tsx b/stories/Content Presentation/Tag.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Tag>;
 export const StandardTag: Story = { args: { children: 'Standard' } };
 
 export const AllColours: Story = {
-  render: (args) => (
+  render: () => (
     <div className="tag-wrapper">
       <Tag color="white">Started</Tag>
       <Tag color="grey">Not started</Tag>
diff --git a/stories/Content Presentation/WarningCallout.stories.tsx b/stories/Content Presentation/WarningCallout.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof WarningCallout>;
 WarningCallout.Label.displayName = 'WarningCallout.Label';
 
 export const StandardWarningCallout: Story = {
-  render: (args) => (
+  render: () => (
     <WarningCallout>
       <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
       <p>
@@ -26,7 +26,7 @@ export const StandardWarningCallout: Story = {
 };
 
 export const WarningCalloutWithCustomVisuallyHiddenText: Story = {
-  render: (args) => (
+  render: () => (
     <WarningCallout>
       <WarningCallout.Label visuallyHiddenText="Not Important: ">
         School, nursery or work
@@ -40,7 +40,7 @@ export const WarningCalloutWithCustomVisuallyHiddenText: Story = {
 };
 
 export const WarningCalloutWithDisabledVisuallyHiddenText: Story = {
-  render: (args) => (
+  render: () => (
     <WarningCallout>
       <WarningCallout.Label visuallyHiddenText={false}>
         School, nursery or work
@@ -54,7 +54,7 @@ export const WarningCalloutWithDisabledVisuallyHiddenText: Story = {
 };
 
 export const WarningCalloutWithoutLabel: Story = {
-  render: (args) => (
+  render: () => (
     <WarningCallout>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
@@ -64,7 +64,7 @@ export const Standard: Story = {
 };
 
 export const WithHintText: Story = {
-  render: (args) => (
+  render: () => (
     <form>
       <Fieldset>
         <Fieldset.Legend isPageHeading>How do you want to sign in?</Fieldset.Legend>
@@ -93,7 +93,7 @@ export const WithHintText: Story = {
 };
 
 export const WithDisabledItem: Story = {
-  render: (args) => (
+  render: () => (
     <form>
       <Checkboxes id="colours" name="colours">
         <Checkboxes.Box value="red">Red</Checkboxes.Box>
@@ -107,7 +107,7 @@ export const WithDisabledItem: Story = {
 };
 
 export const WithConditionalContent: Story = {
-  render: (args) => (
+  render: () => (
     <form>
       <Fieldset aria-describedby="waste--hint">
         <Fieldset.Legend isPageHeading>
@@ -124,7 +124,7 @@ export const WithConditionalContent: Story = {
 };
 
 export const WithLegendAsPageHeading: Story = {
-  render: (args) => (
+  render: () => (
     <form>
       <Fieldset aria-describedby="waste--hint">
         <Fieldset.Legend isPageHeading>
@@ -141,7 +141,7 @@ export const WithLegendAsPageHeading: Story = {
 };
 
 export const WithExclusiveNoneOption: Story = {
-  render: (args) => (
+  render: () => (
     <form>
       <Fieldset aria-describedby="symptoms--hint">
         <Fieldset.Legend isPageHeading>Do you have any of these symptoms?</Fieldset.Legend>
@@ -160,7 +160,7 @@ export const WithExclusiveNoneOption: Story = {
 };
 
 export const WithErrorBoolean: Story = {
-  render: (args) => {
+  render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [errorToggle, setErrorToggle] = useState(true);
     return (
@@ -191,7 +191,7 @@ export const WithErrorBoolean: Story = {
 };
 
 export const WithErrorString: Story = {
-  render: (args) => {
+  render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [error, setError] = useState('Please select an option');
     return (
diff --git a/stories/Form Elements/ErrorMessage.stories.tsx b/stories/Form Elements/ErrorMessage.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ErrorMessage } from '../../src';
 import { Meta, StoryObj } from '@storybook/react-vite';
 
diff --git a/stories/Form Elements/ErrorSummary.stories.tsx b/stories/Form Elements/ErrorSummary.stories.tsx
@@ -54,7 +54,7 @@ ErrorSummary.List.displayName = 'ErrorSummary.List';
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 
 export const Standard: Story = {
-  render: (args) => (
+  render: () => (
     <ErrorSummary>
       <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
       <ErrorSummary.Body>
diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx
diff --git a/stories/Form Elements/HintText.stories.tsx b/stories/Form Elements/HintText.stories.tsx
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
diff --git a/stories/Layout/Grid.stories.tsx b/stories/Layout/Grid.stories.tsx
diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
diff --git a/stories/Navigation/ContentsList.stories.tsx b/stories/Navigation/ContentsList.stories.tsx
diff --git a/stories/Navigation/Footer.stories.tsx b/stories/Navigation/Footer.stories.tsx
diff --git a/stories/Navigation/Header.stories.tsx b/stories/Navigation/Header.stories.tsx
diff --git a/stories/Navigation/Pagination.stories.tsx b/stories/Navigation/Pagination.stories.tsx
diff --git a/stories/Patterns/NavAZ.stories.tsx b/stories/Patterns/NavAZ.stories.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export default [`
`55`	`55`	`'jsx-a11y/alt-text': 0,`
`56`	`56`	`'jsx-a11y/heading-has-content': 0,`
`57`	`57`	`'react-hooks/exhaustive-deps': 0,`
	`58`	`+ 'no-redeclare': 'off',`
`58`	`59`	`},`
`59`	`60`	`},`
`60`	`61`	`{`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ export interface ITableContext {`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`const TableContext = createContext<ITableContext>({`
`10`		`- /* eslint-disable @typescript-eslint/no-empty-function */`
`11`	`10`	`isResponsive: false,`
`12`	`11`	`headings: [],`
`13`	`12`	`setHeadings: () => {},`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,6 @@ export interface ICheckboxContext {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`export default createContext<ICheckboxContext>({`
`11`		`- /* eslint-disable @typescript-eslint/no-empty-function */`
`12`	`11`	`name: '',`
`13`	`12`	`getBoxId: () => undefined,`
`14`	`13`	`leaseReference: () => '',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/* eslint-disable @typescript-eslint/no-explicit-any */`
`2`	`1`	`import React, { Children, cloneElement, FC, HTMLProps } from 'react';`
`3`	`2`	`import classNames from 'classnames';`
`4`	`3`	`import { Container } from '@components/layout';`