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/companies/components/CompanyAccountOwnerCell.tsx

@@ -16,7 +16,10 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
       editModeContent={<CompanyAccountOwnerPicker company={company} />}
       nonEditModeContent={
         company.accountOwner?.displayName ? (
-          <PersonChip name={company.accountOwner?.displayName ?? ''} />
+          <PersonChip
+            id={company.accountOwner.id}
+            name={company.accountOwner?.displayName ?? ''}
+          />
         ) : (
           <></>
         )

front/src/modules/companies/components/CompanyChip.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { Avatar } from '@/users/components/Avatar';
 
 export type CompanyChipPropsType = {
-  id?: string;
+  id: string;
   name: string;
   picture?: string;
 };
@@ -50,7 +50,7 @@ const StyledContainerNoLink = styled.div`
   ${baseStyle}
 `;
 
-function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
+export function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
   const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
 
   return (
@@ -58,6 +58,7 @@ function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
       {picture && (
         <Avatar
           avatarUrl={picture?.toString()}
+          colorId={id}
           placeholder={name}
           type="squared"
           size={14}
@@ -67,5 +68,3 @@ function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
     </ContainerComponent>
   );
 }
-
-export default CompanyChip;

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -8,7 +8,7 @@ import {
   useUpdateCompanyMutation,
 } from '~/generated/graphql';
 
-import CompanyChip from './CompanyChip';
+import { CompanyChip } from './CompanyChip';
 
 type OwnProps = {
   company: Pick<

front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx

@@ -1,9 +1,10 @@
+import { BrowserRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
-import CompanyChip from '../CompanyChip';
+import { CompanyChip } from '../CompanyChip';
 
 const meta: Meta<typeof CompanyChip> = {
   title: 'Modules/Companies/CompanyChip',
@@ -32,10 +33,13 @@ const TestCellContainer = styled.div`
 export const SmallName: Story = {
   render: getRenderWrapperForComponent(
     <TestCellContainer>
-      <CompanyChip
-        name="Airbnb"
-        picture="https://api.faviconkit.com/airbnb.com/144"
-      />
+      <BrowserRouter>
+        <CompanyChip
+          id="airbnb"
+          name="Airbnb"
+          picture="https://api.faviconkit.com/airbnb.com/144"
+        />
+      </BrowserRouter>
     </TestCellContainer>,
   ),
 };
@@ -43,10 +47,13 @@ export const SmallName: Story = {
 export const BigName: Story = {
   render: getRenderWrapperForComponent(
     <TestCellContainer>
-      <CompanyChip
-        name="Google with a real big name to overflow the cell"
-        picture="https://api.faviconkit.com/google.com/144"
-      />
+      <BrowserRouter>
+        <CompanyChip
+          id="google"
+          name="Google with a real big name to overflow the cell"
+          picture="https://api.faviconkit.com/google.com/144"
+        />
+      </BrowserRouter>
     </TestCellContainer>,
   ),
 };