From c56a8c03f36f53c6cbdfbc08e8aadb06960b4220 Mon Sep 17 00:00:00 2001 From: "Leon.kov" Date: Thu, 25 Apr 2024 16:14:54 +0300 Subject: [PATCH] feat: redesign rating card, comments, skeletons --- extractedTranslations/en/translation.json | 1 + json-server/db.json | 8 ++- .../ui/ArticleDetails/ArticleDetails.tsx | 4 +- .../ui/CommentCard/CommentCard.module.scss | 1 - .../Comment/ui/CommentCard/CommentCard.tsx | 56 +++++++++---------- .../Comment/ui/CommentList/CommentList.tsx | 2 +- src/entities/Rating/ui/RatingCard.tsx | 22 +++----- .../AddCommentForm/AddCommentForm.module.scss | 8 --- .../ui/AddCommentForm/AddCommentForm.tsx | 49 ++++++++-------- .../ui/ArticleRating/ArticleRating.tsx | 2 +- .../ArticleRecommendationsList.tsx | 4 +- .../ArticleDetailsComments.tsx | 4 +- .../ArticlesDetailsPage.tsx | 1 - .../StarRating/StarRating.module.scss | 15 ----- .../StarRating/StarRating.module.scss | 21 +++++++ .../StarRating/StarRating.stories.tsx | 0 .../StarRating/StarRating.tsx | 8 +-- .../StarRating/index.ts | 0 18 files changed, 101 insertions(+), 105 deletions(-) delete mode 100644 src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss delete mode 100644 src/shared/ui/deprecated/StarRating/StarRating.module.scss create mode 100644 src/shared/ui/redesigned/StarRating/StarRating.module.scss rename src/shared/ui/{deprecated => redesigned}/StarRating/StarRating.stories.tsx (100%) rename src/shared/ui/{deprecated => redesigned}/StarRating/StarRating.tsx (92%) rename src/shared/ui/{deprecated => redesigned}/StarRating/index.ts (100%) diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json index 44fecf5..1d5b748 100644 --- 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 index 7b1bb01..692e982 100644 --- 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 index c262e83..5bda948 100644 --- 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 = ( - <> + { - + ); } else if (error) { content = ( diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.module.scss b/src/entities/Comment/ui/CommentCard/CommentCard.module.scss index 751864f..7fb16d6 100644 --- 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 index d7bb823..74ee38d 100644 --- 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 ( - + - {comment.user.avatar && ( - - )} - - - - + + + {comment.user.avatar && ( + + )} + + + + + + ); }, ); diff --git a/src/entities/Comment/ui/CommentList/CommentList.tsx b/src/entities/Comment/ui/CommentList/CommentList.tsx index 219ffd4..ac8a256 100644 --- 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 index b86dc7d..7a2eabe 100644 --- 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) => { @@ -110,11 +110,7 @@ export const RatingCard = memo((props: RatingCardProps) => { {modalContent} - diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss deleted file mode 100644 index b3a4576..0000000 --- a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.AddCommentForm { - border: 1px solid var(--primary-color); - padding: 20px; -} - -.input { - flex-grow: 1; -} diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx index 253462f..6c7841c 100644 --- 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 ( - - - - + + + + ); }); diff --git a/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx b/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx index 7c55bcd..10f1d5a 100644 --- 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/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx index 331e6e2..065e11f 100644 --- a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx +++ b/src/features/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])} > - + ); diff --git a/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx b/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx index 23e2400..1550b69 100644 --- 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 ( - + }> diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx index 0b8b811..3aaf7b0 100644 --- 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 deleted file mode 100644 index ad9217d..0000000 --- a/src/shared/ui/deprecated/StarRating/StarRating.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.StarIcon { - cursor: pointer; -} - -.normal { - fill: none; -} - -.hovered { - fill: var(--primary-color); -} - -.isSelected { - cursor: auto; -} diff --git a/src/shared/ui/redesigned/StarRating/StarRating.module.scss b/src/shared/ui/redesigned/StarRating/StarRating.module.scss new file mode 100644 index 0000000..141cbc9 --- /dev/null +++ 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/src/shared/ui/deprecated/StarRating/StarRating.stories.tsx b/src/shared/ui/redesigned/StarRating/StarRating.stories.tsx similarity index 100% rename from src/shared/ui/deprecated/StarRating/StarRating.stories.tsx rename to src/shared/ui/redesigned/StarRating/StarRating.stories.tsx diff --git a/src/shared/ui/deprecated/StarRating/StarRating.tsx b/src/shared/ui/redesigned/StarRating/StarRating.tsx similarity index 92% rename from src/shared/ui/deprecated/StarRating/StarRating.tsx rename to src/shared/ui/redesigned/StarRating/StarRating.tsx index 6ec7671..62fb572 100644 --- a/src/shared/ui/deprecated/StarRating/StarRating.tsx +++ b/src/shared/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 (
{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} /> ))}
diff --git a/src/shared/ui/deprecated/StarRating/index.ts b/src/shared/ui/redesigned/StarRating/index.ts similarity index 100% rename from src/shared/ui/deprecated/StarRating/index.ts rename to src/shared/ui/redesigned/StarRating/index.ts