fix: update react imports for linter

Author: qradle-yndx

common/postMessage.ts

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import * as React from 'react';
 
 import {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';
 
@@ -37,7 +37,7 @@ export function usePostMessageAPIListener<K extends keyof EventMessageTypes>(
     callback: (data: EventMessageTypes[K]) => void,
     deps: unknown[] = [],
 ) {
-    useEffect(() => {
+    React.useEffect(() => {
         return listenPostMessageEvents(action, callback);
     }, [...deps]);
 }

editor-v2/components/DynamicForm/DynamicForm.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {useCallback} from 'react';
+import * as React from 'react';
 
 import {ConfigInput, DynamicFormValue} from '../../../common/types';
 import {editorCn} from '../../utils/cn';
@@ -27,7 +27,7 @@ interface DynamicFormProps {
 const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) => {
     const inputs = blockConfig;
 
-    const getData = useCallback(
+    const getData = React.useCallback(
         (variable: string) => {
             if (variable.startsWith('block.')) {
                 const purePath = variable.replace('block.', '');
@@ -47,7 +47,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
         [contentConfig],
     );
 
-    const decide = useCallback(
+    const decide = React.useCallback(
         (showIf: string): boolean => {
             const parts = showIf.split(' ');
 
@@ -71,7 +71,7 @@ const DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) =
         [getData],
     );
 
-    const renderInput = useCallback(
+    const renderInput = React.useCallback(
         (input: ConfigInput) => {
             const fieldPath = input.name;
             const fieldValue = getContent(contentConfig, input.name);

editor-v2/components/DynamicForm/FieldBase/FieldBase.tsx

@@ -1,7 +1,7 @@
 import {ArrowRotateLeft} from '@gravity-ui/icons';
 import {ArrowToggle, Button, Icon} from '@gravity-ui/uikit';
 import _ from 'lodash';
-import React, {PropsWithChildren, useState} from 'react';
+import * as React from 'react';
 
 import {editorCn} from '../../../utils/cn';
 
@@ -16,7 +16,7 @@ export interface FieldBaseParams {
     expandable?: boolean;
 }
 
-export interface FieldBaseProps extends PropsWithChildren, FieldBaseParams {
+export interface FieldBaseProps extends React.PropsWithChildren, FieldBaseParams {
     className?: string;
 }
 
@@ -28,7 +28,7 @@ const FieldBase: React.FC<FieldBaseProps> = ({
     onRefresh,
     expandable = false,
 }) => {
-    const [showChildren, setShowChildren] = useState(!expandable);
+    const [showChildren, setShowChildren] = React.useState(!expandable);
 
     const titleComponent = React.useMemo(() => {
         if (title) {

editor-v2/components/DynamicForm/Fields/Array/Array.tsx

@@ -1,6 +1,6 @@
 import {Plus} from '@gravity-ui/icons';
 import {Button, Card, Icon} from '@gravity-ui/uikit';
-import React, {useCallback} from 'react';
+import * as React from 'react';
 
 import {ArrayObjectInput, ArrayTextInput, DynamicFormValue} from '../../../../../common/types';
 import {removeFromArray, swapArrayItems} from '../../../../utils';
@@ -27,15 +27,15 @@ interface ArrayFieldProps {
 const ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: ArrayFieldProps) => {
     const haveItems = values && Array.isArray(values) && values.length;
 
-    const onAddItem = useCallback(() => {
+    const onAddItem = React.useCallback(() => {
         if (blockConfig.arrayType === 'text') {
             onUpdate('', haveItems ? [...values, ''] : ['']);
         } else if (blockConfig.arrayType === 'object') {
             onUpdate('', haveItems ? [...values, {}] : [{}]);
         }
     }, [blockConfig.arrayType, haveItems, onUpdate, values]);
 
-    const onDeleteItem = useCallback(
+    const onDeleteItem = React.useCallback(
         (index: number) => {
             if (Array.isArray(values)) {
                 const newArray = removeFromArray(values, index);
@@ -45,7 +45,7 @@ const ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: Ar
         [onUpdate, values],
     );
 
-    const onReorderItem = useCallback(
+    const onReorderItem = React.useCallback(
         (index: number, placement: 'up' | 'down') => {
             if (Array.isArray(values)) {
                 const newArray = swapArrayItems(
@@ -59,7 +59,7 @@ const ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: Ar
         [onUpdate, values],
     );
 
-    const renderInput = useCallback(
+    const renderInput = React.useCallback(
         (value: DynamicFormValue, index: number) => {
             const arrayItemButton = (
                 <ItemButton
@@ -113,7 +113,7 @@ const ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: Ar
         [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values],
     );
 
-    const renderInputs = useCallback(() => {
+    const renderInputs = React.useCallback(() => {
         if (haveItems) {
             const renderItems = values
                 .map(renderInput)

editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.tsx

@@ -1,6 +1,6 @@
 import {ArrowDown, ArrowUp, EllipsisVertical, TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup} from '@gravity-ui/uikit';
-import React, {Fragment, useCallback, useRef, useState} from 'react';
+import * as React from 'react';
 
 import {editorCn} from '../../../../../utils/cn';
 
@@ -23,18 +23,18 @@ const ItemButton = ({
     disableReorderUp = false,
     disableReorderDown = false,
 }: ItemButtonProps) => {
-    const buttonRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = React.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
 
-    const onMenuItemClickWrapper = useCallback((callback: () => void) => {
+    const onMenuItemClickWrapper = React.useCallback((callback: () => void) => {
         return () => {
             setIsOpen(false);
             callback();
         };
     }, []);
 
     return (
-        <Fragment>
+        <React.Fragment>
             <Button className={b(null, className)} ref={buttonRef} onClick={() => setIsOpen(true)}>
                 <Icon data={EllipsisVertical} />
             </Button>
@@ -68,7 +68,7 @@ const ItemButton = ({
                     </Menu.Item>
                 </Menu>
             </Popup>
-        </Fragment>
+        </React.Fragment>
     );
 };
 

editor-v2/components/DynamicForm/Fields/Boolean/Boolean.tsx

@@ -1,5 +1,4 @@
 import {Switch} from '@gravity-ui/uikit';
-import React from 'react';
 
 import {editorCn} from '../../../../utils/cn';
 import FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';

editor-v2/components/DynamicForm/Fields/Number/Number.tsx

@@ -1,5 +1,4 @@
 import {TextInput} from '@gravity-ui/uikit';
-import React from 'react';
 
 import {editorCn} from '../../../../utils/cn';
 import FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';

editor-v2/components/DynamicForm/Fields/Object/Object.tsx

@@ -1,5 +1,4 @@
 import {Card} from '@gravity-ui/uikit';
-import React from 'react';
 
 import {ConfigInput, DynamicFormValue} from '../../../../../common/types';
 import {editorCn} from '../../../../utils/cn';

editor-v2/components/DynamicForm/Fields/OneOf/OneOf.tsx

@@ -1,5 +1,5 @@
-import {Card, RadioButton} from '@gravity-ui/uikit';
-import React, {useCallback, useMemo, useState} from 'react';
+import {Card, SegmentedRadioGroup} from '@gravity-ui/uikit';
+import * as React from 'react';
 
 import {DynamicFormValue, OneOfInput} from '../../../../../common/types';
 import {editorCn} from '../../../../utils/cn';
@@ -33,18 +33,18 @@ const OneOfDynamicField = ({
 }: OneOfDynamicFieldProps) => {
     const defaultValue = inputConfig.options[0].value;
 
-    const [oneOfMetaValue, setOneOfMetaValue] = useState(defaultValue);
+    const [oneOfMetaValue, setOneOfMetaValue] = React.useState(defaultValue);
 
     const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);
-    const oneOfChosenOption = useMemo(
+    const oneOfChosenOption = React.useMemo(
         () =>
             inputConfig.options.find(
                 ({value: foundOneOfValue}) => foundOneOfValue === oneOfMetaValue,
             ),
         [inputConfig.options, oneOfMetaValue],
     );
 
-    const onUpdateOneOf = useCallback((value: string) => {
+    const onUpdateOneOf = React.useCallback((value: string) => {
         setOneOfMetaValue(value);
     }, []);
 
@@ -56,7 +56,7 @@ const OneOfDynamicField = ({
             expandable
         >
             <Card className={b('card')}>
-                <RadioButton
+                <SegmentedRadioGroup
                     className={b('radio')}
                     options={inputConfig.options.map((option) => ({
                         content: option.title,

editor-v2/components/DynamicForm/Fields/Select/Select.tsx

@@ -1,5 +1,4 @@
-import {RadioButton, Select} from '@gravity-ui/uikit';
-import React from 'react';
+import {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';
 
 import {SelectMultipleInput, SelectSingleInput} from '../../../../../common/types';
 import {editorCn} from '../../../../utils/cn';
@@ -30,7 +29,7 @@ const SelectDynamicField = ({input, value, onUpdate, className}: SelectDynamicFi
                 />
             )}
             {inputView === 'radiobutton' && (
-                <RadioButton options={input.enum} value={value} onUpdate={onUpdate} />
+                <SegmentedRadioGroup options={input.enum} value={value} onUpdate={onUpdate} />
             )}
         </FieldBase>
     );