feture: Styling updates to paragraph and text items (M2-7458)

src/entities/activity/ui/items/ParagraphTextItem.tsx

@@ -1,5 +1,8 @@
+import { useState } from 'react';
+
 import { ParagraphTextItem as ParagraphItemType } from '../../lib';
 
+import { Theme } from '~/shared/constants';
 import { TextItem as BaseTextItem, Box } from '~/shared/ui';
 import { useCustomTranslation } from '~/shared/utils';
 
@@ -18,12 +21,11 @@ export const ParagraphTextItem = ({
 }: ParagraphItemProps) => {
   const { maxResponseLength } = item.config;
   const numCharacters = value?.length || 0;
+  const [hasError, setHasError] = useState(numCharacters > maxResponseLength);
   const { t } = useCustomTranslation();
 
   const onHandleValueChange = (value: string) => {
-    if (value.length > maxResponseLength) {
-      return;
-    }
+    setHasError(value.length > maxResponseLength);
 
     if (value.length === 0) {
       return onValueChange([]);
@@ -39,14 +41,14 @@ export const ParagraphTextItem = ({
         onValueChange={onHandleValueChange}
         disabled={isDisabled}
         isMultiline={true}
-        maxCharacters={maxResponseLength}
+        hasError={hasError}
       />
       <Box
         display="flex"
         justifyContent="flex-end"
         alignItems="center"
         fontSize="small"
-        color="#72777F"
+        color={hasError ? Theme.colors.light.error : Theme.colors.light.outline}
         mr={2}
       >
         {`${t('charactersCount', { numCharacters, maxCharacters: maxResponseLength })}`}

src/entities/activity/ui/items/TextItem.tsx

@@ -1,6 +1,12 @@
+import { useState } from 'react';
+
+import { Box } from '@mui/material';
+
 import { TextItem as TextItemType } from '../../lib';
 
+import { Theme } from '~/shared/constants';
 import { TextItem as BaseTextItem } from '~/shared/ui';
+import { useCustomTranslation } from '~/shared/utils';
 
 type TextItemProps = {
   item: TextItemType;
@@ -11,11 +17,16 @@ type TextItemProps = {
 
 export const TextItem = ({ item, value, onValueChange, isDisabled }: TextItemProps) => {
   const { maxResponseLength } = item.config;
+  const [hasError, setHasError] = useState(
+    maxResponseLength > 0 && value?.length > maxResponseLength,
+  );
+
+  const numCharacters = value?.length || 0;
+
+  const { t } = useCustomTranslation();
 
   const onHandleValueChange = (value: string) => {
-    if (value.length > maxResponseLength) {
-      return;
-    }
+    setHasError(value.length > maxResponseLength);
 
     if (value.length === 0) {
       return onValueChange([]);
@@ -24,5 +35,24 @@ export const TextItem = ({ item, value, onValueChange, isDisabled }: TextItemPro
     return onValueChange([value]);
   };
 
-  return <BaseTextItem value={value} onValueChange={onHandleValueChange} disabled={isDisabled} />;
+  return (
+    <Box>
+      <BaseTextItem
+        value={value}
+        onValueChange={onHandleValueChange}
+        disabled={isDisabled}
+        isMultiline={false}
+      />
+      <Box
+        display="flex"
+        justifyContent="flex-end"
+        alignItems="center"
+        fontSize="small"
+        color={hasError ? `${Theme.colors.light.error}` : Theme.colors.light.outline}
+        mr={2}
+      >
+        {t('charactersCount', { numCharacters, maxCharacters: maxResponseLength })}
+      </Box>
+    </Box>
+  );
 };

src/i18n/en/translation.json

@@ -19,6 +19,7 @@
     "pleaseProvideAdditionalText": "Please provide additional text",
     "pleaseListenToAudio": "Please listen to the audio until the end.",
     "onlyNumbersAllowed": "Only numbers are allowed",
+    "answerTooLarge": "Please provide a shorter answer",
     "questionCount_one": "{{count}} Question",
     "questionCount_other": "{{count}} Questions",
     "timedActivityTitle": "is a Timed Activity.",

src/i18n/fr/translation.json

@@ -19,6 +19,7 @@
     "pleaseProvideAdditionalText": "Veuillez fournir un texte supplémentaire",
     "pleaseListenToAudio": "Veuillez écouter l'audio jusqu'à la fin.",
     "onlyNumbersAllowed": "Seuls les numéros sont autorisés",
+    "answerTooLarge": "Veuillez fournir une réponse plus courte",
 
     "timedActivityTitle": "est une activité chronométrée.",
     "youWillHaveToCompleteIt": "Vous aurez {{hours}} heures {{minutes}} minutes pour le terminer.",

src/shared/ui/Items/Text/index.tsx

@@ -1,25 +1,16 @@
+import { Theme } from '~/shared/constants';
 import { BaseTextInput } from '~/shared/ui';
 
 type Props = {
   value: string | undefined;
   onValueChange: (value: string) => void;
   disabled: boolean;
   isMultiline?: boolean;
-  maxCharacters?: number;
+  hasError?: boolean;
 };
 
-export const TextItem = ({
-  value = '',
-  onValueChange,
-  disabled,
-  isMultiline,
-  maxCharacters,
-}: Props) => {
+export const TextItem = ({ value = '', onValueChange, disabled, isMultiline, hasError }: Props) => {
   const handleOnChange = (value: string) => {
-    if (isMultiline && maxCharacters && value.length > maxCharacters) {
-      return;
-    }
-
     onValueChange(value);
   };
   return (
@@ -31,22 +22,29 @@ export const TextItem = ({
       disabled={disabled}
       multiline={isMultiline}
       minRows={isMultiline ? 5 : 1}
-      maxRows={isMultiline ? 12 : 1}
+      maxRows={isMultiline ? 21 : 1}
       sx={
         isMultiline
           ? {
-              borderRadius: '12px',
               '& .MuiInputBase-input': {
+                height: '100%',
+                maxHeight: '350px',
                 '&::-webkit-scrollbar': {
                   width: '4px',
                 },
                 '&::-webkit-scrollbar-thumb': {
                   backgroundColor: '#C2C7CF',
-                  borderRadius: '100px',
                 },
               },
               '& .MuiInputBase-root': {
-                paddingRight: '2px', // Remove padding inside the input
+                height: '100%',
+                paddingRight: '2px',
+                ...(hasError ? { border: `2px solid ${Theme.colors.light.error}` } : {}),
+                borderWidth: '2px',
+                borderRadius: '12px',
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                border: hasError ? 'none' : `2px solid ${Theme.colors.light.surfaceVariant}`,
               },
             }
           : null

src/widgets/Survey/model/validateItem.ts

@@ -29,6 +29,17 @@ function isAnswerShouldBeNumeric(item: appletModel.ItemRecord) {
   return false;
 }
 
+function isAnswerTooLarge(item: appletModel.ItemRecord) {
+  if (
+    !['paragraphText', 'text'].includes(item.responseType) ||
+    !('maxResponseLength' in item.config) ||
+    typeof item.answer[0] !== 'string'
+  ) {
+    return false;
+  }
+  return item.answer[0].length > item.config.maxResponseLength;
+}
+
 function isAnswerEmpty(item: appletModel.ItemRecord): boolean {
   if (item.responseType === 'timeRange') {
     const fromTime = Date.parse(item.answer[0]);
@@ -113,6 +124,7 @@ export function validateBeforeMoveForward({
 
   const shouldBeEmpty = isAnswerShouldBeEmpty(item);
   const isEmpty = isAnswerEmpty(item);
+  const isTooLarge = isAnswerTooLarge(item);
 
   if (!shouldBeEmpty && !isEmpty) {
     showWarning('pleaseAnswerTheQuestion');
@@ -133,6 +145,11 @@ export function validateBeforeMoveForward({
     return false;
   }
 
+  if (isTooLarge) {
+    showWarning('answerTooLarge');
+    return false;
+  }
+
   const hasAdditionalTextField = hasAdditionalResponse(item);
   const isAdditionalTextRequired = hasAdditionalTextField && requiresAdditionalResponse(item);
   const isAdditionalTextEmpty = hasAdditionalTextField && !item.additionalText;