Merge branch 'main' into add-smoke-tests/Divider

.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';

package.json

@@ -204,8 +204,8 @@
         "typescript": "^5.3.3"
     },
     "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "nano-staged": {
         "*.{scss}": [

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 {
@@ -14,7 +14,7 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: React.JSX.Element,
-        options?: MountOptions<HooksConfig> & {width?: number},
+        options?: MountOptions<HooksConfig> & {width?: number | string},
     ): Promise<MountResult>;
 }
 

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

@@ -0,0 +1,35 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {ArrowToggleProps} from '../ArrowToggle';
+import {ArrowToggle} from '../ArrowToggle';
+
+import {directionCases, sizeCases} from './cases';
+
+test.describe('ArrowToggle', {tag: '@ArrowToggle'}, () => {
+    smokeTest('smoke', async ({mount, expectScreenshot}) => {
+        const defaultProps: ArrowToggleProps = {};
+
+        const smokeScenarios = createSmokeScenarios(defaultProps, {
+            size: sizeCases,
+            direction: directionCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <ArrowToggle {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/ArrowToggle/__tests__/cases.tsx

@@ -0,0 +1,10 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {ArrowToggleProps} from '../ArrowToggle';
+
+export const sizeCases: Cases<ArrowToggleProps['size']> = [10, 20, 30, 40, 50, 100];
+export const directionCases: Cases<ArrowToggleProps['direction']> = [
+    'top',
+    'left',
+    'bottom',
+    'right',
+];

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';