chore: adapt react imports to new jsx transform (#16353)

In react 17, various kinds of tooling added a new step to transform JSX
code to JS code that didn't require importing react. That means we can
turn off the very slow eslint step that checks this, if we transform our
code to the new style by removing many react imports.


https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports

This PR does that. It touches a ton of files and I don't think reading
through it will help; spotcheck it, run dev code, etc. I think it's
nice!

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'prettier',
     'plugin:json/recommended',
     'plugin:storybook/recommended',
+    'plugin:react/jsx-runtime',
   ],
 
   plugins: ['react', 'react-hooks', 'json', 'testing-library'],

.storybook/preview.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { GlobalStyle } from '../app/src/atoms/GlobalStyle'
 import { i18n } from '../app/src/i18n'

app/src/App/DesktopApp.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, Fragment } from 'react'
 import { Navigate, Route, Routes, useMatch } from 'react-router-dom'
 import { ErrorBoundary } from 'react-error-boundary'
 import { I18nextProvider } from 'react-i18next'
@@ -46,7 +46,7 @@ export const DesktopApp = (): JSX.Element => {
   const [
     isEmergencyStopModalDismissed,
     setIsEmergencyStopModalDismissed,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const desktopRoutes: RouteProps[] = [
     {
@@ -124,7 +124,7 @@ export const DesktopApp = (): JSX.Element => {
                         <Route
                           key={path}
                           element={
-                            <React.Fragment key={Component.name}>
+                            <Fragment key={Component.name}>
                               <Breadcrumbs />
                               <Box
                                 position={POSITION_RELATIVE}
@@ -141,7 +141,7 @@ export const DesktopApp = (): JSX.Element => {
                                   <Component />
                                 </Box>
                               </Box>
-                            </React.Fragment>
+                            </Fragment>
                           }
                           path={path}
                         />

app/src/App/DesktopAppFallback.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'

app/src/App/ODDTopLevelRedirects/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
 
 import { useCurrentRunId } from '/app/resources/runs'

app/src/App/OnDeviceDisplayApp.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
 import { css } from 'styled-components'
@@ -163,7 +163,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
   const dispatch = useDispatch<Dispatch>()
   const isIdle = useIdle(sleepTime, options)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isIdle) {
       dispatch(updateBrightness(TURN_OFF_BACKLIGHT))
     } else {
@@ -220,13 +220,13 @@ const getTargetPath = (unfinishedUnboxingFlowRoute: string | null): string => {
 // split to a separate function because scrollRef rerenders on every route change
 // this avoids rerendering parent providers as well
 export function OnDeviceDisplayAppRoutes(): JSX.Element {
-  const [currentNode, setCurrentNode] = React.useState<null | HTMLElement>(null)
-  const scrollRef = React.useCallback((node: HTMLElement | null) => {
+  const [currentNode, setCurrentNode] = useState<null | HTMLElement>(null)
+  const scrollRef = useCallback((node: HTMLElement | null) => {
     setCurrentNode(node)
   }, [])
   const isScrolling = useScrolling(currentNode)
   const location = useLocation()
-  React.useEffect(() => {
+  useEffect(() => {
     currentNode?.scrollTo({
       top: 0,
       left: 0,

app/src/App/OnDeviceDisplayAppFallback.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -47,7 +47,7 @@ export function OnDeviceDisplayAppFallback({
   }
 
   // immediately report to robot logs that something fatal happened
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(sendLog(`ODD app encountered a fatal error: ${error.message}`))
   }, [])
 

app/src/App/__mocks__/portal.tsx

@@ -1,5 +1,5 @@
 // mock portal for enzyme tests
-import * as React from 'react'
+import type * as React from 'react'
 
 interface Props {
   children: React.ReactNode

app/src/App/__tests__/App.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'

app/src/App/__tests__/DesktopApp.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'

app/src/App/__tests__/Navbar.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen, render } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'

app/src/App/__tests__/OnDeviceDisplayApp.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { screen } from '@testing-library/react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'

app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { vi, describe, beforeEach, it, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'

app/src/App/__tests__/hooks.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'

app/src/App/hooks.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useCallback, useRef, useEffect } from 'react'
 import difference from 'lodash/difference'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -23,7 +23,7 @@ const PROTOCOL_IDS_RECHECK_INTERVAL_MS = 3000
 
 export function useSoftwareUpdatePoll(): void {
   const dispatch = useDispatch<Dispatch>()
-  const checkAppUpdate = React.useCallback(() => dispatch(checkShellUpdate()), [
+  const checkAppUpdate = useCallback(() => dispatch(checkShellUpdate()), [
     dispatch,
   ])
   useInterval(checkAppUpdate, UPDATE_RECHECK_INTERVAL_MS)
@@ -41,8 +41,8 @@ export function useProtocolReceiptToast(): void {
     true
   )
   const protocolIds = protocolIdsQuery.data?.data ?? []
-  const protocolIdsRef = React.useRef(protocolIds)
-  const hasRefetched = React.useRef(true)
+  const protocolIdsRef = useRef(protocolIds)
+  const hasRefetched = useRef(true)
   const { createLiveCommand } = useCreateLiveCommandMutation()
   const animationCommand: SetStatusBarCreateCommand = {
     commandType: 'setStatusBar',
@@ -53,7 +53,7 @@ export function useProtocolReceiptToast(): void {
     hasRefetched.current = false
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newProtocolIds = difference(protocolIds, protocolIdsRef.current)
     if (!hasRefetched.current && newProtocolIds.length > 0) {
       Promise.all(

app/src/App/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { useSelector } from 'react-redux'
 
 import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'

app/src/App/portal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Box } from '@opentrons/components'
 
 export const TOP_PORTAL_ID = '__otAppTopPortalRoot'

app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   ALIGN_FLEX_START,
   BORDERS,

app/src/DesignTokens/Colors/Colors.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   ALIGN_FLEX_START,
   BORDERS,

app/src/DesignTokens/Spacing/Spacing.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   ALIGN_FLEX_START,
   Box,

app/src/DesignTokens/Typography/Typography.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { css } from 'styled-components'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import {

app/src/LocalizationProvider.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import reduce from 'lodash/reduce'
 

app/src/__testing-utils__/renderWithProviders.tsx

@@ -1,6 +1,6 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import * as React from 'react'
+import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'

app/src/atoms/InlineNotification/InlineNotification.stories.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { VIEWPORT } from '@opentrons/components'
 import { InlineNotification } from '.'
 import type { Story, Meta } from '@storybook/react'

app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'

app/src/atoms/InlineNotification/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,

app/src/atoms/InstrumentContainer/InstrumentContainer.stories.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { InstrumentContainer as InstrumentContainerComponent } from './index'
 

app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'

app/src/atoms/InstrumentContainer/index.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import {
   BORDERS,
   COLORS,

app/src/atoms/Link/ExternalLink.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { COLORS, Flex, SPACING } from '@opentrons/components'
 import { ExternalLink as ExternalLinkComponent } from './ExternalLink'
 

app/src/atoms/Link/ExternalLink.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { Link, Icon, TYPOGRAPHY, SPACING } from '@opentrons/components'
 import type { LinkProps } from '@opentrons/components'

app/src/atoms/Link/__tests__/ExternalLink.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'

app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'

app/src/atoms/ProgressBar/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, Box } from '@opentrons/components'
 

app/src/atoms/SelectField/Select.stories.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { Select } from './Select'
 

app/src/atoms/SelectField/Select.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import ReactSelect, { components } from 'react-select'
 
 import {

app/src/atoms/SelectField/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import find from 'lodash/find'
 import { Select } from './Select'
 import {

app/src/atoms/Skeleton/Skeleton.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   Flex,
   DIRECTION_COLUMN,

app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'

app/src/atoms/Skeleton/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { css } from 'styled-components'
 import { BORDERS, Box, COLORS } from '@opentrons/components'
 

app/src/atoms/SleepScreen/__tests__/SleepScreen.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'

app/src/atoms/SleepScreen/index.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { Flex, COLORS } from '@opentrons/components'
 
 export function SleepScreen(): JSX.Element {

app/src/atoms/Slideout/MultiSlideout.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Slideout } from './index'
 
 import type { MultiSlideoutSpecs, SlideoutProps } from './index'

app/src/atoms/Slideout/Slideout.stories.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import { action } from '@storybook/addon-actions'
 import {
   COLORS,
@@ -24,7 +24,7 @@ export default meta
 type Story = StoryObj<typeof SlideoutComponent>
 
 const Children = (
-  <React.Fragment>
+  <Fragment>
     <LegacyStyledText
       fontWeight={TYPOGRAPHY.fontWeightSemiBold}
       fontSize={TYPOGRAPHY.fontSizeP}
@@ -45,7 +45,7 @@ const Children = (
         {'btn text'}
       </LegacyStyledText>
     </PrimaryBtn>
-  </React.Fragment>
+  </Fragment>
 )
 
 export const Slideout: Story = {

app/src/atoms/Slideout/__tests__/Slideout.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen, fireEvent } from '@testing-library/react'

app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import {
   DIRECTION_COLUMN,
   Flex,
@@ -22,9 +22,9 @@ export default meta
 type Story = StoryObj<typeof AlphanumericKeyboard>
 
 const Keyboard = (): JSX.Element => {
-  const [showKeyboard, setShowKeyboard] = React.useState(false)
-  const [value, setValue] = React.useState<string>('')
-  const keyboardRef = React.useRef(null)
+  const [showKeyboard, setShowKeyboard] = useState(false)
+  const [value, setValue] = useState<string>('')
+  const keyboardRef = useRef(null)
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
       <form id="test_form">