style(eslint): expand react linting rules (#2800)

.eslintrc

@@ -34,8 +34,6 @@
     ],
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/no-var-requires": 0,
-    "react/prop-types": 0,
-    "react-hooks/rules-of-hooks": 2,
     "import/default": 0,
     "import/order": [
       2,
@@ -46,8 +44,12 @@
     "import/no-unresolved": 0,
     "import/no-duplicates": 2,
     "import/no-default-export": 2,
-    "react/no-find-dom-node": 0,
-    "react/display-name": 0,
+    "react/jsx-boolean-value": 2,
+    "react/prop-types": [2, { "skipUndeclared": true }],
+    "react-hooks/exhaustive-deps": 0,
+    "react/no-unstable-nested-components": 2,
+    "react-hooks/rules-of-hooks": 2,
+    "react/no-typos": 2,
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/ban-ts-ignore": 0,
@@ -56,7 +58,6 @@
     "@typescript-eslint/array-type": [1, { "default": "array-simple" }],
     "@typescript-eslint/no-non-null-assertion": 0,
     "jsx-a11y/click-events-have-key-events": 0,
-    "react-hooks/exhaustive-deps": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-tabindex": 0,
     "jsx-a11y/no-autofocus": 0,

packages/react-ui-testing/SeleniumTesting/Controls/Paging.cs

@@ -13,7 +13,7 @@ namespace SKBKontur.SeleniumTesting.Controls
     public class Paging : ControlList<Label>
     {
         public Paging(ISearchContainer container, ISelector selector)
-            : base(container, selector, new BySelector(By.CssSelector("[data-comp-name~='component']")))
+            : base(container, selector, Paging.GetPagesSelector())
         {
         }
 
@@ -29,5 +29,17 @@ public void GoToNextPage(Timings timings = null)
 
         public IProp<int> ActivePage => ReactProperty<int>("ActivePage");
         public IProp<int> PagesCount => ReactProperty<int>("PagesCount");
+
+        public static ISelector GetPagesSelector()
+        {
+            try
+            {
+                return new BySelector(By.CssSelector("[data-tid~='Paging__pageLink'],[data-tid~='Paging__forwardLink']"));
+            }
+            catch(NoSuchElementException ex)
+            {
+                return new BySelector(By.CssSelector("[data-comp-name~='component']"));
+            }
+        }
     }
 }

packages/react-ui-validations/docs/Pages/Concepts/InlineValidations/ControlsWithValidations.ts

@@ -82,6 +82,7 @@ function wrapControl<TComponent extends React.ComponentType<ExtractProps<TCompon
     JSX.LibraryManagedAttributes<TComponent, { value?: ExtractValue<TComponent> } & ExtractProps<TComponent>>
   >
 > {
+  // eslint-disable-next-line react/display-name
   return (props) => {
     const { controlProps, validationWrapperProps } = prepareProps(props);
     const control = React.createElement(controlType, controlProps) as React.ReactElement<any>;

packages/react-ui-validations/src/ErrorRenderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react';
 
 import { TooltipPosition, ValidationTooltip } from './ValidationTooltip';
@@ -24,7 +25,7 @@ export function tooltip(pos: TooltipPosition): RenderErrorMessage {
 
 export function text(pos: 'bottom' | 'right' = 'right'): RenderErrorMessage {
   if (pos === 'right') {
-    return (control, hasError, validation) => {
+    return (control, _hasError, validation) => {
       return (
         <span style={{ display: 'inline-block' }}>
           {control}
@@ -35,7 +36,7 @@ export function text(pos: 'bottom' | 'right' = 'right'): RenderErrorMessage {
       );
     };
   }
-  return (control, hasError, validation) => {
+  return (control, _hasError, validation) => {
     return (
       <span style={{ position: 'relative', display: 'inline-block' }}>
         {control}

packages/react-ui/components/ComboBox/__stories__/Combobox.stories.tsx

@@ -1,3 +1,5 @@
+// TODO: Rewrite stories and enable rule (in process of functional refactoring).
+/* eslint-disable react/no-unstable-nested-components */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import BabyIcon from '@skbkontur/react-icons/Baby';
@@ -482,25 +484,21 @@ export const WithBorderless = () => (
 WithBorderless.storyName = 'with borderless';
 WithBorderless.parameters = { creevey: { skip: [true] } };
 
-export const WithCenterAlign = () => (
-  <SimpleCombobox align={'center'} placeholder={'placeholder'} noInitialValue={true} />
-);
+export const WithCenterAlign = () => <SimpleCombobox align={'center'} placeholder={'placeholder'} noInitialValue />;
 WithCenterAlign.storyName = 'with center align';
 WithCenterAlign.parameters = { creevey: { skip: [true] } };
 
 export const NotRenderNotFound = () => (
-  <SimpleCombobox placeholder={'placeholder'} noInitialValue={true} renderNotFound={() => null} />
+  <SimpleCombobox placeholder={'placeholder'} noInitialValue renderNotFound={() => null} />
 );
 NotRenderNotFound.storyName = 'not render NotFound';
 NotRenderNotFound.parameters = { creevey: { skip: [true] } };
 
-export const WithRightAlign = () => (
-  <SimpleCombobox align={'right'} placeholder={'placeholder'} noInitialValue={true} />
-);
+export const WithRightAlign = () => <SimpleCombobox align={'right'} placeholder={'placeholder'} noInitialValue />;
 WithRightAlign.storyName = 'with right align';
 WithRightAlign.parameters = { creevey: { skip: [true] } };
 
-export const WithMaxLength = () => <SimpleCombobox maxLength={10} placeholder={'placeholder'} noInitialValue={true} />;
+export const WithMaxLength = () => <SimpleCombobox maxLength={10} placeholder={'placeholder'} noInitialValue />;
 WithMaxLength.storyName = 'with maxLength';
 WithMaxLength.parameters = { creevey: { skip: [true] } };
 
@@ -614,7 +612,7 @@ OpenCloseSearchMethods.parameters = { creevey: { skip: [true] } };
 
 export const FocusFlow: Story = () => (
   <div>
-    <SimpleCombobox autoFocus={true} />
+    <SimpleCombobox autoFocus />
     <br />
     <br />
     <SimpleCombobox />

packages/react-ui/components/CurrencyInput/__stories__/CurrencyInput.stories.tsx

@@ -1,3 +1,5 @@
+// TODO: Rewrite stories and enable rule (in process of functional refactoring).
+/* eslint-disable react/no-unstable-nested-components */
 import React from 'react';
 
 import { Meta, Story } from '../../../typings/stories';
@@ -158,7 +160,7 @@ export default { title: 'CurrencyInput' } as Meta;
 
 export const Demo = () => <CurrencyInputDemo />;
 Demo.parameters = { creevey: { skip: [true] } };
-export const WithBorderless = () => <CurrencyInputDemo borderless={true} />;
+export const WithBorderless = () => <CurrencyInputDemo borderless />;
 WithBorderless.storyName = 'With borderless';
 WithBorderless.parameters = { creevey: { skip: [true] } };
 

packages/react-ui/components/DatePicker/__stories__/DatePicker.stories.tsx

@@ -313,7 +313,7 @@ export const DatePickerLocaleProvider = () => {
           minDate="02.07.2017"
           maxDate="30.01.2020"
           onValueChange={action('change')}
-          enableTodayLink={true}
+          enableTodayLink
         />
       </LocaleContext.Provider>
     </div>

packages/react-ui/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx

@@ -1,3 +1,5 @@
+// TODO: Rewrite stories and enable rule (in process of functional refactoring).
+/* eslint-disable react/no-unstable-nested-components */
 import React from 'react';
 import MenuIcon from '@skbkontur/react-icons/Menu';
 import ArrowSize2Icon from '@skbkontur/react-icons/ArrowSize2';

packages/react-ui/components/Hint/__stories__/Hint.stories.tsx

@@ -110,7 +110,7 @@ export const HintWithoutAnimations = () => (
     <Hint text="disableAnimations={false}" disableAnimations={false}>
       <button>Hover me (disableAnimations: false)</button>
     </Hint>
-    <Hint text="disableAnimations={true}" disableAnimations={true}>
+    <Hint text="disableAnimations={true}" disableAnimations>
       <button>Hover me (disableAnimations: true)</button>
     </Hint>
   </div>

packages/react-ui/components/Input/__stories__/Input.stories.tsx

@@ -1,3 +1,5 @@
+// TODO: Rewrite stories and enable rule (in process of functional refactoring).
+/* eslint-disable react/no-unstable-nested-components */
 import React from 'react';
 import SearchIcon from '@skbkontur/react-icons/Search';
 

packages/react-ui/components/Modal/__stories__/Modal.stories.tsx

@@ -1,3 +1,5 @@
+// TODO: Rewrite stories and enable rule (in process of functional refactoring).
+/* eslint-disable react/no-unstable-nested-components */
 import React, { Component, useContext, useState } from 'react';
 import BorderAllIcon from '@skbkontur/react-icons/BorderAll';
 
@@ -642,7 +644,7 @@ ModalWithoutStickyElements.storyName = 'Modal without sticky elements';
 ModalWithoutStickyElements.parameters = { creevey: { tests: TopMiddleBottomModalTests } };
 
 export const WithAlignTop = () => (
-  <Modal alignTop={true}>
+  <Modal alignTop>
     <Modal.Body>
       <p>Use rxjs operators with react hooks.</p>
     </Modal.Body>

packages/react-ui/components/Paging/Paging.tsx

@@ -18,6 +18,7 @@ import { styles } from './Paging.styles';
 import * as NavigationHelper from './NavigationHelper';
 import { getItems } from './PagingHelper';
 import { PagingLocale, PagingLocaleHelper } from './locale';
+import { PagingDefaultComponent } from './PagingDefaultComponent';
 
 const IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
@@ -70,11 +71,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
   public static __KONTUR_REACT_UI__ = 'Paging';
 
   public static defaultProps = {
-    component: ({ className, onClick, children }: any) => (
-      <span className={className} onClick={onClick}>
-        {children}
-      </span>
-    ),
+    component: PagingDefaultComponent,
     useGlobalListener: false,
     ['data-tid']: 'Paging__root',
   };

packages/react-ui/components/Paging/PagingDefaultComponent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { extractDataProps } from '../../lib/utils';
+import { CommonProps } from '../../internal/CommonWrapper';
+
+type PagingDefaultComponentInterface = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+export type PagingDefaultComponentProps = PagingDefaultComponentInterface & Pick<CommonProps, 'className'>;
+
+export const PagingDefaultComponent = ({ onClick, className, children, ...rest }: PagingDefaultComponentProps) => {
+  const { dataProps } = extractDataProps(rest);
+
+  return (
+    <span onClick={onClick} className={className} {...dataProps}>
+      {children}
+    </span>
+  );
+};