feat: add unused imports plugin, remove unused imports

.eslintrc.js

@@ -22,10 +22,12 @@ module.exports = {
         'i18next',
         'react-hooks',
         'paths-fixes',
+        'unused-imports',
     ],
     rules: {
         'react/jsx-indent': [2, 4],
         'react/jsx-indent-props': [2, 4],
+        'unused-imports/no-unused-imports': 'error',
         indent: [2, 4],
         'react/jsx-filename-extension': [
             2,

config/build/buildWebpackConfig.ts

@@ -1,5 +1,4 @@
 import webpack from 'webpack';
-import path from 'path';
 import { BuildOptions } from './types/config';
 import { buildPlugins } from './buildPlugins';
 import { buildLoaders } from './buildLoaders';

package.json

@@ -103,7 +103,8 @@
     "ts-morph": "^16.0.0",
     "@vitejs/plugin-react": "^2.1.0",
     "vite": "^3.1.0",
-    "vite-plugin-svgr": "^2.2.1"
+    "vite-plugin-svgr": "^2.2.1",
+    "eslint-plugin-unused-imports": "^2.0.0"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -1,7 +1,5 @@
-import React, {
-    FC, ReactNode, useMemo, useState,
-} from 'react';
-import { ThemeContext } from '../../../../shared/lib/context/ThemeContext';
+import React, { ReactNode, useMemo, useState } from 'react';
+import { ThemeContext } from '@/shared/lib/context/ThemeContext';
 import { Theme } from '@/shared/const/theme';
 import { LOCAL_STORAGE_THEME_KEY } from '@/shared/const/localstorage';
 

src/entities/Article/ui/ArticleSortSelector/ArticleSortSelector.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Select, SelectOption } from '@/shared/ui/Select';
 import { SortOrder } from '@/shared/types';

src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { classNames } from '@/shared/lib/classNames/classNames';
@@ -8,14 +8,13 @@ import { Input } from '@/shared/ui/Input';
 import { Card } from '@/shared/ui/Card';
 import { SortOrder } from '@/shared/types';
 import { useDebounce } from '@/shared/lib/hook/useDebounce/useDebounce';
-import { TabItem } from '@/shared/ui/Tabs';
 import { ArticleTypeTabs } from '@/features/ArticleTypeTabs';
 import { fetchArticlesList } from '../../model/services/fetchArticlesList/fetchArticlesList';
 import {
     ArticleSortField,
     ArticleSortSelector, ArticleType,
     ArticleView,
-} from '../../../../entities/Article';
+} from '@/entities/Article';
 import { articlesPageActions } from '../../model/slices/articlesPageSlice';
 import {
     getArticlesPageOrder,

src/shared/lib/hook/useInfiniteScroll/useInfiniteScroll.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
+import { MutableRefObject, useEffect } from 'react';
 
 export interface UseInfiniteScrollOption {
 	callback?: () => void;

src/shared/ui/Button/Button.tsx

@@ -1,5 +1,5 @@
 import {
-    ButtonHTMLAttributes, FC, memo, ReactNode,
+    ButtonHTMLAttributes, memo, ReactNode,
 } from 'react';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import cls from './Button.module.scss';

src/shared/ui/Popups/ui/ListBox/ListBox.stories.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { action, actions, ActionDisplay } from '@storybook/addon-actions';
-import { Country } from '../../../../../entities/Country';
+import { action } from '@storybook/addon-actions';
+// eslint-disable-next-line paths-fixes/layer-imports
+import { Country } from '@/entities/Country';
 import { ListBox } from './ListBox';
 
 export default {

src/shared/ui/Select/Select.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, memo, useMemo } from 'react';
+import { ChangeEvent, useMemo } from 'react';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import cls from './Select.module.scss';
 

src/shared/ui/Skeleton/Skeleton.tsx

@@ -1,13 +1,12 @@
-import { useTranslation } from 'react-i18next';
 import { CSSProperties, memo } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './Skeleton.module.scss';
 
 interface SkeletonProps {
-	className?: string;
-	height?: string | number;
-	width?: string | number;
-	border?: string;
+  className?: string;
+  height?: string | number;
+  width?: string | number;
+  border?: string;
 }
 
 export const Skeleton = memo((props: SkeletonProps) => {
@@ -25,7 +24,6 @@ export const Skeleton = memo((props: SkeletonProps) => {
 
     };
 
-    const { t } = useTranslation();
     return (
         <div
             style={styles}