Улучшил линтеры и добавил модуль авторизации

.eslintrc.js

@@ -18,8 +18,10 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'i18next', 'react-hooks'],
+  plugins: ['react', '@typescript-eslint', 'i18next', 'react-hooks', 'prettier'],
   rules: {
+    'prettier/prettier': 'error',
+    '@typescript-eslint/consistent-type-imports': 'warn',
     'react/jsx-indent': [1, 2],
     'react/jsx-indent-props': [1, 2],
     indent: [1, 2],
@@ -33,6 +35,13 @@ module.exports = {
     'react/function-component-definition': 'off',
     'no-shadow': 'off',
     'import/extensions': 'off',
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'internal'],
+        'newlines-between': 'always',
+      },
+    ],
     'import/no-extraneous-dependencies': 'off',
     'no-underscore-dangle': 'off',
     'i18next/no-literal-string': [

.husky/pre-commit

@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npm run format || exit 1
+
 if [ "$GIT_BRANCH" = "master" ]; then
   npm run lint:ts
   npm run lint:scss

.prettierrc.js

@@ -7,4 +7,5 @@ module.exports = {
   trailingComma: 'all',
   bracketSpacing: true,
   arrowParens: 'always',
+  endOfLine: 'auto',
 };

config/build/buildDevServer.ts

@@ -1,5 +1,6 @@
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
-import { BuildOptions } from './types/config';
+
+import type { BuildOptions } from './types/config';
 
 export function buildDevServer(options: BuildOptions): DevServerConfiguration {
   return {

config/build/buildLoaders.ts

@@ -1,6 +1,7 @@
-import webpack from 'webpack';
+import type webpack from 'webpack';
+
 import { buildCssLoader } from './loaders/buildCssLoader';
-import { BuildOptions } from './types/config';
+import type { BuildOptions } from './types/config';
 
 export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
   const svgLoader = {

config/build/buildPlugins.ts

@@ -2,7 +2,8 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import { BuildOptions } from './types/config';
+
+import type { BuildOptions } from './types/config';
 
 export function buildPlugins({ paths, isDev }: BuildOptions): webpack.WebpackPluginInstance[] {
   const plugins = [

config/build/buildResolvers.ts

@@ -1,5 +1,6 @@
-import { ResolveOptions } from 'webpack';
-import { BuildOptions } from './types/config';
+import type { ResolveOptions } from 'webpack';
+
+import type { BuildOptions } from './types/config';
 
 export function buildResolvers(options: BuildOptions): ResolveOptions {
   return {

config/build/buildWebpackConfig.ts

@@ -1,9 +1,10 @@
-import webpack from 'webpack';
+import type webpack from 'webpack';
+
 import { buildDevServer } from './buildDevServer';
 import { buildLoaders } from './buildLoaders';
 import { buildPlugins } from './buildPlugins';
 import { buildResolvers } from './buildResolvers';
-import { BuildOptions } from './types/config';
+import type { BuildOptions } from './types/config';
 
 export function buildWebpackConfig(options: BuildOptions): webpack.Configuration {
   const { paths, mode, isDev } = options;

config/storybook/main.js

@@ -1,12 +1,17 @@
 module.exports = {
-	stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-interactions',
-	],
-	framework: '@storybook/react',
-	core: {
-		builder: 'webpack5',
-	},
+  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5',
+  },
+  staticDirs: ['../../public'],
+  previewHead: (head) => `
+    ${head}
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&amp;display=swap" />
+  `,
 };

config/storybook/preview.js

@@ -1,19 +1,22 @@
 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 { StyleDecorator } from '../../src/shared/config/storybook/StyleDecorator/StyleDecorator';
+import { SuspenseDecorator } from '../../src/shared/config/storybook/SuspenseDecorator/SuspenseDecorator';
+import { ThemeDecorator } from '../../src/shared/config/storybook/ThemeDecorator/ThemeDecorator';
 
 export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
-	controls: {
-		matchers: {
-			color: /(background|color)$/i,
-			date: /Date$/,
-		},
-	},
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
 };
 
+addDecorator(SuspenseDecorator);
 addDecorator(StyleDecorator);
 addDecorator(ThemeDecorator(Theme.LIGHT));
 addDecorator(RouterDecorator);

config/storybook/webpack.config.ts

@@ -1,32 +1,40 @@
-import webpack, { RuleSetRule } from 'webpack';
 import path from 'path';
+
+import type { Configuration } from 'webpack';
+import { DefinePlugin } from 'webpack';
+
 import { buildCssLoader } from '../build/loaders/buildCssLoader';
-import { BuildPaths } from '../build/types/config';
+import type { BuildPaths } from '../build/types/config';
 
-export default ({ config }: { config: webpack.Configuration }) => {
+export default ({ config }: { config: Configuration }) => {
   const paths: BuildPaths = {
     build: '',
     html: '',
     entry: '',
     src: path.resolve(__dirname, '..', '..', 'src'),
   };
-  config.resolve.modules.push(paths.src);
-  config.resolve.extensions.push('.ts', '.tsx');
+  config.resolve!.modules!.push(paths.src);
+  config.resolve!.extensions!.push('.ts', '.tsx');
 
-  // eslint-disable-next-line no-param-reassign
-  config.module.rules = config.module.rules.map((rule: RuleSetRule) => {
-    if (/svg/.test(rule.test as string)) {
+  config.module!.rules = config.module!.rules!.map((rule) => {
+    if (rule && typeof rule === 'object' && rule.test && /svg/.test(rule.test as string)) {
       return { ...rule, exclude: /\.svg$/i };
     }
 
     return rule;
   });
 
-  config.module.rules.push({
+  config.module!.rules.push({
     test: /\.svg$/,
     use: ['@svgr/webpack'],
   });
-  config.module.rules.push(buildCssLoader(true));
+  config.module!.rules.push(buildCssLoader(true));
+
+  config.plugins!.push(
+    new DefinePlugin({
+      __IS_DEV__: true,
+    }),
+  );
 
   return config;
 };

extractedTranslations/en/translation.json

@@ -1,9 +1,19 @@
 {
+  "Loading": {
+    "": {
+      "": {
+        "": ""
+      }
+    }
+  },
   "throw error": "throw error",
+  "Авторизация": "",
   "Введите username": "Введите username",
   "Введите пароль": "Введите пароль",
   "Войти": "",
-  "Войти": "Войти",
+  "Войти": "Login",
+  "Вы ввели неверный логин или пароль": "",
+  "Выйти": "Выйти",
   "Главная": "Главная",
   "Главная страница": "Главная страница",
   "Короткий язык": "Короткий язык",

extractedTranslations/ru/translation.json

@@ -1,9 +1,12 @@
 {
   "throw error": "throw error",
+  "Авторизация": "Авторизация",
   "Введите username": "Введите username",
   "Введите пароль": "Введите пароль",
   "Войти": "Войти",
   "Войти": "Войти",
+  "Вы ввели неверный логин или пароль": "Вы ввели неверный логин или пароль",
+  "Выйти": "Выйти",
   "Главная": "Главная",
   "Главная страница": "Главная страница",
   "Короткий язык": "Короткий язык",

json-server/index.js

@@ -12,47 +12,47 @@ server.use(jsonServer.bodyParser);
 
 // Нужно для небольшой задержки, чтобы запрос проходил не мгновенно, имитация реального апи
 server.use(async (req, res, next) => {
-	await new Promise((res) => {
-		setTimeout(res, 800);
-	});
-	next();
+  await new Promise((resolve) => {
+    setTimeout(resolve, 800);
+  });
+  next();
 });
 
 // Эндпоинт для логина
 server.post('/login', (req, res) => {
-	try {
-		const { username, password } = req.body;
-		const db = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'db.json'), 'UTF-8'));
-		const { users = [] } = db;
-
-		const userFromBd = users.find(
-			(user) => user.username === username && user.password === password,
-		);
-
-		if (userFromBd) {
-			return res.json(userFromBd);
-		}
-
-		return res.status(403).json({ message: 'User not found' });
-	} catch (e) {
-		console.log(e);
-		return res.status(500).json({ message: e.message });
-	}
+  try {
+    const { username, password } = req.body;
+    const db = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'db.json'), 'UTF-8'));
+    const { users = [] } = db;
+
+    const userFromBd = users.find(
+      (user) => user.username === username && user.password === password,
+    );
+
+    if (userFromBd) {
+      return res.json(userFromBd);
+    }
+
+    return res.status(403).json({ message: 'User not found' });
+  } catch (e) {
+    console.log(e);
+    return res.status(500).json({ message: e.message });
+  }
 });
 
 // проверяем, авторизован ли пользователь
 // eslint-disable-next-line
 server.use((req, res, next) => {
-	if (!req.headers.authorization) {
-		return res.status(403).json({ message: 'AUTH ERROR' });
-	}
+  if (!req.headers.authorization) {
+    return res.status(403).json({ message: 'AUTH ERROR' });
+  }
 
-	next();
+  next();
 });
 
 server.use(router);
 
 // запуск сервера
 server.listen(8000, () => {
-	console.log('server is running on 8000 port');
+  console.log('server is running on 8000 port');
 });