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 3ad04432d0..95636c5120 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 b4c8d926c5..621437830c 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 a6f044122e..f8040b915c 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 8c305fc72f..995dfc1c03 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 510d6bcfbe..47282737df 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 78f726c03b..f25021f2b2 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 d7f81c178a..e3093fb3cf 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 8100dad7ea..db24bccff7 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 363ceafeb5..c147e1bf85 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 1fbdeeb033..faddcb7702 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 390851d527..13ed1aa163 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 e8655637ad..a7ad9927ce 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 5ff634826d..2b4ff934ff 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 f673adee7e..b7764673e9 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 20ef7dd1ea..1c167e194c 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 b64988cec7..e11ae14c96 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 631d25624c..ea4406a42b 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 d3b5f46ce0..b3c2291ca4 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 c5b8360530..ed975e2bbe 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 3d26836d7d..766fe0dea1 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 4edfb305cd..9c7b2177df 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 7cb0549e20..d15615fc11 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 4a65b1ff3a..6bc475de5a 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 009c32d54f..3a3699c9b0 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 cd9fd48b87..f4dbc49f0b 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 13092a93b4..6ec617b1e2 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 11d83dbee7..75e0a03da1 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 0d7bf8c2bb..631dd788bb 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 98ac1e3179..54fcdfe0b9 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 62e4c5ed97..c29f7d85ab 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 41c0667aa2..89b039ad5e 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 f46b73086a..00daf1cff1 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 d362e1ed79..3d939b5be6 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 061d45fd8a..71ba45978f 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 93c5575ccf..18951c7e9b 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 d55c53631a..1ca7314595 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 60e32d628d..7e8dff27ec 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 dfe6730662..1a5a0069dd 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 7305dd6ba6..f51c55a63f 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 deed9cddf3..4d2895bb3b 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 3b3d636a28..01ae16da39 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 6fed186244..ebb5d3251c 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 b5a5d1a23e..82beb9da53 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 72954b829f..bf9fa79079 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 e67e49bd86..cae6dff291 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 b38880af8f..7f4ad3b352 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 ccb1c6e414..5768c81945 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 46db162742..a8a1a8f221 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 8cc37a71b9..16def94d24 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 0a6676cdc4..18ad3c3d4d 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 584e70f744..7078c8798c 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 96fe4b634d..1cda83b0ef 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 cec0483d26..7f8130ae6a 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 76d4cd201d..2467824967 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 cd506b961e..e1a4cd0039 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 d920ef01e4..254fceef40 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 fb8008a38e..2d74a886fb 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 ad8abe37af..e3f126f5a8 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 1363bec7a7..b12fb8e8f7 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 48289ab35d..7ce9997ab0 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 0000000000..f89dc3085d --- /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 7b8accb69f..95631bbd7d 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 0000000000..c8b2cc3d2b --- /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 302cf78e2d..bbbc28a39b 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 09d255a2da..98afaad1e4 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 fe923f164e..1e20365c2b 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 a31bf19eae..2a77eb6721 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"]