chore: update react imports

Signed-off-by: Paul Schultz <pschultz@pobox.com>

packages/cli/config/eslint-factory.js

@@ -243,8 +243,26 @@ function createConfigForRole(dir, role, extraConfig = {}) {
           '@mui/*/*/*',
           ...(extraConfig.restrictedImportPatterns ?? []),
         ],
+        rules: {
+          'react/react-in-jsx-scope': 'off',
+          'no-restricted-syntax': [
+            'error',
+            {
+              message: 'Default React import not allowed.',
+              selector:
+                "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+            },
+            {
+              message:
+                'Default React import not allowed. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`.',
+              selector:
+                "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)",
+            },
+          ],
+          ...extraConfig.rules,
+        },
         tsRules: {
-          'react/prop-types': 0,
+          'react/prop-types': 'off',
           ...extraConfig.tsRules,
         },
       });

packages/cli/config/tsconfig.json

@@ -11,7 +11,7 @@
     "importHelpers": false,
     "incremental": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ScriptHost", "ES2022"],
     "module": "ESNext",
     "moduleResolution": "node",

packages/cli/templates/frontend-plugin/dev/index.tsx.hbs

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { {{ pluginVar }}, {{ extensionName }} } from '../src/plugin';
 

packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExampleComponent } from './ExampleComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';

packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
   InfoCard,

packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -1,4 +1,3 @@
-import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { ExampleFetchComponent } from './ExampleFetchComponent';
 

packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -1,4 +1,3 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Table,

packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.test.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { renderInTestApp } from '@backstage/test-utils';
-import { ExampleComponent } from './ExampleComponent';
-
-describe('ExampleComponent', () => {
-  it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
-
-    expect(screen.getByText('Hello World')).toBeInTheDocument();
-  });
-
-  it('should display a custom message', async () => {
-    await renderInTestApp(<ExampleComponent message="Hello Example" />);
-
-    expect(screen.getByText('Hello Example')).toBeInTheDocument();
-  });
-});
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { ExampleComponent } from './ExampleComponent';
+
+describe('ExampleComponent', () => {
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />);
+
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should display a custom message', async () => {
+    await renderInTestApp(<ExampleComponent message="Hello Example" />);
+
+    expect(screen.getByText('Hello Example')).toBeInTheDocument();
+  });
+});

packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.tsx

@@ -1,29 +1,28 @@
-import React from 'react';
-import { Typography } from '@material-ui/core';
-
-/**
- * Props for {@link ExampleComponent}.
- *
- * @public
- */
-export interface ExampleComponentProps {
-  message?: string;
-}
-
-/**
- * Displays an example.
- *
- * @remarks
- *
- * Longer descriptions should be put after the `@remarks` tag. That way the initial summary
- * will show up in the API docs overview section, while the longer description will only be
- * displayed on the page for the specific API.
- *
- * @public
- */
-export function ExampleComponent(props: ExampleComponentProps) {
-  // By destructuring props here rather than in the signature the API docs will look nicer
-  const { message = 'Hello World' } = props;
-
-  return <Typography variant="h1">{message}</Typography>;
-}
+import { Typography } from '@material-ui/core';
+
+/**
+ * Props for {@link ExampleComponent}.
+ *
+ * @public
+ */
+export interface ExampleComponentProps {
+  message?: string;
+}
+
+/**
+ * Displays an example.
+ *
+ * @remarks
+ *
+ * Longer descriptions should be put after the `@remarks` tag. That way the initial summary
+ * will show up in the API docs overview section, while the longer description will only be
+ * displayed on the page for the specific API.
+ *
+ * @public
+ */
+export function ExampleComponent(props: ExampleComponentProps) {
+  // By destructuring props here rather than in the signature the API docs will look nicer
+  const { message = 'Hello World' } = props;
+
+  return <Typography variant="h1">{message}</Typography>;
+}