Migrate to a monorepo structure (#2909)

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

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
+
+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 | undefined;
+  size?: AvatarSize;
+  placeholder: string | undefined;
+  colorId?: string;
+  type?: AvatarType;
+  onClick?: () => void;
+};
+
+const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
+  align-items: center;
+  background-color: ${({ avatarUrl, colorId }) =>
+    !isNonEmptyString(avatarUrl) ? stringToHslColor(colorId, 75, 85) : 'none'};
+  ${({ avatarUrl }) =>
+    isNonEmptyString(avatarUrl) ? `background-image: url(${avatarUrl});` : ''}
+  background-position: center;
+  background-size: cover;
+  border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
+  color: ${({ colorId }) => stringToHslColor(colorId, 75, 25)};
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+  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-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';
+    }
+  }};
+  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';
+    }
+  }};
+
+  &:hover {
+    box-shadow: ${({ theme, onClick }) =>
+      onClick ? '0 0 0 4px ' + theme.background.transparent.light : 'unset'};
+  }
+`;
+
+export const Avatar = ({
+  avatarUrl,
+  size = 'md',
+  placeholder,
+  colorId = placeholder,
+  onClick,
+  type = 'squared',
+}: AvatarProps) => {
+  const noAvatarUrl = !isNonEmptyString(avatarUrl);
+  const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
+  useEffect(() => {
+    if (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]);
+
+  return (
+    <StyledAvatar
+      avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
+      placeholder={placeholder}
+      size={size}
+      type={type}
+      colorId={colorId ?? ''}
+      onClick={onClick}
+    >
+      {(noAvatarUrl || isInvalidAvatarUrl) &&
+        placeholder?.[0]?.toLocaleUpperCase()}
+    </StyledAvatar>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+
+export type UserChipProps = {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+};
+
+export const UserChip = ({ id, name, avatarUrl }: UserChipProps) => (
+  <EntityChip
+    entityId={id}
+    name={name}
+    avatarType="rounded"
+    avatarUrl={avatarUrl}
+  />
+);

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

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+import { useGetCurrentUserQuery } from '~/generated/graphql';
+
+export const UserProvider = ({ children }: React.PropsWithChildren) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const setCurrentUser = useSetRecoilState(currentUserState);
+  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+  const setCurrentWorkspaceMember = useSetRecoilState(
+    currentWorkspaceMemberState,
+  );
+
+  const { data: userData, loading: userLoading } = useGetCurrentUserQuery({});
+
+  useEffect(() => {
+    if (!userLoading) {
+      setIsLoading(false);
+    }
+    if (userData?.currentUser?.workspaceMember) {
+      setCurrentUser(userData.currentUser);
+      setCurrentWorkspace(userData.currentUser.defaultWorkspace);
+      const workspaceMember = userData.currentUser.workspaceMember;
+      setCurrentWorkspaceMember({
+        ...workspaceMember,
+        colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
+      });
+    }
+  }, [
+    setCurrentUser,
+    isLoading,
+    userLoading,
+    setCurrentWorkspace,
+    setCurrentWorkspaceMember,
+    userData?.currentUser,
+  ]);
+
+  return isLoading ? <></> : <>{children}</>;
+};

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

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