feat: redesign rating and comments

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": [

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 (
-      <VStack gap="8" max className={classNames(cls.commentItem, {}, [className, cls.loading])}>
-        <div className={cls.header}>
-          <Skeleton width={30} height={30} borderRadius="50%" />
-          <Skeleton width={100} height={16} className={cls.username} />
-        </div>
-        <Skeleton width="100%" height={50} className={cls.text} />
-      </VStack>
+      <ToggleFeatures
+        feature="isAppRedesigned"
+        on={
+          <VStack gap="8" max className={classNames(cls.commentItem, {}, [className, cls.loading])}>
+            <div className={cls.header}>
+              <Skeleton width={30} height={30} borderRadius="50%" />
+              <Skeleton width={100} height={16} className={cls.username} />
+            </div>
+            <Skeleton width="100%" height={50} className={cls.text} />
+          </VStack>
+        }
+        off={
+          <VStack gap="8" max className={classNames(cls.commentItem, {}, [className, cls.loading])}>
+            <div className={cls.header}>
+              <SkeletonDeprecated width={30} height={30} borderRadius="50%" />
+              <SkeletonDeprecated width={100} height={16} className={cls.username} />
+            </div>
+            <SkeletonDeprecated width="100%" height={50} className={cls.text} />
+          </VStack>
+        }
+      />
     );
   }
 
@@ -40,20 +60,45 @@ export const CommentItem = memo((props: CommentItemProps) => {
   }
 
   return (
-    <VStack
-      data-testid="CommentItem.Content"
-      gap="8"
-      max
-      className={classNames(cls.commentItem, {}, [className])}
-    >
-      <AppLink className={cls.header} to={getRouteProfile(comment.user.id)}>
-        {comment.user.avatar ? (
-          <Avatar size={30} src={comment.user.avatar} alt={t('Аватар')} />
-        ) : null}
-        <Text title={comment.user.username} className={cls.username} />
-      </AppLink>
-      <Text text={comment.text} />
-    </VStack>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <Card padding="24" borderRadius="round" fullwidth>
+          <VStack
+            data-testid="CommentItem.Content"
+            gap="8"
+            max
+            className={classNames(cls.commentItemRedesigned, {}, [className])}
+          >
+            <AppLink to={getRouteProfile(comment.user.id)}>
+              <HStack gap="8">
+                {comment.user.avatar ? (
+                  <Avatar size={30} src={comment.user.avatar} alt={t('Аватар')} />
+                ) : null}
+                <Text text={comment.user.username} bold />
+              </HStack>
+            </AppLink>
+            <Text text={comment.text} />
+          </VStack>
+        </Card>
+      }
+      off={
+        <VStack
+          data-testid="CommentItem.Content"
+          gap="8"
+          max
+          className={classNames(cls.commentItem, {}, [className])}
+        >
+          <AppLinkDeprecated className={cls.header} to={getRouteProfile(comment.user.id)}>
+            {comment.user.avatar ? (
+              <AvatarDeprecated size={30} src={comment.user.avatar} alt={t('Аватар')} />
+            ) : null}
+            <TextDeprecated title={comment.user.username} className={cls.username} />
+          </AppLinkDeprecated>
+          <TextDeprecated text={comment.text} />
+        </VStack>
+      }
+    />
   );
 });
 

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) => {
           <CommentItem key={comment.id} comment={comment} isLoading={isLoading} />
         ))
       ) : (
-        <Text text={t('Комментарии отсутствуют')} />
+        <ToggleFeatures
+          feature="isAppRedesigned"
+          on={<Text text={t('Комментарии отсутствуют')} />}
+          off={<TextDeprecated text={t('Комментарии отсутствуют')} />}
+        />
       )}
     </VStack>
   );

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 = (
-    <>
-      <Text title={feedbackTitle} />
-
-      <Input
-        data-testid="RatingCard.Input"
-        value={feedback}
-        onChange={setFeedback}
-        placeholder={t('Ваш отзыв')}
-      />
-    </>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <>
+          <Text title={feedbackTitle} />
+
+          <Input
+            data-testid="RatingCard.Input"
+            value={feedback}
+            onChange={setFeedback}
+            placeholder={t('Ваш отзыв')}
+          />
+        </>
+      }
+      off={
+        <>
+          <TextDeprecated title={feedbackTitle} />
+
+          <InputDeprecated
+            data-testid="RatingCard.Input"
+            value={feedback}
+            onChange={setFeedback}
+            placeholder={t('Ваш отзыв')}
+          />
+        </>
+      }
+    />
   );
 
   return (
-    <Card data-testid="RatingCard" className={classNames('', {}, [className])} fullwidth>
-      <VStack align="center" gap="8" max>
-        <Text title={starsCount ? t('Спасибо за оценку!') : title} />
-
-        <StarRating size={40} onSelect={onSelectStars} selectedStars={starsCount} />
-      </VStack>
-
-      <BrowserView>
-        <Modal isOpen={isModalOpen} lazy onClose={cancelHandler}>
-          <VStack gap="32" max>
-            {modalContent}
-
-            <HStack gap="16" max justify="end">
-              <Button onClick={acceptHandler} data-testid="RatingCard.Send">
-                {t('Отправить')}
-              </Button>
-
-              <Button
-                data-testid="RatingCard.Cancel"
-                theme={ButtonTheme.OUTLINE_RED}
-                onClick={cancelHandler}
-              >
-                {t('Отмена')}
-              </Button>
-            </HStack>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <Card
+          data-testid="RatingCard"
+          className={classNames('', {}, [className])}
+          fullwidth
+          borderRadius="round"
+          padding="24"
+        >
+          <VStack align="center" gap="8" max>
+            <Text title={starsCount ? t('Спасибо за оценку!') : title} />
+
+            <StarRating size={40} onSelect={onSelectStars} selectedStars={starsCount} />
           </VStack>
-        </Modal>
-      </BrowserView>
-
-      <MobileView>
-        <Drawer isOpen={isModalOpen} lazy onClose={cancelHandler}>
-          <VStack gap="32" max>
-            {modalContent}
 
-            <Button onClick={acceptHandler} size={ButtonSize.L} fullWidth>
-              {t('Отправить')}
-            </Button>
+          <BrowserView>
+            <Modal isOpen={isModalOpen} lazy onClose={cancelHandler}>
+              <VStack gap="32" max>
+                {modalContent}
+
+                <HStack gap="16" max justify="end">
+                  <Button onClick={acceptHandler} data-testid="RatingCard.Send">
+                    {t('Отправить')}
+                  </Button>
+
+                  <Button data-testid="RatingCard.Cancel" variant="outline" onClick={cancelHandler}>
+                    {t('Отмена')}
+                  </Button>
+                </HStack>
+              </VStack>
+            </Modal>
+          </BrowserView>
+
+          <MobileView>
+            <Drawer isOpen={isModalOpen} lazy onClose={cancelHandler}>
+              <VStack gap="32" max>
+                {modalContent}
+
+                <Button onClick={acceptHandler} size="l" fullWidth>
+                  {t('Отправить')}
+                </Button>
+              </VStack>
+            </Drawer>
+          </MobileView>
+        </Card>
+      }
+      off={
+        <CardDeprecated
+          data-testid="RatingCard"
+          className={classNames('', {}, [className])}
+          fullwidth
+        >
+          <VStack align="center" gap="8" max>
+            <TextDeprecated title={starsCount ? t('Спасибо за оценку!') : title} />
+
+            <StarRating size={40} onSelect={onSelectStars} selectedStars={starsCount} />
           </VStack>
-        </Drawer>
-      </MobileView>
-    </Card>
+
+          <BrowserView>
+            <Modal isOpen={isModalOpen} lazy onClose={cancelHandler}>
+              <VStack gap="32" max>
+                {modalContent}
+
+                <HStack gap="16" max justify="end">
+                  <ButtonDeprecated onClick={acceptHandler} data-testid="RatingCard.Send">
+                    {t('Отправить')}
+                  </ButtonDeprecated>
+
+                  <ButtonDeprecated
+                    data-testid="RatingCard.Cancel"
+                    theme={ButtonTheme.OUTLINE_RED}
+                    onClick={cancelHandler}
+                  >
+                    {t('Отмена')}
+                  </ButtonDeprecated>
+                </HStack>
+              </VStack>
+            </Modal>
+          </BrowserView>
+
+          <MobileView>
+            <Drawer isOpen={isModalOpen} lazy onClose={cancelHandler}>
+              <VStack gap="32" max>
+                {modalContent}
+
+                <ButtonDeprecated onClick={acceptHandler} size={ButtonSize.L} fullWidth>
+                  {t('Отправить')}
+                </ButtonDeprecated>
+              </VStack>
+            </Drawer>
+          </MobileView>
+        </CardDeprecated>
+      }
+    />
   );
 });