feat: colored avatar (#554)

* feat: colored avatar

* fix: use id instead of name & remove unused

* fix: remove unused

* Allow empty ID to avoid empty string

* Fix tests

* Add person chip story

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -1,4 +1,4 @@
-import CompanyChip from '@/companies/components/CompanyChip';
+import { CompanyChip } from '@/companies/components/CompanyChip';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { EditableCell } from '@/ui/components/editable-cell/EditableCell';

front/src/modules/people/components/PersonChip.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import PersonPlaceholder from './person-placeholder.png';
+import { Avatar } from '@/users/components/Avatar';
 
 export type PersonChipPropsType = {
-  id?: string;
+  id: string;
   name: string;
   picture?: string;
 };
@@ -52,10 +52,12 @@ export function PersonChip({ id, name, picture }: PersonChipPropsType) {
   const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
   return (
     <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
-      <img
-        data-testid="person-chip-image"
-        src={picture ? picture.toString() : PersonPlaceholder.toString()}
-        alt="person"
+      <Avatar
+        avatarUrl={picture}
+        colorId={id}
+        placeholder={name}
+        size={14}
+        type="rounded"
       />
       <StyledName>{name}</StyledName>
     </ContainerComponent>

front/src/modules/people/components/__stories__/PeopleChip.stories.tsx

@@ -0,0 +1,47 @@
+import { BrowserRouter } from 'react-router-dom';
+import styled from '@emotion/styled';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { PersonChip } from '../PersonChip';
+
+const meta: Meta<typeof PersonChip> = {
+  title: 'Modules/Companies/PersonChip',
+  component: PersonChip,
+};
+
+export default meta;
+type Story = StoryObj<typeof PersonChip>;
+
+const TestCellContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: fit-content;
+  justify-content: space-between;
+  max-width: 250px;
+  min-width: 250px;
+  overflow: hidden;
+  text-wrap: nowrap;
+`;
+
+export const SmallName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <BrowserRouter>
+        <PersonChip id="tim_fake_id" name="Tim C." />
+      </BrowserRouter>
+    </TestCellContainer>,
+  ),
+};
+
+export const BigName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <BrowserRouter>
+        <PersonChip id="steve_fake_id" name="Steve J." />
+      </BrowserRouter>
+    </TestCellContainer>,
+  ),
+};