[M2-5961] Feature: SliderRows

src/abstract/lib/constants.ts

@@ -15,4 +15,5 @@ export const supportableResponseTypes = [
   'audioPlayer',
   'multiSelectRows',
   'singleSelectRows',
+  'sliderRows',
 ];

src/entities/activity/lib/types/item.ts

@@ -3,8 +3,13 @@ import { ConditionalLogic } from '~/shared/api';
 export type DefaultAnswer = Array<string>;
 export type MatrixMultiSelectAnswer = Array<Array<string | null>>;
 export type SingleMultiSelectAnswer = Array<string | null>;
+export type SliderRowsAnswer = Array<number | null>;
 
-export type Answer = DefaultAnswer | MatrixMultiSelectAnswer | SingleMultiSelectAnswer;
+export type Answer =
+  | DefaultAnswer
+  | MatrixMultiSelectAnswer
+  | SingleMultiSelectAnswer
+  | SliderRowsAnswer;
 
 export type ActivityItemType =
   | 'text'
@@ -79,7 +84,8 @@ export type Config =
   | TimeItemItemConfig
   | TimeRangeItemConfig
   | AudioPlayerItemConfig
-  | MultiSelectionRowsItemConfig;
+  | MultiSelectionRowsItemConfig
+  | SliderRowsItemConfig;
 
 export type ResponseValues =
   | EmptyResponseValues
@@ -88,7 +94,8 @@ export type ResponseValues =
   | SliderValues
   | SelectorValues
   | AudioPlayerItemValues
-  | MultiSelectionRowsItemResponseValues;
+  | MultiSelectionRowsItemResponseValues
+  | SliderRowsItemResponseValues;
 
 export type EmptyResponseValues = null;
 
@@ -334,3 +341,39 @@ export type SingleSelectionRowsItemResponseValues = {
   options: Array<MatrixSelectOption>;
   dataMatrix: DataMatrix;
 };
+
+export interface SliderRowsItem extends ActivityItemBase {
+  responseType: 'sliderRows';
+  config: SliderRowsItemConfig;
+  responseValues: SliderRowsItemResponseValues;
+  answer: SliderRowsAnswer;
+}
+
+export type SliderRowsItemConfig = ButtonsConfig &
+  TimerConfig & {
+    addScores: boolean;
+    setAlerts: boolean;
+  };
+
+export type SliderRowsItemResponseValues = {
+  rows: SliderRows;
+};
+
+export type SliderAlerts = Array<{
+  value: number;
+  minValue: number;
+  maxValue: number;
+  alert: string;
+}> | null;
+
+export type SliderRows = Array<{
+  id: string;
+  label: string;
+  minLabel: string | null;
+  maxLabel: string | null;
+  minValue: number;
+  maxValue: number;
+  minImage: string | null;
+  maxImage: string | null;
+  alerts: SliderAlerts;
+}>;

src/entities/activity/ui/AdditionalTextResponse.tsx

@@ -1,13 +1,13 @@
-import TextField from '@mui/material/TextField';
+import { BaseTextInput } from '~/shared/ui';
 
-type AdditionalTextResponseProps = {
+type Props = {
   value: string;
   onValueChange: (value: string) => void;
 };
 
-export const AdditionalTextResponse = ({ value, onValueChange }: AdditionalTextResponseProps) => {
+export const AdditionalTextResponse = ({ value, onValueChange }: Props) => {
   return (
-    <TextField
+    <BaseTextInput
       fullWidth
       size="small"
       value={value}

src/entities/activity/ui/ItemCardButtons.tsx

@@ -1,6 +1,5 @@
-import Box from '@mui/material/Box';
-
 import { Theme } from '~/shared/constants';
+import { Box } from '~/shared/ui';
 import { BaseButton } from '~/shared/ui';
 import { useCustomMediaQuery } from '~/shared/utils';
 

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

@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
 
-import Box from '@mui/material/Box';
-
 import { AudioPlayerItem as AudioPlayerItemType } from '../../lib/types/item';
 
+import { Box } from '~/shared/ui';
 import { AudioPlayerItemBase } from '~/shared/ui';
 import { AudioPlayerFinished } from '~/shared/ui/Items/AudioPlayer/lib';
 

src/entities/activity/ui/items/CheckboxItem/CheckboxItemOption.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import {
   CheckboxItem,
   CustomTooltip,

src/entities/activity/ui/items/CheckboxItem/index.tsx

@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
 
-import Box from '@mui/material/Box';
-
 import { CheckboxItemOption } from './CheckboxItemOption';
 import { CheckboxItem as CheckboxItemType } from '../../../lib/types/item';
 
+import { Box } from '~/shared/ui';
 import { randomizeArray, splitList, useCustomMediaQuery } from '~/shared/utils';
 
 type Props = {

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

@@ -1,5 +1,4 @@
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import { DateItemBase } from '~/shared/ui';
 
 type Props = {

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

@@ -3,6 +3,7 @@ import { CheckboxItem } from './CheckboxItem';
 import { DateItem } from './DateItem';
 import { MatrixCheckboxItem } from './Matrix/MatrixMultiSelectItem';
 import { MatrixRadioItem } from './Matrix/MatrixSingleSelectItem';
+import { SliderRows } from './Matrix/Slider';
 import { RadioItem } from './RadioItem';
 import { SelectorItem } from './SelectorItem';
 import { SliderItem } from './SliderItem';
@@ -114,6 +115,9 @@ export const ItemPicker = ({ item, onValueChange, isDisabled, replaceText }: Ite
         />
       );
 
+    case 'sliderRows':
+      return <SliderRows item={item} values={item.answer} onValueChange={onValueChange} />;
+
     default:
       return <></>;
   }

src/entities/activity/ui/items/Matrix/AxisListItem.tsx

@@ -1,5 +1,4 @@
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import { AvatarBase, CustomTooltip, Text } from '~/shared/ui';
 import { useCustomMediaQuery } from '~/shared/utils';
 

src/entities/activity/ui/items/Matrix/MatrixCell.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import { useCustomMediaQuery } from '~/shared/utils';
 
 type Props = PropsWithChildren<{

src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx

@@ -1,7 +1,6 @@
-import Box from '@mui/material/Box';
-
 import { MatrixCell } from '../MatrixCell';
 
+import { Box } from '~/shared/ui';
 import { CheckboxItem, SelectBaseBox } from '~/shared/ui';
 import { useCustomMediaQuery } from '~/shared/utils';
 

src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx

@@ -1,10 +1,10 @@
-import Box from '@mui/material/Box';
-
 import { CheckboxButton } from './CheckboxButton';
 import { MatrixMultiSelectAnswer, MatrixSelectOption, MatrixSelectRow } from '../../../../lib';
 import { MatrixHeader } from '../MatrixHeader';
 import { MatrixRow } from '../MatrixRow';
 
+import { Box } from '~/shared/ui';
+
 type Props = {
   options: Array<MatrixSelectOption>;
   rows: Array<MatrixSelectRow>;

src/entities/activity/ui/items/Matrix/MatrixRow.tsx

@@ -1,11 +1,10 @@
 import { PropsWithChildren } from 'react';
 
-import Box from '@mui/material/Box';
-
 import { AxisItem, AxisListItem } from './AxisListItem';
 import { MatrixCell } from './MatrixCell';
 
 import { Theme } from '~/shared/constants';
+import { Box } from '~/shared/ui';
 
 type Props = PropsWithChildren<{
   isEven: boolean;

src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx

@@ -1,7 +1,6 @@
-import Box from '@mui/material/Box';
-
 import { MatrixCell } from '../MatrixCell';
 
+import { Box } from '~/shared/ui';
 import { RadioOption, SelectBaseBox } from '~/shared/ui';
 
 type Props = {

src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx

@@ -1,10 +1,10 @@
-import Box from '@mui/material/Box';
-
 import { RadioButton } from './RadioButton';
 import { MatrixSelectOption, MatrixSelectRow, SingleMultiSelectAnswer } from '../../../../lib';
 import { MatrixHeader } from '../MatrixHeader';
 import { MatrixRow } from '../MatrixRow';
 
+import { Box } from '~/shared/ui';
+
 type Props = {
   options: Array<MatrixSelectOption>;
   rows: Array<MatrixSelectRow>;

src/entities/activity/ui/items/Matrix/Slider/SliderRow.tsx

@@ -0,0 +1,61 @@
+import { Theme } from '~/shared/constants';
+import { Box } from '~/shared/ui';
+import { SliderItemBase, Text } from '~/shared/ui';
+
+type Props = {
+  label: string;
+
+  value: number;
+  minValue: number;
+  maxValue: number;
+
+  minLabel: string | null;
+  minImage: string | null;
+
+  maxLabel: string | null;
+  maxImage: string | null;
+
+  isEven: boolean;
+
+  onChange: (value: string) => void;
+};
+
+export const SliderRow = ({
+  label,
+  value,
+  minImage,
+  minLabel,
+  minValue,
+  maxImage,
+  maxLabel,
+  maxValue,
+  onChange,
+  isEven,
+}: Props) => {
+  return (
+    <Box bgcolor={isEven ? Theme.colors.light.surface3 : undefined} padding="50px">
+      <Text
+        variant="body1"
+        fontSize="20px"
+        fontWeight="400"
+        padding="0px 0px 50px 0px" // Bottom padding
+        sx={{ textAlign: 'center' }}
+      >
+        {label}
+      </Text>
+
+      <SliderItemBase
+        value={String(value)}
+        minValue={minValue}
+        minLabel={minLabel}
+        minImage={minImage}
+        maxValue={maxValue}
+        maxLabel={maxLabel}
+        maxImage={maxImage}
+        onChange={onChange}
+        showStickLabel={true}
+        showStickMarks={true}
+      />
+    </Box>
+  );
+};

src/entities/activity/ui/items/Matrix/Slider/index.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { SliderRow } from './SliderRow';
+import { SliderRowsAnswer, SliderRowsItem } from '../../../../lib';
+
+import { Box } from '~/shared/ui';
+
+type Props = {
+  item: SliderRowsItem;
+  values: SliderRowsAnswer;
+  onValueChange: (value: SliderRowsAnswer) => void;
+};
+
+export const SliderRows = (props: Props) => {
+  const onHandleValueChange = useCallback(
+    (value: string, index: number) => {
+      if (props.values.length === 0) {
+        props.onValueChange(
+          Array.from({ length: props.item.responseValues.rows.length }, () => null),
+        );
+        return;
+      }
+
+      const newValues = [...props.values];
+      newValues[index] = Number(value);
+      return props.onValueChange(newValues);
+    },
+    [props],
+  );
+
+  return (
+    <Box display="flex" flexDirection="column">
+      {props.item.responseValues.rows.map((row, index) => {
+        const value = props.values[index];
+
+        return (
+          <SliderRow
+            key={row.id}
+            label={row.label}
+            value={value ? value : row.minValue}
+            minValue={row.minValue}
+            minLabel={row.minLabel}
+            minImage={row.minImage}
+            maxValue={row.maxValue}
+            maxLabel={row.maxLabel}
+            maxImage={row.maxImage}
+            onChange={(value: string) => onHandleValueChange(value, index)}
+            isEven={index % 2 === 0}
+          />
+        );
+      })}
+    </Box>
+  );
+};

src/entities/activity/ui/items/RadioItem/RadioItemOption.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import {
   CustomTooltip,
   RadioOption,

src/entities/activity/ui/items/RadioItem/index.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 
-import Box from '@mui/material/Box';
 import RadioGroup from '@mui/material/RadioGroup';
 
 import { RadioItemOption } from './RadioItemOption';
 import { RadioItem as RadioItemType } from '../../../lib';
 
+import { Box } from '~/shared/ui';
 import { randomizeArray, splitList, useCustomMediaQuery } from '~/shared/utils';
 
 type RadioItemProps = {

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

@@ -1,7 +1,6 @@
-import Box from '@mui/material/Box';
-
 import { SliderItem as SliderItemType } from '../../lib';
 
+import { Box } from '~/shared/ui';
 import { SliderItemBase } from '~/shared/ui';
 
 type SliderItemProps = {

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

@@ -1,5 +1,4 @@
-import Box from '@mui/material/Box';
-
+import { Box } from '~/shared/ui';
 import { TimeItemBase } from '~/shared/ui';
 
 type Props = {