diff --git a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Error.png b/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Error.png deleted file mode 100644 index d69c3484..00000000 Binary files a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Error.png and /dev/null differ diff --git a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Loading.png b/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Loading.png deleted file mode 100644 index 4145795e..00000000 Binary files a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Loading.png and /dev/null differ diff --git a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Normal.png b/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Normal.png deleted file mode 100644 index 5b670f98..00000000 Binary files a/.loki/reference/chrome_iphone7_entities_Article_ArticleDetails_Normal.png and /dev/null differ diff --git a/.loki/reference/chrome_iphone7_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png b/.loki/reference/chrome_iphone7_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png index 0c8aac1a..2219926c 100644 Binary files a/.loki/reference/chrome_iphone7_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png and b/.loki/reference/chrome_iphone7_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Disabled.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Disabled.png index 790e6c8b..6af611a8 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Disabled.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Disabled.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline.png index bc762052..c3e6d99b 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Dark.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Dark.png index 83d1e460..24953371 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Dark.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Dark.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_L.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_L.png index 9310e9f0..4c80a978 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_L.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_L.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_M.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_M.png index bc762052..c3e6d99b 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_M.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_M.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_XL.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_XL.png index 27518a15..83068644 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_XL.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Outline_Size_XL.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Primary.png b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Primary.png index bc762052..c3e6d99b 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Button_Primary.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Button_Primary.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Dropdown_Normal.png b/.loki/reference/chrome_iphone7_shared_redesigned_Dropdown_Normal.png index 011a252d..56cd58fc 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Dropdown_Normal.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Dropdown_Normal.png differ diff --git a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Error.png b/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Error.png deleted file mode 100644 index 967052a4..00000000 Binary files a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Error.png and /dev/null differ diff --git a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Loading.png b/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Loading.png deleted file mode 100644 index a1adb65b..00000000 Binary files a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Loading.png and /dev/null differ diff --git a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Normal.png b/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Normal.png deleted file mode 100644 index 30b7c5be..00000000 Binary files a/.loki/reference/chrome_laptop_entities_Article_ArticleDetails_Normal.png and /dev/null differ diff --git a/.loki/reference/chrome_laptop_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png b/.loki/reference/chrome_laptop_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png index e53c867b..c5e67a67 100644 Binary files a/.loki/reference/chrome_laptop_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png and b/.loki/reference/chrome_laptop_entities_Article_redesigned_ArticleListItemRedesigned_Normal_Big.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Disabled.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Disabled.png index 9a772c49..cc40443a 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Disabled.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Disabled.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline.png index e9f65ed8..5a012c92 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Dark.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Dark.png index e853dac2..5ef5d9c8 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Dark.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Dark.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_L.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_L.png index 7b63379d..38e29433 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_L.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_L.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_M.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_M.png index e9f65ed8..5a012c92 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_M.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_M.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_XL.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_XL.png index 4fe2e320..dc92f8a1 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_XL.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Outline_Size_XL.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Button_Primary.png b/.loki/reference/chrome_laptop_shared_redesigned_Button_Primary.png index e9f65ed8..5a012c92 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Button_Primary.png and b/.loki/reference/chrome_laptop_shared_redesigned_Button_Primary.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Dropdown_Normal.png b/.loki/reference/chrome_laptop_shared_redesigned_Dropdown_Normal.png index ec9c0c2b..100db7b8 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Dropdown_Normal.png and b/.loki/reference/chrome_laptop_shared_redesigned_Dropdown_Normal.png differ diff --git a/json-server/db.json b/json-server/db.json index d8362d89..0b994b1f 100644 --- a/json-server/db.json +++ b/json-server/db.json @@ -889,6 +889,13 @@ "userId": "1", "rate": 1, "id": "NAhM_Ux" + }, + { + "articleId": "6", + "userId": "1", + "rate": 5, + "feedback": "класс!", + "id": "50IdxCA" } ], "profile-ratings": [ diff --git a/src/entities/Comment/ui/CommentItem/CommentItem.tsx b/src/entities/Comment/ui/CommentItem/CommentItem.tsx index fdddfb12..d483aa33 100644 --- a/src/entities/Comment/ui/CommentItem/CommentItem.tsx +++ b/src/entities/Comment/ui/CommentItem/CommentItem.tsx @@ -2,12 +2,18 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { classNames } from '@/shared/lib/classNames'; -import { Avatar } from '@/shared/ui/deprecated/Avatar'; -import { Text } from '@/shared/ui/deprecated/Text'; -import { Skeleton } from '@/shared/ui/deprecated/Skeleton'; -import { AppLink } from '@/shared/ui/deprecated/AppLink'; -import { VStack } from '@/shared/ui/redesigned/Stack'; +import { Avatar as AvatarDeprecated } from '@/shared/ui/deprecated/Avatar'; +import { Avatar } from '@/shared/ui/redesigned/Avatar'; +import { Text as TextDeprecated } from '@/shared/ui/deprecated/Text'; +import { Text } from '@/shared/ui/redesigned/Text'; +import { Skeleton as SkeletonDeprecated } from '@/shared/ui/deprecated/Skeleton'; +import { Skeleton } from '@/shared/ui/redesigned/Skeleton'; +import { AppLink as AppLinkDeprecated } from '@/shared/ui/deprecated/AppLink'; +import { AppLink } from '@/shared/ui/redesigned/AppLink'; +import { HStack, VStack } from '@/shared/ui/redesigned/Stack'; import { getRouteProfile } from '@/shared/const/router'; +import { ToggleFeatures } from '@/shared/lib/features'; +import { Card } from '@/shared/ui/redesigned/Card'; import cls from './CommentItem.module.scss'; import { Comment } from '../../model/types/comment'; @@ -25,13 +31,27 @@ export const CommentItem = memo((props: CommentItemProps) => { if (isLoading) { return ( - -
- - -
- - + +
+ + +
+ + + } + off={ + +
+ + +
+ + + } + /> ); } @@ -40,20 +60,45 @@ export const CommentItem = memo((props: CommentItemProps) => { } return ( - - - {comment.user.avatar ? ( - - ) : null} - - - - + + + + + {comment.user.avatar ? ( + + ) : null} + + + + + + + } + off={ + + + {comment.user.avatar ? ( + + ) : null} + + + + + } + /> ); }); diff --git a/src/entities/Comment/ui/CommentList/CommentList.tsx b/src/entities/Comment/ui/CommentList/CommentList.tsx index b8552109..97d6de8e 100644 --- a/src/entities/Comment/ui/CommentList/CommentList.tsx +++ b/src/entities/Comment/ui/CommentList/CommentList.tsx @@ -2,8 +2,10 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { classNames } from '@/shared/lib/classNames'; -import { Text } from '@/shared/ui/deprecated/Text'; +import { Text as TextDeprecated } from '@/shared/ui/deprecated/Text'; +import { Text } from '@/shared/ui/redesigned/Text'; import { VStack } from '@/shared/ui/redesigned/Stack'; +import { ToggleFeatures } from '@/shared/lib/features'; import { Comment } from '../../model/types/comment'; import { CommentItem } from '../CommentItem/CommentItem'; @@ -36,7 +38,11 @@ export const CommentList = memo((props: CommentListProps) => { )) ) : ( - + } + off={} + /> )} ); diff --git a/src/entities/Rating/ui/RatingCard/RatingCard.tsx b/src/entities/Rating/ui/RatingCard/RatingCard.tsx index e487340c..34d76334 100644 --- a/src/entities/Rating/ui/RatingCard/RatingCard.tsx +++ b/src/entities/Rating/ui/RatingCard/RatingCard.tsx @@ -3,14 +3,19 @@ import { useTranslation } from 'react-i18next'; import { BrowserView, MobileView } from 'react-device-detect'; import { classNames } from '@/shared/lib/classNames'; -import { Card } from '@/shared/ui/deprecated/Card'; +import { Card as CardDeprecated } from '@/shared/ui/deprecated/Card'; +import { Card } from '@/shared/ui/redesigned/Card'; import { HStack, VStack } from '@/shared/ui/redesigned/Stack'; -import { Text } from '@/shared/ui/deprecated/Text'; -import { StarRating } from '@/shared/ui/deprecated/StarRating'; +import { Text as TextDeprecated } from '@/shared/ui/deprecated/Text'; +import { Text } from '@/shared/ui/redesigned/Text'; +import { StarRating } from '@/shared/ui/redesigned/StarRating'; import { Modal } from '@/shared/ui/redesigned/Modal'; -import { Input } from '@/shared/ui/deprecated/Input'; -import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button'; +import { Input as InputDeprecated } from '@/shared/ui/deprecated/Input'; +import { Input } from '@/shared/ui/redesigned/Input'; +import { Button as ButtonDeprecated, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button'; +import { Button } from '@/shared/ui/redesigned/Button'; import { Drawer } from '@/shared/ui/redesigned/Drawer'; +import { ToggleFeatures } from '@/shared/lib/features'; interface RatingCardProps { className?: string; @@ -54,60 +59,131 @@ export const RatingCard = memo((props: RatingCardProps) => { }, [onCancel, starsCount]); const modalContent = ( - <> - - - - + + + + + + } + off={ + <> + + + + + } + /> ); return ( - - - - - - - - - - - {modalContent} - - - - - - + + + + + - - - - - - - {modalContent} - + + + + {modalContent} + + + + + + + + + + + + + + {modalContent} + + + + + + + } + off={ + + + + + - - - + + + + + {modalContent} + + + + {t('Отправить')} + + + + {t('Отмена')} + + + + + + + + + + {modalContent} + + + {t('Отправить')} + + + + + + } + /> ); }); diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx index b93265fb..41577184 100644 --- a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx +++ b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx @@ -3,14 +3,18 @@ import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { classNames } from '@/shared/lib/classNames'; -import { Input } from '@/shared/ui/deprecated/Input'; -import { Button } from '@/shared/ui/deprecated/Button'; +import { Input as InputDeprecated } from '@/shared/ui/deprecated/Input'; +import { Input } from '@/shared/ui/redesigned/Input'; +import { Button as ButtonDeprecated } from '@/shared/ui/deprecated/Button'; +import { Button } from '@/shared/ui/redesigned/Button'; import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'; import { DynamicModuleLoader, ReducersList, } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader'; import { HStack } from '@/shared/ui/redesigned/Stack'; +import { ToggleFeatures } from '@/shared/lib/features'; +import { Card } from '@/shared/ui/redesigned/Card'; import { addCommentFormActions, @@ -50,23 +54,51 @@ export const AddCommentForm = memo((props: AddCommentFormProps) => { return ( - - + + + - - + + + + } + off={ + + + + + {t('Отправить')} + + + } + /> ); }); diff --git a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx index 3fd6761d..7ef2d37b 100644 --- a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx +++ b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx @@ -2,9 +2,11 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { classNames } from '@/shared/lib/classNames'; -import { Text, TextSize } from '@/shared/ui/deprecated/Text'; +import { Text as TextDeprecated, TextSize } from '@/shared/ui/deprecated/Text'; +import { Text } from '@/shared/ui/redesigned/Text'; import { ArticleList } from '@/entities/Article'; import { VStack } from '@/shared/ui/redesigned/Stack'; +import { ToggleFeatures } from '@/shared/lib/features'; import { useArticleRecommendationsList } from '../../api/articleRecommendationsApi'; @@ -27,7 +29,11 @@ export const ArticleRecommendationsList = memo((props: ArticleRecommendationsLis gap="8" className={classNames('', {}, [className])} > - + } + off={} + /> diff --git a/src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx b/src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx index a43a6bc8..e26daa89 100644 --- a/src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx +++ b/src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx @@ -3,13 +3,15 @@ import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { classNames } from '@/shared/lib/classNames'; -import { Text, TextSize } from '@/shared/ui/deprecated/Text'; +import { Text as TextDeprecated, TextSize } from '@/shared/ui/deprecated/Text'; +import { Text } from '@/shared/ui/redesigned/Text'; import { AddCommentForm } from '@/features/addCommentForm'; import { CommentList } from '@/entities/Comment'; import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'; import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'; import { VStack } from '@/shared/ui/redesigned/Stack'; import { Loader } from '@/shared/ui/deprecated/Loader'; +import { ToggleFeatures } from '@/shared/lib/features'; import { fetchCommentsByArticleId } from '../../model/services/fetchCommentsByArticleId/fetchCommentsByArticleId'; import { getArticleComments } from '../../model/slices/articleDetailsCommentsSlice'; @@ -41,7 +43,11 @@ export const ArticleDetailsComments = memo((props: ArticleDetailsCommentsProps) return ( - + } + off={} + /> }> diff --git a/src/shared/ui/deprecated/StarRating/ui/StarRating.tsx b/src/shared/ui/deprecated/StarRating/ui/StarRating.tsx deleted file mode 100644 index 0b87b923..00000000 --- a/src/shared/ui/deprecated/StarRating/ui/StarRating.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { memo, useState } from 'react'; - -import { classNames } from '@/shared/lib/classNames'; -import StarIcon from '@/shared/assets/icons/star-20-20.svg'; - -import cls from './StarRating.module.scss'; -import { Icon } from '../../Icon'; - -interface StarRatingProps { - className?: string; - onSelect?: (starsCount: number) => void; - size?: number; - selectedStars?: number; -} - -const stars = [1, 2, 3, 4, 5]; - -/** - * @deprecated - */ -export const StarRating = memo((props: StarRatingProps) => { - const { className, onSelect, size = 30, selectedStars = 0 } = props; - - const [currentStarsCount, setCurrentStarsCount] = useState(selectedStars); - const [isSelected, setIsSelected] = useState(Boolean(selectedStars)); - - const onHover = (starsCount: number) => () => { - if (!isSelected) { - setCurrentStarsCount(starsCount); - } - }; - - const onLeave = () => { - if (!isSelected) { - setCurrentStarsCount(0); - } - }; - - const onClick = (starsCount: number) => () => { - if (!isSelected) { - onSelect?.(starsCount); - setCurrentStarsCount(starsCount); - setIsSelected(true); - } - }; - - return ( -
- {stars.map((starNumber) => ( - = starNumber, - [cls.selected]: isSelected, - }, - [cls.normal], - )} - width={size} - height={size} - onMouseLeave={onLeave} - onMouseEnter={onHover(starNumber)} - onClick={onClick(starNumber)} - data-testid={`StarRating.${starNumber}`} - data-selected={currentStarsCount >= starNumber} - /> - ))} -
- ); -}); - -StarRating.displayName = 'StarRating'; diff --git a/src/shared/ui/redesigned/Button/ui/Button.module.scss b/src/shared/ui/redesigned/Button/ui/Button.module.scss index 928de43c..7045e4df 100644 --- a/src/shared/ui/redesigned/Button/ui/Button.module.scss +++ b/src/shared/ui/redesigned/Button/ui/Button.module.scss @@ -47,12 +47,12 @@ .outline { background: none; - border: 1px solid var(--icon-redesigned); + border: 2px solid var(--icon-redesigned); outline: none; border-radius: 34px; &:hover { - border: 1px solid var(--accent-redesigned); + border: 2px solid var(--accent-redesigned); } } 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 diff --git a/src/shared/ui/deprecated/StarRating/ui/StarRating.module.scss b/src/shared/ui/redesigned/StarRating/ui/StarRating.module.scss similarity index 70% rename from src/shared/ui/deprecated/StarRating/ui/StarRating.module.scss rename to src/shared/ui/redesigned/StarRating/ui/StarRating.module.scss index ca5419df..bbdd7c23 100644 --- a/src/shared/ui/deprecated/StarRating/ui/StarRating.module.scss +++ b/src/shared/ui/redesigned/StarRating/ui/StarRating.module.scss @@ -13,3 +13,7 @@ .hovered { fill: var(--primary-color); } + +.hoveredRedesigned { + fill: var(--icon-redesigned); +} diff --git a/src/shared/ui/deprecated/StarRating/ui/StarRating.stories.tsx b/src/shared/ui/redesigned/StarRating/ui/StarRating.stories.tsx similarity index 100% rename from src/shared/ui/deprecated/StarRating/ui/StarRating.stories.tsx rename to src/shared/ui/redesigned/StarRating/ui/StarRating.stories.tsx diff --git a/src/shared/ui/redesigned/StarRating/ui/StarRating.tsx b/src/shared/ui/redesigned/StarRating/ui/StarRating.tsx new file mode 100644 index 00000000..a4cf050f --- /dev/null +++ b/src/shared/ui/redesigned/StarRating/ui/StarRating.tsx @@ -0,0 +1,100 @@ +import { memo, useState } from 'react'; + +import { classNames } from '@/shared/lib/classNames'; +import StarIcon from '@/shared/assets/icons/star-20-20.svg'; +import { ToggleFeatures } from '@/shared/lib/features'; + +import cls from './StarRating.module.scss'; +import { Icon as IconDeprecated } from '../../../deprecated/Icon'; +import { Icon } from '../../Icon'; + +interface StarRatingProps { + className?: string; + onSelect?: (starsCount: number) => void; + size?: number; + selectedStars?: number; +} + +const stars = [1, 2, 3, 4, 5]; + +export const StarRating = memo((props: StarRatingProps) => { + const { className, onSelect, size = 30, selectedStars = 0 } = props; + + const [currentStarsCount, setCurrentStarsCount] = useState(selectedStars); + const [isSelected, setIsSelected] = useState(Boolean(selectedStars)); + + const onHover = (starsCount: number) => () => { + if (!isSelected) { + setCurrentStarsCount(starsCount); + } + }; + + const onLeave = () => { + if (!isSelected) { + setCurrentStarsCount(0); + } + }; + + const onClick = (starsCount: number) => () => { + if (!isSelected) { + onSelect?.(starsCount); + setCurrentStarsCount(starsCount); + setIsSelected(true); + } + }; + + return ( +
+ {stars.map((starNumber) => ( + = starNumber, + [cls.selected]: isSelected, + }, + [cls.normal], + )} + width={size} + height={size} + onMouseLeave={onLeave} + onMouseEnter={onHover(starNumber)} + onClick={onClick(starNumber)} + data-testid={`StarRating.${starNumber}`} + data-selected={currentStarsCount >= starNumber} + /> + } + off={ + = starNumber, + [cls.selected]: isSelected, + }, + [cls.normal], + )} + width={size} + height={size} + onMouseLeave={onLeave} + onMouseEnter={onHover(starNumber)} + onClick={onClick(starNumber)} + data-testid={`StarRating.${starNumber}`} + data-selected={currentStarsCount >= starNumber} + /> + } + /> + ))} +
+ ); +}); + +StarRating.displayName = 'StarRating';