From b6d0b8a8955468966f856955ed87af78581faefe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Mon, 15 Apr 2024 12:05:06 +0200 Subject: [PATCH] refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946) Split from https://github.com/twentyhq/twenty/pull/4518 Part of #4766 --- .../docs/ui-components/display/app-tooltip.mdx | 2 +- .../docs/ui-components/display/checkmark.mdx | 4 ++-- .../docs/ui-components/display/chip.mdx | 12 ++++++------ .../src/ui/display/animatedCheckmarkCode.js | 4 +--- .../twenty-docs/src/ui/display/checkmarkCode.js | 2 +- packages/twenty-docs/src/ui/display/chipCode.js | 2 +- .../twenty-docs/src/ui/display/entityChipCode.js | 4 +--- .../ui/display/overflowingTextWithTooltipCode.js | 4 ++-- .../calendar/components/CalendarEventDetails.tsx | 14 +++++++------- .../calendar/components/CalendarEventRow.tsx | 7 +++---- .../modules/activities/comment/CommentHeader.tsx | 5 +++-- .../activities/components/ActivityTargetChips.tsx | 2 +- .../activities/components/ActivityTypeDropdown.tsx | 9 +++++---- .../activities/components/ParticipantChip.tsx | 5 +++-- .../components/EmailThreadMessageReceivers.tsx | 2 +- .../emails/components/EmailThreadPreview.tsx | 13 +++++++++---- .../hooks/useActivityTargetObjectRecords.ts | 2 +- .../activities/tasks/components/TaskRow.tsx | 7 +++++-- .../timeline/components/TimelineActivity.tsx | 8 +++++--- .../timeline/components/TimelineActivityTitle.tsx | 2 +- .../src/modules/auth/components/Logo.tsx | 2 +- .../command-menu/components/CommandMenu.tsx | 3 +-- .../src/modules/favorites/components/Favorites.tsx | 5 +++-- .../favorites/hooks/__mocks__/useFavorites.ts | 2 +- .../src/modules/favorites/types/Favorite.ts | 2 +- .../navigation/components/AppNavigationDrawer.tsx | 2 +- .../useColumnDefinitionsFromFieldMetadata.test.ts | 2 +- .../hooks/useColumnDefinitionsFromFieldMetadata.ts | 2 +- .../object-record/components/RecordChip.tsx | 8 +++++--- .../components/GenericEntityFilterChip.tsx | 6 +++--- .../meta-types/input/components/DateFieldInput.tsx | 3 ++- .../input/components/DateTimeFieldInput.tsx | 3 ++- .../components/MultipleObjectRecordSelectItem.tsx | 7 +++++-- .../components/SelectableMenuItemSelect.tsx | 5 +++-- .../components/MultipleRecordSelectDropdown.tsx | 5 +++-- .../object-record/select/types/SelectableRecord.ts | 2 +- .../object-record/types/ObjectRecordConnection.ts | 3 ++- .../object-record/types/ObjectRecordIdentifier.ts | 2 +- .../src/modules/people/components/PersonChip.tsx | 9 ++++----- .../components/SettingsObjectFieldItemTableRow.tsx | 3 +-- .../profile/components/ProfilePictureUploader.tsx | 2 +- .../workspace/components/WorkspaceLogoUploader.tsx | 2 +- .../components/MatchColumnSelect.tsx | 2 +- .../components/UploadStep/components/columns.tsx | 2 +- .../ValidationStep/components/columns.tsx | 2 +- .../ui/display/expandable-list/ExpandableList.tsx | 2 +- .../info/components/__stories__/Info.stories.tsx | 8 +++----- .../ui/field/display/components/TextDisplay.tsx | 2 +- .../ui/field/input/components/DateInput.tsx | 2 +- .../color-scheme/components/ColorSchemeCard.tsx | 2 +- .../__stories__/DropdownMenu.stories.tsx | 3 +-- .../src/modules/ui/layout/page/PageHeader.tsx | 7 +++++-- .../show-page/components/ShowPageSummaryCard.tsx | 2 +- .../ui/navigation/link/components/RoundedLink.tsx | 3 +-- .../components/MenuItemMultiSelectAvatar.tsx | 2 +- .../menu-item/components/MenuItemSelectAvatar.tsx | 4 +--- .../MenuItemMultiSelectAvatar.stories.tsx | 10 +++++----- .../__stories__/MenuItemSelectAvatar.stories.tsx | 10 +++++----- .../internals/components/MenuItemLeftContent.tsx | 8 +++++--- .../ui/navigation/step-bar/components/Step.tsx | 2 +- .../src/modules/users/components/UserChip.tsx | 6 ++++-- .../ViewFieldsVisibilityDropdownSection.tsx | 9 +++++++-- .../workspace/components/WorkspaceMemberCard.tsx | 6 +++--- .../src/testing/decorators/ComponentDecorator.tsx | 13 ------------- .../image/getImageAbsoluteURIOrBase64.ts} | 6 +----- packages/twenty-ui/.eslintrc.cjs | 4 ++-- packages/twenty-ui/package.json | 4 ++-- .../src/display/avatar}/components/Avatar.tsx | 9 +++------ .../src/display/avatar}/components/AvatarGroup.tsx | 0 .../components/__stories__/Avatar.stories.tsx | 10 +++++++--- .../components/__stories__/AvatarGroup.stories.tsx | 12 +++++++----- .../checkmark/components/AnimatedCheckmark.tsx | 0 .../display/checkmark/components/Checkmark.tsx | 3 ++- .../components/__stories__/Checkmark.stories.tsx | 4 ++-- .../src}/display/chip/components/Chip.tsx | 2 +- .../src}/display/chip/components/EntityChip.tsx | 6 +++--- .../chip/components/__stories__/Chip.stories.tsx | 8 +++++--- .../components/__stories__/EntityChip.stories.tsx | 4 ++-- packages/twenty-ui/src/display/index.ts | 8 ++++++++ .../src}/display/tooltip/AppTooltip.tsx | 2 +- .../display/tooltip/OverflowingTextWithTooltip.tsx | 0 .../OverflowTextWithTooltip.stories.tsx | 2 +- .../tooltip/__stories__/Tooltip.stories.tsx | 10 ++++++---- .../src/testing/decorators/CatalogDecorator.tsx | 0 .../src/testing/decorators/RouterDecorator.tsx | 8 ++++++++ packages/twenty-ui/src/testing/index.ts | 4 ++++ .../twenty-ui/src/testing/mocks/avatarUrlMock.ts | 2 ++ .../src/testing/types/CatalogStory.ts} | 2 +- .../utils/__tests__/stringToHslColor.test.ts | 2 +- .../src/utilities/color/utils/stringToHslColor.ts} | 0 packages/twenty-ui/src/utilities/index.ts | 2 ++ .../src/utilities}/types/Nullable.ts | 0 tsconfig.base.json | 3 +-- 93 files changed, 225 insertions(+), 189 deletions(-) delete mode 100644 packages/twenty-front/src/testing/decorators/ComponentDecorator.tsx rename packages/twenty-front/src/{modules/users/utils/getProfilePictureAbsoluteURI.ts => utils/image/getImageAbsoluteURIOrBase64.ts} (74%) rename packages/{twenty-front/src/modules/users => twenty-ui/src/display/avatar}/components/Avatar.tsx (90%) rename packages/{twenty-front/src/modules/users => twenty-ui/src/display/avatar}/components/AvatarGroup.tsx (100%) rename packages/{twenty-front/src/modules/users => twenty-ui/src/display/avatar}/components/__stories__/Avatar.stories.tsx (74%) rename packages/{twenty-front/src/modules/users => twenty-ui/src/display/avatar}/components/__stories__/AvatarGroup.stories.tsx (84%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/checkmark/components/AnimatedCheckmark.tsx (100%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/checkmark/components/Checkmark.tsx (90%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/checkmark/components/__stories__/Checkmark.stories.tsx (77%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/chip/components/Chip.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/chip/components/EntityChip.tsx (89%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/chip/components/__stories__/Chip.stories.tsx (89%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/chip/components/__stories__/EntityChip.stories.tsx (73%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tooltip/AppTooltip.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tooltip/OverflowingTextWithTooltip.tsx (100%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx (93%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tooltip/__stories__/Tooltip.stories.tsx (87%) rename packages/{twenty-front => twenty-ui}/src/testing/decorators/CatalogDecorator.tsx (100%) create mode 100644 packages/twenty-ui/src/testing/decorators/RouterDecorator.tsx create mode 100644 packages/twenty-ui/src/testing/mocks/avatarUrlMock.ts rename packages/{twenty-front/src/testing/types.ts => twenty-ui/src/testing/types/CatalogStory.ts} (93%) rename packages/{twenty-front/src => twenty-ui/src/utilities/color}/utils/__tests__/stringToHslColor.test.ts (75%) rename packages/{twenty-front/src/utils/string-to-hsl.ts => twenty-ui/src/utilities/color/utils/stringToHslColor.ts} (100%) rename packages/{twenty-front/src => twenty-ui/src/utilities}/types/Nullable.ts (100%) diff --git a/packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx b/packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx index 3ad04432d..95636c512 100644 --- 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. diff --git a/packages/twenty-docs/docs/ui-components/display/checkmark.mdx b/packages/twenty-docs/docs/ui-components/display/checkmark.mdx index b4c8d926c..621437830 100644 --- 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. @@ -40,7 +40,7 @@ Represents a checkmark icon with the added feature of animation. diff --git a/packages/twenty-docs/docs/ui-components/display/chip.mdx b/packages/twenty-docs/docs/ui-components/display/chip.mdx index a6f044122..f8040b915 100644 --- 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 @@ -117,8 +117,8 @@ A visual element that you can use as a clickable or non-clickable container with ### Transparent Disabled Chip { return ( @@ -144,8 +144,8 @@ export const MyComponent = () => { ### Disabled Chip with Tooltip { return ( @@ -176,7 +176,7 @@ A Chip-like element to display information about an entity. diff --git a/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js b/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js index 8c305fc72..995dfc1c0 100644 --- 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 index 510d6bcfb..47282737d 100644 --- 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 ; diff --git a/packages/twenty-docs/src/ui/display/chipCode.js b/packages/twenty-docs/src/ui/display/chipCode.js index 78f726c03..f25021f2b 100644 --- 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 index d7f81c178..e3093fb3c 100644 --- 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 index 8100dad7e..db24bccff 100644 --- 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 ; }; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index 363ceafeb..c147e1bf8 100644 --- 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 index 1fbdeeb03..faddcb770 100644 --- 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 index 390851d52..13ed1aa16 100644 --- 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) => { theme.spacing(1)}; @@ -67,7 +68,7 @@ export const ParticipantChip = ({ ) : ( ` align-items: center; @@ -152,20 +153,24 @@ export const EmailThreadPreview = ({ {thread?.lastTwoParticipants?.[0] && ( )} {finalDisplayedName && ( { diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx index e8655637a..a7ad9927c 100644 --- 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 index 5ff634826..2b4ff934f 100644 --- 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 = ({ { Icon={() => ( { it('should return empty definitions if no object is passed', () => { diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata.ts index f673adee7..b7764673e 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata.ts @@ -1,10 +1,10 @@ import { useMemo } from 'react'; +import { Nullable } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns'; -import { Nullable } from '~/types/Nullable'; import { formatFieldMetadataItemAsColumnDefinition } from '../utils/formatFieldMetadataItemAsColumnDefinition'; import { formatFieldMetadataItemsAsFilterDefinitions } from '../utils/formatFieldMetadataItemsAsFilterDefinitions'; diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx index 20ef7dd1e..1c167e194 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/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} diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx index b64988cec..e11ae14c9 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx +++ b/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} /> ); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx index 631d25624..ea4406a42 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx index d3b5f46ce..b3c2291ca 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx index c5b836053..ed975e2bb 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx +++ b/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={ = { __typename?: string; diff --git a/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts b/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts index 3d26836d7..766fe0dea 100644 --- a/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts +++ b/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; diff --git a/packages/twenty-front/src/modules/people/components/PersonChip.tsx b/packages/twenty-front/src/modules/people/components/PersonChip.tsx index 4edfb305c..9c7b2177d 100644 --- a/packages/twenty-front/src/modules/people/components/PersonChip.tsx +++ b/packages/twenty-front/src/modules/people/components/PersonChip.tsx @@ -1,7 +1,6 @@ -import { - EntityChip, - EntityChipVariant, -} from '@/ui/display/chip/components/EntityChip'; +import { EntityChip, EntityChipVariant } from 'twenty-ui'; + +import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64'; export type PersonChipProps = { id: string; @@ -21,7 +20,7 @@ export const PersonChip = ({ linkToEntity={`/person/${id}`} name={name} avatarType="rounded" - avatarUrl={avatarUrl} + avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl) || ''} variant={variant} /> ); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 7cb0549e2..d15615fc1 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -2,7 +2,7 @@ import { ReactNode, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useIcons } from 'twenty-ui'; +import { Nullable, useIcons } from 'twenty-ui'; import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; @@ -11,7 +11,6 @@ import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifier import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { Nullable } from '~/types/Nullable'; import { RELATION_TYPES } from '../../constants/RelationTypes'; diff --git a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx index 4a65b1ff3..6bc475de5 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx @@ -5,8 +5,8 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { ImageInput } from '@/ui/input/components/ImageInput'; -import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI'; import { useUploadProfilePictureMutation } from '~/generated/graphql'; +import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64'; import { isDefined } from '~/utils/isDefined'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; diff --git a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx index 009c32d54..3a3699c9b 100644 --- a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx +++ b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx @@ -2,11 +2,11 @@ import { useRecoilState } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { ImageInput } from '@/ui/input/components/ImageInput'; -import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI'; import { useUpdateWorkspaceMutation, useUploadWorkspaceLogoMutation, } from '~/generated/graphql'; +import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; export const WorkspaceLogoUploader = () => { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx index cd9fd48b8..f4dbc49f0 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx @@ -9,11 +9,11 @@ import { size, useFloating, } from '@floating-ui/react'; +import { AppTooltip } from 'twenty-ui'; import { ReadonlyDeep } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; import { SelectOption } from '@/spreadsheet-import/types'; -import { AppTooltip } from '@/ui/display/tooltip/AppTooltip'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx index 13092a93b..6ec617b1e 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx @@ -2,9 +2,9 @@ import { Column } from 'react-data-grid'; import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; +import { AppTooltip } from 'twenty-ui'; import { Fields } from '@/spreadsheet-import/types'; -import { AppTooltip } from '@/ui/display/tooltip/AppTooltip'; const StyledHeaderContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx index 11d83dbee..75e0a03da 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx @@ -2,10 +2,10 @@ import { Column, useRowSelection } from 'react-data-grid'; import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; +import { AppTooltip } from 'twenty-ui'; import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect'; import { Data, Fields } from '@/spreadsheet-import/types'; -import { AppTooltip } from '@/ui/display/tooltip/AppTooltip'; import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; import { TextInput } from '@/ui/input/components/TextInput'; import { Toggle } from '@/ui/input/components/Toggle'; diff --git a/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx b/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx index 0d7bf8c2b..631dd788b 100644 --- a/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx @@ -1,8 +1,8 @@ import React, { ReactElement, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; +import { Chip, ChipVariant } from 'twenty-ui'; -import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip'; import { IntersectionObserverWrapper } from '@/ui/display/expandable-list/IntersectionObserverWrapper'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; diff --git a/packages/twenty-front/src/modules/ui/display/info/components/__stories__/Info.stories.tsx b/packages/twenty-front/src/modules/ui/display/info/components/__stories__/Info.stories.tsx index 98ac1e317..54fcdfe0b 100644 --- a/packages/twenty-front/src/modules/ui/display/info/components/__stories__/Info.stories.tsx +++ b/packages/twenty-front/src/modules/ui/display/info/components/__stories__/Info.stories.tsx @@ -1,12 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; +import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui'; -import { Info, InfoAccent } from '@/ui/display/info/components/Info.tsx'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator.tsx'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator.tsx'; -import { CatalogStory } from '~/testing/types.ts'; +import { Info, InfoAccent } from '@/ui/display/info/components/Info'; const meta: Meta = { - title: 'UI/Display/Info/Info', + title: 'UI/Display/Info', component: Info, }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx index 62e4c5ed9..c29f7d85a 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx @@ -1,4 +1,4 @@ -import { OverflowingTextWithTooltip } from '../../../display/tooltip/OverflowingTextWithTooltip'; +import { OverflowingTextWithTooltip } from 'twenty-ui'; import { EllipsisDisplay } from './EllipsisDisplay'; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx index 41c0667aa..89b039ad5 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx @@ -2,11 +2,11 @@ import { useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { flip, offset, useFloating } from '@floating-ui/react'; +import { Nullable } from 'twenty-ui'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { DateDisplay } from '@/ui/field/display/components/DateDisplay'; import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker'; -import { Nullable } from '~/types/Nullable'; const StyledCalendarContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx index f46b73086..00daf1cff 100644 --- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx +++ b/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx @@ -6,8 +6,8 @@ import { motion, useAnimation, } from 'framer-motion'; +import { Checkmark } from 'twenty-ui'; -import { Checkmark } from '@/ui/display/checkmark/components/Checkmark'; import { ColorScheme } from '@/workspace-member/types/WorkspaceMember'; const StyledColorSchemeBackground = styled.div< diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx index d362e1ed7..3d939b5be 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -3,14 +3,13 @@ import styled from '@emotion/styled'; import { Decorator, Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, waitFor, within } from '@storybook/test'; import { PlayFunction } from '@storybook/types'; +import { Avatar, ComponentDecorator } from 'twenty-ui'; import { Button } from '@/ui/input/button/components/Button'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar'; import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; -import { Avatar } from '@/users/components/Avatar'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { Dropdown } from '../Dropdown'; import { DropdownMenuHeader } from '../DropdownMenuHeader'; diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index 061d45fd8..71ba45978 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -4,9 +4,12 @@ import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronLeft, IconComponent } from 'twenty-ui'; +import { + IconChevronLeft, + IconComponent, + OverflowingTextWithTooltip, +} from 'twenty-ui'; -import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 93c5575cc..18951c7e9 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, ReactNode, useRef } from 'react'; import { Tooltip } from 'react-tooltip'; import styled from '@emotion/styled'; +import { Avatar, AvatarType } from 'twenty-ui'; import { v4 as uuidV4 } from 'uuid'; -import { Avatar, AvatarType } from '@/users/components/Avatar'; import { beautifyExactDateTime, beautifyPastDateRelativeToNow, diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx index d55c53631..1ca731459 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { Link as ReactLink } from 'react-router-dom'; import styled from '@emotion/styled'; - -import { Chip, ChipSize, ChipVariant } from '@/ui/display/chip/components/Chip'; +import { Chip, ChipSize, ChipVariant } from 'twenty-ui'; type RoundedLinkProps = { href: string; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx index 60e32d628..7e8dff27e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; +import { OverflowingTextWithTooltip } from 'twenty-ui'; -import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx index dfe673066..1a5a0069d 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx @@ -1,8 +1,6 @@ import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; -import { IconCheck } from 'twenty-ui'; - -import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; +import { IconCheck, OverflowingTextWithTooltip } from 'twenty-ui'; import { StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx index 7305dd6ba..f51c55a63 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx @@ -1,14 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; - -import { Avatar } from '@/users/components/Avatar'; import { + Avatar, CatalogDecorator, CatalogDimension, CatalogOptions, -} from '~/testing/decorators/CatalogDecorator'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + CatalogStory, + ComponentDecorator, +} from 'twenty-ui'; + import { avatarUrl } from '~/testing/mock-data/users'; -import { CatalogStory } from '~/testing/types'; import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx index deed9cddf..4d2895bb3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx @@ -1,14 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; - -import { Avatar } from '@/users/components/Avatar'; import { + Avatar, CatalogDecorator, CatalogDimension, CatalogOptions, -} from '~/testing/decorators/CatalogDecorator'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + CatalogStory, + ComponentDecorator, +} from 'twenty-ui'; + import { avatarUrl } from '~/testing/mock-data/users'; -import { CatalogStory } from '~/testing/types'; import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx index 3b3d636a2..01ae16da3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx @@ -1,7 +1,9 @@ import { useTheme } from '@emotion/react'; -import { IconComponent, IconGripVertical } from 'twenty-ui'; - -import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; +import { + IconComponent, + IconGripVertical, + OverflowingTextWithTooltip, +} from 'twenty-ui'; import { StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx index 6fed18624..ebb5d3251 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx @@ -1,8 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import { AnimatedCheckmark } from 'twenty-ui'; -import { AnimatedCheckmark } from '@/ui/display/checkmark/components/AnimatedCheckmark'; import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; diff --git a/packages/twenty-front/src/modules/users/components/UserChip.tsx b/packages/twenty-front/src/modules/users/components/UserChip.tsx index b5a5d1a23..82beb9da5 100644 --- a/packages/twenty-front/src/modules/users/components/UserChip.tsx +++ b/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) || ''} /> ); diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index 72954b829..bf9fa7907 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -5,11 +5,16 @@ import { OnDragEndResponder, ResponderProvided, } from '@hello-pangea/dnd'; -import { IconInfoCircle, IconMinus, IconPlus, useIcons } from 'twenty-ui'; +import { + AppTooltip, + IconInfoCircle, + IconMinus, + IconPlus, + useIcons, +} from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { AppTooltip } from '@/ui/display/tooltip/AppTooltip'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx index e67e49bd8..cae6dff29 100644 --- a/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx +++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { Avatar, OverflowingTextWithTooltip } from 'twenty-ui'; -import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; -import { Avatar } from '@/users/components/Avatar'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; +import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64'; const StyledContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; @@ -39,7 +39,7 @@ export const WorkspaceMemberCard = ({ }: WorkspaceMemberCardProps) => ( { - const { container } = context.parameters; - - return ( - - - - ); -}; diff --git a/packages/twenty-front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts b/packages/twenty-front/src/utils/image/getImageAbsoluteURIOrBase64.ts similarity index 74% rename from packages/twenty-front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts rename to packages/twenty-front/src/utils/image/getImageAbsoluteURIOrBase64.ts index b38880af8..7f4ad3b35 100644 --- a/packages/twenty-front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts +++ b/packages/twenty-front/src/utils/image/getImageAbsoluteURIOrBase64.ts @@ -5,11 +5,7 @@ export const getImageAbsoluteURIOrBase64 = (imageUrl?: string | null) => { return null; } - if (imageUrl?.startsWith('data:')) { - return imageUrl; - } - - if (imageUrl?.startsWith('https:')) { + if (imageUrl?.startsWith('data:') || imageUrl?.startsWith('https:')) { return imageUrl; } diff --git a/packages/twenty-ui/.eslintrc.cjs b/packages/twenty-ui/.eslintrc.cjs index ccb1c6e41..5768c8194 100644 --- a/packages/twenty-ui/.eslintrc.cjs +++ b/packages/twenty-ui/.eslintrc.cjs @@ -14,13 +14,13 @@ module.exports = { patterns: [ { group: ['@tabler/icons-react'], - message: 'Please import icons from `src/display`', + message: 'Please import icons from `@ui/display`', }, { group: ['react-hotkeys-web-hook'], importNames: ['useHotkeys'], message: - 'Please use the custom wrapper: `useScopedHotkeys` from `src/utilities`', + 'Please use the custom wrapper: `useScopedHotkeys` from `@ui/utilities`', }, ], }, diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json index 46db16274..a8a1a8f22 100644 --- a/packages/twenty-ui/package.json +++ b/packages/twenty-ui/package.json @@ -2,10 +2,10 @@ "name": "twenty-ui", "version": "0.4.0", "type": "module", - "main": "./dist/index.js", - "types": "./dist/index.d.ts", + "main": "./src/index.ts", "exports": { ".": { + "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" } diff --git a/packages/twenty-front/src/modules/users/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx similarity index 90% rename from packages/twenty-front/src/modules/users/components/Avatar.tsx rename to packages/twenty-ui/src/display/avatar/components/Avatar.tsx index 8cc37a71b..16def94d2 100644 --- a/packages/twenty-front/src/modules/users/components/Avatar.tsx +++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx @@ -2,10 +2,7 @@ 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'; +import { Nullable, stringToHslColor } from '@ui/utilities'; export type AvatarType = 'squared' | 'rounded'; @@ -93,7 +90,7 @@ export const Avatar = ({ const img = new Image(); img.onload = () => resolve(false); img.onerror = () => resolve(true); - img.src = getImageAbsoluteURIOrBase64(avatarUrl) as string; + img.src = avatarUrl; }).then((res) => { setIsInvalidAvatarUrl(res as boolean); }); @@ -110,7 +107,7 @@ export const Avatar = ({ return ( = { title: 'Modules/Users/Avatar', component: Avatar, decorators: [ComponentDecorator], - args: { avatarUrl, size: 'md', placeholder: 'L', type: 'rounded' }, + args: { + avatarUrl: AVATAR_URL_MOCK, + size: 'md', + placeholder: 'L', + type: 'rounded', + }, }; export default meta; diff --git a/packages/twenty-front/src/modules/users/components/__stories__/AvatarGroup.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx similarity index 84% rename from packages/twenty-front/src/modules/users/components/__stories__/AvatarGroup.stories.tsx rename to packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx index 0a6676cdc..18ad3c3d4 100644 --- a/packages/twenty-front/src/modules/users/components/__stories__/AvatarGroup.stories.tsx +++ b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx @@ -5,10 +5,12 @@ import { 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'; +} from '@ui/display/avatar/components/Avatar'; +import { + AVATAR_URL_MOCK, + CatalogDecorator, + ComponentDecorator, +} from '@ui/testing'; import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup'; @@ -18,7 +20,7 @@ const makeAvatar = (userName: string, props: Partial = {}) => ( ); const getAvatars = (commonProps: Partial = {}) => [ - makeAvatar('Matthew', { avatarUrl, ...commonProps }), + makeAvatar('Matthew', { avatarUrl: AVATAR_URL_MOCK, ...commonProps }), makeAvatar('Sophie', commonProps), makeAvatar('Jane', commonProps), makeAvatar('Lily', commonProps), diff --git a/packages/twenty-front/src/modules/ui/display/checkmark/components/AnimatedCheckmark.tsx b/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/display/checkmark/components/AnimatedCheckmark.tsx rename to packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx diff --git a/packages/twenty-front/src/modules/ui/display/checkmark/components/Checkmark.tsx b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx similarity index 90% rename from packages/twenty-front/src/modules/ui/display/checkmark/components/Checkmark.tsx rename to packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx index 584e70f74..7078c8798 100644 --- a/packages/twenty-front/src/modules/ui/display/checkmark/components/Checkmark.tsx +++ b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCheck } from 'twenty-ui'; + +import { IconCheck } from '@ui/display/icon/components/TablerIcons'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx similarity index 77% rename from packages/twenty-front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx rename to packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx index 96fe4b634..1cda83b0e 100644 --- a/packages/twenty-front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx +++ b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; +import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator'; import { Checkmark } from '../Checkmark'; const meta: Meta = { - title: 'UI/Display/Checkmark/Checkmark', + title: 'UI/Display/Checkmark', component: Checkmark, decorators: [ComponentDecorator], }; diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx rename to packages/twenty-ui/src/display/chip/components/Chip.tsx index cec0483d2..7f8130ae6 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -2,7 +2,7 @@ import { MouseEvent, ReactNode } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip'; +import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; export enum ChipSize { Large = 'large', diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx similarity index 89% rename from packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx rename to packages/twenty-ui/src/display/chip/components/EntityChip.tsx index 76d4cd201..246782496 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; -import { IconComponent } from 'twenty-ui'; -import { Avatar, AvatarType } from '@/users/components/Avatar'; -import { Nullable } from '~/types/Nullable'; +import { Avatar, AvatarType } from '@ui/display/avatar/components/Avatar'; +import { IconComponent } from '@ui/display/icon/types/IconComponent'; +import { Nullable } from '@ui/utilities/types/Nullable'; import { Chip, ChipVariant } from './Chip'; diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx b/packages/twenty-ui/src/display/chip/components/__stories__/Chip.stories.tsx similarity index 89% rename from packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx rename to packages/twenty-ui/src/display/chip/components/__stories__/Chip.stories.tsx index cd506b961..e1a4cd003 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx +++ b/packages/twenty-ui/src/display/chip/components/__stories__/Chip.stories.tsx @@ -1,8 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { CatalogStory } from '~/testing/types'; +import { + CatalogDecorator, + CatalogStory, + ComponentDecorator, +} from '@ui/testing'; import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip'; diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx b/packages/twenty-ui/src/display/chip/components/__stories__/EntityChip.stories.tsx similarity index 73% rename from packages/twenty-front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx rename to packages/twenty-ui/src/display/chip/components/__stories__/EntityChip.stories.tsx index d920ef01e..254fceef4 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx +++ b/packages/twenty-ui/src/display/chip/components/__stories__/EntityChip.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { ComponentDecorator, RouterDecorator } from '@ui/testing'; import { EntityChip } from '../EntityChip'; const meta: Meta = { title: 'UI/Display/Chip/EntityChip', component: EntityChip, - decorators: [ComponentWithRouterDecorator], + decorators: [RouterDecorator, ComponentDecorator], args: { name: 'Entity name', linkToEntity: '/entity-link', diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index fb8008a38..2d74a886f 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -1,3 +1,9 @@ +export * from './avatar/components/Avatar'; +export * from './avatar/components/AvatarGroup'; +export * from './checkmark/components/AnimatedCheckmark'; +export * from './checkmark/components/Checkmark'; +export * from './chip/components/Chip'; +export * from './chip/components/EntityChip'; export * from './icon/components/IconAddressBook'; export * from './icon/components/IconGmail'; export * from './icon/components/IconGoogle'; @@ -9,3 +15,5 @@ export * from './icon/hooks/useIcons'; export * from './icon/providers/IconsProvider'; export * from './icon/states/iconsState'; export * from './icon/types/IconComponent'; +export * from './tooltip/AppTooltip'; +export * from './tooltip/OverflowingTextWithTooltip'; diff --git a/packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx rename to packages/twenty-ui/src/display/tooltip/AppTooltip.tsx index ad8abe37a..e3f126f5a 100644 --- a/packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx @@ -1,7 +1,7 @@ import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip'; import styled from '@emotion/styled'; -import { RGBA } from '@/ui/theme/constants/Rgba'; +import { RGBA } from '@ui/theme/constants/Rgba'; export enum TooltipPosition { Top = 'top', diff --git a/packages/twenty-front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx rename to packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx diff --git a/packages/twenty-front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx b/packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx similarity index 93% rename from packages/twenty-front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx rename to packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx index 1363bec7a..b12fb8e8f 100644 --- a/packages/twenty-front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx +++ b/packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/test'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; +import { ComponentDecorator } from '@ui/testing'; import { OverflowingTextWithTooltip } from '../OverflowingTextWithTooltip'; diff --git a/packages/twenty-front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx b/packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx similarity index 87% rename from packages/twenty-front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx rename to packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx index 48289ab35..7ce9997ab 100644 --- a/packages/twenty-front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx +++ b/packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx @@ -1,13 +1,15 @@ import { Meta, StoryObj } from '@storybook/react'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { CatalogStory } from '~/testing/types'; +import { + CatalogDecorator, + CatalogStory, + ComponentDecorator, +} from '@ui/testing'; import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip'; const meta: Meta = { - title: 'UI/Display/Tooltip/Tooltip', + title: 'UI/Display/Tooltip', component: Tooltip, }; diff --git a/packages/twenty-front/src/testing/decorators/CatalogDecorator.tsx b/packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx similarity index 100% rename from packages/twenty-front/src/testing/decorators/CatalogDecorator.tsx rename to packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx diff --git a/packages/twenty-ui/src/testing/decorators/RouterDecorator.tsx b/packages/twenty-ui/src/testing/decorators/RouterDecorator.tsx new file mode 100644 index 000000000..f89dc3085 --- /dev/null +++ b/packages/twenty-ui/src/testing/decorators/RouterDecorator.tsx @@ -0,0 +1,8 @@ +import { MemoryRouter } from 'react-router-dom'; +import { Decorator } from '@storybook/react'; + +export const RouterDecorator: Decorator = (Story) => ( + + + +); diff --git a/packages/twenty-ui/src/testing/index.ts b/packages/twenty-ui/src/testing/index.ts index 7b8accb69..95631bbd7 100644 --- a/packages/twenty-ui/src/testing/index.ts +++ b/packages/twenty-ui/src/testing/index.ts @@ -1,2 +1,6 @@ export * from './ComponentStorybookLayout'; +export * from './decorators/CatalogDecorator'; export * from './decorators/ComponentDecorator'; +export * from './decorators/RouterDecorator'; +export * from './mocks/avatarUrlMock'; +export * from './types/CatalogStory'; diff --git a/packages/twenty-ui/src/testing/mocks/avatarUrlMock.ts b/packages/twenty-ui/src/testing/mocks/avatarUrlMock.ts new file mode 100644 index 000000000..c8b2cc3d2 --- /dev/null +++ b/packages/twenty-ui/src/testing/mocks/avatarUrlMock.ts @@ -0,0 +1,2 @@ +export const AVATAR_URL_MOCK = + 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k='; diff --git a/packages/twenty-front/src/testing/types.ts b/packages/twenty-ui/src/testing/types/CatalogStory.ts similarity index 93% rename from packages/twenty-front/src/testing/types.ts rename to packages/twenty-ui/src/testing/types/CatalogStory.ts index 302cf78e2..bbbc28a39 100644 --- a/packages/twenty-front/src/testing/types.ts +++ b/packages/twenty-ui/src/testing/types/CatalogStory.ts @@ -4,7 +4,7 @@ import { StoryObj } from '@storybook/react'; import { CatalogDimension, CatalogOptions, -} from './decorators/CatalogDecorator'; +} from '../decorators/CatalogDecorator'; export type CatalogStory< StoryType extends StoryObj, diff --git a/packages/twenty-front/src/utils/__tests__/stringToHslColor.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts similarity index 75% rename from packages/twenty-front/src/utils/__tests__/stringToHslColor.test.ts rename to packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts index 09d255a2d..98afaad1e 100644 --- a/packages/twenty-front/src/utils/__tests__/stringToHslColor.test.ts +++ b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts @@ -1,4 +1,4 @@ -import { stringToHslColor } from '../string-to-hsl'; +import { stringToHslColor } from '../stringToHslColor'; describe('stringToHslColor', () => { it('should return a color based on a string', () => { diff --git a/packages/twenty-front/src/utils/string-to-hsl.ts b/packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts similarity index 100% rename from packages/twenty-front/src/utils/string-to-hsl.ts rename to packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index fe923f164..1e20365c2 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -1 +1,3 @@ +export * from './color/utils/stringToHslColor'; export * from './state/utils/createState'; +export * from './types/Nullable'; diff --git a/packages/twenty-front/src/types/Nullable.ts b/packages/twenty-ui/src/utilities/types/Nullable.ts similarity index 100% rename from packages/twenty-front/src/types/Nullable.ts rename to packages/twenty-ui/src/utilities/types/Nullable.ts diff --git a/tsconfig.base.json b/tsconfig.base.json index a31bf19ea..2a77eb672 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,8 +17,7 @@ "baseUrl": ".", "paths": { "twenty-emails": ["packages/twenty-emails/src/index.ts"], - "twenty-ui": ["packages/twenty-ui/src/index.ts"], - "@ui/*": ["packages/twenty-ui/src/*"] + "twenty-ui": ["packages/twenty-ui/src/index.ts"] } }, "exclude": ["node_modules", "tmp"]