feat: change navbar, dropdowns, text, cards, popups

TomatoVan · Apr 19, 2024 · 6fe9a31 · 6fe9a31
1 parent 3f63cf3
commit 6fe9a31
Show file tree

Hide file tree

Showing 68 changed files with 1,077 additions and 97 deletions.
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -32,7 +32,7 @@ import {
     Text,
 } from '@/shared/ui/deprecated/Text';
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
-import { HStack, VStack } from '@/shared/ui/deprecated/Stack';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 
 interface ArticleDetailsProps {
     className?: string;

diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx b/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx
@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next';
 import { HTMLAttributeAnchorTarget, memo } from 'react';
 import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
 import { AppLink } from '@/shared/ui/deprecated/AppLink';
-import { AppImage } from '@/shared/ui/deprecated/AppImage';
 import { Text } from '@/shared/ui/deprecated/Text';
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
 import { classNames } from '@/shared/lib/classNames/classNames';
@@ -15,6 +14,7 @@ import { getRouteArticleDetails } from '@/shared/const/router';
 import { Icon } from '@/shared/ui/deprecated/Icon';
 import { Card } from '@/shared/ui/deprecated/Card';
 import { Avatar } from '@/shared/ui/deprecated/Avatar';
+import { AppImage } from '@/shared/ui/redesigned/AppImage';
 
 interface ArticleListItemProps {
     className?: string;

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { AppLink } from '@/shared/ui/deprecated/AppLink';
-import { VStack } from '@/shared/ui/deprecated/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './CommentCard.module.scss';
 import { Comment } from '../../model/types/comment';

diff --git a/src/entities/Comment/ui/CommentList/CommentList.tsx b/src/entities/Comment/ui/CommentList/CommentList.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
-import { VStack } from '@/shared/ui/deprecated/Stack';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Text } from '@/shared/ui/deprecated/Text/Text';
 import { CommentCard } from '../CommentCard/CommentCard';

diff --git a/src/entities/Notification/ui/NotificationItem/NotificationItem.tsx b/src/entities/Notification/ui/NotificationItem/NotificationItem.tsx
@@ -1,9 +1,12 @@
 import { memo } from 'react';
-import { Card, CardTheme } from '@/shared/ui/deprecated/Card';
-import { Text } from '@/shared/ui/deprecated/Text';
+import { Card as DeprecatedCard, CardTheme } from '@/shared/ui/deprecated/Card';
+import { Text as DeprecatedText } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Notification } from '../../model/types/notification';
 import cls from './NotificationItem.module.scss';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 interface NotificationItemProps {
     className?: string;
@@ -14,15 +17,34 @@ export const NotificationItem = memo((props: NotificationItemProps) => {
     const { className, notification } = props;
 
     const content = (
-        <Card
-            theme={CardTheme.OUTLINED}
-            className={classNames(cls.NotificationItem, {}, [className])}
-        >
-            <Text
-                title={notification?.title}
-                text={notification?.description}
-            />
-        </Card>
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <Card
+                    className={classNames(cls.NotificationItem, {}, [
+                        className,
+                    ])}
+                >
+                    <Text
+                        title={notification?.title}
+                        text={notification?.description}
+                    />
+                </Card>
+            }
+            off={
+                <DeprecatedCard
+                    theme={CardTheme.OUTLINED}
+                    className={classNames(cls.NotificationItem, {}, [
+                        className,
+                    ])}
+                >
+                    <DeprecatedText
+                        title={notification?.title}
+                        text={notification?.description}
+                    />
+                </DeprecatedCard>
+            }
+        />
     );
 
     if (notification?.href) {

diff --git a/src/entities/Notification/ui/NotificationList/NotificationList.tsx b/src/entities/Notification/ui/NotificationList/NotificationList.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { VStack } from '@/shared/ui/deprecated/Stack';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { NotificationItem } from '../../ui/NotificationItem/NotificationItem';

diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { Avatar } from '@/shared/ui/deprecated/Avatar';
 import { Text, TextAlign, TextTheme } from '@/shared/ui/deprecated/Text';
-import { HStack, VStack } from '@/shared/ui/deprecated/Stack';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import { Country, CountrySelect } from '../../../Country';
 import { Currency, CurrencySelect } from '../../../Currency';

diff --git a/src/entities/Rating/ui/RatingCard.tsx b/src/entities/Rating/ui/RatingCard.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback, useState } from 'react';
 import { BrowserView, MobileView } from 'react-device-detect';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { Card } from '@/shared/ui/deprecated/Card';
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { HStack, VStack } from '@/shared/ui/deprecated/Stack';
 import { Text } from '@/shared/ui/deprecated/Text';
 import { StarRating } from '@/shared/ui/deprecated/StarRating';
 import { classNames } from '@/shared/lib/classNames/classNames';

diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import { HStack } from '@/shared/ui/redesigned/Stack';
 import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { HStack } from '@/shared/ui/deprecated/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import {

diff --git a/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { Text, TextSize } from '@/shared/ui/deprecated/Text';
-import { VStack } from '@/shared/ui/deprecated/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { ArticleList } from '../../../../entities/Article';
 import { useArticleRecommendaionsList } from '../../api/ArticleRecommendationsApi';

diff --git a/src/features/avatarDropdown/ui/AvatarDropDown/AvatarDropDown.tsx b/src/features/avatarDropdown/ui/AvatarDropDown/AvatarDropDown.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Avatar } from '@/shared/ui/deprecated/Avatar';
-import { Dropdown } from '@/shared/ui/deprecated/Popups';
+import { Avatar as AvatarDeprecated } from '@/shared/ui/deprecated/Avatar';
+import { Dropdown as DropdownDeprecated } from '@/shared/ui/deprecated/Popups';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import {
     getUserAuthData,
@@ -11,6 +11,9 @@ import {
     userActions,
 } from '../../../../entities/User';
 import { getRouteAdminPanel, getRouteProfile } from '@/shared/const/router';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Dropdown } from '@/shared/ui/redesigned/Popups';
+import { Avatar } from '@/shared/ui/redesigned/Avatar';
 
 export const AvatarDropDown = memo(() => {
     const { t } = useTranslation();
@@ -31,29 +34,46 @@ export const AvatarDropDown = memo(() => {
         return null;
     }
 
+    const items = [
+        ...(isAdminPanelAvailable
+            ? [
+                  {
+                      content: t('Admin panel'),
+                      href: getRouteAdminPanel(),
+                  },
+              ]
+            : []),
+        {
+            content: t('Profile'),
+            href: getRouteProfile(authData.id),
+        },
+        {
+            content: t('Exit'),
+            onClick: onLogout,
+        },
+    ];
     return (
-        <Dropdown
-            direction="bottom left"
-            items={[
-                ...(isAdminPanelAvailable
-                    ? [
-                          {
-                              content: t('Admin panel'),
-                              href: getRouteAdminPanel(),
-                          },
-                      ]
-                    : []),
-                {
-                    content: t('Profile'),
-                    href: getRouteProfile(authData.id),
-                },
-                {
-                    content: t('Exit'),
-                    onClick: onLogout,
-                },
-            ]}
-            trigger={
-                <Avatar size={30} src={authData.avatar} fallbackInverted />
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <Dropdown
+                    direction="bottom left"
+                    items={items}
+                    trigger={<Avatar size={40} src={authData.avatar} />}
+                />
+            }
+            off={
+                <DropdownDeprecated
+                    direction="bottom left"
+                    items={items}
+                    trigger={
+                        <AvatarDeprecated
+                            size={30}
+                            src={authData.avatar}
+                            fallbackInverted
+                        />
+                    }
+                />
             }
         />
     );

diff --git a/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx b/src/features/editableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { Text, TextTheme } from '@/shared/ui/deprecated/Text';
-import { VStack } from '@/shared/ui/deprecated/Stack';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useInitialEffect } from '@/shared/lib/hook/useInitialEffect/useInitialEffect';

diff --git a/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx b/src/features/editableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import { HStack } from '@/shared/ui/redesigned/Stack';
 import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { HStack } from '@/shared/ui/deprecated/Stack';
 import { Text } from '@/shared/ui/deprecated/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';

diff --git a/src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx b/src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx
@@ -1,12 +1,19 @@
 import React, { memo, useCallback, useState } from 'react';
 import { BrowserView, MobileView } from 'react-device-detect';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Popover } from '@/shared/ui/deprecated/Popups';
-import NotificationIcon from '@/shared/assets/icons/notification-20-20.svg';
+import {
+    ButtonTheme,
+    Button as ButtonDeprecated,
+} from '@/shared/ui/deprecated/Button';
+import { Popover as PopoverDeprecated } from '@/shared/ui/deprecated/Popups';
+import NotificationIconDeprecated from '@/shared/assets/icons/notification-20-20.svg';
+import NotificationIcon from '@/shared/assets/icons/notification.svg';
 import { NotificationList } from '../../../../entities/Notification';
 import cls from './NotificationButton.module.scss';
-import { Drawer } from '@/shared/ui/deprecated/Drawer';
-import { Icon } from '@/shared/ui/deprecated/Icon';
+import { Drawer as DrawerDeprecated } from '@/shared/ui/deprecated/Drawer';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon';
+import { Icon } from '@/shared/ui/redesigned/Icon';
+import { Popover } from '@/shared/ui/redesigned/Popups';
 
 export const NotificationButton = memo(() => {
     const [isOpen, setIsOpen] = useState(false);
@@ -20,23 +27,47 @@ export const NotificationButton = memo(() => {
     }, []);
 
     const trigger = (
-        <Button onClick={onOpenDrawer} theme={ButtonTheme.CLEAR}>
-            <Icon Svg={NotificationIcon} inverted />
-        </Button>
+        <ToggleFeatures
+            feature="isAppRedesigned"
+            on={
+                <Icon Svg={NotificationIcon} clickable onClick={onOpenDrawer} />
+            }
+            off={
+                <ButtonDeprecated
+                    onClick={onOpenDrawer}
+                    theme={ButtonTheme.CLEAR}
+                >
+                    <IconDeprecated Svg={NotificationIconDeprecated} inverted />
+                </ButtonDeprecated>
+            }
+        />
     );
 
     return (
         <div>
             <BrowserView>
-                <Popover direction="bottom left" trigger={trigger}>
-                    <NotificationList className={cls.notifications} />
-                </Popover>
+                <ToggleFeatures
+                    feature="isAppRedesigned"
+                    on={
+                        <Popover direction="bottom left" trigger={trigger}>
+                            <NotificationList className={cls.notifications} />
+                        </Popover>
+                    }
+                    off={
+                        <PopoverDeprecated
+                            direction="bottom left"
+                            trigger={trigger}
+                        >
+                            <NotificationList className={cls.notifications} />
+                        </PopoverDeprecated>
+                    }
+                />
             </BrowserView>
             <MobileView>
                 {trigger}
-                <Drawer isOpen={isOpen} onClose={onCloseDrawer}>
+                <DrawerDeprecated isOpen={isOpen} onClose={onCloseDrawer}>
                     <NotificationList />
-                </Drawer>
+                </DrawerDeprecated>
             </MobileView>
         </div>
     );

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx b/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx
@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next';
 import { memo, Suspense, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { Text, TextSize } from '@/shared/ui/deprecated/Text';
-import { VStack } from '@/shared/ui/deprecated/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { AddCommentForm } from '@/features/addCommentForm';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
@@ -13,6 +12,7 @@ import { addCommentForArticle } from '../../model/services/addCommetForArticle/a
 import { getArticleComments } from '../../model/slices/ArticleDetailsCommentsSlice';
 import { getArticleCommentsIsLoading } from '../../model/selectors/comments';
 import { Loader } from '@/shared/ui/deprecated/Loader';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 
 interface ArticleDetailsCommentsProps {
     className?: string;

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { Card } from '@/shared/ui/deprecated/Card';
-import { VStack } from '@/shared/ui/deprecated/Stack';
 import {
     DynamicModuleLoader,
     ReducersList,

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPageHeader/ArticlesDetailsPageHeader.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPageHeader/ArticlesDetailsPageHeader.tsx
@@ -2,8 +2,8 @@ import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { HStack } from '@/shared/ui/redesigned/Stack';
 import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { HStack } from '@/shared/ui/deprecated/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { getCanEditArticle } from '../../model/selectors/article';
 import { getArticlesDetailsData } from '../../../../entities/Article';

diff --git a/src/pages/ProfilePage/ui/ProfilePage.tsx b/src/pages/ProfilePage/ui/ProfilePage.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { useParams } from 'react-router-dom';
-import { VStack } from '@/shared/ui/deprecated/Stack';
+import { VStack } from '@/shared/ui/redesigned/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { EditableProfileCard } from '@/features/editableProfileCard';
 import { Page } from '@/widgets/Page';

diff --git a/src/shared/layouts/MainLayout/MainLayout.module.scss b/src/shared/layouts/MainLayout/MainLayout.module.scss
@@ -2,12 +2,13 @@
     min-height: 100vh;
     display: grid;
     grid-template-areas: "sidebar content rightbar";
-    grid-template-columns: 284px 1fr 100px;
+    grid-template-columns: min-content 1fr 100px;
 }
 
 .sidebar {
     grid-area: sidebar;
     padding: 32px;
+    max-width: 284px;
 }
 
 .content {