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

Split from #4518 Part of #4766
twentyhq · Apr 15, 2024 · b6d0b8a · b6d0b8a
1 parent acc2092
commit b6d0b8a
Show file tree

Hide file tree

Showing 93 changed files with 225 additions and 189 deletions.
diff --git a/packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx b/packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx
@@ -107,7 +107,7 @@ Handles overflowing text and displays a tooltip when the text overflows.
 
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/tooltip/OverflowingTextWithTooltip']}
+  availableComponentPaths={['twenty-ui']}
   componentCode={overflowingTextWithTooltipCode} 
 />
 

diff --git a/packages/twenty-docs/docs/ui-components/display/checkmark.mdx b/packages/twenty-docs/docs/ui-components/display/checkmark.mdx
@@ -17,7 +17,7 @@ Represents a successful or completed action.
 <TabItem value="usage" label="Usage" default>
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/checkmark/components/Checkmark']}
+  availableComponentPaths={['twenty-ui']}
   componentCode={checkmarkCode} 
 />
 
@@ -40,7 +40,7 @@ Represents a checkmark icon with the added feature of animation.
 <TabItem value="usage" label="Usage" default>
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/checkmark/components/AnimatedCheckmark']}
+  availableComponentPaths={['twenty-ui']}
   componentCode={animatedCheckmarkCode}
 />
 

diff --git a/packages/twenty-docs/docs/ui-components/display/chip.mdx b/packages/twenty-docs/docs/ui-components/display/chip.mdx
@@ -18,7 +18,7 @@ A visual element that you can use as a clickable or non-clickable container with
 <TabItem value="usage" label="Usage" default>
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/chip/components/Chip']}
+  availableComponentPaths={['twenty-ui']}
   componentCode={chipCode} 
 />
 </TabItem>
@@ -117,8 +117,8 @@ A visual element that you can use as a clickable or non-clickable container with
 ### Transparent Disabled Chip
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/chip/components/Chip']}
-  componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
+  availableComponentPaths={['twenty-ui']}
+  componentCode={`import { Chip } from "twenty-ui";
 
 export const MyComponent = () => {
   return (
@@ -144,8 +144,8 @@ export const MyComponent = () => {
 ### Disabled Chip with Tooltip
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/chip/components/Chip']}
-  componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
+  availableComponentPaths={['twenty-ui']}
+  componentCode={`import { Chip } from "twenty-ui";
   
 export const MyComponent = () => {
   return (
@@ -176,7 +176,7 @@ A Chip-like element to display information about an entity.
   <TabItem value="usage" label="Usage" default>
 
 <SandpackEditor
-  availableComponentPaths={['@/ui/display/chip/components/EntityChip', 'twenty-ui']}
+  availableComponentPaths={['twenty-ui']}
   componentCode={entityChipCode} 
 />
   </TabItem >

diff --git a/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js b/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js
@@ -1,4 +1,4 @@
-import { AnimatedCheckmark } from "@/ui/display/checkmark/components/AnimatedCheckmark";
+import { AnimatedCheckmark } from 'twenty-ui';
 
 export const MyComponent = () => {
   return (
@@ -9,6 +9,4 @@ export const MyComponent = () => {
       size={30}
     />
   );
-
-
 };
diff --git a/packages/twenty-docs/src/ui/display/checkmarkCode.js b/packages/twenty-docs/src/ui/display/checkmarkCode.js
@@ -1,4 +1,4 @@
-import { Checkmark } from "@/ui/display/checkmark/components/Checkmark";
+import { Checkmark } from 'twenty-ui';
 
 export const MyComponent = () => {
   return <Checkmark />;

diff --git a/packages/twenty-docs/src/ui/display/chipCode.js b/packages/twenty-docs/src/ui/display/chipCode.js
@@ -1,4 +1,4 @@
-import { Chip } from "@/ui/display/chip/components/Chip";
+import { Chip } from 'twenty-ui';
 
 export const MyComponent = () => {
   return (

diff --git a/packages/twenty-docs/src/ui/display/entityChipCode.js b/packages/twenty-docs/src/ui/display/entityChipCode.js
@@ -1,7 +1,5 @@
 import { BrowserRouter as Router } from 'react-router-dom';
-import { IconTwentyStar } from 'twenty-ui';
-
-import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { EntityChip, IconTwentyStar } from 'twenty-ui';
 
 export const MyComponent = () => {
   return (

diff --git a/packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js b/packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js
@@ -1,8 +1,8 @@
-import { OverflowingTextWithTooltip } from "@/ui/display/tooltip/OverflowingTextWithTooltip";
+import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 export const MyComponent = () => {
   const crmTaskDescription =
-    "Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.";
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
 
   return <OverflowingTextWithTooltip text={crmTaskDescription} />;
 };
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCalendarEvent } from 'twenty-ui';
+import {
+  Chip,
+  ChipAccent,
+  ChipSize,
+  ChipVariant,
+  IconCalendarEvent,
+} from 'twenty-ui';
 
 import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
@@ -11,12 +17,6 @@ import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/util
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
-import {
-  Chip,
-  ChipAccent,
-  ChipSize,
-  ChipVariant,
-} from '@/ui/display/chip/components/Chip';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@@ -3,7 +3,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { format } from 'date-fns';
 import { useRecoilValue } from 'recoil';
-import { IconArrowRight, IconLock } from 'twenty-ui';
+import { Avatar, AvatarGroup, IconArrowRight, IconLock } from 'twenty-ui';
 
 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
@@ -14,9 +14,8 @@ import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEv
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { Avatar } from '@/users/components/Avatar';
-import { AvatarGroup } from '@/users/components/AvatarGroup';
 import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 import { isDefined } from '~/utils/isDefined';
 
 type CalendarEventRowProps = {
@@ -161,7 +160,7 @@ export const CalendarEventRow = ({
               key={[participant.workspaceMemberId, participant.displayName]
                 .filter(isDefined)
                 .join('-')}
-              avatarUrl={participant.avatarUrl}
+              avatarUrl={getImageAbsoluteURIOrBase64(participant.avatarUrl)}
               placeholder={
                 participant.firstName && participant.lastName
                   ? `${participant.firstName} ${participant.lastName}`

diff --git a/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx b/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
@@ -1,12 +1,13 @@
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui';
 
 import { Comment } from '@/activities/types/Comment';
-import { Avatar } from '@/users/components/Avatar';
 import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -75,7 +76,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
     <StyledContainer>
       <StyledLeftContainer>
         <Avatar
-          avatarUrl={avatarUrl}
+          avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
           size="md"
           entityId={author?.id}
           placeholder={authorName}

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx b/packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import styled from '@emotion/styled';
+import { Chip, ChipVariant } from 'twenty-ui';
 import { v4 } from 'uuid';
 
 import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { RGBA } from '@/ui/theme/constants/Rgba';
 

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityTypeDropdown.tsx b/packages/twenty-front/src/modules/activities/components/ActivityTypeDropdown.tsx
@@ -1,14 +1,15 @@
 import { useTheme } from '@emotion/react';
 import { useRecoilState } from 'recoil';
-import { IconCheckbox, IconNotes } from 'twenty-ui';
-
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import {
   Chip,
   ChipAccent,
   ChipSize,
   ChipVariant,
-} from '@/ui/display/chip/components/Chip';
+  IconCheckbox,
+  IconNotes,
+} from 'twenty-ui';
+
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 
 type ActivityTypeDropdownProps = {
   activityId: string;

diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui';
 
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { Avatar } from '@/users/components/Avatar';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 const StyledAvatar = styled(Avatar)`
   margin-right: ${({ theme }) => theme.spacing(1)};
@@ -67,7 +68,7 @@ export const ParticipantChip = ({
       ) : (
         <StyledChip>
           <StyledAvatar
-            avatarUrl={avatarUrl}
+            avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
             type="rounded"
             placeholder={displayName}
             size="sm"

diff --git a/...ges/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx b/...ges/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
-import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 
 type EmailThreadMessageReceiversProps = {
   receivers: EmailThreadMessageParticipant[];

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -1,16 +1,17 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback } from 'recoil';
+import { Avatar } from 'twenty-ui';
 
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
-import { Avatar } from '@/users/components/Avatar';
 import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 const StyledCardContent = styled(CardContent)<{ visibility: string }>`
   align-items: center;
@@ -152,20 +153,24 @@ export const EmailThreadPreview = ({
       <StyledHeading unread={!thread.read}>
         <StyledParticipantsContainer>
           <Avatar
-            avatarUrl={thread?.firstParticipant?.avatarUrl}
+            avatarUrl={getImageAbsoluteURIOrBase64(
+              thread?.firstParticipant?.avatarUrl,
+            )}
             placeholder={thread.firstParticipant.displayName}
             type="rounded"
           />
           {thread?.lastTwoParticipants?.[0] && (
             <StyledAvatar
-              avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
+              avatarUrl={getImageAbsoluteURIOrBase64(
+                thread.lastTwoParticipants[0].avatarUrl,
+              )}
               placeholder={thread.lastTwoParticipants[0].displayName}
               type="rounded"
             />
           )}
           {finalDisplayedName && (
             <StyledAvatar
-              avatarUrl={finalAvatarUrl}
+              avatarUrl={getImageAbsoluteURIOrBase64(finalAvatarUrl)}
               placeholder={finalDisplayedName}
               type="rounded"
               color={isCountIcon ? GRAY_SCALE.gray50 : undefined}

diff --git a/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts b/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts
@@ -1,13 +1,13 @@
 import { useApolloClient } from '@apollo/client';
 import { useRecoilValue } from 'recoil';
+import { Nullable } from 'twenty-ui';
 
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
-import { Nullable } from '~/types/Nullable';
 import { isDefined } from '~/utils/isDefined';
 
 export const useActivityTargetObjectRecords = (activity: Activity) => {

diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -1,13 +1,16 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCalendar, IconComment } from 'twenty-ui';
+import {
+  IconCalendar,
+  IconComment,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
 
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { Activity } from '@/activities/types/Activity';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
-import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
 import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
 

diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
@@ -2,17 +2,17 @@ import { Tooltip } from 'react-tooltip';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconCheckbox, IconNotes } from 'twenty-ui';
+import { Avatar, IconCheckbox, IconNotes } from 'twenty-ui';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { timelineActivityWithoutTargetsFamilyState } from '@/activities/timeline/states/timelineActivityWithoutTargetsFamilyState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { Avatar } from '@/users/components/Avatar';
 import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 const StyledAvatarContainer = styled.div`
   align-items: center;
@@ -170,7 +170,9 @@ export const TimelineActivity = ({
       <StyledTimelineItemContainer>
         <StyledAvatarContainer>
           <Avatar
-            avatarUrl={activityForTimeline.author?.avatarUrl}
+            avatarUrl={getImageAbsoluteURIOrBase64(
+              activityForTimeline.author?.avatarUrl,
+            )}
             placeholder={activityForTimeline.author?.name.firstName ?? ''}
             size="sm"
             type="rounded"

diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { ActivityType } from '@/activities/types/Activity';
-import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
 
 const StyledTitleContainer = styled.div`

diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 type LogoProps = {
   workspaceLogo?: string | null;