feat(player-list-item): migrates to material ui

Migrates the component to use MaterialUI instead of
ChakraUI

re #144

src/components/players/PlayerListItem/PlayerListItem.stories.tsx → src/components/molecules/PlayerListItem/PlayerListItem.stories.tsx

@@ -2,7 +2,7 @@ import { Story } from '@storybook/react';
 import { PlayerListItem, PlayerListItemProps } from './PlayerListItem';
 
 export default {
-  title: 'components/players/PlayerListItem',
+  title: 'Molecules/PlayerListItem',
   component: PlayerListItem,
 };
 

src/components/players/PlayerListItem/PlayerListItem.test.tsx → src/components/molecules/PlayerListItem/PlayerListItem.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { PlayerListItem } from './PlayerListItem';
 
 describe('<PlayerListItem />', () => {
-  const setupPlayerListItem = (props) => {
+  const setupPlayerListItem = (props = {}) => {
     return render(<PlayerListItem {...props} />);
   };
 
@@ -22,7 +22,7 @@ describe('<PlayerListItem />', () => {
       firstName: 'John',
     });
 
-    expect(screen.getByText('John')).toBeInTheDocument();
+    expect(screen.getByText(/John/)).toBeInTheDocument();
   });
 
   it('should render the users nickname', () => {

src/components/molecules/PlayerListItem/PlayerListItem.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import NextLink from 'next/link';
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+
+export interface PlayerListItemProps extends Profile {
+  image?: string;
+}
+
+export function PlayerListItem({ id, firstName, nickname, lastName, image }: PlayerListItemProps) {
+  return (
+    <ListItem
+      button
+      component={NextLink}
+      href={`/players/${id}`}
+      alignItems="flex-start"
+      data-testid="player-list-item"
+    >
+      <ListItemAvatar>
+        <Avatar alt={`${firstName} ${lastName}`} src={image} />
+      </ListItemAvatar>
+      <ListItemText primary={`${firstName} ${lastName}`} secondary={nickname} />
+    </ListItem>
+  );
+}
+
+export default PlayerListItem;

src/components/players/PlayerList/PlayerList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack, Divider, Center, Spinner } from '@chakra-ui/react';
-import { PlayerListItem, PlayerListItemProps } from '../PlayerListItem';
+import { PlayerListItem, PlayerListItemProps } from '@components/molecules/PlayerListItem';
 
 export interface PlayerListProps {
   players: PlayerListItemProps[];