feat: redesign rating card, comments, skeletons

TomatoVan · Apr 25, 2024 · c56a8c0 · c56a8c0
1 parent 6c86a8c
commit c56a8c0
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 105 deletions.
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -14,6 +14,7 @@
   "Choose ": "",
   "Choose country": "",
   "Choose currency": "",
+  "Close": "",
   "Comments": "",
   "Comments is loading": "",
   "Create new article": "",

diff --git a/json-server/db.json b/json-server/db.json
@@ -739,6 +739,12 @@
       "userId": "1",
       "text": "asfasf",
       "id": "SygCNYE"
+    },
+    {
+      "articleId": "1",
+      "userId": "1",
+      "text": "some commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome comment",
+      "id": "wIFyEdj"
     }
   ],
   "users": [
@@ -756,7 +762,7 @@
       },
       "avatar": "https://mobimg.b-cdn.net/v3/fetch/22/2207633df03a819cd72889249c8361a8.jpeg?w=1470&r=0.5625",
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_dark_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -47,7 +47,7 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
     let content;
     if (isLoading) {
         content = (
-            <>
+            <VStack gap="16" max>
                 <Skeleton
                     className={cls.avatar}
                     width={200}
@@ -58,7 +58,7 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
                 <Skeleton className={cls.skeleton} width={600} height={24} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
-            </>
+            </VStack>
         );
     } else if (error) {
         content = (

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.module.scss b/src/entities/Comment/ui/CommentCard/CommentCard.module.scss
@@ -1,6 +1,5 @@
 .CommentCard {
     padding: 10px;
-    border: 1px solid var(--primary-color);
 }
 
 .header {

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -1,14 +1,14 @@
-import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
-import { VStack } from '@/shared/ui/redesigned/Stack';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { AppLink } from '@/shared/ui/deprecated/AppLink';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './CommentCard.module.scss';
 import { Comment } from '../../model/types/comment';
-import { Avatar } from '@/shared/ui/deprecated/Avatar/Avatar';
-import { Text } from '@/shared/ui/deprecated/Text/Text';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton/Skeleton';
+import { Avatar } from '@/shared/ui/redesigned/Avatar';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { getRouteProfile } from '@/shared/const/router';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 interface CommentCardProps {
     className?: string;
@@ -18,8 +18,6 @@ interface CommentCardProps {
 
 export const CommentCard = memo(
     ({ className, comment, isLoading }: CommentCardProps) => {
-        const { t } = useTranslation();
-
         if (isLoading) {
             return (
                 <VStack
@@ -49,30 +47,28 @@ export const CommentCard = memo(
         }
 
         return (
-            <VStack
-                data-testid="CommentCard.Content"
-                max
-                gap="8"
-                className={classNames(cls.CommentCard, {}, [className])}
-            >
-                <AppLink
-                    to={getRouteProfile(comment.user.id)}
-                    className={cls.header}
+            <Card padding="24" max>
+                <VStack
+                    data-testid="CommentCard.Content"
+                    max
+                    gap="8"
+                    className={classNames('', {}, [className])}
                 >
-                    {comment.user.avatar && (
-                        <Avatar
-                            src={comment.user.avatar}
-                            alt={comment.user.username}
-                            size={30}
-                        />
-                    )}
-                    <Text
-                        className={cls.username}
-                        title={comment.user.username}
-                    />
-                </AppLink>
-                <Text className={cls.text} text={comment.text} />
-            </VStack>
+                    <AppLink to={getRouteProfile(comment.user.id)}>
+                        <HStack gap="16">
+                            {comment.user.avatar && (
+                                <Avatar
+                                    src={comment.user.avatar}
+                                    alt={comment.user.username}
+                                    size={30}
+                                />
+                            )}
+                            <Text text={comment.user.username} bold />
+                        </HStack>
+                    </AppLink>
+                    <Text text={comment.text} />
+                </VStack>
+            </Card>
         );
     },
 );
diff --git a/src/entities/Comment/ui/CommentList/CommentList.tsx b/src/entities/Comment/ui/CommentList/CommentList.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
 import { VStack } from '@/shared/ui/redesigned/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Text } from '@/shared/ui/deprecated/Text/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { CommentCard } from '../CommentCard/CommentCard';
 import { Comment } from '../../model/types/comment';
 

diff --git a/src/entities/Rating/ui/RatingCard.tsx b/src/entities/Rating/ui/RatingCard.tsx
@@ -2,14 +2,14 @@ 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 { Text } from '@/shared/ui/deprecated/Text';
+import { Card } from '@/shared/ui/redesigned/Card';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Input } from '@/shared/ui/deprecated/Input';
-import { StarRating } from '@/shared/ui/deprecated/StarRating';
+import { Input } from '@/shared/ui/redesigned/Input';
 import { Modal } from '@/shared/ui/redesigned/Modal';
 import { Drawer } from '@/shared/ui/redesigned/Drawer';
+import { StarRating } from '@/shared/ui/redesigned/StarRating';
 
 interface RatingCardProps {
     className?: string;
@@ -92,15 +92,15 @@ export const RatingCard = memo((props: RatingCardProps) => {
                             <Button
                                 data-testid="RatingCard.Close"
                                 onClick={cancelHandle}
-                                theme={ButtonTheme.OUTLINE_RED}
+                                variant="outline"
                             >
-                                {t('Закрыть')}
+                                {t('Close')}
                             </Button>
                             <Button
                                 data-testid="RatingCard.Send"
                                 onClick={acceptHandle}
                             >
-                                {t('Отправить')}
+                                {t('Send')}
                             </Button>
                         </HStack>
                     </VStack>
@@ -110,11 +110,7 @@ export const RatingCard = memo((props: RatingCardProps) => {
                 <Drawer isOpen={isModalOpen} lazy onClose={cancelHandle}>
                     <VStack gap="32">
                         {modalContent}
-                        <Button
-                            fullWidth
-                            onClick={acceptHandle}
-                            size={ButtonSize.L}
-                        >
+                        <Button fullWidth onClick={acceptHandle} size="l">
                             {t('Send')}
                         </Button>
                     </VStack>

diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss
diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
@@ -2,7 +2,7 @@ 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 { Button } from '@/shared/ui/redesigned/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import {
@@ -17,8 +17,8 @@ import {
     getAddCommentFormError,
     getAddCommentFormText,
 } from '../../model/selectors/addCommentFormSelectors';
-import cls from './AddCommentForm.module.scss';
-import { Input } from '@/shared/ui/deprecated/Input';
+import { Input } from '@/shared/ui/redesigned/Input';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 export interface AddCommentFormProps {
     className?: string;
@@ -51,27 +51,30 @@ const AddCommentForm = memo((props: AddCommentFormProps) => {
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <HStack
-                data-testid="AddCommentForm"
-                justify="between"
-                max
-                className={classNames(cls.AddCommentForm, {}, [className])}
-            >
-                <Input
-                    data-testid="AddCommentForm.Input"
-                    value={text}
-                    placeholder={t('Enter comment text')}
-                    className={cls.input}
-                    onChange={onCommentTextChange}
-                />
-                <Button
-                    data-testid="AddCommentForm.Button"
-                    theme={ButtonTheme.OUTLINE}
-                    onClick={onSendHandler}
+            <Card padding="24" border="round" max>
+                <HStack
+                    data-testid="AddCommentForm"
+                    justify="between"
+                    max
+                    gap="16"
+                    align="center"
+                    className={classNames('', {}, [className])}
                 >
-                    {t('Send')}
-                </Button>
-            </HStack>
+                    <Input
+                        data-testid="AddCommentForm.Input"
+                        value={text}
+                        placeholder={t('Enter comment text')}
+                        onChange={onCommentTextChange}
+                    />
+                    <Button
+                        data-testid="AddCommentForm.Button"
+                        variant="outline"
+                        onClick={onSendHandler}
+                    >
+                        {t('Send')}
+                    </Button>
+                </HStack>
+            </Card>
         </DynamicModuleLoader>
     );
 });

diff --git a/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx b/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { RatingCard } from '@/entities/Rating';
 import {
     useGetArticleRating,

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 { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { ArticleList } from '../../../../entities/Article';
 import { useArticleRecommendaionsList } from '../../api/ArticleRecommendationsApi';
@@ -31,7 +31,7 @@ export const ArticleRecommendationsList = memo(
                 max
                 className={classNames('', {}, [className])}
             >
-                <Text size={TextSize.L} title={t('Recommend')} />
+                <Text size="l" title={t('Recommend')} />
                 <ArticleList articles={articles} target="_blank" />
             </VStack>
         );

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx b/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx
@@ -1,7 +1,7 @@
 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 { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { AddCommentForm } from '@/features/addCommentForm';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
@@ -41,7 +41,7 @@ export const ArticleDetailsComments = memo(
 
         return (
             <VStack gap="16" max className={classNames('', {}, [className])}>
-                <Text size={TextSize.L} title={t('Comments')} />
+                <Text size="l" title={t('Comments')} />
                 <Suspense fallback={<Loader />}>
                     <AddCommentForm onSendComment={onSendComment} />
                 </Suspense>

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx
@@ -7,7 +7,6 @@ import {
 } from '@/shared/lib/components/DynamicModuleLoared/DynamicModuleLoared';
 import { ArticleRecommendationsList } from '@/features/articleRecommendationsList';
 import { ArticleDetailsComments } from '../../ui/ArticleDetailsComments/ArticleDetailsComments';
-
 import { articleDetailsPageReducer } from '../../model/slices';
 import { ArticleRating } from '@/features/articleRating';
 import { Page } from '@/widgets/Page';

diff --git a/src/shared/ui/deprecated/StarRating/StarRating.module.scss b/src/shared/ui/deprecated/StarRating/StarRating.module.scss
diff --git a/src/shared/ui/redesigned/StarRating/StarRating.module.scss b/src/shared/ui/redesigned/StarRating/StarRating.module.scss
@@ -0,0 +1,21 @@
+.StarRating {
+    .normal {
+        fill: none;
+    }
+
+    .hovered {
+        fill: var(--icon-redesigned);
+    }
+}
+
+.normal {
+    fill: none;
+}
+
+.starIcon {
+    cursor: pointer;
+}
+
+.selected {
+    cursor: auto;
+}
diff --git a/...recated/StarRating/StarRating.stories.tsx → ...esigned/StarRating/StarRating.stories.tsx b/...recated/StarRating/StarRating.stories.tsx → ...esigned/StarRating/StarRating.stories.tsx
diff --git a/...d/ui/deprecated/StarRating/StarRating.tsx → ...d/ui/redesigned/StarRating/StarRating.tsx b/...d/ui/deprecated/StarRating/StarRating.tsx → ...d/ui/redesigned/StarRating/StarRating.tsx
@@ -1,8 +1,8 @@
 import { memo, useState } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './StarRating.module.scss';
-import { Icon } from '../Icon/Icon';
 import StarIcon from '@/shared/assets/icons/star.svg';
+import { Icon } from '../Icon';
 
 interface StarRatingProps {
     className?: string;
@@ -38,10 +38,7 @@ export const StarRating = memo((props: StarRatingProps) => {
             setIsSelected(true);
         }
     };
-    /**
-     * Устарел, используем новые компоненты из папки redesigned
-     * @deprecated
-     */
+
     return (
         <div className={classNames(cls.StarRating, {}, [className])}>
             {stars.map((starNumber) => (
@@ -64,6 +61,7 @@ export const StarRating = memo((props: StarRatingProps) => {
                     onClick={() => onClick(starNumber)}
                     data-testid={`StarRating.${starNumber}`}
                     data-selected={currentStarsCount >= starNumber}
+                    clickable={!isSelected}
                 />
             ))}
         </div>

diff --git a/src/shared/ui/deprecated/StarRating/index.ts → src/shared/ui/redesigned/StarRating/index.ts b/src/shared/ui/deprecated/StarRating/index.ts → src/shared/ui/redesigned/StarRating/index.ts