chore(eslint): enable consistent-type-imports (#5403)

* chore(eslint): enable consistent-type-imports

* style: fix linting errors

.changeset/strange-turkeys-nail.md

@@ -0,0 +1,2 @@
+---
+---

docs/.storybook/main.ts

@@ -1,4 +1,4 @@
-import path, { join, dirname } from 'path'
+import path, { dirname, join } from 'path'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 

docs/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import './preview.css'
 
 import React, { useEffect } from 'react'
 import { decorators as bgDecorators } from '@storybook/addon-backgrounds/preview'
-import { Decorator, Preview } from '@storybook/react'
+import { type Decorator, type Preview } from '@storybook/react'
 import { KaizenProvider } from '~components/KaizenProvider'
 import { I18nProvider } from '~components/__react-aria-components__'
 import { ReversedColors } from '~components/__utilities__/v3'

docs/components/DocsContainer/BackToTop/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useLayoutEffect } from 'react'
+import React, { useLayoutEffect, type HTMLAttributes } from 'react'
 
 export const BackToTop = ({
   children,

docs/components/DocsContainer/DefaultDocsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { DocsContainer, DocsContainerProps, DocsContext } from '@storybook/blocks'
+import { DocsContainer, DocsContext, type DocsContainerProps } from '@storybook/blocks'
 import { BackToTop } from './BackToTop'
-import { Content, Main, DocsWrapper } from './Layout'
+import { Content, DocsWrapper, Main } from './Layout'
 
 type LayoutProps = { children: React.ReactNode }
 

docs/components/DocsContainer/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 import styles from './Layout.module.scss'
 
 export const Main = ({ children }: { children: ReactNode }): JSX.Element => (

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Canvas, Unstyled } from '@storybook/blocks'
 import classnames from 'classnames'
 import { Text } from '~components/Text'

docs/components/LinkTo/LinkTo.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { linkTo } from '@storybook/addon-links'
 import classnames from 'classnames'
 

docs/components/NoClipCanvas/NoClipCanvas.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useState } from 'react'
-import { Source, SourceProps, Story, Unstyled } from '@storybook/blocks'
+import { Source, Story, Unstyled, type SourceProps } from '@storybook/blocks'
 import classnames from 'classnames'
 import styles from './NoClipCanvas.module.scss'
 

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import { Text } from '~components/Text'

docs/components/SbContent/SbContent.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import styles from './SbContent.module.scss'

docs/components/StickerSheet/StickerSheet.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 
 import isChromatic from 'chromatic'
 import classnames from 'classnames'
 import { Heading } from '~components/Heading'
 import { StickerSheetCell } from './components/StickerSheetCell'
 import { StickerSheetHeader } from './components/StickerSheetHeader'
-import { StickerSheetRow, StickerSheetRowProps } from './components/StickerSheetRow'
+import { StickerSheetRow, type StickerSheetRowProps } from './components/StickerSheetRow'
 import styles from './StickerSheet.module.css'
 
 const IS_CHROMATIC = isChromatic()

docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 
 export type StickerSheetCellProps = {
   children: React.ReactNode

docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import styles from './StickerSheetHeader.module.css'
 

docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { StickerSheetCell } from '../StickerSheetCell'
 import { StickerSheetHeader } from '../StickerSheetHeader'

docs/test-runner.ts

@@ -1,4 +1,4 @@
-import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner'
+import { getStoryContext, type TestRunnerConfig } from '@storybook/test-runner'
 import { configureAxe, getAxeResults, injectAxe } from 'axe-playwright'
 import { toHaveNoViolations } from 'jest-axe'
 import { globalA11yRules } from './utils/global-a11y-rules'

docs/theme.ts

@@ -1,5 +1,5 @@
 /* eslint import/no-extraneous-dependencies: 0 */
-import { ThemeVars, create } from '@storybook/theming'
+import { create, type ThemeVars } from '@storybook/theming'
 import { defaultTheme } from '@kaizen/design-tokens'
 const colors = defaultTheme.color
 

eslint.config.js

@@ -98,12 +98,19 @@ export default tseslint.config(
         ecmaFeatures: {
           jsx: true,
         },
+        jsxPragma: 'React',
       },
     },
     files: ['**/*.{ts,tsx}'],
     rules: {
       '@typescript-eslint/explicit-function-return-type': ['error', { allowExpressions: true }],
       '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          fixStyle: 'inline-type-imports',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-inferrable-types': 'off',
       '@typescript-eslint/no-unused-vars': [
@@ -147,6 +154,7 @@ export default tseslint.config(
       'import/order': [
         'error',
         {
+          named: { enabled: true, types: 'types-last' },
           alphabetize: {
             order: 'asc',
           },

packages/components/__tests__/reactIntlMock.ts

@@ -1,4 +1,4 @@
-import { MessageDescriptor } from '@cultureamp/i18n-react-intl'
+import { type MessageDescriptor } from '@cultureamp/i18n-react-intl'
 import { vi } from 'vitest'
 
 const replaceInputValue = (str: string, value: string): string => {

packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformConfirmationModalMoodsToVariant } from './transformConfirmationModalMoodsToVariant'
 
 describe('transformConfirmationModalMoodsToVariant', () => {

packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformNotificationTypeToVariant } from './migrateNotificationTypeToVariant'
 
 describe('transformNotificationTypeToVariant', () => {

packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformWellVariantToColor } from './transformWellVariantToColor'
 
 describe('transformWellVariantToColor', () => {

packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removeInputEditModalMood } from './removeInputEditModalMood'
 
 describe('removeInputEditModalMood', () => {

packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removePopoverVariant } from './removePopoverVariant'
 
 describe('removePopoverVariant()', () => {

packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -1,6 +1,6 @@
-import * as OLD_ICONS from '~components/Icon'
-import { IconNames } from '~components/__rc__/Icon/types'
-import { StringSuggestions } from '~components/types/StringSuggestions'
+import type * as OLD_ICONS from '~components/Icon'
+import { type IconNames } from '~components/__rc__/Icon/types'
+import { type StringSuggestions } from '~components/types/StringSuggestions'
 
 // `undefined` means the icon has no usage, thus is not available in the new icon set
 type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined

packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts

@@ -1,8 +1,8 @@
 import { parseJsx } from '../__tests__/utils'
 import {
   printAst,
-  type ImportModuleNameTagsMap,
   transformSource,
+  type ImportModuleNameTagsMap,
   type TransformSourceArgs,
 } from '../utils'
 import { upgradeIconV1 } from './upgradeIconV1'

packages/components/codemods/upgradeIconV1/upgradeIconV1.ts

@@ -1,10 +1,10 @@
 import ts from 'typescript'
 import {
+  setImportToAdd,
   setImportToRemove,
-  type ImportModuleNameTagsMap,
   updateKaioImports,
+  type ImportModuleNameTagsMap,
   type UpdateKaioImportsArgs,
-  setImportToAdd,
 } from '../utils'
 import { getNewIconPropsFromOldIconName } from './getNewIconPropsFromOldIconName'
 import { transformCaMonogramIconToBrand } from './transformCaMonogramIconToBrand'

packages/components/codemods/utils/createProp.spec.ts

@@ -2,7 +2,7 @@ import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils/parseJsx'
 import { createStyleProp } from './createProp'
 import { printAst } from './printAst'
-import { TransformSourceArgs, transformSource } from './transformSource'
+import { transformSource, type TransformSourceArgs } from './transformSource'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
 export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {

packages/components/codemods/utils/migrateStringProp.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst, TransformSourceForTagNameArgs } from '../utils'
+import { printAst, transformSourceForTagName, type TransformSourceForTagNameArgs } from '../utils'
 import { migrateStringProp } from './migrateStringProp'
 
 const transformTopping = (oldValue: string): string => {

packages/components/codemods/utils/removeProps.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removeProps } from './removeProps'
 
 describe('removeProps()', () => {

packages/components/codemods/utils/transformSource.spec.ts

@@ -3,9 +3,9 @@ import path from 'path'
 import ts from 'typescript'
 import { createEncodedSourceFile } from './createEncodedSourceFile'
 import {
-  TransformSourceForTagNameArgs,
   transformSource,
   transformSourceForTagName,
+  type TransformSourceForTagNameArgs,
 } from './transformSource'
 
 const visit =

packages/components/codemods/utils/updateKaioImports.spec.ts

@@ -1,6 +1,6 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils'
-import { updateKaioImports, UpdateKaioImportsArgs } from './updateKaioImports'
+import { updateKaioImports, type UpdateKaioImportsArgs } from './updateKaioImports'
 import { printAst } from '.'
 
 const transformInput =

packages/components/src/Avatar/Avatar.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { Avatar } from './Avatar'
 
 describe('<Avatar />', () => {

packages/components/src/Avatar/Avatar.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef, HTMLAttributes } from 'react'
+import React, { useEffect, useRef, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__rc__/Icon'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Avatar.module.scss'
 
 export type AvatarSizes = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'

packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 
-import { Avatar, AvatarSizes, CompanyAvatarProps, GenericAvatarProps } from '../index'
+import {
+  Avatar,
+  type AvatarSizes,
+  type CompanyAvatarProps,
+  type GenericAvatarProps,
+} from '../index'
 
 export default {
   title: 'Components/Avatar',

packages/components/src/Avatar/_docs/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { Avatar } from '../index'
 
 const meta = {

packages/components/src/AvatarGroup/AvatarGroup.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { AvatarGroup, AvatarList } from './AvatarGroup'
+import { AvatarGroup, type AvatarList } from './AvatarGroup'
 
 const imgAvatars = [
   {

packages/components/src/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Avatar, CompanyAvatarProps, GenericAvatarProps } from '~components/Avatar'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Avatar, type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './AvatarGroup.module.scss'
 
 export type AvatarGroupAvatarProps =

packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
-import { AvatarGroup, AvatarGroupSize } from '../index'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
+import { AvatarGroup, type AvatarGroupSize } from '../index'
 import { AVATARS, EXAMPLE_USER_1, EXAMPLE_USER_2 } from './example-data'
 
 export default {

packages/components/src/AvatarGroup/_docs/AvatarGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { AvatarGroup } from '../index'
 import { AVATARS } from './example-data'
 

packages/components/src/AvatarGroup/_docs/example-data.ts

@@ -1,4 +1,4 @@
-import { AvatarGroupAvatarProps, AvatarList } from '../AvatarGroup'
+import { type AvatarGroupAvatarProps, type AvatarList } from '../AvatarGroup'
 
 export const EXAMPLE_USER_1: AvatarGroupAvatarProps = {
   fullName: 'Adirana Appleseed',

packages/components/src/Badge/Badge.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes, useLayoutEffect, useState } from 'react'
+import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Badge.module.scss'
 
 type BadgeCommonProps = {

packages/components/src/Badge/_docs/Badge.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Badge } from '../index'
 
 export default {

packages/components/src/Badge/_docs/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { BadgeAnimated, Badge } from '~components/Badge'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Badge, BadgeAnimated } from '~components/Badge'
 
 const meta = {
   title: 'Components/Badge',

packages/components/src/Brand/Brand.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes, SVGAttributes } from 'react'
+import React, { type HTMLAttributes, type SVGAttributes } from 'react'
 import classnames from 'classnames'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence'
 import styles from './Brand.module.scss'

packages/components/src/Brand/BrandCollectiveIntelligence/BrandCollectiveIntelligence.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrandSVGProps } from '../Brand'
+import { type BrandSVGProps } from '../Brand'
 
 export type BrandCollectiveIntelligenceProps = BrandSVGProps
 

packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Brand } from '../index'
 
 export default {