chore(protocol-designer): remove * as React from react

protocol-designer/src/__testing-utils__/renderWithProviders.tsx

@@ -1,23 +1,28 @@
 // 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 { Provider } from 'react-redux'
 import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (

protocol-designer/src/atoms/ToggleButton/index.tsx

@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { Btn, Icon, COLORS, Flex } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
@@ -42,7 +42,7 @@ interface ToggleButtonProps extends StyleProps {
   label?: string | null
   disabled?: boolean | null
   id?: string
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
 }
 
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {

protocol-designer/src/labware-defs/actions.ts

@@ -11,6 +11,8 @@ import {
 } from '@opentrons/shared-data'
 import { getAllWellSetsForLabware } from '../utils'
 import * as labwareDefSelectors from './selectors'
+
+import type { SyntheticEvent } from 'react'
 import type { ThunkAction } from '../types'
 import type { LabwareUploadMessage } from './types'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
@@ -89,7 +91,7 @@ const getIsOverwriteMismatched = (
 const _createCustomLabwareDef: (
   onlyTiprack: boolean
 ) => (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = onlyTiprack => event => (dispatch, getState) => {
   const customLabwareDefs = values(
     labwareDefSelectors.getCustomLabwareDefsByURI(getState())
@@ -242,11 +244,11 @@ const _createCustomLabwareDef: (
 }
 
 export const createCustomLabwareDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(false)
 
 export const createCustomTiprackDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(true)
 
 interface DismissLabwareUploadMessage {

protocol-designer/src/load-file/actions.ts

@@ -1,6 +1,8 @@
 import { migration } from './migration'
 import { selectors as fileDataSelectors } from '../file-data'
 import { saveFile } from './utils'
+
+import type { SyntheticEvent } from 'react'
 import type { PDProtocolFile } from '../file-types'
 import type { GetState, ThunkAction, ThunkDispatch } from '../types'
 import type {
@@ -32,7 +34,7 @@ export const loadFileAction = (payload: PDProtocolFile): LoadFileAction => ({
 })
 // load file thunk, handles file loading errors
 export const loadProtocolFile = (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ): ThunkAction<any> => (dispatch: ThunkDispatch<any>, getState: GetState) => {
   const fileError = (
     errorType: FileUploadErrorType,

protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx

@@ -13,12 +13,14 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface CheckboxExpandStepFormFieldProps {
   title: string
   checkboxUpdateValue: (value: unknown) => void
   checkboxValue: unknown
   isChecked: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   tooltipText?: string | null
   disabled?: boolean
 }

protocol-designer/src/molecules/CheckboxStepFormField/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Checkbox,
   Flex,
@@ -7,13 +6,15 @@ import {
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
+
+import type { ReactElement, ReactNode } from 'react'
 import type { Placement } from '@opentrons/components'
 import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
 
 type CheckboxStepFormFieldProps = FieldProps & {
-  children?: React.ReactElement
+  children?: ReactElement
   label?: string
-  tooltipContent?: React.ReactNode
+  tooltipContent?: ReactNode
   tooltipPlacement?: Placement
 }
 

protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -18,20 +17,22 @@ import {
   dismissTimelineWarning,
 } from '../../../dismiss/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../dismiss/actions')
 vi.mock('../../../ui/steps')
 vi.mock('../../../top-selectors/timelineWarnings')
 vi.mock('../../../dismiss/selectors')
 vi.mock('../../../step-forms/selectors')
 
-const render = (props: React.ComponentProps<typeof FormAlerts>) => {
+const render = (props: ComponentProps<typeof FormAlerts>) => {
   return renderWithProviders(<FormAlerts {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FormAlerts', () => {
-  let props: React.ComponentProps<typeof FormAlerts>
+  let props: ComponentProps<typeof FormAlerts>
 
   beforeEach(() => {
     props = {

protocol-designer/src/organisms/Alerts/types.ts

@@ -1,9 +1,11 @@
+import type { ReactNode } from 'react'
+
 export type AlertLevel = 'timeline' | 'form'
 type AlertType = 'error' | 'warning'
 
 interface AlertData {
   title: string
-  description: React.ReactNode
+  description: ReactNode
   dismissId?: string
 }
 

protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx

@@ -32,6 +32,8 @@ import {
 import { deselectAllWells } from '../../well-selection/actions'
 import { DefineLiquidsModal } from '../DefineLiquidsModal'
 import { LiquidCard } from './LiquidCard'
+
+import type { ChangeEvent } from 'react'
 import type { DropdownOption } from '@opentrons/components'
 import type { ContentsByWell } from '../../labware-ingred/types'
 
@@ -131,9 +133,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
     }
   }
 
-  const handleChangeVolume: (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => void = e => {
+  const handleChangeVolume: (e: ChangeEvent<HTMLInputElement>) => void = e => {
     const value: string | null | undefined = e.currentTarget.value
     const masked = fieldProcessors.composeMaskers(
       fieldProcessors.maskToFloat,

protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx

@@ -1,6 +1,8 @@
 import { useSelector } from 'react-redux'
 import { getDismissedHints } from '../../tutorial/selectors'
 import { BlockingHintModal } from './index'
+
+import type { ReactNode } from 'react'
 import type { HintKey } from '../../tutorial'
 
 export interface HintProps {
@@ -9,7 +11,7 @@ export interface HintProps {
    * useBlockingHint expects the parent to disable the hint on cancel/continue */
   enabled: boolean
   hintKey: HintKey | null
-  content: React.ReactNode
+  content: ReactNode
   handleCancel: () => void
   handleContinue: () => void
 }

protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx

@@ -12,7 +12,7 @@ import {
   StyledText,
 } from '@opentrons/components'
 import { getMainPagePortalEl } from '../Portal'
-import type * as React from 'react'
+import type { MouseEvent } from 'react'
 
 export const DELETE_PROFILE_CYCLE: 'deleteProfileCycle' = 'deleteProfileCycle'
 export const CLOSE_STEP_FORM_WITH_CHANGES: 'closeStepFormWithChanges' =
@@ -36,7 +36,7 @@ interface Props {
   modalType: DeleteModalType
   onCancelClick: () => unknown
   // TODO(sa, 2021-7-2): iron out this type, I think the weirdness comes from the return type of onConditionalConfirm
-  onContinueClick: ((event: React.MouseEvent) => unknown) | (() => unknown)
+  onContinueClick: ((event: MouseEvent) => unknown) | (() => unknown)
 }
 
 export function ConfirmDeleteModal(props: Props): JSX.Element {

protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
@@ -7,17 +6,19 @@ import { EditNickNameModal } from '..'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 import { renameLabware } from '../../../labware-ingred/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../ui/labware/selectors')
 vi.mock('../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof EditNickNameModal>) => {
+const render = (props: ComponentProps<typeof EditNickNameModal>) => {
   return renderWithProviders(<EditNickNameModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditNickNameModal', () => {
-  let props: React.ComponentProps<typeof EditNickNameModal>
+  let props: ComponentProps<typeof EditNickNameModal>
 
   beforeEach(() => {
     props = {

protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,18 +6,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { EditProtocolMetadataModal } from '..'
 import { selectors as fileSelectors } from '../../../file-data'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../file-data')
 
-const render = (
-  props: React.ComponentProps<typeof EditProtocolMetadataModal>
-) => {
+const render = (props: ComponentProps<typeof EditProtocolMetadataModal>) => {
   return renderWithProviders(<EditProtocolMetadataModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditProtocolMetadataModal', () => {
-  let props: React.ComponentProps<typeof EditProtocolMetadataModal>
+  let props: ComponentProps<typeof EditProtocolMetadataModal>
 
   beforeEach(() => {
     props = {

protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
   COLORS,
@@ -8,11 +7,12 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FileUploadMessage } from '../../load-file'
 
 export interface ModalContents {
   title: string
-  body: React.ReactNode
+  body: ReactNode
 }
 
 interface ModalProps {

protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx

@@ -1,21 +1,22 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { setFeatureFlags } from '../../../feature-flags/actions'
 import { IncompatibleTipsModal } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../feature-flags/actions')
 
-const render = (props: React.ComponentProps<typeof IncompatibleTipsModal>) => {
+const render = (props: ComponentProps<typeof IncompatibleTipsModal>) => {
   return renderWithProviders(<IncompatibleTipsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('IncompatibleTipsModal', () => {
-  let props: React.ComponentProps<typeof IncompatibleTipsModal>
+  let props: ComponentProps<typeof IncompatibleTipsModal>
 
   beforeEach(() => {
     props = {

protocol-designer/src/organisms/Labware/SelectableLabware.tsx

@@ -12,7 +12,7 @@ import { SingleLabware } from './SingleLabware'
 import { WellTooltip } from './WellTooltip'
 import { SelectionRect } from './SelectionRect'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type {
   WellMouseEvent,
   WellGroup,
@@ -25,10 +25,7 @@ import type { GenericRect } from '../../collision-types'
 import type { NozzleType } from '../../types'
 
 export interface SelectableLabwareProps {
-  labwareProps: Omit<
-    React.ComponentProps<typeof SingleLabware>,
-    'selectedWells'
-  >
+  labwareProps: Omit<ComponentProps<typeof SingleLabware>, 'selectedWells'>
   /** array of primary wells. Overrides labwareProps.selectedWells */
   selectedPrimaryWells: WellGroup
   selectWells: (wellGroup: WellGroup) => unknown