Bump the lint group with 5 updates

.github/dependabot.yml

@@ -25,6 +25,7 @@ updates:
       lint:
         patterns:
           - '@eslint/*'
+          - '@trivago/prettier-plugin-*'
           - '@types/*'
           - 'eslint'
           - 'eslint-*'

.prettierrc

@@ -1,4 +1,8 @@
 {
+  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^#(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "printWidth": 100,
   "quoteProps": "consistent",
   "semi": true,

.storybook/main.ts

@@ -1,6 +1,6 @@
 import { type StorybookConfig } from '@storybook/react-vite';
 import preserveDirectives from 'rollup-preserve-directives';
-import { mergeConfig, type InlineConfig } from 'vite';
+import { type InlineConfig, mergeConfig } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {

.storybook/preview.tsx

@@ -1,8 +1,9 @@
-import './storybook.scss';
 import { type Preview } from '@storybook/react-vite';
 
 import { Col, Container, Row } from '#components/layout/index.js';
 
+import './storybook.scss';
+
 const preview: Preview = {
   decorators: (Story, { parameters }) =>
     parameters.width === false ? (

eslint.config.js

@@ -2,12 +2,12 @@ import { join } from 'node:path';
 
 import { includeIgnoreFile } from '@eslint/compat';
 import eslint from '@eslint/js';
-import { defineConfig, globalIgnores } from 'eslint/config';
 import configPrettier from 'eslint-config-prettier/flat';
-import pluginImport from 'eslint-plugin-import';
 import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import pluginNodeImport from 'eslint-plugin-node-import';
 import pluginReact from 'eslint-plugin-react';
 import pluginReactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig, globalIgnores } from 'eslint/config';
 import globals from 'globals';
 import pluginTypeScript from 'typescript-eslint';
 
@@ -19,9 +19,8 @@ export default defineConfig([
     files: ['**/*.{js,mjs,ts,tsx}'],
     extends: [
       eslint.configs.recommended,
-      pluginImport.flatConfigs.recommended,
-      pluginImport.flatConfigs.typescript,
       pluginTypeScript.configs.recommended,
+      pluginNodeImport.configs['flat/recommended'],
       configPrettier,
     ],
     languageOptions: {
@@ -33,30 +32,6 @@ export default defineConfig([
       },
     },
     rules: {
-      // Turn off rules that are handled by TypeScript
-      // https://typescript-eslint.io/troubleshooting/typed-linting/performance/#eslint-plugin-import
-      'import/default': 'off',
-      'import/named': 'off',
-      'import/namespace': 'off',
-      'import/no-cycle': 'off',
-      'import/no-deprecated': 'off',
-      'import/no-named-as-default': 'off',
-      'import/no-named-as-default-member': 'off',
-      'import/no-unresolved': 'off',
-      'import/no-unused-modules': 'off',
-
-      // Always import Node.js packages from `node:*`
-      'import/enforce-node-protocol-usage': ['error', 'always'],
-
-      // Check import or require statements are A-Z ordered
-      'import/order': [
-        'error',
-        {
-          'alphabetize': { order: 'asc' },
-          'newlines-between': 'always',
-        },
-      ],
-
       // Prefer rules that are type aware
       'no-redeclare': 'off',
       'no-undef': 'off',
@@ -71,12 +46,6 @@ export default defineConfig([
         },
       ],
     },
-    settings: {
-      'import/resolver': {
-        node: true,
-        typescript: true,
-      },
-    },
   },
   {
     files: ['**/*.{ts,tsx}'],

package.json

@@ -68,7 +68,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.0.5",
     "@eslint/js": "^9.39.4",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",
@@ -80,11 +80,12 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/eslint": "^9.6.1",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^24.12.0",
+    "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "babel-jest": "^30.3.0",
@@ -94,17 +95,17 @@
     "eslint": "^9.39.4",
     "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-node-import": "^1.2.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "globals": "^17.3.0",
+    "globals": "^17.5.0",
     "jest": "^30.3.0",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.3.0",
     "nhsuk-frontend": "^10.3.1",
     "outdent": "^0.8.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.3",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "rollup": "^4.60.0",
@@ -113,7 +114,7 @@
     "storybook": "^10.2.14",
     "tslib": "^2.8.1",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.58.0",
+    "typescript-eslint": "^8.58.2",
     "vite": "^7.3.2",
     "vite-tsconfig-paths": "^6.1.1"
   },

src/components/content-presentation/details/Details.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { type ComponentPropsWithoutRef, type FC, forwardRef } from 'react';
 
 export interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;

src/components/content-presentation/details/__tests__/Details.test.tsx

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 
-import { Details } from '..';
-
 import { renderClient, renderServer } from '#util/components';
 
+import { Details } from '..';
+
 describe('Details', () => {
   it('matches snapshot', async () => {
     const { container } = await renderClient(<Details />, {

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+
+import { Heading, type HeadingProps } from '#components/typography/Heading.js';
 
 import { DoAndDontListContext, type DoAndDontListType } from './DoAndDontListContext.js';
 import { DoAndDontListItem } from './components/index.js';
 
-import { Heading, type HeadingProps } from '#components/typography/Heading.js';
-
 export interface DoAndDontListProps
   extends ComponentPropsWithoutRef<'div'>, Pick<HeadingProps, 'headingLevel'> {
   listType: DoAndDontListType;

src/components/content-presentation/do-and-dont-list/__tests__/DoAndDontList.test.tsx

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 
-import { DoAndDontList } from '..';
-
 import { renderClient, renderServer } from '#util/components';
 
+import { DoAndDontList } from '..';
+
 describe('DoAndDontList', () => {
   describe('list type "do"', () => {
     it('matches snapshot', async () => {

src/components/content-presentation/do-and-dont-list/components/DoAndDontListItem.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useContext, type ComponentPropsWithoutRef, type FC, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type FC, type ReactNode, useContext } from 'react';
 
 import { CrossIcon, TickIcon } from '../../icons/index.js';
 import { DoAndDontListContext, type DoAndDontListType } from '../DoAndDontListContext.js';

src/components/content-presentation/hero/Hero.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { type ComponentPropsWithoutRef, type FC, forwardRef } from 'react';
 
 import { Col, Container, Row } from '#components/layout/index.js';
 import { Heading, type HeadingProps } from '#components/typography/Heading.js';

src/components/content-presentation/images/Images.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 export interface ImagesProps extends ComponentPropsWithoutRef<'img'> {
   caption?: string;

src/components/content-presentation/inset-text/InsetText.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 export type InsetTextProps = ComponentPropsWithoutRef<'div'>;
 

src/components/content-presentation/notification-banner/NotificationBanner.tsx

@@ -4,22 +4,22 @@ import classNames from 'classnames';
 import { type NotificationBanner as NotificationBannerModule } from 'nhsuk-frontend';
 import {
   Children,
+  type ComponentPropsWithoutRef,
   forwardRef,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
-  type ComponentPropsWithoutRef,
 } from 'react';
 
+import { childIsOfComponentType } from '#util/types/TypeGuards.js';
+
 import {
   NotificationBannerHeading,
   NotificationBannerLink,
   NotificationBannerTitle,
 } from './components/index.js';
 
-import { childIsOfComponentType } from '#util/types/TypeGuards.js';
-
 export interface NotificationBannerProps extends ComponentPropsWithoutRef<'div'> {
   success?: boolean;
   disableAutoFocus?: boolean;

src/components/content-presentation/panel/Panel.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { Children, forwardRef, type ComponentPropsWithoutRef } from 'react';
-
-import { PanelTitle } from './components/index.js';
+import { Children, type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { childIsOfComponentType } from '#util/types/TypeGuards.js';
 
+import { PanelTitle } from './components/index.js';
+
 export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
   interruption?: boolean;
 }

src/components/content-presentation/panel/__tests__/Panel.test.tsx

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 
-import { Panel, type PanelTitleProps } from '..';
-
 import { renderClient, renderServer } from '#util/components';
 
+import { Panel, type PanelTitleProps } from '..';
+
 describe('Panel', () => {
   const Example = (props: Parameters<typeof Panel>[0]) => (
     <Panel {...props}>

src/components/content-presentation/summary-list/SummaryList.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import {
   SummaryListAction,

src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { createRef, type ComponentProps } from 'react';
+import { type ComponentProps, createRef } from 'react';
 
 import { SummaryList } from '..';
 

src/components/content-presentation/summary-list/components/SummaryListAction.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ReactElement } from 'react';
+import { type ReactElement, forwardRef } from 'react';
 
 import { type AsElementLink } from '#util/types/LinkTypes.js';
 

src/components/content-presentation/summary-list/components/SummaryListRow.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { Children, type ComponentPropsWithoutRef, type FC } from 'react';
 
-import { SummaryListAction } from './SummaryListAction.js';
-
 import { childIsOfComponentType } from '#util/types/index.js';
 
+import { SummaryListAction } from './SummaryListAction.js';
+
 export interface SummaryListRowProps extends ComponentPropsWithoutRef<'div'> {
   noBorder?: boolean;
 }

src/components/content-presentation/table/Table.tsx

@@ -2,26 +2,26 @@
 
 import classNames from 'classnames';
 import {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
   forwardRef,
   useMemo,
   useState,
-  type ComponentPropsWithoutRef,
-  type ReactNode,
 } from 'react';
 
-import { TableContext, type ITableContext } from './TableContext.js';
+import { type Card as _Card } from '#components/navigation/card/index.js';
+
+import { type ITableContext, TableContext } from './TableContext.js';
 import {
   TableBody,
   TableCaption,
+  type TableCaptionProps,
   TableCell,
   TableContainer,
   TableHead,
   TableRow,
-  type TableCaptionProps,
 } from './components/index.js';
 
-import { type Card as _Card } from '#components/navigation/card/index.js';
-
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
   firstCellIsHeader?: boolean;
   responsive?: boolean;

src/components/content-presentation/table/TableContext.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, type ReactNode } from 'react';
+import { type ReactNode, createContext } from 'react';
 
 export interface ITableContext {
   firstCellIsHeader: boolean;

src/components/content-presentation/table/TableHelpers.ts

@@ -1,9 +1,9 @@
 import { Children, type ReactElement, type ReactNode } from 'react';
 
-import { TableCell, type TableCellProps } from './components/TableCell.js';
-
 import { childIsOfComponentType } from '#util/types/TypeGuards.js';
 
+import { TableCell, type TableCellProps } from './components/TableCell.js';
+
 export const isTableCell = (
   child: ReactNode,
 ): child is ReactElement<TableCellProps, typeof TableCell> => {

src/components/content-presentation/table/components/TableCell.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import classNames from 'classnames';
-import { useContext, type ComponentPropsWithoutRef, type FC } from 'react';
-
-import { TableContext, type ITableContext } from '../TableContext.js';
-import { TableSection, TableSectionContext } from '../TableSectionContext.js';
+import { type ComponentPropsWithoutRef, type FC, useContext } from 'react';
 
 import { useDevWarning } from '#util/hooks/index.js';
 
+import { type ITableContext, TableContext } from '../TableContext.js';
+import { TableSection, TableSectionContext } from '../TableSectionContext.js';
+
 const CellOutsideOfSectionWarning =
   'Table.Cell used outside of a Table.Head or Table.Body component. Unable to determine section type from context.';