refactor(app): clean up react import statements (#16998)

* refactor(app): clean up react import statements (#16998)
Opentrons · Dec 2, 2024 · 5009d3c · 5009d3c
1 parent 8873008
commit 5009d3c
Show file tree

Hide file tree

Showing 123 changed files with 874 additions and 793 deletions.
diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
@@ -118,7 +118,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
     ({ navLinkTo }: RouteProps) => navLinkTo != null
   )
 
-  const debouncedNavigate = React.useCallback(
+  const debouncedNavigate = useCallback(
     debounce((path: string) => {
       navigate(path)
     }, DEBOUNCE_DURATION_MS),

diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
@@ -124,9 +124,9 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
     multiSlideoutSpecs,
   } = props
   const { t } = useTranslation('shared')
-  const slideOutRef = React.useRef<HTMLDivElement>(null)
-  const [isReachedBottom, setIsReachedBottom] = React.useState<boolean>(false)
-  const hasBeenExpanded = React.useRef<boolean>(isExpanded ?? false)
+  const slideOutRef = useRef<HTMLDivElement>(null)
+  const [isReachedBottom, setIsReachedBottom] = useState<boolean>(false)
+  const hasBeenExpanded = useRef<boolean>(isExpanded ?? false)
   const handleScroll = (): void => {
     if (slideOutRef.current == null) return
     const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
@@ -137,7 +137,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleScroll()
   }, [slideOutRef])
 

diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { AlphanumericKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof AlphanumericKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AlphanumericKeyboard>) => {
   return renderWithProviders(<AlphanumericKeyboard {...props} />)[0]
 }
 
 describe('AlphanumericKeyboard', () => {
   it('should render alphanumeric keyboard - lower case', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -55,7 +57,7 @@ describe('AlphanumericKeyboard', () => {
     })
   })
   it('should render alphanumeric keyboard - upper case, when clicking ABC key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -103,7 +105,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should render alphanumeric keyboard - numbers, when clicking number key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -133,7 +135,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should render alphanumeric keyboard - lower case when layout is numbers and clicking abc ', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -182,7 +184,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should switch each alphanumeric keyboard properly', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,

diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import Keyboard from 'react-simple-keyboard'
 import { useSelector } from 'react-redux'
 import { getAppLanguage } from '/app/redux/config'
@@ -24,7 +24,7 @@ export function AlphanumericKeyboard({
   keyboardRef,
   debug = false, // If true, <ENTER> will input a \n
 }: AlphanumericKeyboardProps): JSX.Element {
-  const [layoutName, setLayoutName] = React.useState<string>('default')
+  const [layoutName, setLayoutName] = useState<string>('default')
   const appLanguage = useSelector(getAppLanguage)
   const onKeyPress = (button: string): void => {
     if (button === '{ABC}') handleShift()

diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { FullKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof FullKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FullKeyboard>) => {
   return renderWithProviders(<FullKeyboard {...props} />)[0]
 }
 
 describe('FullKeyboard', () => {
   it('should render FullKeyboard keyboard', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -59,7 +61,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render full keyboard when hitting ABC key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -108,7 +110,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render full keyboard when hitting 123 key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -158,7 +160,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render the software keyboards when hitting #+= key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -204,7 +206,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should call mock function when clicking a key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,

diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
 import { useSelector } from 'react-redux'
 import { getAppLanguage } from '/app/redux/config'
@@ -7,6 +7,8 @@ import {
   layoutCandidates,
   fullKeyboardLayout,
 } from '../constants'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -15,7 +17,7 @@ import './index.css'
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface FullKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | any>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | any>
   debug?: boolean
 }
 
@@ -24,7 +26,7 @@ export function FullKeyboard({
   keyboardRef,
   debug = false,
 }: FullKeyboardProps): JSX.Element {
-  const [layoutName, setLayoutName] = React.useState<string>('default')
+  const [layoutName, setLayoutName] = useState<string>('default')
   const appLanguage = useSelector(getAppLanguage)
   const handleShift = (button: string): void => {
     switch (button) {

diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, vi, expect } from 'vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { IndividualKey } from '..'
 
-const render = (props: React.ComponentProps<typeof IndividualKey>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof IndividualKey>) => {
   return renderWithProviders(<IndividualKey {...props} />)[0]
 }
 
 describe('IndividualKey', () => {
   it('should render the text key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -22,7 +24,7 @@ describe('IndividualKey', () => {
   })
 
   it('should call mock function when clicking text key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,

diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NumericalKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof NumericalKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof NumericalKeyboard>) => {
   return renderWithProviders(<NumericalKeyboard {...props} />)[0]
 }
 
 describe('NumericalKeyboard', () => {
   it('should render numerical keyboard isDecimal: false and hasHyphen: false', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -41,7 +43,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: false and hasHyphen: true', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -72,7 +74,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: true and hasHyphen: false', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -103,7 +105,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: true and hasHyphen: true', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -135,7 +137,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking num key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -149,7 +151,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking decimal point key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -163,7 +165,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking hyphen key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,

diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -12,6 +12,8 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const ACCORDION_STYLE = css`
@@ -26,15 +28,15 @@ const ACCORDION_STYLE = css`
 
 interface CollapsibleSectionProps extends StyleProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
   isExpandedInitially?: boolean
 }
 
 export function CollapsibleSection(
   props: CollapsibleSectionProps
 ): JSX.Element {
   const { title, children, isExpandedInitially = true, ...styleProps } = props
-  const [isExpanded, setIsExpanded] = React.useState(isExpandedInitially)
+  const [isExpanded, setIsExpanded] = useState(isExpandedInitially)
   return (
     <Flex flexDirection={DIRECTION_COLUMN} {...styleProps}>
       <Flex

diff --git a/app/src/molecules/InstrumentCard/MenuOverlay.tsx b/app/src/molecules/InstrumentCard/MenuOverlay.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 
 import {
   BORDERS,
@@ -12,11 +12,12 @@ import {
 
 import { Divider } from '/app/atoms/structure'
 
+import type { MouseEventHandler, MouseEvent, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 export interface MenuOverlayItemProps {
-  label: React.ReactNode
-  onClick: React.MouseEventHandler<HTMLButtonElement>
+  label: ReactNode
+  onClick: MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
 }
 
@@ -41,14 +42,14 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element {
       right="0"
       whiteSpace={NO_WRAP}
       zIndex={10}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.preventDefault()
         e.stopPropagation()
         setShowMenuOverlay(false)
       }}
     >
       {menuOverlayItems.map((menuOverlayItem, i) => (
-        <React.Fragment key={`menuItem_${i}`}>
+        <Fragment key={`menuItem_${i}`}>
           {/* insert a divider before the last item if desired */}
           {hasDivider && i === menuOverlayItems.length - 1 ? (
             <Divider marginY="0" />
@@ -59,7 +60,7 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element {
           >
             {menuOverlayItem.label}
           </MenuItem>
-        </React.Fragment>
+        </Fragment>
       ))}
     </Flex>
   )