Refactor of Matrix elements to make it reusable

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

@@ -1,7 +1,7 @@
 import { AudioPlayerItem } from './AudioPlayerItem';
 import { CheckboxItem } from './CheckboxItem';
 import { DateItem } from './DateItem';
-import { MatrixCheckboxItem } from './MatrixCheckboxItem';
+import { MatrixCheckboxItem } from './Matrix/MatrixMultiSelectItem';
 import { RadioItem } from './RadioItem';
 import { SelectorItem } from './SelectorItem';
 import { SliderItem } from './SliderItem';
@@ -103,6 +103,9 @@ export const ItemPicker = ({ item, onValueChange, isDisabled, replaceText }: Ite
         />
       );
 
+    case 'singleSelectRows':
+      return <div>boom</div>;
+
     default:
       return <></>;
   }

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

@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+
+import { MatrixCell } from '../MatrixCell';
+
+import { CheckboxItem, SelectBaseBox } from '~/shared/ui';
+
+type Props = {
+  id: string;
+  isChecked: boolean;
+  text: string;
+
+  onChange: () => void;
+};
+
+export const CheckboxButton = ({ id, isChecked, text, onChange }: Props) => {
+  return (
+    <Box flex={1} key={id}>
+      <MatrixCell>
+        <SelectBaseBox
+          color={null}
+          onHandleChange={onChange}
+          checked={isChecked}
+          justifyContent="center"
+        >
+          <CheckboxItem
+            id={id}
+            name={text}
+            value={text}
+            disabled={false}
+            defaultChecked={isChecked}
+          />
+        </SelectBaseBox>
+      </MatrixCell>
+    </Box>
+  );
+};

src/entities/activity/ui/items/MatrixCheckboxItem/StackedItemsGrid.tsx → src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/StackedItemsGrid.tsx

@@ -1,11 +1,9 @@
 import Box from '@mui/material/Box';
 
-import { MatrixCell } from './MatrixCell';
-import { MatrixHeader } from './MatrixHeader';
-import { MatrixRow } from './MatrixRow';
-import { MatrixMultiSelectAnswer, MatrixSelectOption, MatrixSelectRow } from '../../../lib';
-
-import { CheckboxItem, SelectBaseBox } from '~/shared/ui';
+import { CheckboxButton } from './CheckboxButton';
+import { MatrixMultiSelectAnswer, MatrixSelectOption, MatrixSelectRow } from '../../../../lib';
+import { MatrixHeader } from '../MatrixHeader';
+import { MatrixRow } from '../MatrixRow';
 
 type Props = {
   options: Array<MatrixSelectOption>;
@@ -33,24 +31,13 @@ export const StackedItemsGrid = ({ rows, options, onChange, values }: Props) =>
               const isChecked = Boolean(values[rowI]?.[optionI]);
 
               return (
-                <Box flex={1} key={option.id}>
-                  <MatrixCell>
-                    <SelectBaseBox
-                      color={null}
-                      onHandleChange={() => onChange(rowI, optionI, option.text)}
-                      checked={isChecked}
-                      justifyContent="center"
-                    >
-                      <CheckboxItem
-                        id={option.id}
-                        name={option.text}
-                        value={option.text}
-                        disabled={false}
-                        defaultChecked={isChecked}
-                      />
-                    </SelectBaseBox>
-                  </MatrixCell>
-                </Box>
+                <CheckboxButton
+                  key={option.id}
+                  id={option.id}
+                  text={option.text}
+                  isChecked={isChecked}
+                  onChange={() => onChange(rowI, optionI, option.text)}
+                />
               );
             })}
           </MatrixRow>

src/entities/activity/ui/items/MatrixCheckboxItem/index.tsx → src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/index.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { StackedItemsGrid } from './StackedItemsGrid';
-import { MatrixMultiSelectAnswer, MultiSelectionRowsItem } from '../../../lib';
+import { MatrixMultiSelectAnswer, MultiSelectionRowsItem } from '../../../../lib';
 
 type Props = {
   item: MultiSelectionRowsItem;