Switch to modern JSX runtime

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Author: colinrotherham

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:@typescript-eslint/recommended',
     'prettier',
     'plugin:import/errors',

README.md

@@ -26,6 +26,7 @@ module.exports = {
       '@babel/preset-react',
       {
         development: NODE_ENV === 'development',
+        runtime: 'automatic',
         useBuiltIns: true,
       },
     ],

babel.config.js

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

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

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Details } from '..';
 import { renderClient, renderServer } from '#util/components';
 

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   createContext,
   forwardRef,
   useContext,

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

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { DoAndDontList } from '..';
 import { renderClient, renderServer } from '#util/components';
 

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 import { Col, Container, Row } from '#components/layout';
 import { HeadingLevel, type HeadingLevelProps } from '#components/utils';
 

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

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Hero } from '..';
 
 describe('Hero', () => {

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { type ComponentPropsWithoutRef, type FC } from 'react';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
 
 export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
   title?: string;