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/object-record/components/RecordChip.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { EntityChip } from 'twenty-ui';
 
 import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export type RecordChipProps = {
   objectNameSingular: string;
@@ -28,7 +28,9 @@ export const RecordChip = ({
       entityId={record.id}
       name={objectRecordIdentifier.name}
       avatarType={objectRecordIdentifier.avatarType}
-      avatarUrl={objectRecordIdentifier.avatarUrl}
+      avatarUrl={
+        getImageAbsoluteURIOrBase64(objectRecordIdentifier.avatarUrl) || ''
+      }
       linkToEntity={objectRecordIdentifier.linkToShowPage}
       maxWidth={maxWidth}
       className={className}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx

@@ -1,6 +1,6 @@
-import { IconComponent } from 'twenty-ui';
+import { EntityChip, IconComponent } from 'twenty-ui';
 
-import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 import { Filter } from '../types/Filter';
 
@@ -17,7 +17,7 @@ export const GenericEntityFilterChip = ({
     entityId={filter.value}
     name={filter.displayValue}
     avatarType="rounded"
-    avatarUrl={filter.displayAvatarUrl}
+    avatarUrl={getImageAbsoluteURIOrBase64(filter.displayAvatarUrl) || ''}
     LeftIcon={Icon}
   />
 );

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx

@@ -1,6 +1,7 @@
+import { Nullable } from 'twenty-ui';
+
 import { useDateField } from '@/object-record/record-field/meta-types/hooks/useDateField';
 import { DateInput } from '@/ui/field/input/components/DateInput';
-import { Nullable } from '~/types/Nullable';
 
 import { usePersistField } from '../../../hooks/usePersistField';
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx

@@ -1,5 +1,6 @@
+import { Nullable } from 'twenty-ui';
+
 import { DateInput } from '@/ui/field/input/components/DateInput';
-import { Nullable } from '~/types/Nullable';
 
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useDateTimeField } from '../../hooks/useDateTimeField';

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { Avatar } from 'twenty-ui';
 import { v4 } from 'uuid';
 
 import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
@@ -7,7 +8,7 @@ import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/use
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-import { Avatar } from '@/users/components/Avatar';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export const StyledSelectableItem = styled(SelectableItem)`
   height: 100%;
@@ -42,7 +43,9 @@ export const MultipleObjectRecordSelectItem = ({
         isKeySelected={isSelectedByKeyboard}
         avatar={
           <Avatar
-            avatarUrl={objectRecordForSelect.recordIdentifier.avatarUrl}
+            avatarUrl={getImageAbsoluteURIOrBase64(
+              objectRecordForSelect.recordIdentifier.avatarUrl,
+            )}
             entityId={objectRecordForSelect.record.id}
             placeholder={objectRecordForSelect.recordIdentifier.name}
             size="md"

packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { Avatar } from 'twenty-ui';
 
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
-import { Avatar } from '@/users/components/Avatar';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 type SelectableMenuItemSelectProps = {
   entity: EntityForSelect;
@@ -39,7 +40,7 @@ export const SelectableMenuItemSelect = ({
         hovered={isSelectedItemId}
         avatar={
           <Avatar
-            avatarUrl={entity.avatarUrl}
+            avatarUrl={getImageAbsoluteURIOrBase64(entity.avatarUrl)}
             entityId={entity.id}
             placeholder={entity.name}
             size="md"

packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
+import { Avatar } from 'twenty-ui';
 
 import { SelectableRecord } from '@/object-record/select/types/SelectableRecord';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-import { Avatar } from '@/users/components/Avatar';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export const MultipleRecordSelectDropdown = ({
   recordsToSelect,
@@ -68,7 +69,7 @@ export const MultipleRecordSelectDropdown = ({
           }
           avatar={
             <Avatar
-              avatarUrl={record.avatarUrl}
+              avatarUrl={getImageAbsoluteURIOrBase64(record.avatarUrl)}
               entityId={record.id}
               placeholder={record.name}
               size="md"

packages/twenty-front/src/modules/object-record/select/types/SelectableRecord.ts

@@ -1,4 +1,4 @@
-import { AvatarType } from '@/users/components/Avatar';
+import { AvatarType } from 'twenty-ui';
 
 export type SelectableRecord = {
   id: string;

packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts

@@ -1,6 +1,7 @@
+import { Nullable } from 'twenty-ui';
+
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordEdge } from '@/object-record/types/ObjectRecordEdge';
-import { Nullable } from '~/types/Nullable';
 
 export type ObjectRecordConnection<T extends ObjectRecord = ObjectRecord> = {
   __typename?: string;

packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts

@@ -1,4 +1,4 @@
-import { AvatarType } from '@/users/components/Avatar';
+import { AvatarType } from 'twenty-ui';
 
 export type ObjectRecordIdentifier = {
   id: string;