Merge pull request #22 from IK-Akmal/feature/modal

Feature/modal

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
         ecmaVersion: 'latest',
         sourceType: 'module',
     },
-    plugins: ['react', '@typescript-eslint', 'i18next'],
+    plugins: ['react', '@typescript-eslint', 'i18next', 'react-hooks'],
     rules: {
         indent: [2, 4],
 
@@ -69,6 +69,9 @@ module.exports = {
 
         'no-shadow': 'off',
         '@typescript-eslint/no-shadow': 'error',
+
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
     },
     globals: {
         isDev: true,
@@ -87,5 +90,11 @@ module.exports = {
                 'import/no-extraneous-dependencies': 'off',
             },
         },
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                'no-undef': 'off',
+            },
+        },
     ],
 };

config/storybook/Decorators/ThemeDecorator.tsx

@@ -1,10 +1,14 @@
 import { Decorator } from '@storybook/react';
+import { useEffect } from 'react';
 
-export const ThemeDecorator:Decorator = (Story, context) => {
-    const { globals: { scheme } } = context;
-    return (
-        <div className={`app ${scheme}`}>
-            <Story />
-        </div>
-    );
+export const ThemeDecorator: Decorator = (Story, context) => {
+    const {
+        globals: { scheme },
+    } = context;
+
+    useEffect(() => {
+        document.documentElement.setAttribute('theme', scheme);
+    }, [scheme]);
+
+    return <Story />;
 };

public/locales/en/translation.json

@@ -7,5 +7,6 @@
     "loading": "Loading",
     "NotFoundPage": "Page not found",
     "errorMessage": "Something went wrong.",
-    "updatePage": "Refresh the page"
+    "updatePage": "Refresh the page",
+    "signin": "Sign in"
 }

public/locales/ru/translation.json

@@ -7,5 +7,6 @@
     "loading": "Загрузка",
     "NotFoundPage": "Страница не найдено",
     "errorMessage": "Что-то пошло не так.",
-    "updatePage": "Обновить страницу"
+    "updatePage": "Обновить страницу",
+    "signin": "Войти"
 }

src/app/App.tsx

@@ -1,18 +1,9 @@
-import { classNames } from 'shared/lib/classNames';
-
 import { AppRouter } from './providers/router';
-import { useTheme } from './providers/ThemeProvider';
-
-import './styles/index.scss';
-
-const App = () => {
-    const { theme } = useTheme();
 
-    return (
-        <div className={classNames('app', theme)}>
-            <AppRouter />
-        </div>
-    );
-};
+const App = () => (
+    <div className="app">
+        <AppRouter />
+    </div>
+);
 
 export default App;

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

@@ -1,19 +1,18 @@
 import {
-    FC, PropsWithChildren, useMemo, useState,
+    FC, PropsWithChildren, useEffect, useMemo, useState,
 } from 'react';
 
-import {
-    LOCAL_STORAGE_THEME_KEY,
-    Theme,
-    ThemeContext,
-} from '../lib/ThemeContext';
+import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from '../lib/ThemeContext';
 
-const defaultTheme = (localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme)
-?? Theme.LIGHT;
+const defaultTheme = (localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme) ?? Theme.LIGHT;
 
 export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
     const [theme, setTheme] = useState<Theme>(defaultTheme);
 
+    useEffect(() => {
+        document.documentElement.setAttribute('theme', theme);
+    }, [theme]);
+
     const defaultProps = useMemo(
         () => ({
             theme,
@@ -22,9 +21,5 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
         [theme],
     );
 
-    return (
-        <ThemeContext.Provider value={defaultProps}>
-            {children}
-        </ThemeContext.Provider>
-    );
+    return <ThemeContext.Provider value={defaultProps}>{children}</ThemeContext.Provider>;
 };

src/app/styles/index.scss

@@ -1,11 +1,14 @@
-@import "reset";
-@import "variables/global";
-@import "themes/normal";
-@import "themes/dark";
+@import 'reset';
+@import 'variables/global';
+@import 'themes/normal';
+@import 'themes/dark';
 
-.app {
+body {
     font: var(--font-m);
     background: var(--bg-color);
     color: var(--primary-color);
+}
+
+.app {
     min-height: 100vh;
 }

src/app/styles/themes/dark.scss

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

src/app/styles/variables/global.scss

@@ -14,4 +14,9 @@
     --navbar-height: 50px;
     --sidebar-width: 300px;
     --sidebar-width-collapsed: 80px;
+
+
+    // z-index
+    --modal-z-index: 10;
+    --overlay-color: rgb(0 0 0 / 60%);
 }

src/index.tsx

@@ -6,6 +6,7 @@ import { ErrorBoundary } from 'app/providers/ErrorBoundary';
 import App from './app/App';
 
 import './shared/config/i18n/i18n';
+import './app/styles/index.scss';
 
 const root = createRoot(document.getElementById('root') as HTMLElement);
 

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

@@ -1,8 +1,9 @@
 export enum ButtonTheme {
     Clear = 'clear',
+    ClearInvertend = 'clearInvertend',
     Outline = 'outline',
     Background = 'background',
-    BackgroundInvertend = 'backgroundInvertend'
+    BackgroundInvertend = 'backgroundInvertend',
 }
 
 export enum ButtonSize {

src/shared/ui/Button/Button.module.scss

@@ -8,14 +8,19 @@
     color: var(--primary-color);
 }
 
-.clear {
+.clear,
+.clearInvertend {
     padding: 0;
     margin: 0;
     border: none;
     background: none;
     outline: none;
 }
 
+.clearInvertend {
+    color: var(--inverted-primary-color);
+}
+
 .outline {
     padding: 10px 15px;
     border: 1px solid var(--primary-color);

src/shared/ui/Modal/Modal.module.scss

@@ -0,0 +1,42 @@
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--modal-z-index);
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+
+    .overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: var(--overlay-color);
+    }
+
+    .content {
+        padding: 20px;
+        border-radius: 12px;
+        background: var(--bg-color);
+        transition: 0.3s transform;
+        transform: scale(0.5);
+        max-width: 60%;
+    }
+}
+
+.opened {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: all;
+
+    .content {
+        transform: scale(1);
+    }
+}
+
+.isClosing {
+    .content {
+        transform: scale(0.2);
+    }
+}

src/shared/ui/Modal/Modal.props.ts

@@ -0,0 +1,8 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+interface ModalProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>{
+    isOpen?:boolean;
+    onClose?: VoidFunction;
+}
+
+export default ModalProps;

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

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { Button, ButtonTheme } from '../Button';
+
+import Modal from './Modal';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+type ModalType = typeof Modal;
+type Story = StoryObj<ModalType>;
+
+const meta: Meta<ModalType> = {
+    title: 'Shared/Modal',
+    component: Modal,
+};
+
+export const Default: Story = {
+    args: {
+        children: 'Description',
+    },
+    render: function Render(args) {
+        const [visible, setVisible] = useState(false);
+
+        const onChange = () => {
+            setVisible((prev) => !prev);
+        };
+
+        const buttonContent = 'Open modal';
+
+        return (
+            <>
+                <Button theme={ButtonTheme.Background} onClick={onChange}>
+                    {buttonContent}
+                </Button>
+                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                <Modal {...args} isOpen={visible} onClose={onChange} />
+            </>
+        );
+    },
+};
+
+export default meta;

src/shared/ui/Modal/Modal.tsx

@@ -0,0 +1,75 @@
+import {
+    MouseEvent, useCallback, useEffect, useRef, useState,
+} from 'react';
+import { classNames } from 'shared/lib/classNames';
+
+import { Portal } from '../Portal';
+
+import ModalProps from './Modal.props';
+import styles from './Modal.module.scss';
+
+const ANIMATION_DELAY = 200;
+
+const Modal = ({
+    isOpen, onClose, className, children, ...other
+}: ModalProps) => {
+    const [isClosing, setIsClosing] = useState<boolean>(false);
+
+    const timerRef = useRef<number>();
+
+    const closeHandler = useCallback(() => {
+        if (onClose) {
+            setIsClosing(true);
+            timerRef.current = window.setTimeout(() => {
+                onClose();
+                setIsClosing(false);
+            }, ANIMATION_DELAY);
+        }
+    }, [onClose]);
+
+    const onKeyDown = useCallback(
+        (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                closeHandler();
+            }
+        },
+        [closeHandler],
+    );
+
+    const contentHandler = (event: MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            window.addEventListener('keydown', onKeyDown);
+        }
+
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown, isOpen]);
+
+    useEffect(() => () => window.clearTimeout(timerRef.current), []);
+
+    return (
+        <Portal>
+            <section
+                className={classNames(styles.modal, className, {
+                    [styles.opened]: isOpen,
+                    [styles.isClosing]: isClosing,
+                })}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...other}
+            >
+                <div className={styles.overlay} onClick={closeHandler} aria-hidden="true">
+                    <div className={styles.content} onClick={contentHandler} aria-hidden="true">
+                        {children}
+                    </div>
+                </div>
+            </section>
+        </Portal>
+    );
+};
+
+export default Modal;

src/shared/ui/Portal/Portal.props.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface PortalProps {
+    children: ReactNode;
+    element?: HTMLElement;
+}