From aa5df7bb4842325a41ea64d76fbf322638003195 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 23 Dec 2024 20:51:34 -0500
Subject: [PATCH] chore(opentrons-ai-client): clean up react imports in
 opentrons-ai-client

clean up react imports in opentrons-ai-client

close AUTH-1202
---
 .../__testing-utils__/renderWithProviders.tsx | 27 +++++++-----
 .../src/atoms/ResizeBar/index.tsx             |  4 +-
 .../SendButton/__tests__/SendButton.test.tsx  |  7 +--
 .../src/atoms/TextAreaField/index.tsx         | 44 +++++++++++--------
 .../Accordion/__tests__/Accordion.test.tsx    |  7 +--
 .../src/molecules/Accordion/index.tsx         |  7 +--
 .../__tests__/ChatDisplay.test.tsx            |  9 ++--
 .../__tests__/InputPrompt.test.tsx            |  5 ++-
 .../__tests__/PrimaryFloatingButton.test.tsx  |  7 +--
 .../__tests__/PromptPreview.test.tsx          |  6 ++-
 .../__tests__/PromptPreviewSection.test.tsx   |  7 +--
 .../src/molecules/UploadInput/index.tsx       | 28 +++++++-----
 .../src/organisms/LabwareModal/index.tsx      | 18 ++++----
 .../__tests__/PromptButton.test.tsx           |  6 +--
 .../src/pages/CreateProtocol/index.tsx        | 25 ++++++-----
 .../hooks/__tests__/useTrackEvent.test.tsx    |  9 ++--
 opentrons-ai-client/src/resources/types.ts    |  4 +-
 17 files changed, 129 insertions(+), 91 deletions(-)

diff --git a/opentrons-ai-client/src/__testing-utils__/renderWithProviders.tsx b/opentrons-ai-client/src/__testing-utils__/renderWithProviders.tsx
index 4f442fa42b9..897e74920c8 100644
--- a/opentrons-ai-client/src/__testing-utils__/renderWithProviders.tsx
+++ b/opentrons-ai-client/src/__testing-utils__/renderWithProviders.tsx
@@ -1,28 +1,35 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { render } from '@testing-library/react'
 
-import type { RenderOptions, RenderResult } from '@testing-library/react'
 import { useHydrateAtoms } from 'jotai/utils'
 import { Provider } from 'jotai'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+} from 'react'
+import type { RenderOptions, RenderResult } from '@testing-library/react'
+
 interface HydrateAtomsProps {
   initialValues: Array<[any, any]>
-  children: React.ReactNode
+  children: ReactNode
 }
 
 interface TestProviderProps {
   initialValues: Array<[any, any]>
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const HydrateAtoms = ({
   initialValues,
   children,
-}: HydrateAtomsProps): React.ReactNode => {
+}: HydrateAtomsProps): ReactNode => {
   useHydrateAtoms(initialValues)
   return children
 }
@@ -30,7 +37,7 @@ const HydrateAtoms = ({
 export const TestProvider = ({
   initialValues,
   children,
-}: TestProviderProps): React.ReactNode => (
+}: TestProviderProps): ReactNode => (
   <Provider>
     <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
   </Provider>
@@ -38,19 +45,19 @@ export const TestProvider = ({
 
 export interface RenderWithProvidersOptions extends RenderOptions {
   initialValues?: Array<[any, any]>
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions
 ): RenderResult {
   const { i18nInstance = null, initialValues = [] } = options ?? {}
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<
-    React.PropsWithChildren<Record<string, unknown>>
+  const ProviderWrapper: ComponentType<
+    PropsWithChildren<Record<string, unknown>>
   > = ({ children }) => {
     const BaseWrapper = (
       <QueryClientProvider client={queryClient}>
diff --git a/opentrons-ai-client/src/atoms/ResizeBar/index.tsx b/opentrons-ai-client/src/atoms/ResizeBar/index.tsx
index 58ba202eee0..73a8db3f30f 100644
--- a/opentrons-ai-client/src/atoms/ResizeBar/index.tsx
+++ b/opentrons-ai-client/src/atoms/ResizeBar/index.tsx
@@ -5,10 +5,12 @@ import {
   POSITION_RELATIVE,
 } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
+
 export function ResizeBar({
   handleMouseDown,
 }: {
-  handleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void
+  handleMouseDown: (e: MouseEvent<HTMLDivElement>) => void
 }): JSX.Element {
   return (
     <div
diff --git a/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx b/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx
index e2035a32189..5dcade8da5c 100644
--- a/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx
+++ b/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx
@@ -1,17 +1,18 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 
 import { SendButton } from '../index'
 
+import type { ComponentProps } from 'react'
+
 const mockHandleClick = vi.fn()
-const render = (props: React.ComponentProps<typeof SendButton>) => {
+const render = (props: ComponentProps<typeof SendButton>) => {
   return renderWithProviders(<SendButton {...props} />)
 }
 
 describe('SendButton', () => {
-  let props: React.ComponentProps<typeof SendButton>
+  let props: ComponentProps<typeof SendButton>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/atoms/TextAreaField/index.tsx b/opentrons-ai-client/src/atoms/TextAreaField/index.tsx
index d1c1f0d8c17..1335196971f 100644
--- a/opentrons-ai-client/src/atoms/TextAreaField/index.tsx
+++ b/opentrons-ai-client/src/atoms/TextAreaField/index.tsx
@@ -1,22 +1,30 @@
+import { forwardRef } from 'react'
+import styled, { css } from 'styled-components'
 import {
-  TYPOGRAPHY,
-  useHoverTooltip,
-  RESPONSIVENESS,
-  SPACING,
-  COLORS,
-  BORDERS,
-  Flex,
   ALIGN_CENTER,
+  BORDERS,
+  COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  StyledText,
+  Flex,
   Icon,
-  Tooltip,
+  RESPONSIVENESS,
+  SPACING,
+  StyledText,
   TEXT_ALIGN_RIGHT,
+  Tooltip,
+  TYPOGRAPHY,
+  useHoverTooltip,
 } from '@opentrons/components'
+
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  MutableRefObject,
+  ReactNode,
+} from 'react'
 import type { IconName } from '@opentrons/components'
-import * as React from 'react'
-import styled, { css } from 'styled-components'
 
 export const INPUT_TYPE_NUMBER = 'number' as const
 export const LEGACY_INPUT_TYPE_TEXT = 'text' as const
@@ -27,7 +35,7 @@ export interface TextAreaFieldProps {
   /** field is disabled if value is true */
   disabled?: boolean
   /** change handler */
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
   /** name of field in form */
   name?: string
   /** optional ID of <textarea> element */
@@ -35,7 +43,7 @@ export interface TextAreaFieldProps {
   /** placeholder text */
   placeholder?: string
   /** optional suffix component, appears to the right of textarea text */
-  units?: React.ReactNode
+  units?: ReactNode
   /** current value of text in box, defaults to '' */
   value?: string | number | null
   /** if included, TextAreaField will use error style and display error instead of caption */
@@ -47,11 +55,11 @@ export interface TextAreaFieldProps {
   /** optional caption. hidden when `error` is given */
   caption?: string | null
   /** mouse click handler */
-  onClick?: (event: React.MouseEvent<HTMLTextAreaElement>) => unknown
+  onClick?: (event: MouseEvent<HTMLTextAreaElement>) => unknown
   /** focus handler */
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => unknown
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => unknown
   /** blur handler */
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => unknown
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => unknown
   /** makes textarea field read-only */
   readOnly?: boolean
   /** html tabindex property */
@@ -68,7 +76,7 @@ export interface TextAreaFieldProps {
     | typeof TYPOGRAPHY.textAlignLeft
     | typeof TYPOGRAPHY.textAlignCenter
   /** react useRef to control textarea field instead of react event */
-  ref?: React.MutableRefObject<HTMLTextAreaElement | null>
+  ref?: MutableRefObject<HTMLTextAreaElement | null>
   /** optional IconName to display icon aligned to left of textarea field */
   leftIcon?: IconName
   /** if true, show delete icon aligned to right of textarea field */
@@ -85,7 +93,7 @@ export interface TextAreaFieldProps {
   height?: string
 }
 
-export const TextAreaField = React.forwardRef<
+export const TextAreaField = forwardRef<
   HTMLTextAreaElement,
   TextAreaFieldProps
 >(
diff --git a/opentrons-ai-client/src/molecules/Accordion/__tests__/Accordion.test.tsx b/opentrons-ai-client/src/molecules/Accordion/__tests__/Accordion.test.tsx
index 4be089d8398..1bd59cb4774 100644
--- a/opentrons-ai-client/src/molecules/Accordion/__tests__/Accordion.test.tsx
+++ b/opentrons-ai-client/src/molecules/Accordion/__tests__/Accordion.test.tsx
@@ -1,17 +1,18 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 
 import { Accordion } from '../index'
 
+import type { ComponentProps } from 'react'
+
 const mockHandleClick = vi.fn()
-const render = (props: React.ComponentProps<typeof Accordion>) => {
+const render = (props: ComponentProps<typeof Accordion>) => {
   return renderWithProviders(<Accordion {...props} />)
 }
 
 describe('Accordion', () => {
-  let props: React.ComponentProps<typeof Accordion>
+  let props: ComponentProps<typeof Accordion>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/molecules/Accordion/index.tsx b/opentrons-ai-client/src/molecules/Accordion/index.tsx
index f45294faa70..8c8d57e7b3b 100644
--- a/opentrons-ai-client/src/molecules/Accordion/index.tsx
+++ b/opentrons-ai-client/src/molecules/Accordion/index.tsx
@@ -16,6 +16,7 @@ import {
   CURSOR_DEFAULT,
 } from '@opentrons/components'
 
+import type { MouseEvent, ReactNode } from 'react'
 interface AccordionProps {
   id?: string
   handleClick: () => void
@@ -23,7 +24,7 @@ interface AccordionProps {
   isCompleted?: boolean
   disabled?: boolean
   heading?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const ACCORDION = 'accordion'
@@ -42,7 +43,7 @@ export function Accordion({
 }: AccordionProps): JSX.Element {
   const contentRef = useRef<HTMLDivElement>(null)
 
-  const handleContainerClick = (e: React.MouseEvent): void => {
+  const handleContainerClick = (e: MouseEvent): void => {
     if (
       (e.target as HTMLElement).tagName !== 'BUTTON' &&
       !disabled &&
@@ -52,7 +53,7 @@ export function Accordion({
     }
   }
 
-  const handleButtonClick = (e: React.MouseEvent): void => {
+  const handleButtonClick = (e: MouseEvent): void => {
     if (!isOpen && !disabled) {
       e.stopPropagation()
       handleClick()
diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx
index dffdcaa46d3..ac76db2231a 100644
--- a/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx
+++ b/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
@@ -7,6 +6,8 @@ import { i18n } from '../../../i18n'
 import { ChatDisplay } from '../index'
 import { useForm, FormProvider } from 'react-hook-form'
 
+import type { ComponentProps } from 'react'
+
 const mockUseTrackEvent = vi.fn()
 
 vi.mock('../../../resources/hooks/useTrackEvent', () => ({
@@ -17,7 +18,7 @@ vi.mock('../../../hooks/useTrackEvent', () => ({
   useTrackEvent: () => mockUseTrackEvent,
 }))
 
-const RenderChatDisplay = (props: React.ComponentProps<typeof ChatDisplay>) => {
+const RenderChatDisplay = (props: ComponentProps<typeof ChatDisplay>) => {
   const methods = useForm({
     defaultValues: {},
   })
@@ -29,14 +30,14 @@ const RenderChatDisplay = (props: React.ComponentProps<typeof ChatDisplay>) => {
   )
 }
 
-const render = (props: React.ComponentProps<typeof ChatDisplay>) => {
+const render = (props: ComponentProps<typeof ChatDisplay>) => {
   return renderWithProviders(<RenderChatDisplay {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ChatDisplay', () => {
-  let props: React.ComponentProps<typeof ChatDisplay>
+  let props: ComponentProps<typeof ChatDisplay>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx b/opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx
index 3f704a39dda..731f8929c4a 100644
--- a/opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx
+++ b/opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { FormProvider, useForm } from 'react-hook-form'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
@@ -6,6 +5,8 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { InputPrompt } from '../index'
 
+import type { ReactNode } from 'react'
+
 const mockUseTrackEvent = vi.fn()
 
 vi.mock('../../../resources/hooks/useTrackEvent', () => ({
@@ -17,7 +18,7 @@ vi.mock('../../../hooks/useTrackEvent', () => ({
 }))
 
 const WrappingForm = (wrappedComponent: {
-  children: React.ReactNode
+  children: ReactNode
 }): JSX.Element => {
   const methods = useForm({
     defaultValues: {
diff --git a/opentrons-ai-client/src/molecules/PrimaryFloatingButton/__tests__/PrimaryFloatingButton.test.tsx b/opentrons-ai-client/src/molecules/PrimaryFloatingButton/__tests__/PrimaryFloatingButton.test.tsx
index 8cb297f7501..f09fcafc7bf 100644
--- a/opentrons-ai-client/src/molecules/PrimaryFloatingButton/__tests__/PrimaryFloatingButton.test.tsx
+++ b/opentrons-ai-client/src/molecules/PrimaryFloatingButton/__tests__/PrimaryFloatingButton.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { BORDERS, COLORS, TYPOGRAPHY, SPACING } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { PrimaryFloatingButton } from '../index'
 
-const render = (props: React.ComponentProps<typeof PrimaryFloatingButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof PrimaryFloatingButton>) => {
   return renderWithProviders(<PrimaryFloatingButton {...props} />)
 }
 
 describe('PrimaryFloatingButton', () => {
-  let props: React.ComponentProps<typeof PrimaryFloatingButton>
+  let props: ComponentProps<typeof PrimaryFloatingButton>
   beforeEach(() => {
     props = {
       buttonText: 'primary floating button',
diff --git a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
index ab7d69543ba..beb08893f3c 100644
--- a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
+++ b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
@@ -4,19 +4,21 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { PromptPreview } from '..'
 
+import type { ComponentProps } from 'react'
+
 const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE =
   'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.'
 
 const mockHandleClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof PromptPreview>) => {
+const render = (props: ComponentProps<typeof PromptPreview>) => {
   return renderWithProviders(<PromptPreview {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('PromptPreview', () => {
-  let props: React.ComponentProps<typeof PromptPreview>
+  let props: ComponentProps<typeof PromptPreview>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/molecules/PromptPreviewSection/__tests__/PromptPreviewSection.test.tsx b/opentrons-ai-client/src/molecules/PromptPreviewSection/__tests__/PromptPreviewSection.test.tsx
index e194bae5a8e..29bc65972a6 100644
--- a/opentrons-ai-client/src/molecules/PromptPreviewSection/__tests__/PromptPreviewSection.test.tsx
+++ b/opentrons-ai-client/src/molecules/PromptPreviewSection/__tests__/PromptPreviewSection.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '../../../i18n'
 
 import { PromptPreviewSection } from '../index'
 
-const render = (props: React.ComponentProps<typeof PromptPreviewSection>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof PromptPreviewSection>) => {
   return renderWithProviders(<PromptPreviewSection {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('PromptPreviewSection', () => {
-  let props: React.ComponentProps<typeof PromptPreviewSection>
+  let props: ComponentProps<typeof PromptPreviewSection>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/molecules/UploadInput/index.tsx b/opentrons-ai-client/src/molecules/UploadInput/index.tsx
index 77dc5a2616d..89877f38c33 100644
--- a/opentrons-ai-client/src/molecules/UploadInput/index.tsx
+++ b/opentrons-ai-client/src/molecules/UploadInput/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -18,6 +18,12 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type {
+  ChangeEventHandler,
+  DragEventHandler,
+  MouseEventHandler,
+} from 'react'
+
 const StyledLabel = styled.label`
   display: ${DISPLAY_FLEX};
   cursor: ${CURSOR_POINTER};
@@ -66,39 +72,37 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   } = props
   const { t } = useTranslation('protocol_info')
 
-  const fileInput = React.useRef<HTMLInputElement>(null)
-  const [isFileOverDropZone, setIsFileOverDropZone] = React.useState<boolean>(
-    false
-  )
-  const [isHover, setIsHover] = React.useState<boolean>(false)
-  const handleDrop: React.DragEventHandler<HTMLLabelElement> = e => {
+  const fileInput = useRef<HTMLInputElement>(null)
+  const [isFileOverDropZone, setIsFileOverDropZone] = useState<boolean>(false)
+  const [isHover, setIsHover] = useState<boolean>(false)
+  const handleDrop: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     Array.from(e.dataTransfer.files).forEach(f => onUpload(f))
     setIsFileOverDropZone(false)
   }
-  const handleDragEnter: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragEnter: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
   }
-  const handleDragLeave: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragLeave: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setIsFileOverDropZone(false)
     setIsHover(false)
   }
-  const handleDragOver: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragOver: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setIsFileOverDropZone(true)
     setIsHover(true)
   }
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = _event => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = _event => {
     onClick != null ? onClick() : fileInput.current?.click()
   }
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+  const onChange: ChangeEventHandler<HTMLInputElement> = event => {
     ;[...(event.target.files ?? [])].forEach(f => onUpload(f))
     if ('value' in event.currentTarget) event.currentTarget.value = ''
   }
diff --git a/opentrons-ai-client/src/organisms/LabwareModal/index.tsx b/opentrons-ai-client/src/organisms/LabwareModal/index.tsx
index d677f6fc14e..3d87687cf73 100644
--- a/opentrons-ai-client/src/organisms/LabwareModal/index.tsx
+++ b/opentrons-ai-client/src/organisms/LabwareModal/index.tsx
@@ -1,3 +1,4 @@
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import {
   DIRECTION_COLUMN,
   Flex,
@@ -14,12 +15,13 @@ import {
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { getLabwareDefURI } from '@opentrons/shared-data'
-import React, { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { reduce } from 'lodash'
 import { ListButtonCheckbox } from '../../atoms/ListButtonCheckbox/ListButtonCheckbox'
 import { LABWARES_FIELD_NAME } from '../LabwareLiquidsSection'
 import { getOnlyLatestDefs } from '../../resources/utils'
+
+import type { ChangeEvent } from 'react'
 import type { DisplayLabware } from '../LabwareLiquidsSection'
 import type {
   LabwareDefByDefURI,
@@ -45,11 +47,9 @@ export function LabwareModal({
   const { t } = useTranslation('create_protocol')
   const { watch, setValue } = useFormContext()
   const [searchTerm, setSearchTerm] = useState<string>('')
-  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(
-    null
-  )
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
   const labwares: DisplayLabware[] = watch(LABWARES_FIELD_NAME) ?? []
-  const [selectedLabwares, setSelectedLabwares] = React.useState<string[]>(
+  const [selectedLabwares, setSelectedLabwares] = useState<string[]>(
     labwares.map(lw => lw.labwareURI)
   )
 
@@ -61,7 +61,7 @@ export function LabwareModal({
   const labwareByCategory: Record<
     string,
     LabwareDefinition2[]
-  > = React.useMemo(() => {
+  > = useMemo(() => {
     return reduce<LabwareDefByDefURI, Record<string, LabwareDefinition2[]>>(
       defs,
       (acc, def: typeof defs[keyof typeof defs]) => {
@@ -118,7 +118,7 @@ export function LabwareModal({
                   </StyledText>
                   <InputField
                     value={searchTerm}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
                       setSearchTerm(e.target.value)
                     }}
                     placeholder={t('search_for_labware_placeholder')}
@@ -166,7 +166,7 @@ export function LabwareModal({
                                   )
                                   if (isMatch) {
                                     return (
-                                      <React.Fragment
+                                      <Fragment
                                         key={`${index}_${category}_${loadName}`}
                                       >
                                         <ListButtonCheckbox
@@ -195,7 +195,7 @@ export function LabwareModal({
                                             labwareURI
                                           )}
                                         />
-                                      </React.Fragment>
+                                      </Fragment>
                                     )
                                   }
                                 }
diff --git a/opentrons-ai-client/src/organisms/PromptButton/__tests__/PromptButton.test.tsx b/opentrons-ai-client/src/organisms/PromptButton/__tests__/PromptButton.test.tsx
index 5d9ec302131..a645a5a5f3c 100644
--- a/opentrons-ai-client/src/organisms/PromptButton/__tests__/PromptButton.test.tsx
+++ b/opentrons-ai-client/src/organisms/PromptButton/__tests__/PromptButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { reagentTransfer } from '../../../assets/prompts'
 import { PromptButton } from '../index'
 
+import type { ComponentProps } from 'react'
 import type * as ReactHookForm from 'react-hook-form'
 
 vi.mock('react-hook-form', async importOriginal => {
@@ -18,14 +18,14 @@ vi.mock('react-hook-form', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof PromptButton>) => {
+const render = (props: ComponentProps<typeof PromptButton>) => {
   return renderWithProviders(<PromptButton {...props} />)
 }
 
 let mockSetValue = vi.fn()
 
 describe('PromptButton', () => {
-  let props: React.ComponentProps<typeof PromptButton>
+  let props: ComponentProps<typeof PromptButton>
 
   beforeEach(() => {
     props = {
diff --git a/opentrons-ai-client/src/pages/CreateProtocol/index.tsx b/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
index 525c79154b9..ad70e72e017 100644
--- a/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
+++ b/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
@@ -1,13 +1,17 @@
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useRef, useState } from 'react'
+import { PromptPreview } from '../../molecules/PromptPreview'
+import { useForm, FormProvider } from 'react-hook-form'
+import { useAtom } from 'jotai'
+
 import {
   Flex,
   JUSTIFY_SPACE_EVENLY,
   POSITION_RELATIVE,
   SPACING,
 } from '@opentrons/components'
-import { useTranslation } from 'react-i18next'
-import { useEffect, useRef, useState } from 'react'
-import { PromptPreview } from '../../molecules/PromptPreview'
-import { useForm, FormProvider } from 'react-hook-form'
+
 import {
   chatDataAtom,
   chatHistoryAtom,
@@ -16,18 +20,19 @@ import {
   headerWithMeterAtom,
   updateProtocolChatAtom,
 } from '../../resources/atoms'
-import { useAtom } from 'jotai'
+
 import { ProtocolSectionsContainer } from '../../organisms/ProtocolSectionsContainer'
 import {
   generateChatPrompt,
   generatePromptPreviewData,
 } from '../../resources/utils/createProtocolUtils'
-import type { DisplayModules } from '../../organisms/ModulesSection'
-import type { DisplayLabware } from '../../organisms/LabwareLiquidsSection'
-import { useNavigate } from 'react-router-dom'
 import { useTrackEvent } from '../../resources/hooks/useTrackEvent'
 import { ResizeBar } from '../../atoms/ResizeBar'
 
+import type { MouseEvent } from 'react'
+import type { DisplayModules } from '../../organisms/ModulesSection'
+import type { DisplayLabware } from '../../organisms/LabwareLiquidsSection'
+
 export interface CreateProtocolFormData {
   application: {
     scientificApplication: string
@@ -164,9 +169,7 @@ export function CreateProtocol(): JSX.Element | null {
     return currentSection > 0 ? currentSection / TOTAL_STEPS : 0
   }
 
-  function handleMouseDown(
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ): void {
+  function handleMouseDown(e: MouseEvent<HTMLDivElement, MouseEvent>): void {
     setIsResizing(true)
     setInitialMouseX(e.clientX)
     setInitialLeftWidth(leftWidth)
diff --git a/opentrons-ai-client/src/resources/hooks/__tests__/useTrackEvent.test.tsx b/opentrons-ai-client/src/resources/hooks/__tests__/useTrackEvent.test.tsx
index 0c43e0bca24..2cb8325cc4e 100644
--- a/opentrons-ai-client/src/resources/hooks/__tests__/useTrackEvent.test.tsx
+++ b/opentrons-ai-client/src/resources/hooks/__tests__/useTrackEvent.test.tsx
@@ -1,11 +1,14 @@
 import { describe, it, vi, expect, afterEach } from 'vitest'
+
+import { TestProvider } from '../../../__testing-utils__'
 import { trackEvent } from '../../../analytics/mixpanel'
 import { useTrackEvent } from '../useTrackEvent'
 import { renderHook } from '@testing-library/react'
 import { mixpanelAtom } from '../../atoms'
+
+import type { ReactNode } from 'react'
 import type { AnalyticsEvent } from '../../../analytics/mixpanel'
 import type { Mixpanel } from '../../types'
-import { TestProvider } from '../../../__testing-utils__'
 
 vi.mock('../../../analytics/mixpanel', () => ({
   trackEvent: vi.fn(),
@@ -18,7 +21,7 @@ const mockMixpanelAtom: Mixpanel = {
   isInitialized: false,
 }
 
-const wrapper = ({ children }: { children: React.ReactNode }) => {
+const wrapper = ({ children }: { children: ReactNode }) => {
   return (
     <TestProvider initialValues={[[mixpanelAtom, mockMixpanelAtom]]}>
       {children}
@@ -32,7 +35,7 @@ describe('useTrackEvent', () => {
   })
 
   it('should call trackEvent with the correct arguments when hasOptedIn is true', () => {
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
+    const wrapper = ({ children }: { children: ReactNode }) => (
       <TestProvider initialValues={[[mixpanelAtom, mockMixpanelAtom]]}>
         {children}
       </TestProvider>
diff --git a/opentrons-ai-client/src/resources/types.ts b/opentrons-ai-client/src/resources/types.ts
index 7e16e1a8642..9e513464858 100644
--- a/opentrons-ai-client/src/resources/types.ts
+++ b/opentrons-ai-client/src/resources/types.ts
@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 /** assistant: ChatGPT API, user: user */
 type Role = 'assistant' | 'user'
 
@@ -57,7 +59,7 @@ export interface RouteProps {
   /** the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    * */
-  Component: React.FC
+  Component: FC
   /** a route/page name to render in the nav bar
    */
   name: string