Feature/layout

.eslintrc.js

@@ -18,11 +18,7 @@ module.exports = {
         ecmaVersion: 'latest',
         sourceType: 'module',
     },
-    plugins: [
-        'react',
-        '@typescript-eslint',
-        'i18next',
-    ],
+    plugins: ['react', '@typescript-eslint', 'i18next'],
     rules: {
         indent: [2, 4],
 
@@ -31,29 +27,38 @@ module.exports = {
         'react/react-in-jsx-scope': 'off',
         'react/require-default-props': 'off',
         'react/jsx-props-no-spreading': 'warn',
-        'react/jsx-filename-extension': [2, {
-            extensions: ['tsx', '.jsx'],
-        }],
-        'react/function-component-definition': [2, {
-            namedComponents: 'arrow-function',
-        }],
+        'react/jsx-filename-extension': [
+            2,
+            {
+                extensions: ['tsx', '.jsx'],
+            },
+        ],
+        'react/function-component-definition': [
+            2,
+            {
+                namedComponents: 'arrow-function',
+            },
+        ],
 
         'import/extensions': 'off',
         'import/no-unresolved': 'off',
         'import/prefer-default-export': 'off',
-        'import/order': ['error', {
-            groups: [
-                'builtin',
-                'external',
-                'internal',
-                'parent',
-                'sibling',
-                'index',
-                'object',
-                'type',
-            ],
-            'newlines-between': 'always',
-        }],
+        'import/order': [
+            'error',
+            {
+                groups: [
+                    'builtin',
+                    'external',
+                    'internal',
+                    'parent',
+                    'sibling',
+                    'index',
+                    'object',
+                    'type',
+                ],
+                'newlines-between': 'always-and-inside-groups',
+            },
+        ],
 
         'linebreak-style': ['warn', 'windows'],
         'i18next/no-literal-string': ['error', { markupOnly: true }],

config/storybook/webpack.config.ts

@@ -6,34 +6,37 @@ import svgBuildLoader from '../build/loaders/svgBuildLoader';
 import cssBuildLoader from '../build/loaders/cssBuildLoader';
 
 type Props = {
-    config:webpack.Configuration
+    config: webpack.Configuration
 }
 
+type ArrayElement<ArrayType> =
+    ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
 const isRuleSet = (
-    arg:webpack.ModuleOptions['rules'][number],
+    arg: ArrayElement<webpack.ModuleOptions['rules']>,
 ): arg is webpack.RuleSetRule => {
     if (!arg) return false;
 
     return typeof arg === 'object' && 'test' in arg;
 };
 
-const isRegExp = (arg:webpack.RuleSetRule['test']):arg is RegExp => arg instanceof RegExp;
+const isRegExp = (arg: webpack.RuleSetRule['test']): arg is RegExp => arg instanceof RegExp;
 
-export default ({ config }:Props) => {
+export default ({ config }: Props) => {
     const src = path.resolve(__dirname, '..', '..', 'src');
     const isDev = true;
 
-    const fileLoaderRule = config.module.rules.find(
+    const fileLoaderRule = config.module?.rules?.find(
         (rule) => isRuleSet(rule) && isRegExp(rule.test) && rule.test.test('.svg'),
     );
 
     if (isRuleSet(fileLoaderRule)) { fileLoaderRule.exclude = /\.svg$/; }
 
-    config.resolve.modules.push(src);
-    config.resolve.modules.push('node_modules');
-    config.resolve.extensions.push('ts', 'tsx');
-    config.module.rules.push(svgBuildLoader());
-    config.module.rules.push(cssBuildLoader(isDev));
+    config.resolve?.modules?.push(src);
+    config.resolve?.modules?.push('node_modules');
+    config.resolve?.extensions?.push('ts', 'tsx');
+    config.module?.rules?.push(svgBuildLoader());
+    config.module?.rules?.push(cssBuildLoader(isDev));
 
     return config;
 };

public/locales/en/translation.json

@@ -1,10 +1,11 @@
 {
-  "mainPage": "Main Page",
-  "lang": "English",
-  "main": "Main",
-  "about": "About",
-  "loading": "Loading",
-  "NotFoundPage": "Page not found",
-  "errorMessage": "Something went wrong.",
-  "updatePage": "Refresh the page"
+    "mainPage": "Main Page",
+    "shortLang": "Eng",
+    "lang": "English",
+    "main": "Main",
+    "about": "About",
+    "loading": "Loading",
+    "NotFoundPage": "Page not found",
+    "errorMessage": "Something went wrong.",
+    "updatePage": "Refresh the page"
 }

public/locales/ru/translation.json

@@ -1,10 +1,11 @@
 {
-  "mainPage": "Главная страница",
-  "lang": "Русский",
-  "main": "Главная",
-  "about": "О сайте",
-  "loading": "Загрузка",
-  "NotFoundPage": "Страница не найдено",
-  "errorMessage": "Что-то пошло не так.",
-  "updatePage": "Обновить страницу"
+    "mainPage": "Главная страница",
+    "shortLang": "Рус",
+    "lang": "Русский",
+    "main": "Главная",
+    "about": "О сайте",
+    "loading": "Загрузка",
+    "NotFoundPage": "Страница не найдено",
+    "errorMessage": "Что-то пошло не так.",
+    "updatePage": "Обновить страницу"
 }

src/app/providers/ThemeProvider/lib/useTheme.ts

@@ -3,16 +3,16 @@ import { useContext } from 'react';
 import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from './ThemeContext';
 
 interface UseThemeResult {
-  toggleTheme: () => void;
-  theme: Theme;
+    toggleTheme: () => void;
+    theme?: Theme;
 }
 
 export function useTheme(): UseThemeResult {
     const { setTheme, theme } = useContext(ThemeContext);
 
     const toggleTheme = () => {
         const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
-        setTheme(newTheme);
+        setTheme?.(newTheme);
         localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
     };
 

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

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { routeConfig } from 'shared/config/routeConfig/routeConfig';
-import Layout from 'widgets/Layout/ui/Layout';
+import { Layout } from 'widgets/Layout';
 import { PageLoader } from 'widgets/PageLoader';
 
 const AppRouter = () => (
@@ -18,11 +18,7 @@ const AppRouter = () => (
                 <Route
                     key={path}
                     path={path}
-                    element={(
-                        <Suspense fallback={<PageLoader />}>
-                            {element}
-                        </Suspense>
-                    )}
+                    element={<Suspense fallback={<PageLoader />}>{element}</Suspense>}
                 />
             ))}
         </Route>

src/app/styles/themes/dark.scss

@@ -1,8 +1,8 @@
 .app.dark {
     --bg-color: #090949;
     --inverted-bg-color: #e8e8ea;
-    --primary-color: #049604;
-    --secondary-color: #04ff04;
-    --inverted-primary-color: #0232c2;
-    --inverted-secondary-color: #0452ff;
+    --primary-color:#04ff04;
+    --secondary-color: #049604;
+    --inverted-primary-color:#0452ff;
+    --inverted-secondary-color: #0232c2;
 }

src/app/styles/themes/normal.scss

@@ -1,8 +1,8 @@
 :root {
     --bg-color: #e8e8ea;
     --inverted-bg-color: #090949;
-    --primary-color: #0232c2;
-    --secondary-color: #0449e0;
-    --inverted-primary-color: #049604;
-    --inverted-secondary-color: #04ff04;
+    --primary-color: #0449e0;
+    --secondary-color:#0232c2;
+    --inverted-primary-color: #04ff04;
+    --inverted-secondary-color:#049604 ;
 }

src/app/styles/variables/global.scss

@@ -6,9 +6,11 @@
     --font-size-l: 24px;
     --font-line-l: 32px;
     --font-l: var(--font-size-l) / var(--font-line-l) var(--font-family-main);
+    --font-size-xl: 32px;
+    --font-line-xl: 40px;
+    --font-xl: var(--font-size-xl) / var(--font-line-xl) var(--font-family-main);
 
-    // sizes
-
+    /* size */
     --navbar-height: 50px;
     --sidebar-width: 300px;
     --sidebar-width-collapsed: 80px;

src/app/types/global.d.ts

@@ -3,7 +3,7 @@ declare module '*.scss' {
     [className: string]: string;
   }
   const classNames: IClassNames;
-  export = classNames;
+  export default classNames;
 }
 
 declare module '*.png';
@@ -12,7 +12,7 @@ declare module '*.jpeg';
 declare module '*.svg' {
   import React from 'react';
 
-  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
+  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
   export default SVG;
 }
 

src/index.tsx

@@ -7,7 +7,7 @@ import App from './app/App';
 
 import './shared/config/i18n/i18n';
 
-const root = createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
     <BrowserRouter>

src/shared/lib/classNames/index.ts

@@ -1,17 +1,17 @@
 type classNamesProps = Array<
-    null |
-    undefined |
-    string |
-    Record<string, boolean | string>
->
+    null | undefined | string | Record<string, boolean | string | null | undefined>
+>;
 
 export function classNames(...args: classNamesProps): string {
-    return args.filter((item) => item).flatMap((arg) => {
-        if (typeof arg === 'string') return arg;
+    return args
+        .filter((item) => item)
+        .flatMap((arg) => {
+            if (typeof arg === 'string') return arg;
 
-        if (typeof arg === 'object') {
-            return Object.keys(arg).filter((key) => arg[key]);
-        }
-        return '';
-    }).join(' ');
+            if (arg && typeof arg === 'object') {
+                return Object.keys(arg).filter((key) => arg[key]);
+            }
+            return '';
+        })
+        .join(' ');
 }

src/shared/lib/tests/componentRender/index.tsx

@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'shared/config/i18n/i18ForTests';
+
+interface OptionsRouter {
+    router?: string;
+}
+
+function componentRender(Component: ReactNode, options: OptionsRouter = {}) {
+    const { router = '/' } = options;
+
+    return render(
+        <MemoryRouter initialEntries={[router]}>
+            <I18nextProvider i18n={i18n}>{Component}</I18nextProvider>
+        </MemoryRouter>,
+    );
+}
+
+export default componentRender;

src/shared/ui/AppLink/AppLink.module.scss

@@ -0,0 +1,11 @@
+.link {
+    color: var(--primary-color);
+}
+
+.primary {
+    color: var(--primary-color);
+}
+
+.secondary {
+    color: var(--inverted-primary-color);
+}

src/shared/ui/AppLink/AppLink.tsx

@@ -1,15 +1,13 @@
 import { Link } from 'react-router-dom';
 import { classNames } from 'shared/lib/classNames';
 
-import { AppLinkProps } from './AppLink.props';
+import styles from './AppLink.module.scss';
 
-const AppLink = ({
-    className,
-    // theme = AppLinkTheme.Primary,
-    ...props
-}: AppLinkProps) => (
+import { AppLinkTheme, type AppLinkProps } from './AppLink.props';
+
+const AppLink = ({ className, theme = AppLinkTheme.Primary, ...props }: AppLinkProps) => (
     <Link
-        className={classNames(className)}
+        className={classNames(styles.link, styles[theme], className)}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
     />

src/shared/ui/Button/Button.enums.ts

@@ -0,0 +1,12 @@
+export enum ButtonTheme {
+    Clear = 'clear',
+    Outline = 'outline',
+    Background = 'background',
+    BackgroundInvertend = 'backgroundInvertend'
+}
+
+export enum ButtonSize {
+    Small = 'small',
+    Middle = 'medium',
+    Large = 'large',
+}