steroids/dev#804 updated steroids/eslint-config

.eslintrc

@@ -1,6 +1,11 @@
 {
-  "extends": "@steroidsjs/eslint-config",
+  "extends": "@steroidsjs/eslint-config/frontend",
   "rules": {
+    // "prettier/prettier": "off" disabled because 
+    // Definition for rule 'prettier/prettier' was not found
+    // in every file
+    // remove if fixed
+    "prettier/prettier": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/click-events-have-key-events": "off"
   }

package.json

@@ -36,7 +36,7 @@
     },
     "devDependencies": {
         "@steroidsjs/core": "3.0.57",
-        "@steroidsjs/eslint-config": "^2.1.6",
+        "@steroidsjs/eslint-config": "^3.0.1",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
         "@types/jest": "^26.0.22",

src/content/Avatar/AvatarView.tsx

@@ -52,14 +52,12 @@ export default function Avatar(props: IAvatarProps) {
                     ...customSize,
                 }}
             >
-                <>
-                    {(props.src && renderImage()) || (
-                        <span className={bem.element('formattedTitle')}>
-                            {props.formattedTitle}
-                        </span>
+                {(props.src && renderImage()) || (
+                <span className={bem.element('formattedTitle')}>
+                    {props.formattedTitle}
+                </span>
                     )}
-                    {props.children}
-                </>
+                {props.children}
             </span>
         </div>
     );

src/content/Calendar/CalendarView.tsx

@@ -63,6 +63,7 @@ export default function CalendarView(props: ICalendarViewProps) {
             {...props}
             {...props.pickerProps}
             className={bem(bem.block({ranged: isRange}), props.className)}
+            // eslint-disable-next-line react/no-unstable-nested-components
             captionElement={useCallback(({classNames, date, localeUtils, locale}: CaptionElementProps) => (
                 <CaptionElement
                     date={date}

src/content/Card/CardView.tsx

@@ -13,15 +13,19 @@ export default function CardView(props: ICardViewProps) {
 
     return (
         <div
-            className={bem(bem.block(),
-                props.className)}
+            className={bem(
+bem.block(),
+                props.className,
+)}
             style={props.style}
         >
             {props.header && (
-                <div className={bem.element('header',
+                <div className={bem.element(
+'header',
                     {
                         withoutCover: !props.cover && hasContent,
-                    })}
+                    },
+)}
                 >
                     <div className={bem.element('header-data')}>
                         {props.header.avatar && (

src/content/Chat/ChatView.tsx

@@ -1,7 +1,6 @@
 import React, {useCallback, useEffect, useRef} from 'react';
 import useBem from '@steroidsjs/core/hooks/useBem';
 import {IChatViewProps} from '@steroidsjs/core/ui/content/Chat/Chat';
-
 import BubblesDateGroup from './views/BubblesDateGroup';
 
 export default function ChatView(props: IChatViewProps) {

src/content/Chat/views/BubbleMessage/BubbleMessageView.tsx

@@ -9,9 +9,8 @@ import Icon from '@steroidsjs/core/ui/content/Icon';
 import {IChatUser} from '@steroidsjs/core/ui/content/Chat/Chat';
 import {SECONDS_IN_MINUTE_VALUE} from '@steroidsjs/core/ui/content/Chat/constants/timeTemplatesAndUnits';
 import {calculateMessageTimeAgo} from '@steroidsjs/core/ui/content/Chat/utils';
-
-import './BubbleMessageView.scss';
 import ChatFileItemView from '../ChatFileItem';
+import './BubbleMessageView.scss';
 
 interface IBubbleMessageProps {
     user: IChatUser,

src/content/Chat/views/BubblesDateGroup/BubblesDateGroup.tsx

@@ -3,7 +3,6 @@ import useBem from '@steroidsjs/core/hooks/useBem';
 import {calculateMessageTimeAgo, isTodayMessage} from '@steroidsjs/core/ui/content/Chat/utils';
 import {IGroupedMessage} from '@steroidsjs/core/ui/content/Chat/hooks/useChat';
 import {IChatUser} from '@steroidsjs/core/ui/content/Chat/Chat';
-
 import BubbleMessageView from '../BubbleMessage';
 import './BubblesDateGroup.scss';
 

src/content/Chat/views/ChatInput/ChatInputView.tsx

@@ -2,7 +2,6 @@ import React, {forwardRef, useCallback, useRef} from 'react';
 import useBem from '@steroidsjs/core/hooks/useBem';
 import {FileField, Form, InputField} from '@steroidsjs/core/ui/form';
 import {IChatInputViewProps} from '@steroidsjs/core/ui/content/Chat/Chat';
-
 import ButtonView from '../../../../form/Button/ButtonView';
 import ChatFileItemView from '../ChatFileItem';
 import './ChatInputView.scss';

src/content/DropDown/DropDownView.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import _isFunction from 'lodash-es/isFunction';
 import {useBem, useComponents} from '@steroidsjs/core/hooks';
 import {IDropDownViewProps} from '@steroidsjs/core/ui/content/DropDown/DropDown';
-
 import {useEffect, useMemo, useRef} from 'react';
 
 export default function DropDownView(props: IDropDownViewProps) {

src/content/Icon/IconView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {IIconViewProps} from '@steroidsjs/core/ui/content/Icon/Icon';
 import {useBem} from '@steroidsjs/core/hooks';
 import _omit from 'lodash-es/omit';

src/content/Menu/MenuView.tsx

@@ -9,6 +9,7 @@ export default function MenuView(props: IMenuViewProps) {
     const MenuItemView = props.itemView;
 
     const renderMenuItems = React.useCallback(() => (
+        // eslint-disable-next-line react/jsx-no-useless-fragment
         <>
             {props.items?.map((item, index) => (
                 <MenuItemView

src/crud/Crud/CrudView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Controls from '@steroidsjs/core/ui/nav/Controls';
-
 import {ICrudViewProps} from '@steroidsjs/core/ui/crud/Crud/Crud';
 import {useBem} from '@steroidsjs/core/hooks';
 

src/form/AutoCompleteField/AutoCompleteFieldView.tsx

@@ -108,15 +108,13 @@ export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps
     return (
         <div
             ref={props.forwardedRef}
-            className={bem(
-                bem.block({
+            className={bem(bem.block({
                     size: props.size,
                     opened: props.isOpened,
                     hasClearIcon: props.showClear && !props.disabled,
                     filled: !!props.inputProps.value,
                     disabled: props.disabled,
-                }), props.className,
-            )}
+                }), props.className)}
             style={props.style}
         >
             <div className={bem.element('input-wrapper')}>

src/form/Button/ButtonView.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import _isString from 'lodash-es/isString';
-
 import {IButtonViewProps} from '@steroidsjs/core/ui/form/Button/Button';
-
 import Icon from '@steroidsjs/core/ui/content/Icon';
 import {useBem} from '@steroidsjs/core/hooks';
 
@@ -51,10 +49,12 @@ export default function ButtonView(props: IButtonViewProps) {
         return (
             <span
                 className={bem(
-                    bem.element('badge',
+                    bem.element(
+'badge',
                         {
                             [`${props.badge.color}`]: !!props.badge.color,
-                        }),
+                        },
+),
                     props.badge.className,
                 )}
             >

src/form/CheckboxField/CheckboxFieldView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {ICheckboxFieldViewProps} from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
 import {useBem} from '@steroidsjs/core/hooks';
 import useUniqueId from '@steroidsjs/core/hooks/useUniqueId';

src/form/CheckboxListField/CheckboxListFieldView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {ICheckboxListFieldViewProps} from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
 import {useBem} from '@steroidsjs/core/hooks';
 import useUniqueId from '@steroidsjs/core/hooks/useUniqueId';

src/form/DateRangeField/views/RangeButtons/RangeButtons.tsx

@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {useBem, useComponents} from '@steroidsjs/core/hooks';
-
 import {IDateRangeButton, IDateRangeFieldViewProps} from '@steroidsjs/core/ui/form/DateRangeField/DateRangeField';
 import {Button} from '@steroidsjs/core/ui/form';
 import {RANGE_BUTTONS} from './consts';
@@ -31,13 +30,15 @@ export default function RangeButtons(props: IRangeButtonsProps) {
     const {locale} = useComponents();
 
     const {changeFrom, changeTo} = props;
-    const buttons = useMemo(
-        () => (Array.isArray(props.config) ? props.config : DEFAULT_BUTTONS)
-            .map((button) => ({
-                ...button,
-                onClick: button.onClick.bind(null, locale, changeFrom, changeTo, props.format || DEFAULT_VALUE_FORMAT),
-            })), [changeFrom, changeTo, locale, props.config, props.format],
-    );
+    const buttons = useMemo(() => (
+        Array.isArray(props.config)
+            ? props.config
+            : DEFAULT_BUTTONS
+    )
+        .map((button) => ({
+            ...button,
+            onClick: button.onClick.bind(null, locale, changeFrom, changeTo, props.format || DEFAULT_VALUE_FORMAT),
+        })), [changeFrom, changeTo, locale, props.config, props.format]);
 
     return (
         <div className={bem.block({position: props.position})}>

src/form/DateTimeField/DateTimeFieldView.tsx

@@ -4,7 +4,6 @@ import {useCallback} from 'react';
 import Icon from '@steroidsjs/core/ui/content/Icon';
 import Calendar from '@steroidsjs/core/ui/content/Calendar';
 import DropDown from '@steroidsjs/core/ui/content/DropDown';
-
 import {IDateTimeFieldViewProps} from '@steroidsjs/core/ui/form/DateTimeField/DateTimeField';
 import TimePanelView from '../TimeField/TimePanelView';
 

src/form/DateTimeRangeField/DateTimeRangeFieldView.tsx

@@ -5,7 +5,6 @@ import Icon from '@steroidsjs/core/ui/content/Icon';
 import DropDown from '@steroidsjs/core/ui/content/DropDown';
 import Calendar from '@steroidsjs/core/ui/content/Calendar';
 import {IDateTimeRangeFieldViewProps} from '@steroidsjs/core/ui/form/DateTimeRangeField/DateTimeRangeField';
-
 import TimePanelView from '../TimeField/TimePanelView';
 import RangeButtons from '../DateRangeField/views/RangeButtons';
 
@@ -63,12 +62,14 @@ export default function DateTimeRangeFieldView(props: IDateTimeRangeFieldViewPro
             className={bem.element('dropdown')}
         >
             <div
-                className={bem(bem.block({
+                className={bem(
+bem.block({
                     disabled: props.disabled,
                     size: props.size,
                     'is-invalid': !!props.errors,
                 }),
-                props.className)}
+                props.className,
+)}
                 style={props.style}
             >
                 <div className={bem.element('body')}>

src/form/FieldLayout/FieldLayoutView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import _isEmpty from 'lodash-es/isEmpty';
-
 import {IFieldLayoutViewProps} from '@steroidsjs/core/ui/form/FieldLayout/FieldLayout';
 import {useBem} from '@steroidsjs/core/hooks';
 import Icon from '@steroidsjs/core/ui/content/Icon';
@@ -40,10 +39,12 @@ export default function FieldLayoutView(props: IFieldLayoutViewProps) {
                                     className={bem.element('icon_error')}
                                     tabIndex={-1}
                                 />
-                                <span className={bem.element('error-text',
+                                <span className={bem.element(
+'error-text',
                                     {
                                         size: props.size || 'md',
-                                    })}
+                                    },
+)}
                                 >
                                     {error}
 

src/form/FieldList/FieldListItemView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {IFieldListItemViewProps} from '@steroidsjs/core/ui/form/FieldList/FieldList';
 import {useBem} from '@steroidsjs/core/hooks';
 import {Field} from '@steroidsjs/core/ui/form';

src/form/FileField/FileFieldItemView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import {FilesLayout, IFileFieldItemViewProps} from '@steroidsjs/core/ui/form/FileField/FileField';
 import Icon from '@steroidsjs/core/ui/content/Icon';
 

src/form/Form/FormView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import _isString from 'lodash-es/isString';
-
 import {IFormViewProps} from '@steroidsjs/core/ui/form/Form/Form';
 import {useBem} from '@steroidsjs/core/hooks';
 import Field from '@steroidsjs/core/ui/form/Field';

src/form/InputField/InputFieldView.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import {IInputFieldViewProps} from '@steroidsjs/core/ui/form/InputField/InputField';
 import {useBem} from '@steroidsjs/core/hooks';
 import Icon from '@steroidsjs/core/ui/content/Icon';
-
 import renderIcon from '../../utils/renderIcon';
 
 export default function InputFieldView(props: IInputFieldViewProps) {
@@ -41,11 +40,13 @@ export default function InputFieldView(props: IInputFieldViewProps) {
                         {props.addonBefore}
                     </span>
                 )}
-                {props.leadIcon && renderIcon(props.leadIcon,
+                {props.leadIcon && renderIcon(
+props.leadIcon,
                     {
                         className: bem.element('lead-icon'),
                         tabIndex: -1,
-                    })}
+                    },
+)}
                 {props.maskOptions
                     ? (
                         <input

src/form/NumberField/NumberFieldView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import _isNumber from 'lodash-es/isNumber';
-
 import {INumberFieldViewProps} from '@steroidsjs/core/ui/form/NumberField/NumberField';
 import {useBem} from '@steroidsjs/core/hooks';
 import Icon from '@steroidsjs/core/ui/content/Icon';

src/form/PasswordField/PasswordFieldView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {IPasswordFieldViewProps, InputType} from '@steroidsjs/core/ui/form/PasswordField/PasswordField';
 import Icon from '@steroidsjs/core/ui/content/Icon';
 import {useBem} from '@steroidsjs/core/hooks';

src/form/RadioField/RadioFieldView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import useUniqueId from '@steroidsjs/core/hooks/useUniqueId';
 import {IRadioFieldViewProps} from '@steroidsjs/core/ui/form/RadioField/RadioField';
 

src/form/RadioListField/RadioListFieldView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import {IRadioListFieldViewProps} from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
 import useUniqueId from '@steroidsjs/core/hooks/useUniqueId';
 

src/form/ReCaptchaField/ReCaptchaFieldView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {IReCaptchaFieldViewProps} from '@steroidsjs/core/ui/form/ReCaptchaField/ReCaptchaField';
 import {useBem, useTheme} from '@steroidsjs/core/hooks';
 import ReCAPTCHA from 'react-google-recaptcha';

src/form/SliderField/SliderFieldView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import {ISliderFieldViewProps} from '@steroidsjs/core/ui/form/SliderField/SliderField';
 import Slider, {SliderTooltip, Handle as HandleSource, Range} from 'rc-slider';
 

src/form/TextField/TextFieldView.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {ITextFieldViewProps} from '@steroidsjs/core/ui/form/TextField/TextField';
 import {useBem} from '@steroidsjs/core/hooks';
 import Icon from '@steroidsjs/core/ui/content/Icon';

src/form/TimeField/TimeFieldView.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {useCallback} from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import {ITimeFieldViewProps} from '@steroidsjs/core/ui/form/TimeField/TimeField';
 import Icon from '@steroidsjs/core/ui/content/Icon';
 import DropDown from '@steroidsjs/core/ui/content/DropDown';

src/form/TimeField/views/TimePanelColumn/TimePanelColumn.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {useBem} from '@steroidsjs/core/hooks';
-
 import {ITimePanelColumn} from '../../TimePanelView';
 import './TimePanelColumn.scss';
 

src/hooks/useHideScroll.tsx

@@ -17,9 +17,10 @@ export default function useHideScroll() {
         if (process.env.IS_SSR) {
             return;
         }
-
-        const fullWindowWidth = window.innerWidth; // полная ширина окна;
-        const windowWidthWithoutScrollbar = document.documentElement.clientWidth; // ширина окна за вычетом скролла
+        // полная ширина окна;
+        const fullWindowWidth = window.innerWidth;
+        // ширина окна за вычетом скролла
+        const windowWidthWithoutScrollbar = document.documentElement.clientWidth;
 
         defaultPadding.current = document.body.style.paddingRight;