refactored react imports

src/components/common/Anchor/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import NextLink from 'next/link';
 import { Link } from 'react-router-dom';

src/components/common/ArcProgress/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { describeArc } from '~/utils/dom';
 
@@ -11,6 +11,14 @@ interface IProps {
 
 export const ArcProgress: FC<IProps> = ({ size, progress = 0 }) => (
   <svg className={styles.icon} width={size} height={size}>
-    <path d={describeArc(size / 2, size / 2, size / 2 - 2, 360 * (1 - progress), 360)} />
+    <path
+      d={describeArc(
+        size / 2,
+        size / 2,
+        size / 2 - 2,
+        360 * (1 - progress),
+        360,
+      )}
+    />
   </svg>
 );

src/components/common/Authorized/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 

src/components/common/Avatar/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/BetterScrollDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
+import { FC, MouseEventHandler, ReactChild, useEffect, useRef } from 'react';
 
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 
@@ -8,7 +8,7 @@ import { LoaderCircle } from '~/components/common/LoaderCircle';
 import styles from './styles.module.scss';
 
 interface IProps {
-  children: React.ReactChild;
+  children: ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
   backdrop?: JSX.Element;

src/components/common/BlurWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { AllHTMLAttributes, FC } from 'react';
+import { AllHTMLAttributes, FC } from 'react';
 
 import classNames from 'classnames';
 
@@ -7,5 +7,7 @@ import styles from './styles.module.scss';
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
 export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
-  <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>{children}</div>
+  <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>
+    {children}
+  </div>
 );

src/components/common/Card/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/CellGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Columns/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 
 import Masonry from 'react-masonry-css';
 

src/components/common/CoverBackdrop/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/DialogTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -6,6 +6,8 @@ interface IProps {
   children: ReactNode;
 }
 
-const DialogTitle: FC<IProps> = ({ children }) => <h2 className={styles.title}>{children}</h2>;
+const DialogTitle: FC<IProps> = ({ children }) => (
+  <h2 className={styles.title}>{children}</h2>
+);
 
 export { DialogTitle };

src/components/common/DropHereIcon/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { SVGProps } from '~/utils/types';
 

src/components/common/Filler/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement>;
+type IProps = HTMLAttributes<HTMLDivElement>;
 
 export const Filler: FC<IProps> = ({ className = '', ...props }) => (
   <div className={classNames(styles.filler, className)} {...props} />

src/components/common/Grid/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   vertical?: boolean;
   columns?: string;
@@ -41,7 +41,9 @@ const Grid: FC<IProps> = ({
       gridTemplateColumns: square
         ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})`
         : columns,
-      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+      gridTemplateRows: square
+        ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})`
+        : rows,
       gridAutoRows: rows,
       gridAutoColumns: columns,
       gridRowGap: gap,

src/components/common/Group/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   top?: boolean;
   bottom?: boolean;
@@ -33,7 +33,7 @@ const Group: FC<IProps> = ({
         [styles.wrap]: wrap,
         [styles.seamless]: seamless,
       },
-      className
+      className,
     )}
     {...props}
   >

src/components/common/Hoverable/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Icon/index.tsx

@@ -1,15 +1,13 @@
-import React, { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 
 import { IIcon } from '~/types';
 
-type IProps = React.SVGAttributes<SVGElement> & {
+type IProps = SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({
-  size = 20, icon, style, ...props
-}) => (
+export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
   <svg
     width={size}
     height={size}

src/components/common/ImageLoadingWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   CSSProperties,
   ReactNode,
   forwardRef,

src/components/common/ImageWithSSRLoad/index.tsx

@@ -1,7 +1,16 @@
-import React, { useEffect, useRef, VFC } from 'react';
+import {
+  DetailedHTMLProps,
+  ImgHTMLAttributes,
+  useEffect,
+  useRef,
+  VFC,
+} from 'react';
 
 interface ImgProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends DetailedHTMLProps<
+    ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {
   onLoad?: () => void;
 }
 

src/components/common/InfiniteScroll/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -8,7 +8,13 @@ interface IProps extends HTMLAttributes<HTMLDivElement> {
   loadMore: () => void;
 }
 
-const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore, ...props }) => {
+const InfiniteScroll: FC<IProps> = ({
+  children,
+  hasMore,
+  scrollReactPx,
+  loadMore,
+  ...props
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const onScrollEnd = useCallback(
@@ -16,7 +22,7 @@ const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore
       if (!hasMore || !entries[0].isIntersecting) return;
       loadMore();
     },
-    [hasMore, loadMore]
+    [hasMore, loadMore],
   );
 
   useEffect(() => {

src/components/common/InlineUsername/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { useColorFromString } from '~/hooks/color/useColorFromString';
 

src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, SVGAttributes } from 'react';
+import { FC, SVGAttributes } from 'react';
 
 import classNames from 'classnames';
 
@@ -12,7 +12,12 @@ interface IProps extends SVGAttributes<SVGElement> {
 }
 
 const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
-  <svg className={classNames(styles.icon, className)} width={size} height={size} {...props}>
+  <svg
+    className={classNames(styles.icon, className)}
+    width={size}
+    height={size}
+    {...props}
+  >
     <path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
     <path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
   </svg>

src/components/common/LoaderCircle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/LoaderScreen/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/LoadingProgress/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, VFC } from 'react';
+import { Fragment, VFC } from 'react';
 
 import { useSSRLoadingIndicator } from '~/hooks/dom/useSSRLoadingIndicator';
 

src/components/common/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, VFC, HTMLAttributes } from 'react';
+import { DetailedHTMLProps, VFC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/ModalWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler } from 'react';
 
 import ReactDOM from 'react-dom';
 
@@ -14,7 +14,7 @@ const ModalWrapper: FC<IProps> = ({ children, onOverlayClick }) => {
       <div className={styles.overlay} onClick={onOverlayClick} />
       <div className={styles.content}>{children}</div>
     </div>,
-    document.body
+    document.body,
   );
 };
 

src/components/common/Padder/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;
   horizontal?: boolean;

src/components/common/PageTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import Head from 'next/head';
 

src/components/common/Panel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,8 +9,17 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   stretchy?: boolean;
 };
 
-const Panel: FC<IProps> = ({ className, children, seamless, stretchy, ...props }) => (
-  <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
+const Panel: FC<IProps> = ({
+  className,
+  children,
+  seamless,
+  stretchy,
+  ...props
+}) => (
+  <div
+    className={classNames(styles.panel, className, { seamless, stretchy })}
+    {...props}
+  >
     {children}
   </div>
 );

src/components/common/Pressable/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/ScrollHelperBottom/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Square/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/StatsRow/index.tsx

@@ -1,15 +1,24 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Placeholder } from '~/components/placeholders/Placeholder';
 
 import styles from './styles.module.scss';
 
-const StatsRow: FC<{ isLoading: boolean; label: string }> = ({ isLoading, label, children }) => (
+const StatsRow: FC<{ isLoading: boolean; label: string }> = ({
+  isLoading,
+  label,
+  children,
+}) => (
   <li className={styles.row}>
     {isLoading ? (
       <>
         <Placeholder active={isLoading} loading className={styles.label} />
-        <Placeholder active={isLoading} loading className={styles.value} width="24px" />
+        <Placeholder
+          active={isLoading}
+          loading
+          className={styles.value}
+          width="24px"
+        />
       </>
     ) : (
       <>

src/components/common/Sticky/index.tsx

@@ -1,4 +1,4 @@
-import React, { DetailsHTMLAttributes, FC } from 'react';
+import { DetailsHTMLAttributes, FC } from 'react';
 
 import StickyBox from 'react-sticky-box';
 

src/components/common/SubTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Superpower/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 

src/components/common/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
+import { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
 
 import classNames from 'classnames';
 
@@ -20,7 +20,9 @@ const HorizontalList: VFC<TabProps> = ({ items }) => {
     <div className={styles.tabs}>
       {items.map((it, index) => (
         <div
-          className={classNames(styles.tab, { [styles.active]: activeTab === index })}
+          className={classNames(styles.tab, {
+            [styles.active]: activeTab === index,
+          })}
           onClick={() => setActiveTab(index)}
           key={it}
         >
@@ -38,20 +40,27 @@ const Content: FC<any> = ({ children }) => {
       return [children];
     }
 
-    return children.filter(it => it);
+    return children.filter((it) => it);
   }, [children]);
 
-  if (Array.isArray(notEmptyChildren) && notEmptyChildren.length - 1 < activeTab) {
+  if (
+    Array.isArray(notEmptyChildren) &&
+    notEmptyChildren.length - 1 < activeTab
+  ) {
     return notEmptyChildren[notEmptyChildren.length - 1];
   }
 
   return notEmptyChildren[activeTab];
 };
 
-const Tabs = function({ children }) {
+const Tabs = function ({ children }) {
   const [activeTab, setActiveTab] = useState(0);
 
-  return <TabContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabContext.Provider>;
+  return (
+    <TabContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabContext.Provider>
+  );
 };
 
 Tabs.Horizontal = HorizontalList;

src/components/common/TagField/index.tsx

@@ -1,9 +1,11 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 
-const TagField: FC<IProps> = ({ children }) => <div className={styles.wrap}>{children}</div>;
+const TagField: FC<IProps> = ({ children }) => (
+  <div className={styles.wrap}>{children}</div>
+);
 
 export { TagField };

src/components/common/Zone/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/flow/CellShade/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { transparentize } from 'color2k';

src/components/flow/FlowCell/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import classNames from 'classnames';
 

src/components/flow/FlowCellImage/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 import Image from 'next/image';

src/components/flow/FlowCellImageLazyLoad/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 import LazyLoad from 'react-lazyload';

src/components/flow/FlowCellMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/flow/FlowCellText/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 
 import classNames from 'classnames';
 

src/components/flow/FlowGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment } from 'react';
+import { FC, Fragment } from 'react';
 
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';

src/components/flow/FlowRecent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { IFlowNode } from '~/types';
 
@@ -15,11 +15,15 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => {
   return (
     <>
       <div className={styles.updates}>
-        {updated && updated.map(node => <FlowRecentItem node={node} key={node.id} has_new />)}
+        {updated &&
+          updated.map((node) => (
+            <FlowRecentItem node={node} key={node.id} has_new />
+          ))}
       </div>
 
       <div className={styles.recent}>
-        {recent && recent.map(node => <FlowRecentItem node={node} key={node.id} />)}
+        {recent &&
+          recent.map((node) => <FlowRecentItem node={node} key={node.id} />)}
       </div>
     </>
   );

src/components/flow/FlowSearchResults/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 import { InfiniteScroll } from '~/components/common/InfiniteScroll';

src/components/flow/FlowSwiperHero/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import Image from 'next/future/image';

src/components/input/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ButtonHTMLAttributes,
   DetailedHTMLProps,
   FC,

src/components/input/ButtonGroup/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

src/components/input/InputRow/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

src/components/input/InputText/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ChangeEvent,
   DetailedHTMLProps,
   FC,

src/components/input/InputWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 
@@ -11,7 +11,13 @@ interface InputWrapperProps {
   notEmpty: boolean;
 }
 
-const InputWrapper: FC<InputWrapperProps> = ({ children, notEmpty, title, focused, error }) => (
+const InputWrapper: FC<InputWrapperProps> = ({
+  children,
+  notEmpty,
+  title,
+  focused,
+  error,
+}) => (
   <div
     className={classNames(styles.content, {
       [styles.has_error]: !!error,

src/components/input/LoadMoreButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Button } from '~/components/input/Button';
 
@@ -10,9 +10,15 @@ interface LoadMoreButtonProps {
 }
 
 const LoadMoreButton: FC<LoadMoreButtonProps> = ({ isLoading, onClick }) => (
-  <Button color="flat" onClick={onClick} stretchy className={styles.more} loading={isLoading}>
+  <Button
+    color="flat"
+    onClick={onClick}
+    stretchy
+    className={styles.more}
+    loading={isLoading}
+  >
     Показать ещё комментарии
   </Button>
 );
 
-export { LoadMoreButton }
+export { LoadMoreButton };

src/components/input/SearchInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 import { InputText, InputTextProps } from '~/components/input/InputText';

src/components/input/Textarea/index.tsx

@@ -1,11 +1,11 @@
-import React, {
+import {
   ChangeEvent,
   DetailedHTMLProps,
   forwardRef,
   TextareaHTMLAttributes,
   useCallback,
   useEffect,
-  useState
+  useState,
 } from 'react';
 
 import autosize from 'autosize';
@@ -42,14 +42,14 @@ const Textarea = forwardRef<HTMLTextAreaElement, IProps>(
       value,
       ...props
     },
-    forwardRef
+    forwardRef,
   ) => {
     const ref = useForwardRef(forwardRef);
     const [focused, setFocused] = useState(false);
 
     const onInput = useCallback(
       ({ target }: ChangeEvent<HTMLTextAreaElement>) => handler(target.value),
-      [handler]
+      [handler],
     );
 
     const onFocus = useCallback(() => setFocused(true), [setFocused]);
@@ -68,7 +68,12 @@ const Textarea = forwardRef<HTMLTextAreaElement, IProps>(
     }, [ref, value, forwardRef]);
 
     return (
-      <InputWrapper title={title} error={error} focused={focused} notEmpty={!!value}>
+      <InputWrapper
+        title={title}
+        error={error}
+        focused={focused}
+        notEmpty={!!value}
+      >
         <textarea
           {...props}
           ref={ref}
@@ -85,7 +90,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, IProps>(
         />
       </InputWrapper>
     );
-  }
+  },
 );
 
 export { Textarea };

src/components/input/Toggle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import { FC, useCallback } from 'react';
 
 import classNames from 'classnames';
 
@@ -31,7 +31,7 @@ const Toggle: FC<IProps> = ({ value, handler, color = 'primary', ...rest }) => {
         styles.toggle,
         { [styles.active]: value },
         styles[color],
-        rest.className
+        rest.className,
       )}
       onClick={onClick}
     />

src/components/lab/LabAudioBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
 import { Placeholder } from '~/components/placeholders/Placeholder';

src/components/lab/LabBanner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Group } from '~/components/common/Group';
 import { LabSquare } from '~/components/lab/LabSquare';

src/components/lab/LabBottomPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import { FC, useCallback } from 'react';
 
 import classNames from 'classnames';
 

src/components/lab/LabDescription/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Markdown } from '~/components/common/Markdown';
 import { Paragraph } from '~/components/placeholders/Paragraph';

src/components/lab/LabFactoryBanner/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import classNames from 'classnames';
 

src/components/lab/LabHead/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Filler } from '~/components/common/Filler';
 import { SearchInput } from '~/components/input/SearchInput';

src/components/lab/LabHero/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import { FC, useCallback } from 'react';
 
 import { Group } from '~/components/common/Group';
 import { Icon } from '~/components/common/Icon';

src/components/lab/LabHeroes/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Group } from '~/components/common/Group';
 import { LabHero } from '~/components/lab/LabHero';

src/components/lab/LabImage/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import Image from 'next/future/image';
 

src/components/lab/LabLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { NodeComponentProps } from '~/constants/node';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';

src/components/lab/LabNoResults/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import { Card } from '~/components/common/Card';
 import { Button } from '~/components/input/Button';

src/components/lab/LabNode/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { isAfter, parseISO } from 'date-fns';
@@ -10,7 +10,6 @@ import { INode } from '~/types';
 
 import styles from './styles.module.scss';
 
-
 interface IProps {
   node: INode;
   lastSeen: string | null | undefined;
@@ -23,8 +22,10 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
 
   const hasNewComments = useMemo(
     () =>
-      !!node.commented_at && !!lastSeen && isAfter(parseISO(node.commented_at), parseISO(lastSeen)),
-    [node.commented_at, lastSeen]
+      !!node.commented_at &&
+      !!lastSeen &&
+      isAfter(parseISO(node.commented_at), parseISO(lastSeen)),
+    [node.commented_at, lastSeen],
   );
 
   const background = useColorGradientFromString(node.title, 3, 2);

src/components/lab/LabNodeTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import Tippy from '@tippyjs/react';
 

src/components/lab/LabPad/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { NodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';

src/components/lab/LabSquare/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/lab/LabTags/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { Tag } from '~/components/tags/Tag';
@@ -27,7 +27,7 @@ const LabTags: FC<IProps> = ({ tags, isLoading }) => {
 
   return (
     <div className={styles.tags}>
-      {tags.slice(0, 10).map(tag => (
+      {tags.slice(0, 10).map((tag) => (
         <Tag tag={tag} key={tag.ID} />
       ))}
     </div>

src/components/lab/LabText/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { Markdown } from '~/components/common/Markdown';
 import { Paragraph } from '~/components/placeholders/Paragraph';

src/components/lab/LabVideo/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
 import { Placeholder } from '~/components/placeholders/Placeholder';

src/components/main/Footer/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import { FC, memo } from 'react';
 
 import styles from './styles.module.scss';
 

src/components/main/GodRays/index.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { Component } from 'react';
 
 interface IGodRaysProps {
   raised?: boolean;
 }
 
-export class GodRays extends React.Component<IGodRaysProps> {
+export class GodRays extends Component<IGodRaysProps> {
   state = {
     width: 0,
     height: 0,
@@ -42,49 +42,51 @@ export class GodRays extends React.Component<IGodRaysProps> {
     ctx.clearRect(0, 0, width, height + 100); // clear canvas
     ctx.save();
 
-    rays.forEach(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
-      const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
-      gradient.addColorStop(0.2, `rgba(160, 255, 60, ${opacity * 0.1})`);
-      gradient.addColorStop(1, 'rgba(160, 255, 60, 0)');
+    rays.forEach(
+      ({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
+        const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+        gradient.addColorStop(0.2, `rgba(160, 255, 60, ${opacity * 0.1})`);
+        gradient.addColorStop(1, 'rgba(160, 255, 60, 0)');
 
-      const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
-      gradient2.addColorStop(0.2, `rgba(60, 255, 200, ${opacity * 0.2})`);
-      gradient2.addColorStop(1, 'rgba(60, 255, 200, 0)');
+        const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+        gradient2.addColorStop(0.2, `rgba(60, 255, 200, ${opacity * 0.2})`);
+        gradient2.addColorStop(1, 'rgba(60, 255, 200, 0)');
 
-      ctx.save();
-      ctx.translate(width / 2, -900);
-      ctx.rotate(angle);
-      ctx.translate(-width / 2, 900);
+        ctx.save();
+        ctx.translate(width / 2, -900);
+        ctx.rotate(angle);
+        ctx.translate(-width / 2, 900);
 
-      ctx.beginPath();
-      ctx.fillStyle = gradient;
-      ctx.moveTo(width / 2 - weight / 2, -900);
-      ctx.lineTo(width / 2 + weight / 2, -900);
-      ctx.lineTo(width / 2 + (weight / 2 + 300), height * 1.4);
-      ctx.lineTo(width / 2 - (weight / 2 + 300), height * 1.4);
-      ctx.fill();
-      ctx.closePath();
+        ctx.beginPath();
+        ctx.fillStyle = gradient;
+        ctx.moveTo(width / 2 - weight / 2, -900);
+        ctx.lineTo(width / 2 + weight / 2, -900);
+        ctx.lineTo(width / 2 + (weight / 2 + 300), height * 1.4);
+        ctx.lineTo(width / 2 - (weight / 2 + 300), height * 1.4);
+        ctx.fill();
+        ctx.closePath();
 
-      ctx.beginPath();
-      ctx.fillStyle = gradient2;
-      ctx.moveTo(width / 2 - weight / 6, -900);
-      ctx.lineTo(width / 2 + weight / 6, -900);
-      ctx.lineTo(width / 2 + (weight / 6 + 50), height * 1.4);
-      ctx.lineTo(width / 2 - (weight / 6 + 250), height * 1.4);
-      ctx.fill();
-      ctx.closePath();
+        ctx.beginPath();
+        ctx.fillStyle = gradient2;
+        ctx.moveTo(width / 2 - weight / 6, -900);
+        ctx.lineTo(width / 2 + weight / 6, -900);
+        ctx.lineTo(width / 2 + (weight / 6 + 50), height * 1.4);
+        ctx.lineTo(width / 2 - (weight / 6 + 250), height * 1.4);
+        ctx.fill();
+        ctx.closePath();
 
-      rays[index].angle += iterator * speed;
-      rays[index].opacity += pulsar * 0.01;
+        rays[index].angle += iterator * speed;
+        rays[index].opacity += pulsar * 0.01;
 
-      if (rays[index].angle > 0.8) rays[index].iterator = -1;
-      if (rays[index].angle < -0.8) rays[index].iterator = 1;
+        if (rays[index].angle > 0.8) rays[index].iterator = -1;
+        if (rays[index].angle < -0.8) rays[index].iterator = 1;
 
-      if (rays[index].opacity >= 1) rays[index].pulsar = -1;
-      if (rays[index].opacity <= 0) rays[index].pulsar = 1;
+        if (rays[index].opacity >= 1) rays[index].pulsar = -1;
+        if (rays[index].opacity <= 0) rays[index].pulsar = 1;
 
-      ctx.restore();
-    });
+        ctx.restore();
+      },
+    );
 
     setTimeout(() => window.requestAnimationFrame(this.draw), 1000 / 15);
   };
@@ -119,7 +121,7 @@ export class GodRays extends React.Component<IGodRaysProps> {
             position: 'relative',
             top: -100,
           }}
-          ref={el => {
+          ref={(el) => {
             this.canvas = el;
           }}
         />

src/components/main/Logo/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Anchor } from '~/components/common/Anchor';
 import { URLS } from '~/constants/urls';
 

src/components/main/MainPreloader/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 interface MainPreloaderProps {}
 

src/components/media/AudioPlayer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 

src/components/media/ImagePreloader/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  FC,
-  MouseEventHandler,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 

src/components/menu/CornerMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, VFC } from 'react';
+import { useCallback, useState, VFC } from 'react';
 
 import { MenuDots } from '~/components/menu/MenuDots';
 

src/components/menu/HorizontalMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
 

src/components/menu/MenuButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useState } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
 
 import { Placement } from '@popperjs/core';
 import classNames from 'classnames';

src/components/menu/MenuDots/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/menu/MenuItemWithIcon/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 

src/components/menu/SeparatedMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useMemo } from 'react';
+import { FC, ReactNode, useMemo } from 'react';
 
 import classNames from 'classnames';
 

src/components/node/Backlink/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 import { WithDescription } from '~/components/common/WithDescription';

src/components/node/CommendDeleted/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import { FC, useCallback } from 'react';
 
 import { Button } from '~/components/input/Button';
 import { IComment } from '~/types';

src/components/node/NodeAudioBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { NodeComponentProps } from '~/constants/node';

src/components/node/NodeAudioImageBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';

src/components/node/NodeAuthorBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
 import { Card } from '~/components/common/Card';

src/components/node/NodeDeletedBadge/index.tsx

@@ -1,11 +1,15 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import styles from './styles.module.scss';
 
 interface IProps {}
 
 const NodeDeletedBadge: FC<IProps> = () => {
-  return <div className={styles.badge}>Эта ячейка заблокирована. Её не никто не увидит.</div>;
+  return (
+    <div className={styles.badge}>
+      Эта ячейка заблокирована. Её не никто не увидит.
+    </div>
+  );
 };
 
 export { NodeDeletedBadge };

src/components/node/NodeEditMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import Tippy from '@tippyjs/react';
 

src/components/node/NodeHeadMetadata/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import Head from 'next/head';
 
@@ -20,7 +20,10 @@ const NodeHeadMetadata: VFC<NodeHeadMetadataProps> = () => {
         <meta property="og:title" content={node.title} />
         <meta property="og:type" content={node.type} />
         <meta property="og:image" content={getURLFromString(node.thumbnail)} />
-        <meta property="og:image:secure_url" content={getURLFromString(node.thumbnail)} />
+        <meta
+          property="og:image:secure_url"
+          content={getURLFromString(node.thumbnail)}
+        />
         <meta property="og:image:type" content="image/jpeg" />
         <meta property="og:image:alt" content={node.description} />
         <meta property="og:description" content={node.description} />

src/components/node/NodeImageBlockPlaceholder/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { LoaderCircle } from '~/components/common/LoaderCircle';
 

src/components/node/NodeLikeButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/node/NodeNoComments/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import classNames from 'classnames';