[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions

View File

@ -21,13 +21,9 @@ import { useContext, useState } from 'react';
import { createPortal } from 'react-dom';
import { useLocation } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import {
AnimatedExpandableContainer,
IconFolder,
IconFolderOpen,
IconHeartOff,
LightIconButton,
} from 'twenty-ui';
import { AnimatedExpandableContainer } from 'twenty-ui/layout';
import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
type CurrentWorkspaceMemberFavoritesProps = {
folder: {

View File

@ -13,8 +13,9 @@ import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { useLingui } from '@lingui/react/macro';
import { useRecoilState, useRecoilValue } from 'recoil';
import { IconFolderPlus, LightIconButton } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { IconFolderPlus } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
export const CurrentWorkspaceMemberFavoritesFolders = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

View File

@ -7,10 +7,10 @@ import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatching
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import styled from '@emotion/styled';
import { LightIconButton } from '@ui/input/button/components/LightIconButton';
import { useContext } from 'react';
import { useLocation } from 'react-router-dom';
import { IconHeartOff } from 'twenty-ui';
import { IconHeartOff } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledEmptyContainer = styled.div`
width: 100%;

View File

@ -1,14 +1,9 @@
import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import {
IconDotsVertical,
IconPencil,
IconTrash,
LightIconButton,
MenuItem,
} from 'twenty-ui';
import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type FavoriteFolderNavigationDrawerItemDropdownProps = {
folderId: string;

View File

@ -1,7 +1,7 @@
import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
import { useTheme } from '@emotion/react';
import { Avatar, useIcons } from 'twenty-ui';
import { Avatar, useIcons } from 'twenty-ui/display';
export const FavoriteIcon = ({ favorite }: { favorite: ProcessedFavorite }) => {
const theme = useTheme();

View File

@ -7,7 +7,7 @@ import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigat
import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
import { useState } from 'react';
import { useRecoilState } from 'recoil';
import { IconFolder } from 'twenty-ui';
import { IconFolder } from 'twenty-ui/display';
type FavoriteFoldersProps = {
isNavigationSectionOpen: boolean;

View File

@ -1,4 +1,5 @@
import { Button, IconHeart, IconHeartOff } from 'twenty-ui';
import { Button } from 'twenty-ui/input';
import { IconHeart, IconHeartOff } from 'twenty-ui/display';
type PageFavoriteButtonProps = {
isFavorite: boolean;

View File

@ -5,7 +5,8 @@ import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/us
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { IconPlus, MenuItem } from 'twenty-ui';
import { IconPlus } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const FavoriteFolderPickerFooter = ({
dropdownId,

View File

@ -4,7 +4,7 @@ import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import styled from '@emotion/styled';
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
const StyledItemsContainer = styled.div`
width: 100%;

View File

@ -1,8 +1,8 @@
import { gql } from '@apollo/client';
import { AvatarType } from 'twenty-ui';
import { Favorite } from '@/favorites/types/Favorite';
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
import { AvatarType } from 'twenty-ui/display';
export const mockId = '8f3b2121-f194-4ba4-9fbf-2d5a37126806';
export const favoriteId = 'f088c8c9-05d2-4276-b065-b863cc7d0b33';
@ -42,7 +42,6 @@ export const initialFavorites: Favorite[] = [
company: { id: '4', name: 'Company Test' },
forWorkspaceMemberId: '1',
favoriteFolderId: '1',
},
{
__typename: 'Favorite',
@ -101,374 +100,371 @@ export const sortedFavorites = [
},
];
const UPDATE_ONE_FAVORITE_MUTATION = gql`
mutation UpdateOneFavorite(
$idToUpdate: ID!
$input: FavoriteUpdateInput!
) {
updateFavorite(id: $idToUpdate, data: $input) {
__typename
company {
const UPDATE_ONE_FAVORITE_MUTATION = gql`
mutation UpdateOneFavorite($idToUpdate: ID!, $input: FavoriteUpdateInput!) {
updateFavorite(id: $idToUpdate, data: $input) {
__typename
accountOwnerId
address {
addressStreet1
addressStreet2
addressCity
addressState
addressCountry
addressPostcode
addressLat
addressLng
}
annualRecurringRevenue {
amountMicros
currencyCode
}
createdAt
createdBy {
source
workspaceMemberId
company {
__typename
accountOwnerId
address {
addressStreet1
addressStreet2
addressCity
addressState
addressCountry
addressPostcode
addressLat
addressLng
}
annualRecurringRevenue {
amountMicros
currencyCode
}
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
domainName {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
employees
id
idealCustomerProfile
internalCompetitions
introVideo {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
linkedinLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
name
context
position
tagline
updatedAt
visaSponsorship
workPolicy
xLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
}
deletedAt
domainName {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
employees
id
idealCustomerProfile
internalCompetitions
introVideo {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
linkedinLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
name
position
tagline
updatedAt
visaSponsorship
workPolicy
xLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
}
companyId
createdAt
deletedAt
favoriteFolder {
__typename
createdAt
deletedAt
id
name
position
updatedAt
}
favoriteFolderId
forWorkspaceMember {
__typename
avatarUrl
colorScheme
createdAt
dateFormat
deletedAt
id
locale
name {
firstName
lastName
}
timeFormat
timeZone
updatedAt
userEmail
userId
}
forWorkspaceMemberId
id
note {
__typename
body
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
id
position
title
updatedAt
}
noteId
opportunity {
__typename
amount {
amountMicros
currencyCode
}
closeDate
companyId
createdAt
createdBy {
source
workspaceMemberId
deletedAt
favoriteFolder {
__typename
createdAt
deletedAt
id
name
context
position
updatedAt
}
deletedAt
favoriteFolderId
forWorkspaceMember {
__typename
avatarUrl
colorScheme
createdAt
dateFormat
deletedAt
id
locale
name {
firstName
lastName
}
timeFormat
timeZone
updatedAt
userEmail
userId
}
forWorkspaceMemberId
id
name
pointOfContactId
position
stage
updatedAt
}
opportunityId
person {
__typename
avatarUrl
city
companyId
createdAt
createdBy {
source
workspaceMemberId
note {
__typename
body
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
id
position
title
updatedAt
}
noteId
opportunity {
__typename
amount {
amountMicros
currencyCode
}
closeDate
companyId
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
id
name
context
pointOfContactId
position
stage
updatedAt
}
deletedAt
emails {
primaryEmail
additionalEmails
opportunityId
person {
__typename
avatarUrl
city
companyId
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
emails {
primaryEmail
additionalEmails
}
id
intro
jobTitle
linkedinLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
name {
firstName
lastName
}
performanceRating
phones {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
position
updatedAt
whatsapp {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
workPreference
xLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
}
id
intro
jobTitle
linkedinLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
name {
firstName
lastName
}
performanceRating
phones {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
position
updatedAt
whatsapp {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
workPreference
xLink {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
}
personId
pet {
__typename
age
averageCostOfKibblePerMonth {
amountMicros
currencyCode
}
bio
birthday
comments
createdAt
createdBy {
source
workspaceMemberId
personId
pet {
__typename
age
averageCostOfKibblePerMonth {
amountMicros
currencyCode
}
bio
birthday
comments
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
extraData
id
interestingFacts
isGoodWithKids
location {
addressStreet1
addressStreet2
addressCity
addressState
addressCountry
addressPostcode
addressLat
addressLng
}
makesOwnerThinkOf {
firstName
lastName
}
name
context
}
deletedAt
extraData
id
interestingFacts
isGoodWithKids
location {
addressStreet1
addressStreet2
addressCity
addressState
addressCountry
addressPostcode
addressLat
addressLng
}
makesOwnerThinkOf {
firstName
lastName
}
name
pictures {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
pictures {
primaryLinkUrl
primaryLinkLabel
secondaryLinks
}
position
soundSwag
species
traits
updatedAt
vetEmail {
primaryEmail
additionalEmails
}
vetPhone {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
}
petId
position
soundSwag
species
traits
updatedAt
vetEmail {
primaryEmail
additionalEmails
}
vetPhone {
primaryPhoneNumber
primaryPhoneCountryCode
primaryPhoneCallingCode
additionalPhones
}
}
petId
position
surveyResult {
__typename
averageEstimatedNumberOfAtomsInTheUniverse
comments
createdAt
createdBy {
source
workspaceMemberId
surveyResult {
__typename
averageEstimatedNumberOfAtomsInTheUniverse
comments
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
id
name
context
participants
percentageOfCompletion
position
score
shortNotes
updatedAt
}
deletedAt
id
name
participants
percentageOfCompletion
position
score
shortNotes
surveyResultId
task {
__typename
assigneeId
body
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
dueAt
id
position
status
title
updatedAt
}
taskId
updatedAt
}
surveyResultId
task {
__typename
assigneeId
body
createdAt
createdBy {
source
workspaceMemberId
view {
__typename
createdAt
deletedAt
icon
id
isCompact
kanbanAggregateOperation
kanbanAggregateOperationFieldMetadataId
kanbanFieldMetadataId
key
name
context
objectMetadataId
position
type
updatedAt
}
deletedAt
dueAt
id
position
status
title
updatedAt
}
taskId
updatedAt
view {
__typename
createdAt
deletedAt
icon
id
isCompact
kanbanAggregateOperation
kanbanAggregateOperationFieldMetadataId
kanbanFieldMetadataId
key
name
objectMetadataId
position
type
updatedAt
}
viewId
workflow {
__typename
createdAt
createdBy {
source
workspaceMemberId
viewId
workflow {
__typename
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
id
lastPublishedVersionId
name
context
position
statuses
updatedAt
}
deletedAt
id
lastPublishedVersionId
name
position
statuses
updatedAt
}
workflowId
workflowRun {
__typename
context
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
endedAt
id
name
output
position
startedAt
status
updatedAt
workflowId
workflowRun {
__typename
context
createdAt
createdBy {
source
workspaceMemberId
name
context
}
deletedAt
endedAt
id
name
output
position
startedAt
status
updatedAt
workflowId
workflowVersionId
}
workflowRunId
workflowVersion {
__typename
createdAt
deletedAt
id
name
position
status
steps
trigger
updatedAt
workflowId
}
workflowVersionId
}
workflowRunId
workflowVersion {
__typename
createdAt
deletedAt
id
name
position
status
steps
trigger
updatedAt
workflowId
}
workflowVersionId
}
}
`;
export const mocks = [
@ -897,7 +893,7 @@ export const mocks = [
data: {
updateFavorite: {
__typename: 'Favorite',
id: favoriteId,
id: favoriteId,
position: 3,
},
},

View File

@ -1,5 +1,4 @@
import { AvatarType } from 'twenty-ui';
import { AvatarType } from 'twenty-ui/display';
export type Favorite = {
id: string;
position: number;