100
200
diff --git a/src/app/providers/ThemeProvider/lib/useThemeRelyOnColorScheme.tsx b/src/app/providers/ThemeProvider/lib/useThemeRelyOnColorScheme.tsx
index cdd4138..41c9e31 100644
--- a/src/app/providers/ThemeProvider/lib/useThemeRelyOnColorScheme.tsx
+++ b/src/app/providers/ThemeProvider/lib/useThemeRelyOnColorScheme.tsx
@@ -18,5 +18,5 @@ export const useThemeRelyOnColorScheme = (): void => {
return () => {
OSColorSchemeDark.removeEventListener('change', onThemeChange);
};
- }, []);
+ }, [OSColorSchemeDark]);
};
diff --git a/src/app/providers/router/ui/AppRouterProvider.tsx b/src/app/providers/router/ui/AppRouterProvider.tsx
index 9349e62..8f4ac62 100644
--- a/src/app/providers/router/ui/AppRouterProvider.tsx
+++ b/src/app/providers/router/ui/AppRouterProvider.tsx
@@ -1,7 +1,7 @@
import { type FC } from 'react';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import routerConfig from '@/shared/config/routerConfig/routerConfig';
+import routerConfig from '@/shared/config/router/routerConfig';
const router = createBrowserRouter(routerConfig);
diff --git a/src/app/styles/themes/_dark.scss b/src/app/styles/themes/_dark.scss
index d10456a..30ca214 100644
--- a/src/app/styles/themes/_dark.scss
+++ b/src/app/styles/themes/_dark.scss
@@ -5,6 +5,7 @@
:root[data-theme="dark"] {
--color-bg: #{fn.pick-color($theme-colors, 'background', 'dark')};
--color-bg-accent: #{fn.pick-color($theme-colors, 'background2', 'dark')};
+ --color-backdrop: #{fn.pick-color($theme-colors, 'backdrop', 'dark')};
--color-text: #{fn.pick-color($theme-colors, 'text', 'dark')};
--color-heading: #{fn.pick-color($theme-colors, 'heading', 'dark')};
--color-primary: #{fn.pick-color($theme-colors, 'primary', 'dark')};
diff --git a/src/app/styles/themes/_light.scss b/src/app/styles/themes/_light.scss
index 301b8a6..ef97e8e 100644
--- a/src/app/styles/themes/_light.scss
+++ b/src/app/styles/themes/_light.scss
@@ -5,6 +5,7 @@
:root[data-theme="light"] {
--color-bg: #{fn.pick-color($theme-colors, 'background')};
--color-bg-accent: #{fn.pick-color($theme-colors, 'background2')};
+ --color-backdrop: #{fn.pick-color($theme-colors, 'backdrop')};
--color-text: #{fn.pick-color($theme-colors, 'text')};
--color-heading: #{fn.pick-color($theme-colors, 'heading')};
--color-primary: #{fn.pick-color($theme-colors, 'primary')};
diff --git a/src/app/styles/variables/_animations.scss b/src/app/styles/variables/_animations.scss
index 7d57fba..5d6e7ad 100644
--- a/src/app/styles/variables/_animations.scss
+++ b/src/app/styles/variables/_animations.scss
@@ -1,4 +1,19 @@
@keyframes fade-in {
0% { opacity: 0 }
100% { opacity: 1 }
+}
+
+@keyframes fade-out {
+ 0% { opacity: 1 }
+ 100% { opacity: 0 }
+}
+
+@keyframes scale-up {
+ from { transform: scale(.75) }
+ to { transform: scale(1) }
+}
+
+@keyframes scale-down {
+ from { transform: scale(1) }
+ to { transform: scale(.75) }
}
\ No newline at end of file
diff --git a/src/app/styles/variables/_theme-colors.scss b/src/app/styles/variables/_theme-colors.scss
index ab5c87a..45b38e0 100644
--- a/src/app/styles/variables/_theme-colors.scss
+++ b/src/app/styles/variables/_theme-colors.scss
@@ -108,6 +108,10 @@ $theme-colors: (
"light": $white-2,
"dark": $dark-blue,
),
+ "backdrop": (
+ "light": color.change(fn.pick-tint(p.$palette-gray, 900), $alpha: 0.8),
+ "dark": color.change(fn.pick-tint(p.$palette-gray, 900), $alpha: 0.8),
+ ),
"navbar-background": (
"light": $pale-pink,
"dark": $dark-blue
diff --git a/src/pages/HomePage/ui/HomePage.tsx b/src/pages/HomePage/ui/HomePage.tsx
index cfe5fb4..25fbe4c 100644
--- a/src/pages/HomePage/ui/HomePage.tsx
+++ b/src/pages/HomePage/ui/HomePage.tsx
@@ -1,9 +1,9 @@
import { type FC } from 'react';
-
import { useTranslation } from 'react-i18next';
const HomePage: FC = () => {
const { t } = useTranslation();
+
return (
<>
{t('home')}
diff --git a/src/shared/assets/icons/x-mark.svg b/src/shared/assets/icons/x-mark.svg
new file mode 100644
index 0000000..d9dca38
--- /dev/null
+++ b/src/shared/assets/icons/x-mark.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/shared/config/routerConfig/routerConfig.tsx b/src/shared/config/router/routerConfig.tsx
similarity index 100%
rename from src/shared/config/routerConfig/routerConfig.tsx
rename to src/shared/config/router/routerConfig.tsx
diff --git a/src/shared/ui/Modal/Modal.module.scss b/src/shared/ui/Modal/Modal.module.scss
new file mode 100644
index 0000000..1ccc8d5
--- /dev/null
+++ b/src/shared/ui/Modal/Modal.module.scss
@@ -0,0 +1,75 @@
+@use "@/app/styles/variables" as vars;
+
+.modal {
+ position: fixed;
+ inset: 0;
+ display: none;
+
+ &__backdrop {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ background-color: var(--color-backdrop);
+ transition: opacity .2s vars.$ease-3;
+ }
+
+ &__wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100vw;
+ height: 100vh;
+ }
+
+ &__content {
+ position: relative;
+
+ max-width: clamp(550px, 60vw, 700px);
+ padding: 24px 20px;
+
+ opacity: 0;
+ background-color: var(--color-bg);
+ border-radius: 4px;
+ }
+
+ &__close-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ width: 28px;
+ height: 28px;
+
+ color: #000;
+
+ background-color: #fff;
+ border-radius: 4px;
+ }
+
+ &:global(.is-open) {
+ z-index: 10;
+ display: block;
+
+ .modal__backdrop {
+ opacity: 1;
+ animation: fade-in .2s vars.$ease-3;
+ }
+
+ .modal__content {
+ opacity: 1;
+ animation: scale-up .4s vars.$ease-elastic-in-out-5, fade-in .4s vars.$ease-elastic-in-out-5;
+ }
+ }
+
+ &:global(.is-closing) {
+ .modal__backdrop {
+ opacity: 0;
+ animation: fade-out .3s vars.$ease-3;
+ }
+
+ .modal__content {
+ opacity: 0;
+ animation: scale-down .15s vars.$ease-3, fade-out .15s vars.$ease-3;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/shared/ui/Modal/Modal.stories.tsx b/src/shared/ui/Modal/Modal.stories.tsx
new file mode 100644
index 0000000..38c48a8
--- /dev/null
+++ b/src/shared/ui/Modal/Modal.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from './Modal';
+
+// 👇 This default export determines where your story goes in the story list
+const meta: Meta
= {
+ title: 'Shared/Modal',
+ component: Modal,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: 'Loasdoa sdas das daosdaosk doas dasdo kasdaskodkaso daso dkasodasod kasodkasodkaoskdoa sdo akosdk asod kasodk asodk asod kasod kaso dkaso kasodk asodj ashdu ashjhdasljdhasljdhlas jdhalsjhdlasjhdqwu hdsajhdlasjhdlajshld jasdh asjdhlasjhdasljdh saljdhlasjhdlasj hlsjakhdlajskhdlasjhda jsajldhlajshdaljsdals ljasd',
+ isOpen: true,
+ },
+};
diff --git a/src/shared/ui/Modal/Modal.test.tsx b/src/shared/ui/Modal/Modal.test.tsx
new file mode 100644
index 0000000..a91248d
--- /dev/null
+++ b/src/shared/ui/Modal/Modal.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+
+import { Modal } from './Modal';
+
+describe('', () => {
+ test('modal is open', () => {
+ render(Modal);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ expect(screen.getByTestId('modal')).toHaveClass('is-open');
+ });
+
+ // test('close modal by a close button', async () => {
+ // const closeHandler = jest.fn();
+ // render(Modal);
+ // const modal = screen.getByTestId('modal');
+ // const modalBackdrop = screen.getByTestId('modal-backdrop');
+ // const closeBtn = screen.getByTestId('modal-close-btn');
+
+ // await userEvent.click(closeBtn);
+ // expect(modal).toHaveClass('is-closing');
+ // fireEvent.animationEnd(modalBackdrop);
+ // expect(modal).not.toHaveClass('is-closing');
+ // closeHandler();
+ // expect(closeHandler).toHaveBeenCalled();
+ // // await waitForElementToBeRemoved(() => expect(screen.queryByTestId('modal')).not.toBeInTheDocument());
+ // await waitForElementToBeRemoved(() => screen.queryByTestId('modal'));
+
+ // expect(modal).not.toBeInTheDocument();
+ // });
+});
diff --git a/src/shared/ui/Modal/Modal.tsx b/src/shared/ui/Modal/Modal.tsx
new file mode 100644
index 0000000..16fd033
--- /dev/null
+++ b/src/shared/ui/Modal/Modal.tsx
@@ -0,0 +1,110 @@
+import type { ReactNode, FC } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import classes from './Modal.module.scss';
+
+import { classNames } from '@/shared/lib/helpers/classNames/classNames';
+import { Button, Portal } from '@/shared/ui';
+
+import XMarkIcon from '@/shared/assets/icons/x-mark.svg';
+
+interface IProps {
+ children: ReactNode;
+ isOpen?: boolean;
+ onClose?: () => void;
+}
+
+export const Modal: FC = (props) => {
+ const {
+ children,
+ isOpen,
+ onClose,
+ } = props;
+
+ const backdropRef = useRef(null);
+ const contentRef = useRef(null);
+ const [isClosing, setIsClosing] = useState(false);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.addEventListener('keydown', onKeyDown);
+ }
+ return () => {
+ document.removeEventListener('keydown', onKeyDown);
+ };
+ }, [isOpen]);
+
+ const onAnimationEnd = useCallback(() => {
+ if (isClosing) {
+ setIsClosing(false);
+ onClose?.();
+ }
+ }, [isClosing, onClose]);
+
+ useEffect(() => {
+ // Listener should be on a backdrop element as it always has the longest duration among other animations
+ const backdropEl = backdropRef.current;
+ backdropEl?.addEventListener('animationend', onAnimationEnd);
+ return () => {
+ backdropEl?.removeEventListener('animationend', onAnimationEnd);
+ };
+ }, [isClosing, onAnimationEnd]);
+
+ const closeHandler = () => {
+ // if (contentRef.current === e.target) {
+ // return e.stopPropagation();
+ // }
+
+ setIsClosing(true);
+ };
+
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ setIsClosing(true);
+ }
+ };
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/src/shared/ui/Portal/Portal.tsx b/src/shared/ui/Portal/Portal.tsx
new file mode 100644
index 0000000..e0af5ee
--- /dev/null
+++ b/src/shared/ui/Portal/Portal.tsx
@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface IProps {
+ children: ReactNode;
+ element?: HTMLElement;
+}
+export const Portal: FC = (props) => {
+ const { children, element = document.body } = props;
+
+ return createPortal(
+ children, element
+ );
+};
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index a6bf884..b68f345 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,3 +1,6 @@
+export { AppLink } from './AppLink/AppLink';
export { Button } from './Button/Button';
export { LangSwitcher } from './LangSwitcher/LangSwitcher';
export { Loader } from './Loader/Loader';
+export { Modal } from './Modal/Modal';
+export { Portal } from './Portal/Portal';
diff --git a/src/widgets/Navbar/ui/Navbar.module.scss b/src/widgets/Navbar/ui/Navbar.module.scss
index 775be12..ffe7af1 100644
--- a/src/widgets/Navbar/ui/Navbar.module.scss
+++ b/src/widgets/Navbar/ui/Navbar.module.scss
@@ -1,7 +1,7 @@
.navbar {
display: flex;
align-items: center;
- justify-content: flex-start;
+ justify-content: flex-end;
width: 100%;
height: var(--navbar-height);
diff --git a/src/widgets/Navbar/ui/Navbar.tsx b/src/widgets/Navbar/ui/Navbar.tsx
index 7923b3f..8a0d4ea 100644
--- a/src/widgets/Navbar/ui/Navbar.tsx
+++ b/src/widgets/Navbar/ui/Navbar.tsx
@@ -1,22 +1,40 @@
-import { type FC } from 'react';
-
-// import { useTranslation } from 'react-i18next';
+import { useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
import classes from './Navbar.module.scss';
import { classNames } from '@/shared/lib/helpers/classNames/classNames';
+import { Button, Modal } from '@/shared/ui';
interface IProps {
className?: string;
}
export const Navbar: FC = ({ className }) => {
- // const { t } = useTranslation();
+ const { t } = useTranslation();
+ const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+
+ const openModal = () => {
+ setIsAuthModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsAuthModalOpen(false);
+ };
return (
-
+
+
+ {/* eslint-disable-next-line */}
+ Loasdoa sdas das daosdaosk doas dasdo kasdaskodkaso daso dkasodasod kasodkasodkaoskdoa sdo akosdk asod kasodk asodk asod kasod kaso dkaso kasodk asodj ashdu ashjhdasljdhasljdhlas jdhalsjhdlasjhdqwu hdsajhdlasjhdlajshld jasdh asjdhlasjhdasljdh saljdhlasjhdlasj hlsjakhdlajskhdlasjhda jsajldhlajshdaljsdals ljasd
);
};
diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
index 01c433e..4f8c16a 100644
--- a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
+++ b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { classNames } from '@/shared/lib/helpers/classNames/classNames';
-import { RoutePath } from '@/shared/config/routerConfig/routerConfig';
+import { RoutePath } from '@/shared/config/router/routerConfig';
import { Button, LangSwitcher } from '@/shared/ui';
import { ThemeSwitcher } from '@/entities/ThemeSwitcher';