refactor(tsconfig): enable verbatimModuleSyntax (#4237)

* refactor(tsconfig): enable verbatimModuleSyntax

* refactor(ts): eslint autofix verbatimModuleSyntax

* chore: run formatting

* chore(eslint): apply autofix

* fix: update type import syntax

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.eslintrc.js

@@ -112,8 +112,9 @@ module.exports = {
       files: ['**/*.{ts,tsx}'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
-        '@typescript-eslint/no-explicit-any': 2,
-        '@typescript-eslint/no-unnecessary-condition': 2,
+        '@typescript-eslint/consistent-type-imports': 'error',
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unnecessary-condition': 'error',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
         '@typescript-eslint/no-unused-vars': [
           'error',

contributor-docs/CONTRIBUTING.md

@@ -104,7 +104,8 @@ Here's an example of a basic component written in the style of Primer react comp
 ```tsx
 import React from 'react'
 import Box from '../Box'
-import {BetterSystemStyleObject, SxProp, merge} from '../sx'
+import type {BetterSystemStyleObject, SxProp} from '../sx'
+import {merge} from '../sx'
 
 export type ComponentProps = {
   prop?: 'value1' | 'value2'
@@ -156,7 +157,8 @@ Each component should accept a prop called `sx` that allows for setting theme-aw
 To add the `sx` prop to your component: import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
 
 ```tsx
-import sx, {SxProp} from './sx'
+import type {SxProp} from './sx'
+import sx from './sx'
 
 const Component = styled.div<SxProp>`
   // additional styles here

e2e/global.d.ts

@@ -4,12 +4,15 @@
  *
  * @see https://playwright.dev/docs/test-advanced#add-custom-matchers-using-expectextend
  */
+
+import type {RunOptions} from 'axe-core'
+
 export {}
 
 declare global {
   namespace PlaywrightTest {
     interface Matchers<R> {
-      toHaveNoViolations(options?: import('axe-core').RunOptions): Promise<R>
+      toHaveNoViolations(options?: RunOptions): Promise<R>
     }
   }
 }

e2e/matchers/toHaveNoViolations.ts

@@ -1,5 +1,7 @@
-import {Page, expect, test} from '@playwright/test'
-import {AxeResults, source} from 'axe-core'
+import type {Page} from '@playwright/test'
+import {expect, test} from '@playwright/test'
+import type {AxeResults} from 'axe-core'
+import {source} from 'axe-core'
 import path from 'node:path'
 import fs from 'node:fs'
 

e2e/test-helpers/storybook.ts

@@ -1,4 +1,4 @@
-import {Page} from '@playwright/test'
+import type {Page} from '@playwright/test'
 import {waitForImages} from './waitForImages'
 
 interface Options {

e2e/test-helpers/waitForImages.ts

@@ -1,4 +1,4 @@
-import {Page} from '@playwright/test'
+import type {Page} from '@playwright/test'
 
 /**
  * Helper specifically for working with images in storybook. Unfortunately, the

packages/react/script/components-json/build.ts

@@ -1,7 +1,7 @@
 import generate from '@babel/generator'
 import {parse} from '@babel/parser'
 import traverse from '@babel/traverse'
-import {ArrowFunctionExpression, Identifier, FunctionDeclaration} from '@babel/types'
+import type {ArrowFunctionExpression, Identifier, FunctionDeclaration} from '@babel/types'
 import Ajv from 'ajv'
 import {pascalCase} from 'change-case'
 import glob from 'fast-glob'

packages/react/src/ActionList/ActionList.examples.stories.tsx

@@ -1,4 +1,4 @@
-import {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import React, {forwardRef} from 'react'
 import {DndProvider, useDrag, useDrop} from 'react-dnd'
 import {HTML5Backend} from 'react-dnd-html5-backend'
@@ -13,7 +13,8 @@ import {
   LinkIcon,
   XIcon,
 } from '@primer/octicons-react'
-import {ActionList, ActionListItemProps} from '.'
+import type {ActionListItemProps} from '.'
+import {ActionList} from '.'
 import TextInput from '../TextInput'
 import Spinner from '../Spinner'
 import Box from '../Box'

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import {ActionList} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'

packages/react/src/ActionList/ActionList.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {Story, Meta} from '@storybook/react'
-import {ActionList, ActionListProps, ActionListGroupProps} from '.'
+import type {Story, Meta} from '@storybook/react'
+import type {ActionListProps, ActionListGroupProps} from '.'
+import {ActionList} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'
 import {Group} from './Group'

packages/react/src/ActionList/ActionListContainerContext.tsx

@@ -1,7 +1,7 @@
 /** This context can be used by components that compose ActionList inside a Menu */
 
 import React from 'react'
-import {AriaRole} from '../utils/types'
+import type {AriaRole} from '../utils/types'
 
 type ContextProps = {
   container?: string

packages/react/src/ActionList/Description.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import Box from '../Box'
 import Truncate from '../Truncate'
-import {SxProp, merge} from '../sx'
+import type {SxProp} from '../sx'
+import {merge} from '../sx'
 import {ItemContext} from './shared'
 
 export type ActionListDescriptionProps = {

packages/react/src/ActionList/Divider.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import Box from '../Box'
 import {get} from '../constants'
-import {Theme} from '../ThemeProvider'
-import {SxProp, merge} from '../sx'
+import type {Theme} from '../ThemeProvider'
+import type {SxProp} from '../sx'
+import {merge} from '../sx'
 
 export type ActionListDividerProps = SxProp
 

packages/react/src/ActionList/Group.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import {useId} from '../hooks/useId'
 import Box from '../Box'
-import {SxProp, BetterSystemStyleObject, merge} from '../sx'
+import type {SxProp, BetterSystemStyleObject} from '../sx'
+import {merge} from '../sx'
 import {ListContext, type ActionListProps} from './shared'
-import {AriaRole} from '../utils/types'
+import type {AriaRole} from '../utils/types'
 import {default as Heading} from '../Heading'
 import type {ActionListHeadingProps} from './Heading'
 import {useSlots} from '../hooks/useSlots'

packages/react/src/ActionList/Heading.tsx

@@ -1,8 +1,9 @@
 import React, {forwardRef} from 'react'
-import {BetterSystemStyleObject, SxProp, merge} from '../sx'
+import type {BetterSystemStyleObject, SxProp} from '../sx'
+import {merge} from '../sx'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
 import {ListContext} from './shared'
 import VisuallyHidden from '../_VisuallyHidden'

packages/react/src/ActionList/Item.tsx

@@ -1,21 +1,25 @@
 import React from 'react'
 import styled from 'styled-components'
 import {AlertIcon} from '@primer/octicons-react'
-import Box, {BoxProps} from '../Box'
-import {Tooltip, TooltipProps} from '../drafts/Tooltip/Tooltip'
+import type {BoxProps} from '../Box'
+import Box from '../Box'
+import type {TooltipProps} from '../drafts/Tooltip/Tooltip'
+import {Tooltip} from '../drafts/Tooltip/Tooltip'
 import {useId} from '../hooks/useId'
 import {useSlots} from '../hooks/useSlots'
-import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx'
+import type {BetterSystemStyleObject, SxProp} from '../sx'
+import sx, {merge} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {Description} from './Description'
 import {GroupContext} from './Group'
-import {type ActionListProps, ListContext} from './shared'
+import type {ActionListItemProps, ActionListProps} from './shared'
 import {Selection} from './Selection'
-import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
-import {LeadingVisual, TrailingVisual, VisualProps} from './Visuals'
+import {getVariantStyles, ItemContext, TEXT_ROW_HEIGHT, ListContext} from './shared'
+import type {VisualProps} from './Visuals'
+import {LeadingVisual, TrailingVisual} from './Visuals'
 
 const LiBox = styled.li<SxProp>(sx)
 

packages/react/src/ActionList/LinkItem.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
-import {SxProp, merge} from '../sx'
+import type {SxProp} from '../sx'
+import {merge} from '../sx'
 import {Item} from './Item'
-import {ActionListItemProps} from './shared'
+import type {ActionListItemProps} from './shared'
 import Box from '../Box'
 
 // adopted from React.AnchorHTMLAttributes

packages/react/src/ActionList/List.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import styled from 'styled-components'
-import sx, {SxProp, merge} from '../sx'
+import type {SxProp} from '../sx'
+import sx, {merge} from '../sx'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {useSlots} from '../hooks/useSlots'

packages/react/src/ActionList/Selection.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
-import {GroupContext, ActionListGroupProps} from './Group'
+import type {ActionListGroupProps} from './Group'
+import {GroupContext} from './Group'
 import {type ActionListProps, type ActionListItemProps, ListContext} from './shared'
 import {LeadingVisualContainer} from './Visuals'
 import Box from '../Box'

packages/react/src/ActionList/Visuals.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import Box from '../Box'
 import {get} from '../constants'
-import {SxProp, merge} from '../sx'
+import type {SxProp} from '../sx'
+import {merge} from '../sx'
 import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
 
 export type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>

packages/react/src/ActionList/shared.ts

@@ -1,6 +1,6 @@
 import React from 'react'
-import {SxProp} from '../sx'
-import {AriaRole} from '../utils/types'
+import type {SxProp} from '../sx'
+import type {AriaRole} from '../utils/types'
 
 export type ActionListItemProps = {
   /**

packages/react/src/ActionMenu/ActionMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {Meta} from '@storybook/react'
-import {ComponentProps} from '../utils/types'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
 import {ActionMenu} from './ActionMenu'
 import {ActionList} from '../ActionList'
 

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import {TriangleDownIcon} from '@primer/octicons-react'
-import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
-import {OverlayProps} from '../Overlay'
+import type {AnchoredOverlayProps} from '../AnchoredOverlay'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import type {OverlayProps} from '../Overlay'
 import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from '../hooks'
 import {Divider} from '../ActionList/Divider'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
-import {Button, ButtonProps} from '../Button'
+import type {ButtonProps} from '../Button'
+import {Button} from '../Button'
 import {useId} from '../hooks/useId'
-import {MandateProps} from '../utils/types'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {MandateProps} from '../utils/types'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {Tooltip} from '../drafts/Tooltip/Tooltip'
 
 export type MenuContextProps = Pick<

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef} from 'react'
-import {Args, Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react'
 
 import {Box} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'

packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {Args, Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react'
 
 import {Box} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -1,7 +1,10 @@
 import React, {useCallback, useEffect} from 'react'
-import Overlay, {OverlayProps} from '../Overlay'
-import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
-import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
+import type {OverlayProps} from '../Overlay'
+import Overlay from '../Overlay'
+import type {FocusTrapHookSettings} from '../hooks/useFocusTrap'
+import {useFocusTrap} from '../hooks/useFocusTrap'
+import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
+import {useFocusZone} from '../hooks/useFocusZone'
 import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
 import {useId} from '../hooks/useId'
 import type {PositionSettings} from '@primer/behaviors'

packages/react/src/Autocomplete/Autocomplete.features.stories.tsx

@@ -1,15 +1,16 @@
-import React, {ChangeEventHandler, RefObject, useCallback, useEffect, useRef, useState} from 'react'
-import {Meta} from '@storybook/react'
+import type {ChangeEventHandler, RefObject} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
+import type {Meta} from '@storybook/react'
 
 import {BaseStyles, Box, Dialog, ThemeProvider, registerPortalRoot} from '..'
 import TextInputTokens from '../TextInputWithTokens'
 import Autocomplete from './Autocomplete'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import FormControl from '../FormControl'
 import {Button} from '../Button'
-import {ComponentProps} from '../utils/types'
+import type {ComponentProps} from '../utils/types'
+import type {FormControlArgs} from '../utils/story-helpers'
 import {
-  FormControlArgs,
   formControlArgs,
   formControlArgTypes,
   getFormControlArgsByChildComponent,

packages/react/src/Autocomplete/Autocomplete.stories.tsx

@@ -1,14 +1,14 @@
 import React, {useCallback, useState} from 'react'
-import {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 
 import {BaseStyles, Box, ThemeProvider} from '..'
 
 import Autocomplete from './Autocomplete'
 import FormControl from '../FormControl'
 
-import {ComponentProps} from '../utils/types'
+import type {ComponentProps} from '../utils/types'
+import type {FormControlArgs} from '../utils/story-helpers'
 import {
-  FormControlArgs,
   formControlArgs,
   formControlArgTypes,
   getFormControlArgsByChildComponent,

packages/react/src/Autocomplete/Autocomplete.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useReducer, useRef} from 'react'
-import {ComponentProps} from '../utils/types'
+import type {ComponentProps} from '../utils/types'
 import {AutocompleteContext} from './AutocompleteContext'
 import AutocompleteInput from './AutocompleteInput'
 import AutocompleteMenu from './AutocompleteMenu'

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -1,17 +1,10 @@
-import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import type {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler} from 'react'
+import React, {useCallback, useContext, useEffect, useState} from 'react'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {AutocompleteContext} from './AutocompleteContext'
 import TextInput from '../TextInput'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
-import {ComponentProps} from '../utils/types'
+import type {ComponentProps} from '../utils/types'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 
 type InternalAutocompleteInputProps = {