chore(opentrons-ai-client): clean up react imports in opentrons-ai-cl…

…ient

clean up react imports in opentrons-ai-client

close AUTH-1202

opentrons-ai-client/src/__testing-utils__/renderWithProviders.tsx

@@ -1,56 +1,63 @@
 // 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
 }
 
 export const TestProvider = ({
   initialValues,
   children,
-}: TestProviderProps): React.ReactNode => (
+}: TestProviderProps): ReactNode => (
   <Provider>
     <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
   </Provider>
 )
 
 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}>

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

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 = {

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,15 +35,15 @@ 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 */
   id?: string
   /** 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
 >(

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 = {

opentrons-ai-client/src/molecules/Accordion/index.tsx

@@ -16,14 +16,15 @@ import {
   CURSOR_DEFAULT,
 } from '@opentrons/components'
 
+import type { MouseEvent, ReactNode } from 'react'
 interface AccordionProps {
   id?: string
   handleClick: () => void
   isOpen?: boolean
   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()

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 = {

opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx

@@ -1,11 +1,12 @@
-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'
 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: {

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',

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 = {

opentrons-ai-client/src/molecules/PromptPreviewSection/__tests__/PromptPreviewSection.test.tsx

@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
 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 = {