feat: add layer-imports eslint rule, fix imports

.eslintrc.js

@@ -53,6 +53,13 @@ module.exports = {
         'react/no-array-index-key': 'off',
         'react/jsx-no-useless-fragment': 'off',
         'paths-fixes/path-checker': ['error', { alias: '@' }],
+        'paths-fixes/layer-imports': [
+            'error',
+            {
+                alias: '@',
+                ignoreImportPatterns: ['**/StoreProvider', '**/testing'],
+            },
+        ],
         'paths-fixes/public-api-imports': [
             'error',
             {

config/storybook/preview.js

@@ -1,9 +1,9 @@
 import { addDecorator } from '@storybook/react';
 import { StyleDecorator } from '../../src/shared/config/storybook/StyleDecorator/StyleDecorator';
 import { ThemeDecorator } from '../../src/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '../../src/app/providers/ThemeProvider';
 import { RouterDecorator } from '../../src/shared/config/storybook/RouterDecorator/RouterDecorator';
 import { SuspenseDecorator } from '../../src/shared/config/storybook/SuspenseDecorator/SuspenseDecorator';
+import { Theme } from '../../src/shared/const/theme';
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },

extractedTranslations/ru/translation.json

@@ -16,7 +16,9 @@
   "Error with getting article data": "Error with getting article data",
   "Exit": "Exit",
   "IT": "IT",
+  "Leave your feedback on the article, it will help improve the quality": "Leave your feedback on the article, it will help improve the quality",
   "Profile": "Profile",
+  "Rate the article": "Rate the article",
   "Read more": {
     "": {
       "": {
@@ -30,6 +32,7 @@
   "Search": "Search",
   "Send": "Send",
   "Sort by": "Sort by",
+  "Thanks for review!": "Thanks for review!",
   "Try to reload page": "Try to reload page",
   "You don`t have access to this page!": "You don`t have access to this page!",
   "ascending": "ascending",
@@ -48,7 +51,11 @@
   "no comments": "no comments",
   "throw error": "throw error",
   "views": "views",
+  "Ваш отзыв": "Ваш отзыв",
   "Главная страница": "Главная страница",
+  "Закрыть": "Закрыть",
   "Обновить страницу": "Обновить страницу",
-  "Произошла непредвиденная ошибка": "Произошла непредвиденная ошибка"
+  "Отправить": "Отправить",
+  "Произошла непредвиденная ошибка": "Произошла непредвиденная ошибка",
+  "Статьи не найдены": "Статьи не найдены"
 }

package.json

@@ -70,7 +70,7 @@
     "eslint-plugin-i18next": "^5.1.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-paths-fixes": "^0.0.3",
+    "eslint-plugin-paths-fixes": "^0.0.6",
     "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "file-loader": "^6.2.0",

src/app/App.tsx

@@ -2,11 +2,11 @@ import React, { Suspense, useEffect } from 'react';
 import './styles/index.scss';
 import { useDispatch, useSelector } from 'react-redux';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { AppRouter } from '@/app/providers/router';
+import { AppRouter } from './providers/router';
 import { Navbar } from '@/widgets/Navbar';
 import { Sidebar } from '@/widgets/Sidebar';
 import { getUserInited, userActions } from '@/entities/User';
-import { useTheme } from '@/app/providers/ThemeProvider';
+import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 
 function App() {
     const { theme } = useTheme();

src/app/providers/StoreProvider/index.ts

@@ -1,11 +1,13 @@
-import { StoreProvider } from '@/app/providers/StoreProvider/ui/StoreProvider';
+import { StoreProvider } from './ui/StoreProvider';
 import {
     AppDispatch,
     createReduxStore,
-} from '@/app/providers/StoreProvider/config/store';
-import type { StateSchema, ThunkExtraArg, ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema';
+} from './config/store';
+import type {
+    StateSchema, ThunkExtraArg, ThunkConfig, ReduxStoreWithManager, StateSchemaKey,
+} from './config/StateSchema';
 
 export {
-    StoreProvider, createReduxStore, StateSchema, ThunkExtraArg, ThunkConfig,
+    StoreProvider, createReduxStore, StateSchema, ThunkExtraArg, ThunkConfig, ReduxStoreWithManager, StateSchemaKey,
 };
 export type { AppDispatch };

src/app/providers/StoreProvider/ui/StoreProvider.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import { ReducersMapObject } from '@reduxjs/toolkit';
-import { createReduxStore } from '@/app/providers/StoreProvider/config/store';
-import { StateSchema } from '@/app/providers/StoreProvider/config/StateSchema';
+import { StateSchema } from '../../StoreProvider/config/StateSchema';
+import { createReduxStore } from '../../StoreProvider/config/store';
 
 interface StoreProviderProps {
   children?: ReactNode | any;

src/app/providers/ThemeProvider/index.ts

@@ -1,9 +1,5 @@
 import ThemeProvider from './ui/ThemeProvider';
-import { useTheme } from './lib/useTheme';
-import { Theme } from './lib/ThemeContext';
 
 export {
     ThemeProvider,
-    useTheme,
-    Theme,
 };

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

@@ -1,7 +1,9 @@
 import React, {
     FC, ReactNode, useMemo, useState,
 } from 'react';
-import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from '../lib/ThemeContext';
+import { ThemeContext } from '../../../../shared/lib/context/ThemeContext';
+import { Theme } from '@/shared/const/theme';
+import { LOCAL_STORAGE_THEME_KEY } from '@/shared/const/localstorage';
 
 const defaultTheme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme || Theme.LIGHT;
 

src/app/providers/router/ui/AppRouter.tsx

@@ -1,9 +1,9 @@
 import React, { memo, Suspense, useCallback } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { RequireAuth } from '@/app/providers/router/ui/RequireAuth';
-import { PageLoader } from '@/widgets/PageLoader';
-import { routeConfig } from '@/app/providers/router/config/routeConfig';
+import { RequireAuth } from './RequireAuth';
+import { routeConfig } from '../config/routeConfig';
 import { AppRoutesProps } from '@/shared/types/router';
+import { PageLoader } from '@/features/PageLoader';
 
 const AppRouter = () => {
     const renderWithWrapper = useCallback((route: AppRoutesProps) => {

src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Modal } from '@/shared/ui/Modal/Modal';
 import { LoginFormAsync } from '../LoginForm/LoginForm.async';
-import { PageLoader } from '@/widgets/PageLoader';
+import { PageLoader } from '../../../PageLoader';
 
 interface LoginModalProps {
   className?: string;

src/widgets/ThemeSwitcher/ui/ThemeSwitcher.tsx → src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Theme, useTheme } from '@/app/providers/ThemeProvider';
 import { Button, ButtonTheme } from '@/shared/ui/Button/Button';
 import LightIcon from '../../../shared/assets/icons/theme-light.svg';
 import DarkIcon from '../../../shared/assets/icons/theme-dark.svg';
+import { Theme } from '@/shared/const/theme';
+import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 
 interface ThemeSwitcherProps {
     className?: string;

src/index.tsx

@@ -27,3 +27,4 @@ root.render(
         </StoreProvider>
     </BrowserRouter>,
 );
+export { Theme } from '@/shared/const/theme';

src/pages/AboutPage/ui/AboutPage.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { AboutPage } from '../index';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'pages/AboutPage',

src/pages/MainPage/ui/MainPage.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
 import { MainPage } from '../../MainPage';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'pages/MainPage',

src/pages/NotFoundPage/ui/NotFoundPage.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { NotFoundPage } from './NotFoundPage';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'pages/NotFoundPage',

src/pages/ProfilePage/ui/ProfilePage.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
 import ProfilePage from './ProfilePage';
 import { Country } from '../../../entities/Country';
 import { Currency } from '../../../entities/Currency';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'pages/ProfilePage',

src/shared/config/storybook/StyleDecorator/StyleDecorator.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line paths-fixes/layer-imports
 import '@/app/styles/index.scss';
 import { Story } from '@storybook/react';
 

src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx

@@ -1,5 +1,7 @@
 import { Story } from '@storybook/react';
-import { Theme, ThemeProvider } from '@/app/providers/ThemeProvider';
+import { Theme } from '@/shared/const/theme';
+// eslint-disable-next-line paths-fixes/layer-imports
+import { ThemeProvider } from '@/app/providers/ThemeProvider';
 
 export const ThemeDecorator = (theme: Theme) => (StoryComponent: Story) => (
     <ThemeProvider initialTheme={theme}>

src/shared/const/localstorage.ts

@@ -1,2 +1,3 @@
 export const USER_LOCALSTORAGE_KEY = 'user';
 export const ARTICLE_VIEW_LOCALSTORAGE_KEY = 'articles_view';
+export const LOCAL_STORAGE_THEME_KEY = 'theme';

src/shared/const/theme.ts

@@ -0,0 +1,5 @@
+export enum Theme {
+  LIGHT = 'app_light_theme',
+  DARK = 'app_dark_theme',
+  ORANGE = 'app_orange_theme',
+}

src/shared/lib/components/DynamicModuleLoared/DynamicModuleLoared.tsx

@@ -4,7 +4,7 @@ import { Reducer } from '@reduxjs/toolkit';
 import {
     ReduxStoreWithManager,
     StateSchemaKey,
-} from '@/app/providers/StoreProvider/config/StateSchema';
+} from '@/app/providers/StoreProvider';
 
 export type ReducersList = {
   [name in StateSchemaKey]?: Reducer;

src/shared/lib/context/ThemeContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { Theme } from '../../const/theme';
+
+export interface ThemeContextProps {
+  theme?: Theme;
+  setTheme?: (theme: Theme) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextProps>({});

src/app/providers/ThemeProvider/lib/useTheme.ts → src/shared/lib/hook/useTheme/useTheme.ts

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from './ThemeContext';
+import { ThemeContext } from '../../context/ThemeContext';
+import { Theme } from '../../../const/theme';
+import { LOCAL_STORAGE_THEME_KEY } from '../../../const/localstorage';
 
 interface UseThemeResult {
   toggleTheme: () => void;

src/shared/types/router.ts

@@ -1,4 +1,5 @@
 import { RouteProps } from 'react-router-dom';
+// eslint-disable-next-line paths-fixes/layer-imports
 import { UserRole } from '@/entities/User';
 
 export type AppRoutesProps = RouteProps & {

src/shared/ui/AppLink/AppLink.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { AppLink, AppLinkTheme } from './AppLink';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/AppLink',

src/shared/ui/Button/Button.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { Button, ButtonSize, ButtonTheme } from './Button';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/Button',

src/shared/ui/Drawer/Drawer.tsx

@@ -2,11 +2,11 @@ import React, {
     memo, ReactNode, useCallback, useEffect,
 } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { useTheme } from '@/app/providers/ThemeProvider';
 import { AnimationProvider, useAnimationLibs } from '@/shared/lib/components/AnimationProvider';
 import { Overlay } from '../Overlay/Overlay';
 import cls from './Drawer.module.scss';
 import { Portal } from '../Portal/Portal';
+import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 
 interface DrawerProps {
   className?: string;

src/shared/ui/Loader/Loader.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { Loader } from './Loader';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/Loader',

src/shared/ui/Modal/Modal.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { Modal } from '../Modal/Modal';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/Modal',

src/shared/ui/Modal/Modal.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
-import { useTheme } from '@/app/providers/ThemeProvider';
 import { useModal } from '@/shared/lib/hook/useModal/useModal';
 import { Overlay } from '../Overlay/Overlay';
 import { Portal } from '../Portal/Portal';
 import cls from './Modal.module.scss';
+import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 
 interface ModalProps {
   className?: string;

src/shared/ui/Skeleton/Skeleton.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { Skeleton } from './Skeleton';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/Skeleton',

src/shared/ui/Text/Text.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
 import { Text, TextSize, TextTheme } from '../Text/Text';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'shared/Text',

src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
-import { Theme } from '@/app/providers/ThemeProvider';
 import { ThemeSwitcher } from './ThemeSwitcher';
+import { Theme } from '@/shared/const/theme';
 
 export default {
     title: 'widgets/ThemeSwitcher',

src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -1,9 +1,10 @@
 import React, { memo } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Theme, useTheme } from '@/app/providers/ThemeProvider';
 import LightIcon from '@/shared/assets/icons/theme-light.svg';
 import DarkIcon from '@/shared/assets/icons/theme-dark.svg';
 import { Button, ButtonTheme } from '../../Button/Button';
+import { Theme } from '@/shared/const/theme';
+import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 
 interface ThemeSwitcherProps {
     className?: string;