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 => ( {children} @@ -38,19 +45,19 @@ export const TestProvider = ({ export interface RenderWithProvidersOptions extends RenderOptions { initialValues?: Array<[any, any]> - i18nInstance: React.ComponentProps['i18n'] + i18nInstance: ComponentProps['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> + const ProviderWrapper: ComponentType< + PropsWithChildren> > = ({ children }) => { const BaseWrapper = ( 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) => void + handleMouseDown: (e: MouseEvent) => void }): JSX.Element { return (
) => { +const render = (props: ComponentProps) => { return renderWithProviders() } describe('SendButton', () => { - let props: React.ComponentProps + let props: ComponentProps 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 + onChange?: ChangeEventHandler /** name of field in form */ name?: string /** optional ID of