chore(components): clean up react imports (#17176)

* chore(components): clean up react imports

components/src/alerts/AlertItem.tsx

@@ -1,9 +1,9 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import { IconButton } from '../buttons'
 import styles from './alerts.module.css'
 
+import type { ReactNode } from 'react'
 import type { IconProps } from '../icons'
 
 export type AlertType = 'success' | 'warning' | 'error' | 'info'
@@ -12,9 +12,9 @@ export interface AlertItemProps {
   /** name constant of the icon to display */
   type: AlertType
   /** title/main message of colored alert bar */
-  title: React.ReactNode
+  title: ReactNode
   /** Alert message body contents */
-  children?: React.ReactNode
+  children?: ReactNode
   /** Additional class name */
   className?: string
   /** optional handler to show close button/clear alert  */

components/src/atoms/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { Checkbox } from '..'
 
-const render = (props: React.ComponentProps<typeof Checkbox>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Checkbox>) => {
   return renderWithProviders(<Checkbox {...props} />)[0]
 }
 
 describe('Checkbox', () => {
-  let props: React.ComponentProps<typeof Checkbox>
+  let props: ComponentProps<typeof Checkbox>
 
   beforeEach(() => {
     props = {

components/src/atoms/Checkbox/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
@@ -14,13 +13,15 @@ import {
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 
+import type { MouseEventHandler } from 'react'
+
 export interface CheckboxProps {
   /** checkbox is checked if value is true */
   isChecked: boolean
   /** label text that describes the option */
   labelText: string
   /** callback click/tap handler */
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   /** html tabindex property */
   tabIndex?: number
   /** if disabled is true, mouse events will not trigger onClick callback */

components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,12 +7,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { CheckboxField } from '..'
 
-const render = (props: React.ComponentProps<typeof CheckboxField>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof CheckboxField>) => {
   return renderWithProviders(<CheckboxField {...props} />)[0]
 }
 
 describe('CheckboxField', () => {
-  let props: React.ComponentProps<typeof CheckboxField>
+  let props: ComponentProps<typeof CheckboxField>
 
   beforeEach(() => {
     props = {

components/src/atoms/CheckboxField/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
@@ -11,21 +10,23 @@ import {
   JUSTIFY_CENTER,
 } from '../../styles'
 
+import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
+
 export interface CheckboxFieldProps {
   /** change handler */
-  onChange: React.ChangeEventHandler
+  onChange: ChangeEventHandler
   /** checkbox is checked if value is true */
   value?: boolean
   /** name of field in form */
   name?: string
   /** label text for checkbox */
-  label?: React.ReactNode
+  label?: ReactNode
   /** checkbox is disabled if value is true */
   disabled?: boolean
   /** html tabindex property */
   tabIndex?: number
   /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-  labelProps?: React.ComponentProps<'div'>
+  labelProps?: ComponentProps<'div'>
   /** if true, render indeterminate icon */
   isIndeterminate?: boolean
 }

components/src/atoms/Chip/__tests__/Chip.test.tsx

@@ -1,17 +1,18 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { SPACING } from '../../../ui-style-constants'
 import { renderWithProviders } from '../../../testing/utils'
 import { Chip } from '..'
 
-const render = (props: React.ComponentProps<typeof Chip>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Chip>) => {
   return renderWithProviders(<Chip {...props} />)
 }
 
 describe('Chip Touchscreen', () => {
-  let props: React.ComponentProps<typeof Chip>
+  let props: ComponentProps<typeof Chip>
 
   it('should render text, icon, bgcolor with success colors', () => {
     props = {
@@ -214,7 +215,7 @@ describe('Chip Touchscreen', () => {
 })
 
 describe('Chip Web', () => {
-  let props: React.ComponentProps<typeof Chip>
+  let props: ComponentProps<typeof Chip>
 
   beforeEach(() => {
     Object.defineProperty(window, 'innerWidth', {

components/src/atoms/Divider/index.tsx

@@ -1,7 +1,8 @@
-import type * as React from 'react'
 import { Box, COLORS, SPACING } from '../..'
 
-type Props = React.ComponentProps<typeof Box>
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof Box>
 
 export function Divider(props: Props): JSX.Element {
   return (

components/src/atoms/InputField/__tests__/InputField.test.tsx

@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { InputField } from '..'
 
-const render = (props: React.ComponentProps<typeof InputField>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InputField>) => {
   return renderWithProviders(<InputField {...props} />)[0]
 }
 
 describe('HeaterShakerSlideout', () => {
-  let props: React.ComponentProps<typeof InputField>
+  let props: ComponentProps<typeof InputField>
   beforeEach(() => {
     props = {
       type: 'number',

components/src/atoms/InputField/index.tsx

@@ -20,6 +20,7 @@ import type {
   ChangeEventHandler,
   FocusEvent,
   MouseEvent,
+  MutableRefObject,
   ReactNode,
 } from 'react'
 import type { IconName } from '../../icons'
@@ -81,7 +82,7 @@ export interface InputFieldProps {
   /** small or medium input field height, relevant only */
   size?: 'medium' | 'small'
   /** react useRef to control input field instead of react event */
-  ref?: React.MutableRefObject<HTMLInputElement | null>
+  ref?: MutableRefObject<HTMLInputElement | null>
   /** optional IconName to display icon aligned to left of input field */
   leftIcon?: IconName
   /** if true, show delete icon aligned to right of input field */

components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx

@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { Flex } from '../../../primitives'
 import { DIRECTION_COLUMN } from '../../../styles'
 import { SPACING } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
 
+import type { ReactNode } from 'react'
+
 interface ListButtonAccordionProps {
-  children: React.ReactNode
+  children: ReactNode
   // determines if the accordion is expanded or not
   isExpanded?: boolean
   // is it nested into another accordion?

components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx

@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { Flex } from '../../../primitives'
 import { DIRECTION_COLUMN } from '../../../styles'
 
+import type { ReactNode } from 'react'
+
 interface ListButtonAccordionContainerProps {
-  children: React.ReactNode
+  children: ReactNode
   id: string
 }
 /*

components/src/atoms/ListButton/__tests__/ListButton.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,11 +6,13 @@ import { COLORS } from '../../../helix-design-system'
 
 import { ListButton } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButton>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButton>) =>
   renderWithProviders(<ListButton {...props} />)
 
 describe('ListButton', () => {
-  let props: React.ComponentProps<typeof ListButton>
+  let props: ComponentProps<typeof ListButton>
 
   beforeEach(() => {
     props = {

components/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx

@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 
 import { ListButtonAccordion } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButtonAccordion>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButtonAccordion>) =>
   renderWithProviders(<ListButtonAccordion {...props} />)
 
 describe('ListButtonAccordion', () => {
-  let props: React.ComponentProps<typeof ListButtonAccordion>
+  let props: ComponentProps<typeof ListButtonAccordion>
 
   beforeEach(() => {
     props = {

components/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx

@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 
 import { ListButtonRadioButton } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButtonRadioButton>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButtonRadioButton>) =>
   renderWithProviders(<ListButtonRadioButton {...props} />)
 
 describe('ListButtonRadioButton', () => {
-  let props: React.ComponentProps<typeof ListButtonRadioButton>
+  let props: ComponentProps<typeof ListButtonRadioButton>
 
   beforeEach(() => {
     props = {

components/src/atoms/ListButton/index.tsx

@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { CURSOR_POINTER } from '../../styles'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 export * from './ListButtonChildren/index'
@@ -12,7 +13,7 @@ export type ListButtonType = 'noActive' | 'connected' | 'notConnected'
 
 interface ListButtonProps extends StyleProps {
   type: ListButtonType
-  children: React.ReactNode
+  children: ReactNode
   disabled?: boolean
   onClick?: () => void
 }

components/src/atoms/ListItem/__tests__/ListItem.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,11 +6,13 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { ListItem } from '..'
 
-const render = (props: React.ComponentProps<typeof ListItem>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListItem>) =>
   renderWithProviders(<ListItem {...props} />)
 
 describe('ListItem', () => {
-  let props: React.ComponentProps<typeof ListItem>
+  let props: ComponentProps<typeof ListItem>
 
   beforeEach(() => {
     props = {

components/src/atoms/ListItem/index.tsx

@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { FLEX_MAX_CONTENT } from '../../styles'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 export * from './ListItemChildren'
@@ -19,7 +20,7 @@ interface ListItemProps extends StyleProps {
   /** ListItem state type */
   type: ListItemType
   /** ListItem contents */
-  children: React.ReactNode
+  children: ReactNode
   onClick?: () => void
   onMouseEnter?: () => void
   onMouseLeave?: () => void

components/src/atoms/MenuList/OverflowBtn.tsx

@@ -1,20 +1,22 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
 import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 
-interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react'
+
+interface OverflowBtnProps extends ComponentProps<typeof Btn> {
   fillColor?: string
 }
 export const OverflowBtn: (
   props: OverflowBtnProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => React.ReactNode = React.forwardRef(
+  ref: ForwardedRef<HTMLInputElement>
+) => ReactNode = forwardRef(
   (
     props: OverflowBtnProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: ForwardedRef<HTMLInputElement>
   ): JSX.Element => {
     const { fillColor, ...restProps } = props
     return (