refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946)

Split from https://github.com/twentyhq/twenty/pull/4518

Part of #4766

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

@@ -1,126 +0,0 @@
-import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-import { isNonEmptyString } from '@sniptt/guards';
-
-import { Nullable } from '~/types/Nullable';
-import { stringToHslColor } from '~/utils/string-to-hsl';
-
-import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
-
-export type AvatarType = 'squared' | 'rounded';
-
-export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-
-export type AvatarProps = {
-  avatarUrl?: string | null;
-  className?: string;
-  size?: AvatarSize;
-  placeholder: string | undefined;
-  entityId?: string;
-  type?: Nullable<AvatarType>;
-  color?: string;
-  backgroundColor?: string;
-  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 }
->`
-  align-items: center;
-  background-color: ${({ backgroundColor }) => backgroundColor};
-  ${({ avatarUrl }) =>
-    isNonEmptyString(avatarUrl) ? `background-image: url(${avatarUrl});` : ''}
-  background-position: center;
-  background-size: cover;
-  border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
-  color: ${({ color }) => color};
-  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
-  display: flex;
-
-  flex-shrink: 0;
-  font-size: ${({ size = 'md' }) => propertiesBySize[size].fontSize};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-
-  height: ${({ size = 'md' }) => propertiesBySize[size].width};
-  justify-content: center;
-  width: ${({ size = 'md' }) => propertiesBySize[size].width};
-
-  &:hover {
-    box-shadow: ${({ theme, onClick }) =>
-      onClick ? '0 0 0 4px ' + theme.background.transparent.light : 'unset'};
-  }
-`;
-
-export const Avatar = ({
-  avatarUrl,
-  className,
-  size = 'md',
-  placeholder,
-  entityId = placeholder,
-  onClick,
-  type = 'squared',
-  color,
-  backgroundColor,
-}: AvatarProps) => {
-  const noAvatarUrl = !isNonEmptyString(avatarUrl);
-  const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
-  useEffect(() => {
-    if (isNonEmptyString(avatarUrl)) {
-      new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => resolve(false);
-        img.onerror = () => resolve(true);
-        img.src = getImageAbsoluteURIOrBase64(avatarUrl) as string;
-      }).then((res) => {
-        setIsInvalidAvatarUrl(res as boolean);
-      });
-    }
-  }, [avatarUrl]);
-
-  const fixedColor = color ?? stringToHslColor(entityId ?? '', 75, 25);
-  const fixedBackgroundColor =
-    backgroundColor ??
-    (!isNonEmptyString(avatarUrl)
-      ? stringToHslColor(entityId ?? '', 75, 85)
-      : 'none');
-
-  return (
-    <StyledAvatar
-      className={className}
-      avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
-      placeholder={placeholder}
-      size={size}
-      type={type}
-      entityId={entityId}
-      onClick={onClick}
-      color={fixedColor}
-      backgroundColor={fixedBackgroundColor}
-    >
-      {(noAvatarUrl || isInvalidAvatarUrl) &&
-        placeholder?.[0]?.toLocaleUpperCase()}
-    </StyledAvatar>
-  );
-};

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

@@ -1,29 +0,0 @@
-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/UserChip.tsx

@@ -1,4 +1,6 @@
-import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { EntityChip } from 'twenty-ui';
+
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export type UserChipProps = {
   id: string;
@@ -11,6 +13,6 @@ export const UserChip = ({ id, name, avatarUrl }: UserChipProps) => (
     entityId={id}
     name={name}
     avatarType="rounded"
-    avatarUrl={avatarUrl}
+    avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl) || ''}
   />
 );

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

@@ -1,33 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-import { avatarUrl } from '~/testing/mock-data/users';
-
-import { Avatar } from '../Avatar';
-
-const meta: Meta<typeof Avatar> = {
-  title: 'Modules/Users/Avatar',
-  component: Avatar,
-  decorators: [ComponentDecorator],
-  args: { avatarUrl, size: 'md', placeholder: 'L', type: 'rounded' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-export const Rounded: Story = {};
-
-export const Squared: Story = {
-  args: { type: 'squared' },
-};
-
-export const NoAvatarPictureRounded: Story = {
-  args: { avatarUrl: '' },
-};
-
-export const NoAvatarPictureSquared: Story = {
-  args: {
-    ...NoAvatarPictureRounded.args,
-    ...Squared.args,
-  },
-};

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

@@ -1,68 +0,0 @@
-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],
-};