feat: add calendar event attendees avatar group (#4384)

* feat: add calendar event attendees avatar group

Closes #4290

* fix: take CalendarEventAttendee data model into account

* feat: add Color code section to Calendar Settings (#4420)

Closes #4293

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/users/components/Avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarType = 'squared' | 'rounded';
 export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
 export type AvatarProps = {
-  avatarUrl: string | null | undefined;
+  avatarUrl?: string | null;
   className?: string;
   size?: AvatarSize;
   placeholder: string | undefined;
@@ -23,6 +23,29 @@ export type AvatarProps = {
   onClick?: () => void;
 };
 
+const propertiesBySize = {
+  xl: {
+    fontSize: '16px',
+    width: '40px',
+  },
+  lg: {
+    fontSize: '13px',
+    width: '24px',
+  },
+  md: {
+    fontSize: '12px',
+    width: '16px',
+  },
+  sm: {
+    fontSize: '10px',
+    width: '14px',
+  },
+  xs: {
+    fontSize: '8px',
+    width: '12px',
+  },
+};
+
 export const StyledAvatar = styled.div<
   AvatarProps & { color: string; backgroundColor: string }
 >`
@@ -38,54 +61,12 @@ export const StyledAvatar = styled.div<
   display: flex;
 
   flex-shrink: 0;
-  font-size: ${({ size }) => {
-    switch (size) {
-      case 'xl':
-        return '16px';
-      case 'lg':
-        return '13px';
-      case 'md':
-      default:
-        return '12px';
-      case 'sm':
-        return '10px';
-      case 'xs':
-        return '8px';
-    }
-  }};
+  font-size: ${({ size = 'md' }) => propertiesBySize[size].fontSize};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 
-  height: ${({ size }) => {
-    switch (size) {
-      case 'xl':
-        return '40px';
-      case 'lg':
-        return '24px';
-      case 'md':
-      default:
-        return '16px';
-      case 'sm':
-        return '14px';
-      case 'xs':
-        return '12px';
-    }
-  }};
+  height: ${({ size = 'md' }) => propertiesBySize[size].width};
   justify-content: center;
-  width: ${({ size }) => {
-    switch (size) {
-      case 'xl':
-        return '40px';
-      case 'lg':
-        return '24px';
-      case 'md':
-      default:
-        return '16px';
-      case 'sm':
-        return '14px';
-      case 'xs':
-        return '12px';
-    }
-  }};
+  width: ${({ size = 'md' }) => propertiesBySize[size].width};
 
   &:hover {
     box-shadow: ${({ theme, onClick }) =>

packages/twenty-front/src/modules/users/components/AvatarGroup.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+export type AvatarGroupProps = {
+  avatars: ReactNode[];
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+const StyledItemContainer = styled.div`
+  margin-right: -3px;
+`;
+
+const MAX_AVATARS_NB = 4;
+
+export const AvatarGroup = ({ avatars }: AvatarGroupProps) => {
+  if (!avatars.length) return null;
+
+  return (
+    <StyledContainer>
+      {avatars.slice(0, MAX_AVATARS_NB).map((avatar, index) => (
+        <StyledItemContainer key={index}>{avatar}</StyledItemContainer>
+      ))}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/users/components/__stories__/AvatarGroup.stories.tsx

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  Avatar,
+  AvatarProps,
+  AvatarSize,
+  AvatarType,
+} from '@/users/components/Avatar';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { avatarUrl } from '~/testing/mock-data/users';
+
+import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup';
+
+const makeAvatar = (userName: string, props: Partial<AvatarProps> = {}) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Avatar placeholder={userName} entityId={userName} {...props} />
+);
+
+const getAvatars = (commonProps: Partial<AvatarProps> = {}) => [
+  makeAvatar('Matthew', { avatarUrl, ...commonProps }),
+  makeAvatar('Sophie', commonProps),
+  makeAvatar('Jane', commonProps),
+  makeAvatar('Lily', commonProps),
+  makeAvatar('John', commonProps),
+];
+
+const meta: Meta<
+  AvatarGroupProps & AvatarProps & { numberOfAvatars?: number }
+> = {
+  title: 'Modules/Users/AvatarGroup',
+  component: AvatarGroup,
+  render: ({ numberOfAvatars = 5, ...args }) => (
+    <AvatarGroup avatars={getAvatars(args).slice(0, numberOfAvatars)} />
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarGroup>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'number of avatars',
+          values: [1, 2, 3, 4, 5],
+          props: (numberOfAvatars: number) => ({ numberOfAvatars }),
+        },
+        {
+          name: 'types',
+          values: ['rounded', 'squared'] as AvatarType[],
+          props: (type: AvatarType) => ({ type }),
+        },
+        {
+          name: 'sizes',
+          values: ['xs', 'sm', 'md', 'lg', 'xl'] as AvatarSize[],
+          props: (size: AvatarSize) => ({ size }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};