diff --git a/config/build/buildDevServer.ts b/config/build/buildDevServer.ts index 6433421..9f7984c 100644 --- a/config/build/buildDevServer.ts +++ b/config/build/buildDevServer.ts @@ -2,10 +2,10 @@ import type { Configuration as DevServerConfiguration } from 'webpack-dev-server import { BuildOptions } from './types/config'; export function buildDevServer(options: BuildOptions): DevServerConfiguration { - return { - port: options.port, - open: true, - historyApiFallback: true, - hot: true, - }; + return { + port: options.port, + open: true, + historyApiFallback: true, + hot: true, + }; } diff --git a/config/build/buildLoaders.ts b/config/build/buildLoaders.ts index 8c6ef79..e98c263 100644 --- a/config/build/buildLoaders.ts +++ b/config/build/buildLoaders.ts @@ -3,54 +3,54 @@ import { buildCssLoader } from './loaders/buildCssLoader'; import { BuildOptions } from './types/config'; export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] { - const svgLoader = { - test: /\.svg$/, - use: ['@svgr/webpack'], - }; + const svgLoader = { + test: /\.svg$/, + use: ['@svgr/webpack'], + }; - const babelLoader = { - test: /\.(js|jsx|tsx)$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'], - plugins: [ - [ - 'i18next-extract', - { - locales: ['ru', 'en'], - keyAsDefaultValue: true, - }, - ], - ], + const babelLoader = { + test: /\.(js|jsx|tsx)$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'], + plugins: [ + [ + 'i18next-extract', + { + locales: ['ru', 'en'], + keyAsDefaultValue: true, }, - }, - }; + ], + ], + }, + }, + }; - const cssLoader = buildCssLoader(isDev); + const cssLoader = buildCssLoader(isDev); - // Если не используем тайпскрипт - нужен babel-loader - const typescriptLoader = { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: /node_modules/, - }; + // Если не используем тайпскрипт - нужен babel-loader + const typescriptLoader = { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: /node_modules/, + }; - const fileLoader = { - test: /\.(png|jpe?g|gif|woff2|woff)$/i, - use: [ - { - loader: 'file-loader', - }, - ], - }; + const fileLoader = { + test: /\.(png|jpe?g|gif|woff2|woff)$/i, + use: [ + { + loader: 'file-loader', + }, + ], + }; - return [ - fileLoader, - svgLoader, - babelLoader, - typescriptLoader, - cssLoader, - ]; + return [ + fileLoader, + svgLoader, + babelLoader, + typescriptLoader, + cssLoader, + ]; } diff --git a/config/build/buildPlugins.ts b/config/build/buildPlugins.ts index 198acac..7658841 100644 --- a/config/build/buildPlugins.ts +++ b/config/build/buildPlugins.ts @@ -5,26 +5,26 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { BuildOptions } from './types/config'; export function buildPlugins({ paths, isDev }: BuildOptions): webpack.WebpackPluginInstance[] { - const plugins = [ - new HtmlWebpackPlugin({ - template: paths.html, - }), - new webpack.ProgressPlugin(), - new MiniCssExtractPlugin({ - filename: 'css/[name].[contenthash:8].css', - chunkFilename: 'css/[name].[contenthash:8].css', - }), - new webpack.DefinePlugin({ - __IS_DEV__: JSON.stringify(isDev), - }), - ]; + const plugins = [ + new HtmlWebpackPlugin({ + template: paths.html, + }), + new webpack.ProgressPlugin(), + new MiniCssExtractPlugin({ + filename: 'css/[name].[contenthash:8].css', + chunkFilename: 'css/[name].[contenthash:8].css', + }), + new webpack.DefinePlugin({ + __IS_DEV__: JSON.stringify(isDev), + }), + ]; - if (isDev) { - plugins.push(new webpack.HotModuleReplacementPlugin()); - plugins.push(new BundleAnalyzerPlugin({ - openAnalyzer: false, - })); - } + if (isDev) { + plugins.push(new webpack.HotModuleReplacementPlugin()); + plugins.push(new BundleAnalyzerPlugin({ + openAnalyzer: false, + })); + } - return plugins; + return plugins; } diff --git a/config/build/buildResolvers.ts b/config/build/buildResolvers.ts index 67ddcaa..6e099cc 100644 --- a/config/build/buildResolvers.ts +++ b/config/build/buildResolvers.ts @@ -2,11 +2,11 @@ import { ResolveOptions } from 'webpack'; import { BuildOptions } from './types/config'; export function buildResolvers(options: BuildOptions): ResolveOptions { - return { - extensions: ['.tsx', '.ts', '.js'], - preferAbsolute: true, - modules: [options.paths.src, 'node_modules'], - mainFiles: ['index'], - alias: {}, - }; + return { + extensions: ['.tsx', '.ts', '.js'], + preferAbsolute: true, + modules: [options.paths.src, 'node_modules'], + mainFiles: ['index'], + alias: {}, + }; } diff --git a/config/build/buildWebpackConfig.ts b/config/build/buildWebpackConfig.ts index 0279937..d3430f2 100644 --- a/config/build/buildWebpackConfig.ts +++ b/config/build/buildWebpackConfig.ts @@ -6,22 +6,22 @@ import { buildResolvers } from './buildResolvers'; import { BuildOptions } from './types/config'; export function buildWebpackConfig(options: BuildOptions): webpack.Configuration { - const { paths, mode, isDev } = options; + const { paths, mode, isDev } = options; - return { - mode, - entry: paths.entry, - output: { - filename: '[name].[contenthash].js', - path: paths.build, - clean: true, - }, - plugins: buildPlugins(options), - module: { - rules: buildLoaders(options), - }, - resolve: buildResolvers(options), - devtool: isDev ? 'inline-source-map' : undefined, - devServer: isDev ? buildDevServer(options) : undefined, - }; + return { + mode, + entry: paths.entry, + output: { + filename: '[name].[contenthash].js', + path: paths.build, + clean: true, + }, + plugins: buildPlugins(options), + module: { + rules: buildLoaders(options), + }, + resolve: buildResolvers(options), + devtool: isDev ? 'inline-source-map' : undefined, + devServer: isDev ? buildDevServer(options) : undefined, + }; } diff --git a/config/build/loaders/buildCssLoader.ts b/config/build/loaders/buildCssLoader.ts index 8c5f707..ba02369 100644 --- a/config/build/loaders/buildCssLoader.ts +++ b/config/build/loaders/buildCssLoader.ts @@ -1,22 +1,22 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; export function buildCssLoader(isDev: boolean) { - return { - test: /\.s[ac]ss$/i, - use: [ - isDev ? 'style-loader' : MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - modules: { - auto: (resPath: string) => Boolean(resPath.includes('.module.')), - localIdentName: isDev - ? '[path][name]__[local]--[hash:base64:5]' - : '[hash:base64:8]', - }, - }, - }, - 'sass-loader', - ], - }; + return { + test: /\.s[ac]ss$/i, + use: [ + isDev ? 'style-loader' : MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { + modules: { + auto: (resPath: string) => Boolean(resPath.includes('.module.')), + localIdentName: isDev + ? '[path][name]__[local]--[hash:base64:5]' + : '[hash:base64:8]', + }, + }, + }, + 'sass-loader', + ], + }; } diff --git a/config/storybook/webpack.config.ts b/config/storybook/webpack.config.ts index b24a3c3..0594cbd 100644 --- a/config/storybook/webpack.config.ts +++ b/config/storybook/webpack.config.ts @@ -4,29 +4,29 @@ import { buildCssLoader } from '../build/loaders/buildCssLoader'; import { BuildPaths } from '../build/types/config'; export default ({ config }: {config: webpack.Configuration}) => { - const paths: BuildPaths = { - build: '', - html: '', - entry: '', - src: path.resolve(__dirname, '..', '..', 'src'), - }; - config.resolve.modules.push(paths.src); - config.resolve.extensions.push('.ts', '.tsx'); + const paths: BuildPaths = { + build: '', + html: '', + entry: '', + src: path.resolve(__dirname, '..', '..', 'src'), + }; + 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)) { - return { ...rule, exclude: /\.svg$/i }; - } + // eslint-disable-next-line no-param-reassign + config.module.rules = config.module.rules.map((rule: RuleSetRule) => { + if (/svg/.test(rule.test as string)) { + return { ...rule, exclude: /\.svg$/i }; + } - return rule; - }); + return rule; + }); - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }); - config.module.rules.push(buildCssLoader(true)); + config.module.rules.push({ + test: /\.svg$/, + use: ['@svgr/webpack'], + }); + config.module.rules.push(buildCssLoader(true)); - return config; + return config; }; diff --git a/src/app/providers/ErrorBoundary/index.ts b/src/app/providers/ErrorBoundary/index.ts index bb9ddff..1bebc2f 100644 --- a/src/app/providers/ErrorBoundary/index.ts +++ b/src/app/providers/ErrorBoundary/index.ts @@ -2,6 +2,6 @@ import ErrorBoundary from './ui/ErrorBoundary'; import { BugButton } from './ui/BugButton'; export { - ErrorBoundary, - BugButton, + ErrorBoundary, + BugButton, }; diff --git a/src/app/providers/ErrorBoundary/ui/BugButton.tsx b/src/app/providers/ErrorBoundary/ui/BugButton.tsx index 7dbaade..729e607 100644 --- a/src/app/providers/ErrorBoundary/ui/BugButton.tsx +++ b/src/app/providers/ErrorBoundary/ui/BugButton.tsx @@ -4,22 +4,22 @@ import { useTranslation } from 'react-i18next'; // Компонент для тестирования ErrorBoundary export const BugButton = () => { - const [error, setError] = useState(false); - const { t } = useTranslation(); + const [error, setError] = useState(false); + const { t } = useTranslation(); - const onThrow = () => setError(true); + const onThrow = () => setError(true); - useEffect(() => { - if (error) { - throw new Error(); - } - }, [error]); + useEffect(() => { + if (error) { + throw new Error(); + } + }, [error]); - return ( - - ); + return ( + + ); }; diff --git a/src/app/providers/ErrorBoundary/ui/ErrorBoundary.tsx b/src/app/providers/ErrorBoundary/ui/ErrorBoundary.tsx index fd1b2b1..1e1a576 100644 --- a/src/app/providers/ErrorBoundary/ui/ErrorBoundary.tsx +++ b/src/app/providers/ErrorBoundary/ui/ErrorBoundary.tsx @@ -10,37 +10,37 @@ interface ErrorBoundaryState { } class ErrorBoundary - extends React.Component { - constructor(props: ErrorBoundaryProps) { - super(props); - this.state = { hasError: false }; + extends React.Component { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: Error) { + // Update state so the next render will show the fallback UI. + return { hasError: true }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo) { + // You can also log the error to an error reporting service + console.log(error, errorInfo); + } + + render() { + const { hasError } = this.state; + const { children } = this.props; + + if (hasError) { + // You can render any custom fallback UI + return ( + + + + ); } - static getDerivedStateFromError(error: Error) { - // Update state so the next render will show the fallback UI. - return { hasError: true }; - } - - componentDidCatch(error: Error, errorInfo: ErrorInfo) { - // You can also log the error to an error reporting service - console.log(error, errorInfo); - } - - render() { - const { hasError } = this.state; - const { children } = this.props; - - if (hasError) { - // You can render any custom fallback UI - return ( - - - - ); - } - - return children; - } + return children; + } } export default ErrorBoundary; diff --git a/src/app/providers/ThemeProvider/index.ts b/src/app/providers/ThemeProvider/index.ts index 60d95d4..b34f91d 100644 --- a/src/app/providers/ThemeProvider/index.ts +++ b/src/app/providers/ThemeProvider/index.ts @@ -3,7 +3,7 @@ import { useTheme } from './lib/useTheme'; import { Theme } from './lib/ThemeContext'; export { - ThemeProvider, - useTheme, - Theme, + ThemeProvider, + useTheme, + Theme, }; diff --git a/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx b/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx index 7a816cf..e05e13f 100644 --- a/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx +++ b/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx @@ -8,19 +8,19 @@ interface ThemeProviderProps { } const ThemeProvider: FC = (props) => { - const { children, initialTheme } = props; - const [theme, setTheme] = useState(initialTheme || defaultTheme); + const { children, initialTheme } = props; + const [theme, setTheme] = useState(initialTheme || defaultTheme); - const defaultProps = useMemo(() => ({ - theme, - setTheme, - }), [theme]); + const defaultProps = useMemo(() => ({ + theme, + setTheme, + }), [theme]); - return ( - - {children} - - ); + return ( + + {children} + + ); }; export default ThemeProvider; diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts index ea31985..b7ee78a 100644 --- a/src/app/providers/router/index.ts +++ b/src/app/providers/router/index.ts @@ -1,5 +1,5 @@ import AppRouter from './ui/AppRouter'; export { - AppRouter, + AppRouter, }; diff --git a/src/app/providers/router/ui/AppRouter.tsx b/src/app/providers/router/ui/AppRouter.tsx index 3d3dd39..e5e592d 100644 --- a/src/app/providers/router/ui/AppRouter.tsx +++ b/src/app/providers/router/ui/AppRouter.tsx @@ -4,21 +4,21 @@ import { routeConfig } from 'shared/config/routeConfig/routeConfig'; import { PageLoader } from 'shared/ui/PageLoader/PageLoader'; const AppRouter = () => ( - - {Object.values(routeConfig).map(({ element, path }) => ( - }> -
- {element} -
- - )} - /> - ))} - + + {Object.values(routeConfig).map(({ element, path }) => ( + }> +
+ {element} +
+ + )} + /> + ))} + ); export default AppRouter; diff --git a/src/index.tsx b/src/index.tsx index 3f55b34..da585ad 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,14 +9,14 @@ import './shared/config/i18n/i18n'; import { ErrorBoundary } from './app/providers/ErrorBoundary'; render( - - - - - - - - - , - document.getElementById('root'), + + + + + + + + + , + document.getElementById('root'), ); diff --git a/src/pages/AboutPage/index.ts b/src/pages/AboutPage/index.ts index 7e835b7..0a3d2d5 100644 --- a/src/pages/AboutPage/index.ts +++ b/src/pages/AboutPage/index.ts @@ -1,5 +1,5 @@ import { AboutPageAsync } from './ui/AboutPage.async'; export { - AboutPageAsync as AboutPage, + AboutPageAsync as AboutPage, }; diff --git a/src/pages/AboutPage/ui/AboutPage.async.tsx b/src/pages/AboutPage/ui/AboutPage.async.tsx index afc2380..937e7a1 100644 --- a/src/pages/AboutPage/ui/AboutPage.async.tsx +++ b/src/pages/AboutPage/ui/AboutPage.async.tsx @@ -1,7 +1,7 @@ import { lazy } from 'react'; export const AboutPageAsync = lazy(() => new Promise((resolve) => { - // @ts-ignore - // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА! - setTimeout(() => resolve(import('./AboutPage')), 1500); + // @ts-ignore + // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА! + setTimeout(() => resolve(import('./AboutPage')), 1500); })); diff --git a/src/pages/AboutPage/ui/AboutPage.tsx b/src/pages/AboutPage/ui/AboutPage.tsx index 8ef82da..1f18273 100644 --- a/src/pages/AboutPage/ui/AboutPage.tsx +++ b/src/pages/AboutPage/ui/AboutPage.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; const AboutPage = () => { - const { t } = useTranslation('about'); + const { t } = useTranslation('about'); - return ( -
- {t('О сайте')} -
- ); + return ( +
+ {t('О сайте')} +
+ ); }; export default AboutPage; diff --git a/src/pages/MainPage/index.ts b/src/pages/MainPage/index.ts index 68e64c8..fe52a03 100644 --- a/src/pages/MainPage/index.ts +++ b/src/pages/MainPage/index.ts @@ -1,5 +1,5 @@ import { MainPageAsync } from './ui/MainPage.async'; export { - MainPageAsync as MainPage, + MainPageAsync as MainPage, }; diff --git a/src/pages/MainPage/ui/MainPage.async.tsx b/src/pages/MainPage/ui/MainPage.async.tsx index 134d4f0..90e57b0 100644 --- a/src/pages/MainPage/ui/MainPage.async.tsx +++ b/src/pages/MainPage/ui/MainPage.async.tsx @@ -1,7 +1,7 @@ import { lazy } from 'react'; export const MainPageAsync = lazy(() => new Promise((resolve) => { - // @ts-ignore - // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА! - setTimeout(() => resolve(import('./MainPage')), 1500); + // @ts-ignore + // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА! + setTimeout(() => resolve(import('./MainPage')), 1500); })); diff --git a/src/pages/NotFoundPage/index.ts b/src/pages/NotFoundPage/index.ts index f7300c1..107c857 100644 --- a/src/pages/NotFoundPage/index.ts +++ b/src/pages/NotFoundPage/index.ts @@ -1,5 +1,5 @@ import { NotFoundPage } from './ui/NotFoundPage'; export { - NotFoundPage, + NotFoundPage, }; diff --git a/src/pages/NotFoundPage/ui/NotFoundPage.tsx b/src/pages/NotFoundPage/ui/NotFoundPage.tsx index 14c6e00..d9c1c82 100644 --- a/src/pages/NotFoundPage/ui/NotFoundPage.tsx +++ b/src/pages/NotFoundPage/ui/NotFoundPage.tsx @@ -7,10 +7,10 @@ interface NotFoundPageProps { } export const NotFoundPage = ({ className }: NotFoundPageProps) => { - const { t } = useTranslation(); - return ( -
- {t('Страница не найдена')} -
- ); + const { t } = useTranslation(); + return ( +
+ {t('Страница не найдена')} +
+ ); }; diff --git a/src/shared/config/i18n/i18n.ts b/src/shared/config/i18n/i18n.ts index b415dd3..95298a2 100644 --- a/src/shared/config/i18n/i18n.ts +++ b/src/shared/config/i18n/i18n.ts @@ -5,20 +5,20 @@ import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n - .use(Backend) - .use(LanguageDetector) - .use(initReactI18next) - .init({ - fallbackLng: 'en', - debug: __IS_DEV__, + .use(Backend) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + fallbackLng: 'en', + debug: __IS_DEV__, - interpolation: { - escapeValue: false, // not needed for react as it escapes by default - }, + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, - backend: { - loadPath: '/locales/{{lng}}/{{ns}}.json', - }, - }); + backend: { + loadPath: '/locales/{{lng}}/{{ns}}.json', + }, + }); export default i18n; diff --git a/src/shared/config/i18n/i18nForTests.ts b/src/shared/config/i18n/i18nForTests.ts index 9729fd7..fcb9f78 100644 --- a/src/shared/config/i18n/i18nForTests.ts +++ b/src/shared/config/i18n/i18nForTests.ts @@ -2,16 +2,16 @@ import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n - .use(initReactI18next) - .init({ - lng: 'ru', - fallbackLng: 'ru', - debug: false, + .use(initReactI18next) + .init({ + lng: 'ru', + fallbackLng: 'ru', + debug: false, - interpolation: { - escapeValue: false, // not needed for react!! - }, - resources: { ru: { translations: {} } }, - }); + interpolation: { + escapeValue: false, // not needed for react!! + }, + resources: { ru: { translations: {} } }, + }); export default i18n; diff --git a/src/shared/config/routeConfig/routeConfig.tsx b/src/shared/config/routeConfig/routeConfig.tsx index 3139b22..81a4002 100644 --- a/src/shared/config/routeConfig/routeConfig.tsx +++ b/src/shared/config/routeConfig/routeConfig.tsx @@ -10,22 +10,22 @@ export enum AppRoutes { } export const RoutePath: Record = { - [AppRoutes.MAIN]: '/', - [AppRoutes.ABOUT]: '/about', - [AppRoutes.NOT_FOUND]: '*', + [AppRoutes.MAIN]: '/', + [AppRoutes.ABOUT]: '/about', + [AppRoutes.NOT_FOUND]: '*', }; export const routeConfig: Record = { - [AppRoutes.MAIN]: { - path: RoutePath.main, - element: , - }, - [AppRoutes.ABOUT]: { - path: RoutePath.about, - element: , - }, - [AppRoutes.NOT_FOUND]: { - path: RoutePath.not_found, - element: , - }, + [AppRoutes.MAIN]: { + path: RoutePath.main, + element: , + }, + [AppRoutes.ABOUT]: { + path: RoutePath.about, + element: , + }, + [AppRoutes.NOT_FOUND]: { + path: RoutePath.not_found, + element: , + }, }; diff --git a/src/shared/config/storybook/RouterDecorator/RouterDecorator.tsx b/src/shared/config/storybook/RouterDecorator/RouterDecorator.tsx index d3379af..4d20f8d 100644 --- a/src/shared/config/storybook/RouterDecorator/RouterDecorator.tsx +++ b/src/shared/config/storybook/RouterDecorator/RouterDecorator.tsx @@ -2,7 +2,7 @@ import { Story } from '@storybook/react'; import { BrowserRouter } from 'react-router-dom'; export const RouterDecorator = (story: () => Story) => ( - - {story()} - + + {story()} + ); diff --git a/src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx b/src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx index 77d937f..f2b2c5d 100644 --- a/src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx +++ b/src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx @@ -2,9 +2,9 @@ import { Story } from '@storybook/react'; import { Theme, ThemeProvider } from 'app/providers/ThemeProvider'; export const ThemeDecorator = (theme: Theme) => (StoryComponent: Story) => ( - -
- -
- + +
+ +
+ ); diff --git a/src/shared/lib/classNames/classNames.ts b/src/shared/lib/classNames/classNames.ts index a7dafa0..4773985 100644 --- a/src/shared/lib/classNames/classNames.ts +++ b/src/shared/lib/classNames/classNames.ts @@ -1,12 +1,12 @@ type Mods = Record export function classNames(cls: string, mods: Mods = {}, additional: string[] = []): string { - return [ - cls, - ...additional.filter(Boolean), - ...Object.entries(mods) - .filter(([, value]) => Boolean(value)) - .map(([className]) => className), - ] - .join(' '); + return [ + cls, + ...additional.filter(Boolean), + ...Object.entries(mods) + .filter(([, value]) => Boolean(value)) + .map(([className]) => className), + ] + .join(' '); } diff --git a/src/shared/lib/tests/renderWithTranslation/renderWithTranslation.tsx b/src/shared/lib/tests/renderWithTranslation/renderWithTranslation.tsx index f29d33d..cdcf984 100644 --- a/src/shared/lib/tests/renderWithTranslation/renderWithTranslation.tsx +++ b/src/shared/lib/tests/renderWithTranslation/renderWithTranslation.tsx @@ -4,9 +4,9 @@ import { I18nextProvider } from 'react-i18next'; import i18nForTests from 'shared/config/i18n/i18nForTests'; export function renderWithTranslation(component: ReactNode) { - return render( - - {component} - , - ); + return render( + + {component} + , + ); } diff --git a/src/shared/ui/LangSwitcher/LangSwitcher.tsx b/src/shared/ui/LangSwitcher/LangSwitcher.tsx index cc7ad92..7b94614 100644 --- a/src/shared/ui/LangSwitcher/LangSwitcher.tsx +++ b/src/shared/ui/LangSwitcher/LangSwitcher.tsx @@ -9,19 +9,19 @@ interface LangSwitcherProps { } export const LangSwitcher = ({ className, short }: LangSwitcherProps) => { - const { t, i18n } = useTranslation(); + const { t, i18n } = useTranslation(); - const toggle = async () => { - i18n.changeLanguage(i18n.language === 'ru' ? 'en' : 'ru'); - }; + const toggle = async () => { + i18n.changeLanguage(i18n.language === 'ru' ? 'en' : 'ru'); + }; - return ( - - ); + return ( + + ); }; diff --git a/src/shared/ui/Loader/Loader.tsx b/src/shared/ui/Loader/Loader.tsx index 292d8a7..4574c75 100644 --- a/src/shared/ui/Loader/Loader.tsx +++ b/src/shared/ui/Loader/Loader.tsx @@ -6,10 +6,10 @@ interface LoaderProps { } export const Loader = ({ className }: LoaderProps) => ( -
-
-
-
-
-
+
+
+
+
+
+
); diff --git a/src/shared/ui/PageLoader/PageLoader.tsx b/src/shared/ui/PageLoader/PageLoader.tsx index e765ed2..c0f319e 100644 --- a/src/shared/ui/PageLoader/PageLoader.tsx +++ b/src/shared/ui/PageLoader/PageLoader.tsx @@ -7,7 +7,7 @@ interface PageLoaderProps { } export const PageLoader = ({ className }: PageLoaderProps) => ( -
- -
+
+ +
); diff --git a/src/shared/ui/ThemeSwitcher/index.tsx b/src/shared/ui/ThemeSwitcher/index.tsx index ca6bb12..5d862d7 100644 --- a/src/shared/ui/ThemeSwitcher/index.tsx +++ b/src/shared/ui/ThemeSwitcher/index.tsx @@ -1,5 +1,5 @@ import { ThemeSwitcher } from './ui/ThemeSwitcher'; export { - ThemeSwitcher, + ThemeSwitcher, }; diff --git a/src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.tsx b/src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.tsx index 24cd433..1bd329a 100644 --- a/src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.tsx +++ b/src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.tsx @@ -10,15 +10,15 @@ interface ThemeSwitcherProps { } export const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => { - const { theme, toggleTheme } = useTheme(); + const { theme, toggleTheme } = useTheme(); - return ( - - ); + return ( + + ); }; diff --git a/src/widgets/ErrorPage/ui/ErrorPage.tsx b/src/widgets/ErrorPage/ui/ErrorPage.tsx index 740fe41..3c15630 100644 --- a/src/widgets/ErrorPage/ui/ErrorPage.tsx +++ b/src/widgets/ErrorPage/ui/ErrorPage.tsx @@ -8,19 +8,19 @@ interface ErrorPageProps { } export const ErrorPage = ({ className }: ErrorPageProps) => { - const { t } = useTranslation(); + const { t } = useTranslation(); - const reloadPage = () => { - // eslint-disable-next-line no-restricted-globals - location.reload(); - }; + const reloadPage = () => { + // eslint-disable-next-line no-restricted-globals + location.reload(); + }; - return ( -
-

{t('Произошла непредвиденная ошибка')}

- -
- ); + return ( +
+

{t('Произошла непредвиденная ошибка')}

+ +
+ ); }; diff --git a/src/widgets/Navbar/index.ts b/src/widgets/Navbar/index.ts index 1e7468b..f1a33f4 100644 --- a/src/widgets/Navbar/index.ts +++ b/src/widgets/Navbar/index.ts @@ -1,5 +1,5 @@ import { Navbar } from './ui/Navbar'; export { - Navbar, + Navbar, }; diff --git a/src/widgets/Navbar/ui/Navbar.tsx b/src/widgets/Navbar/ui/Navbar.tsx index a064974..a13c3fb 100644 --- a/src/widgets/Navbar/ui/Navbar.tsx +++ b/src/widgets/Navbar/ui/Navbar.tsx @@ -10,27 +10,27 @@ interface NavbarProps { } export const Navbar = ({ className }: NavbarProps) => { - const { t } = useTranslation(); - const [isAuthModal, setIsAuthModal] = useState(false); + const { t } = useTranslation(); + const [isAuthModal, setIsAuthModal] = useState(false); - const onToggleModal = useCallback(() => { - setIsAuthModal((prev) => !prev); - }, []); + const onToggleModal = useCallback(() => { + setIsAuthModal((prev) => !prev); + }, []); - return ( -
- - {/* eslint-disable-next-line i18next/no-literal-string */} - - Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Nesciunt, suscipit? - -
- ); + return ( +
+ + {/* eslint-disable-next-line i18next/no-literal-string */} + + Lorem ipsum dolor sit amet, + consectetur adipisicing elit. Nesciunt, suscipit? + +
+ ); }; diff --git a/src/widgets/Sidebar/index.ts b/src/widgets/Sidebar/index.ts index def0fbc..add07ca 100644 --- a/src/widgets/Sidebar/index.ts +++ b/src/widgets/Sidebar/index.ts @@ -1,5 +1,5 @@ import { Sidebar } from './ui/Sidebar/Sidebar'; export { - Sidebar, + Sidebar, }; diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx index f1a0fe7..e3b2213 100644 --- a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx +++ b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx @@ -15,55 +15,55 @@ interface SidebarProps { } export const Sidebar = ({ className }: SidebarProps) => { - const [collapsed, setCollapsed] = useState(false); + const [collapsed, setCollapsed] = useState(false); - const { t } = useTranslation(); + const { t } = useTranslation(); - const onToggle = () => { - setCollapsed((prev) => !prev); - }; + const onToggle = () => { + setCollapsed((prev) => !prev); + }; - return ( -
+ +
+ - -
- - - - {t('Главная')} - - - - - - {t('О сайте')} - - -
-
- - -
-
- ); + + + {t('Главная')} + + + + + + {t('О сайте')} + + +
+
+ + +
+
+ ); }; diff --git a/webpack.config.ts b/webpack.config.ts index c29bd62..718b536 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -4,24 +4,24 @@ import { buildWebpackConfig } from './config/build/buildWebpackConfig'; import { BuildEnv, BuildPaths } from './config/build/types/config'; export default (env: BuildEnv) => { - const paths: BuildPaths = { - entry: path.resolve(__dirname, 'src', 'index.tsx'), - build: path.resolve(__dirname, 'build'), - html: path.resolve(__dirname, 'public', 'index.html'), - src: path.resolve(__dirname, 'src'), - }; + const paths: BuildPaths = { + entry: path.resolve(__dirname, 'src', 'index.tsx'), + build: path.resolve(__dirname, 'build'), + html: path.resolve(__dirname, 'public', 'index.html'), + src: path.resolve(__dirname, 'src'), + }; - const mode = env.mode || 'development'; - const PORT = env.port || 3000; + const mode = env.mode || 'development'; + const PORT = env.port || 3000; - const isDev = mode === 'development'; + const isDev = mode === 'development'; - const config: webpack.Configuration = buildWebpackConfig({ - mode, - paths, - isDev, - port: PORT, - }); + const config: webpack.Configuration = buildWebpackConfig({ + mode, + paths, + isDev, + port: PORT, + }); - return config; + return config; };