feat: migrate to new JSX transform (#2006)

Co-authored-by: Andrey Morozov <[email protected]>

.babelrc

@@ -10,7 +10,12 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": []
-}
+}

.eslintrc

@@ -4,7 +4,8 @@
         "@gravity-ui/eslint-config/client",
         "@gravity-ui/eslint-config/prettier",
         "@gravity-ui/eslint-config/import-order",
-        "@gravity-ui/eslint-config/a11y"
+        "@gravity-ui/eslint-config/a11y",
+        "plugin:react/jsx-runtime"
     ],
     "root": true,
     "rules": {
@@ -15,8 +16,8 @@
         "no-restricted-syntax": [
             "error",
             {
-                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
-                "message": "Please use import React from 'react' instead."
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportSpecifier)",
+                "message": "Please use `import * as React from 'react'` instead."
             },
             {
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",

.storybook/decorators/withLang.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {configure} from '../../src';

.storybook/decorators/withMobile.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {MobileProvider} from '../../src';

.storybook/decorators/withStrictMode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {Decorator} from '@storybook/react';
 

.storybook/decorators/withTheme.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {ThemeProvider} from '../../src';

.storybook/theme-addon/register.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {API} from '@storybook/manager-api';
 import {addons, types, useGlobals} from '@storybook/manager-api';

playwright/core/mountFixture.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {MountFixture, PlaywrightFixture} from './types';
 
 export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {

playwright/core/types.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type * as React from 'react';
 
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {

playwright/playwright/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
 import {ToasterProvider} from '../../src/components/Toaster';

src/components/ActionTooltip/ActionTooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {useForkRef} from '../../hooks';
 import {useTooltipVisible} from '../../hooks/private';

src/components/ActionTooltip/__stories__/ActionTooltip.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {StoryFn} from '@storybook/react';
 
 import {Button} from '../../Button';

src/components/ActionTooltip/__tests__/ActionTooltip.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import userEvent from '@testing-library/user-event';
 
 import {createEvent, fireEvent, render, screen} from '../../../../test-utils/utils';

src/components/ActionsPanel/ActionsPanel.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import {Xmark} from '@gravity-ui/icons';
 
 import {Button} from '../Button';

src/components/ActionsPanel/__stories__/ActionsPanel.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {ActionsPanel} from '../../ActionsPanel';

src/components/ActionsPanel/__stories__/actions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ChevronDown, Files, PencilToSquare, TrashBin} from '@gravity-ui/icons';
 
 import type {ActionsPanelProps} from '../../ActionsPanel';

src/components/ActionsPanel/components/CollapseActions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {Ellipsis} from '@gravity-ui/icons';
 

src/components/ActionsPanel/components/hooks/useCollapseActions.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import type {ActionsPanelItem} from '../../types';
 

src/components/ActionsPanel/components/hooks/useObserveIntersection.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {useDirection} from '../../../theme';
 

src/components/Alert/Alert.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import userEvent from '@testing-library/user-event';
 
 import {render, screen} from '../../../test-utils/utils';

src/components/Alert/Alert.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Xmark} from '@gravity-ui/icons';
 
 import {Button} from '../Button';

src/components/Alert/AlertAction.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import {Button} from '../Button';
 
 import type {AlertActionProps} from './types';

src/components/Alert/AlertActions.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import {Flex} from '../layout';
 
 import {AlertAction} from './AlertAction';

src/components/Alert/AlertContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {AlertContextType} from './types';
 

src/components/Alert/AlertContextProvider.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import {AlertContext} from './AlertContext';
 import type {AlertContextProviderProps} from './types';
 

src/components/Alert/AlertIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 
 import {
     CircleCheck,

src/components/Alert/AlertTitle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Text} from '../Text';
 
 import {bAlert} from './constants';

src/components/Alert/__stories__/Alert.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Gear} from '@gravity-ui/icons';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';

src/components/Alert/__tests__/Alert.visual.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {smokeTest, test} from '~playwright/core';
 
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';

src/components/Alert/__tests__/cases.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
 import {Alert} from '../Alert';
 import type {AlertProps} from '../types';

src/components/Alert/types.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type * as React from 'react';
 
 import type {ButtonProps} from '../Button';
 import type {QAProps} from '../types';

src/components/Alert/useAlertContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {AlertContext} from './AlertContext';
 

src/components/ArrowToggle/ArrowToggle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ChevronDown} from '@gravity-ui/icons';
 
 import {Icon} from '../Icon';

src/components/ArrowToggle/__stories__/ArrowToggle.new.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Meta, StoryFn} from '@storybook/react';
 
 import {ArrowToggle} from '../ArrowToggle';

src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 

src/components/ArrowToggle/__stories__/examples/ArrowToggleView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {DocsExample} from '../../../../demo/DocsExample/DocsExample';
 import {Button} from '../../../Button';

src/components/ArrowToggle/__tests__/ArrowToggle.visual.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {smokeTest, test} from '~playwright/core';
 
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';

src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {block} from '../utils/cn';
 

src/components/Avatar/AvatarIcon/AvatarIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Icon} from '../../Icon';
 import type {AvatarSize} from '../types/common';
 

src/components/Avatar/AvatarImage/AvatarImage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {AVATAR_SIZES} from '../constants';
 

src/components/Avatar/AvatarText/AvatarText.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {AvatarTextProps} from './types';
 import {getAvatarDisplayText} from './utils';
 

src/components/Avatar/__stories__/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {faker} from '@faker-js/faker/locale/en';
 import {FaceRobot} from '@gravity-ui/icons';

src/components/Avatar/__tests__/Avatar.visual.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {expect} from '@playwright/experimental-ct-react';
 
 import {test} from '~playwright/core';

src/components/AvatarStack/AvatarStack.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {block} from '../utils/cn';
 

src/components/AvatarStack/AvatarStackItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 
 import {block} from '../utils/cn';
 

src/components/AvatarStack/AvatarStackMore.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {DEFAULT_AVATAR_SIZE} from '../Avatar';
 import {block} from '../utils/cn';

src/components/AvatarStack/AvatarStackMoreButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {DEFAULT_AVATAR_SIZE} from '../Avatar';
 import {block} from '../utils/cn';

src/components/AvatarStack/__stories__/AvatarStack.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 
 import {faker} from '@faker-js/faker/locale/en';
 import type {Meta, StoryObj} from '@storybook/react';

src/components/AvatarStack/__tests__/AvatarStack.visual.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {test} from '~playwright/core';
 
 import {AvatarStackStories} from './stories';

src/components/AvatarStack/types.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type * as React from 'react';
 
 import type {AvatarSize} from '../Avatar';
 

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import _throttle from 'lodash/throttle';
 

src/components/Breadcrumbs/BreadcrumbsButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 
 import {block} from '../utils/cn';
 

src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {Link} from '../Link';
 import {block} from '../utils/cn';

src/components/Breadcrumbs/BreadcrumbsMore.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import {DropdownMenu} from '../DropdownMenu';
 import {block} from '../utils/cn';
 

src/components/Breadcrumbs/BreadcrumbsSeparator.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {block} from '../utils/cn';
 
 import type {BreadcrumbsProps} from './Breadcrumbs';

src/components/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {StoryFn} from '@storybook/react';
 
 import {Breadcrumbs} from '../Breadcrumbs';

src/components/Breadcrumbs/__stories__/BreadcrumbsShowcase.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {cn} from '../../utils/cn';
 import {Breadcrumbs} from '../Breadcrumbs';

src/components/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {render, screen} from '../../../../test-utils/utils';
 import {Breadcrumbs} from '../Breadcrumbs';