test: create team page refactor and tests

frontend/jest.config.js

@@ -17,7 +17,11 @@ const customJestConfig = {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.stories.tsx',
+    '!src/{schema,store,stories,styles,types}/**/*.*',
+  ],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

frontend/package.json

@@ -10,7 +10,7 @@
     "pre-commit": "lint-staged",
     "cy:run": "cypress run",
     "cy:ci": "start-server-and-test dev http-get://localhost:3000 cy:run",
-    "jest": "jest",
+    "jest": "jest --coverage",
     "test:watch": "jest --watchAll",
     "test:ci": "jest --ci",
     "storybook": "start-storybook -p 6006",

frontend/src/components/Board/AddCardOrComment.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { joiResolver } from '@hookform/resolvers/joi';
-import Button from '@/components/Primitives/Button';
-import Checkbox from '@/components/Primitives/Checkbox';
-import Flex from '@/components/Primitives/Flex';
-import TextArea from '@/components/Primitives/TextArea';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
 import useCards from '@/hooks/useCards';
 import useComments from '@/hooks/useComments';
 import { SchemaAddCommentForm } from '@/schema/schemaAddCommentForm';
@@ -15,7 +15,7 @@ import AddCommentDto from '@/types/comment/addComment.dto';
 import UpdateCommentDto from '@/types/comment/updateComment.dto';
 import { styled } from '@/styles/stitches/stitches.config';
 import { CARD_TEXT_DEFAULT } from '@/utils/constants';
-import Icon from '../Primitives/Icon';
+import Icon from '../Primitives/Icons/Icon/Icon';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 

frontend/src/components/Board/Card/CardBoard.tsx

@@ -3,9 +3,9 @@ import { Draggable } from '@hello-pangea/dnd';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { cardBlur } from '@/helper/board/blurFilter';
 import { getCommentsFromCardGroup } from '@/helper/board/comments';
 import { BoardUser } from '@/types/board/board.user';

frontend/src/components/Board/Card/CardFooter.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { getCardVotes } from '@/helper/board/votes';
 import useVotes from '@/hooks/useVotes';
 import { BoardUser } from '@/types/board/board.user';

frontend/src/components/Board/Card/CardItem/CardItem.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import AddCardOrComment from '@/components/Board/AddCardOrComment';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { CardItemType } from '@/types/card/cardItem';
 import useCards from '@/hooks/useCards';
 import CardFooter from '../CardFooter';

frontend/src/components/Board/Card/CardItem/CardItemList.tsx

@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
 import { CardItemType } from '@/types/card/cardItem';
 import CardItem from './CardItem';
 

frontend/src/components/Board/Card/PopoverSettings.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverItem,
   PopoverTrigger,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 import useCards from '@/hooks/useCards';
 import { CardItemType } from '@/types/card/cardItem';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 
 interface PopoverSettingsContentProps {
   isItem: boolean;

frontend/src/components/Board/Column/Column.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Draggable, Droppable } from '@hello-pangea/dnd';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { getCardVotes } from '@/helper/board/votes';
 import { ColumnBoardType } from '@/types/column';
 import { useSetRecoilState } from 'recoil';
 import { filteredColumnsState } from '@/store/board/atoms/filterColumns';
 import { countColumnCards } from '@/helper/board/countCards';
-import Icon from '@/components/Primitives/Icon';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { useResizeDetector } from 'react-resize-detector';
 import AddCardOrComment from '../AddCardOrComment';
 import CardsList from './CardsList';

frontend/src/components/Board/Column/partials/ColorSquare/index.tsx

@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { PopoverItemSquareStyled } from '../OptionsMenu/styles';
 
 type ColorSquareProps = {

frontend/src/components/Board/Column/partials/OptionsMenu/index.tsx

@@ -1,17 +1,17 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
   PopoverItem,
-} from '@/components/Primitives/Popover';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
 import { useState } from 'react';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 import useBoard from '@/hooks/useBoard';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { useRecoilValue } from 'recoil';

frontend/src/components/Board/Column/partials/OptionsMenu/styles.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import { PopoverItem } from '@/components/Primitives/Popover';
+import { PopoverItem } from '@/components/Primitives/Popovers/Popover/Popover';
 
 const PopoverItemSquareStyled = styled(PopoverItem, {
   alignItems: 'center',

frontend/src/components/Board/Column/partials/SortMenu.tsx

@@ -1,12 +1,12 @@
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
   PopoverItem,
   PopoverClose,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 
 type Props = {
   setFilter: (value: 'desc' | 'asc' | undefined) => void;

frontend/src/components/Board/Column/partials/SwitchDefaultText/index.tsx

@@ -1,5 +1,5 @@
-import Flex from '@/components/Primitives/Flex';
-import Switch from '@/components/Primitives/Switch';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Switch from '@/components/Primitives/Inputs/Switches/Switch/Switch';
 
 type SwitchDefaultTextProps = {
   isChecked: boolean;

frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx

@@ -4,18 +4,18 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
-} from '@/components/Primitives/AlertDialog';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
 import { useRef } from 'react';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { styled } from '@/styles/stitches/stitches.config';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
-import Text from '@/components/Primitives/Text';
-import TextArea from '@/components/Primitives/TextArea';
+import Text from '@/components/Primitives/Text/Text';
+import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
 
 type UpdateColumnNameProps = {
   boardId: string;

frontend/src/components/Board/Column/styles.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const CardsContainer = styled(Flex, {
   mt: '$20',

frontend/src/components/Board/Comment/Comment.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import useComments from '@/hooks/useComments';
 import CommentType from '@/types/comment/comment';
 import DeleteCommentDto from '@/types/comment/deleteComment.dto';

frontend/src/components/Board/Comment/Comments.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { CardItemType } from '@/types/card/cardItem';
 import CommentType from '@/types/comment/comment';
 import { BoardPhases } from '@/utils/enums/board.phases';

frontend/src/components/Board/Comment/PopoverSettings.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverItem,
   PopoverTrigger,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 
 interface PopoverSettingsContentProps {
   setEditCard: () => void;

frontend/src/components/Board/DragDropArea/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { DragDropContext, DropResult, BeforeCapture, Droppable } from '@hello-pangea/dnd';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { countBoardCards } from '@/helper/board/countCards';
 import useCards from '@/hooks/useCards';
 import { toastState } from '@/store/toast/atom/toast.atom';

frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantCard.tsx/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { InnerContainer } from '@/components/Teams/styles';
 import { BoardUser, UpdateBoardUser } from '@/types/board/board.user';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { useRouter } from 'next/router';
-import ConfigurationSwitch from '@/components/Primitives/ConfigurationSwitch';
+import ConfigurationSwitch from '@/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import useParticipants from '@/hooks/useParticipants';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 type CardBodyProps = {
   member: BoardUser;

frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantsLayout.tsx

@@ -1,9 +1,9 @@
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { ContentSection } from '@/components/layouts/Layout/styles';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import ListMembersDialog from '@/components/Teams/Team/ListMembers/ListMembersDialog';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import UserListDialog from '@/components/Primitives/Dialogs/UserListDialog/UserListDialog';
 import useParticipants from '@/hooks/useParticipants';
 import { boardParticipantsState } from '@/store/board/atoms/board.atom';
 import { usersListState } from '@/store/team/atom/team.atom';
@@ -89,13 +89,13 @@ const ParticipantsLayout = ({ children, hasPermissionsToEdit }: Props) => {
         </Flex>
         {children}
       </Flex>
-      <ListMembersDialog
+      <UserListDialog
         usersList={usersList}
         isOpen={isOpen}
         setIsOpen={setIsOpen}
-        saveUsers={saveParticipants}
+        confirmationHandler={saveParticipants}
         title="Board Participants"
-        btnTitle="Add/remove participants"
+        confirmationLabel="Add/remove participants"
       />
     </ContentSection>
   );

frontend/src/components/Board/RegularBoard/ParticipantsList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ScrollableContent } from '@/components/Boards/MyBoards/styles';
 import { boardParticipantsState } from '@/store/board/atoms/board.atom';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';

frontend/src/components/Board/RegularBoard/ReagularHeader/HeaderParticipants.tsx

@@ -1,12 +1,12 @@
 import { useSession } from 'next-auth/react';
 import { useRecoilValue } from 'recoil';
 
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { boardInfoState } from '@/store/board/atoms/board.atom';
 import { StyledBoardTitle } from '@/components/CardBoard/CardBody/CardTitle/partials/Title/styles';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 
 interface Props {
   isParticipantsPage?: boolean;
@@ -31,13 +31,7 @@ const HeaderParticipants = ({ isParticipantsPage }: Props) => {
             <Text size="sm">Participants</Text>
           </StyledBoardTitle>
         )}
-        <AvatarGroup
-          responsible={false}
-          listUsers={users}
-          teamAdmins={false}
-          userId={session?.user.id}
-          isClickable
-        />
+        <AvatarGroup listUsers={users} userId={session?.user.id} isClickable />
       </Flex>
       <Flex align="center">
         <Separator orientation="vertical" size="lg" />
@@ -46,13 +40,7 @@ const HeaderParticipants = ({ isParticipantsPage }: Props) => {
         <Text color="primary300" size="sm">
           Responsibles
         </Text>
-        <AvatarGroup
-          responsible
-          listUsers={users}
-          teamAdmins={false}
-          userId={session?.user.id}
-          isClickable
-        />
+        <AvatarGroup responsible listUsers={users} userId={session?.user.id} isClickable />
       </Flex>
     </Flex>
   );