From 4a4e65fe4a84336531fbfbcda3a6275e1d1ed1d9 Mon Sep 17 00:00:00 2001 From: Paul Rastoin <45004772+prastoin@users.noreply.github.com> Date: Thu, 3 Apr 2025 11:47:55 +0200 Subject: [PATCH] [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 --- .../actions/restore-cache/action.yaml | 2 +- .../actions/yarn-install/action.yaml | 4 +- packages/twenty-front/.storybook/preview.tsx | 2 +- packages/twenty-front/.swcrc | 2 +- packages/twenty-front/jest.config.ts | 16 +- packages/twenty-front/package.json | 3 +- packages/twenty-front/src/emotion.d.ts | 3 +- packages/twenty-front/src/index.tsx | 1 + .../components/LeftPanelSkeletonLoader.tsx | 2 +- .../components/RightPanelSkeletonLoader.tsx | 2 +- .../components/UserOrMetadataLoader.tsx | 2 +- .../constants/DefaultRecordActionsConfig.ts | 2 +- .../constants/WorkflowActionsConfig.ts | 2 +- .../constants/WorkflowRunsActionsConfig.ts | 2 +- .../WorkflowVersionsActionsConfig.ts | 2 +- .../hooks/useWorkflowRunRecordActions.tsx | 2 +- .../constants/RecordAgnosticActionsConfig.ts | 2 +- .../useSearchRecordsRecordAgnosticAction.ts | 2 +- .../hooks/useRunWorkflowActions.tsx | 2 +- .../actions/types/RecordConfigAction.ts | 3 +- .../components/CmdEnterActionButton.tsx | 3 +- .../CommandMenuActionMenuDropdown.tsx | 4 +- .../PageHeaderActionMenuButtons.tsx | 9 +- .../components/RecordIndexActionMenu.tsx | 2 +- ...cordIndexActionMenuBarAllActionsButton.tsx | 3 +- .../RecordIndexActionMenuDropdown.tsx | 3 +- .../components/RecordShowActionMenu.tsx | 2 +- .../RecordShowRightDrawerOpenRecordButton.tsx | 5 +- .../CommandMenuActionMenuDropdown.stories.tsx | 10 +- .../RecordIndexActionMenuBarEntry.stories.tsx | 3 +- .../RecordIndexActionMenuDropdown.stories.tsx | 8 +- .../action-menu/types/ActionMenuEntry.ts | 3 +- .../blocks/components/FileBlock.tsx | 2 +- .../activities/blocks/utils/getSlashMenu.ts | 10 +- .../calendar/components/Calendar.tsx | 20 +- .../components/CalendarDayCardContent.tsx | 2 +- .../components/CalendarEventDetails.tsx | 9 +- ...arEventParticipantsResponseStatusField.tsx | 2 +- .../calendar/components/CalendarEventRow.tsx | 15 +- .../calendar/components/CalendarMonthCard.tsx | 2 +- .../__stories__/Calendar.stories.tsx | 2 +- .../activities/components/ActivityList.tsx | 2 +- .../activities/components/ActivityRow.tsx | 2 +- .../CustomResolverFetchMoreLoader.tsx | 2 +- .../activities/components/ParticipantChip.tsx | 2 +- .../emails/components/EmailLoader.tsx | 4 +- .../components/EmailThreadBottomBar.tsx | 3 +- .../components/EmailThreadMessageBody.tsx | 2 +- .../EmailThreadMessageReceivers.tsx | 2 +- .../components/EmailThreadNotShared.tsx | 2 +- .../emails/components/EmailThreadPreview.tsx | 3 +- .../emails/components/EmailThreads.tsx | 21 +- ...ubscriberDropdownAddSubscriberMenuItem.tsx | 3 +- .../MessageThreadSubscribersChip.tsx | 11 +- ...MessageThreadSubscribersDropdownButton.tsx | 3 +- .../states/lastViewableEmailThreadIdState.ts | 3 +- .../files/components/AttachmentDropdown.tsx | 13 +- .../files/components/AttachmentIcon.tsx | 6 +- .../files/components/AttachmentList.tsx | 3 +- .../files/components/AttachmentRow.tsx | 7 +- .../files/components/Attachments.tsx | 20 +- .../activities/files/components/DropZone.tsx | 2 +- .../components/ActivityTargetsInlineCell.tsx | 2 +- .../activities/notes/components/Notes.tsx | 6 +- .../activityTargetableEntityArrayState.ts | 3 +- .../states/canCreateActivityState.ts | 3 +- .../states/isActivityInCreateModeState.ts | 3 +- .../states/isCreatingActivityInDBState.ts | 3 +- .../tasks/components/AddTaskButton.tsx | 3 +- .../tasks/components/TaskGroups.tsx | 20 +- .../activities/tasks/components/TaskRow.tsx | 8 +- .../__stories__/TaskList.stories.tsx | 2 +- .../components/TimelineActivities.tsx | 4 +- .../TimelineActivities.stories.tsx | 2 +- .../activity/components/EventRowActivity.tsx | 3 +- .../EventCardCalendarEvent.stories.tsx | 2 +- .../rows/components/EventCard.tsx | 4 +- .../rows/components/EventCardToggleButton.tsx | 3 +- .../components/EventIconDynamicComponent.tsx | 8 +- .../components/EventFieldDiffLabel.tsx | 2 +- .../components/EventRowMainObject.tsx | 2 +- .../components/EventRowMainObjectUpdated.tsx | 2 +- .../EventRowMainObjectUpdated.stories.tsx | 2 +- .../message/components/EventCardMessage.tsx | 2 +- .../components/EventCardMessageNotShared.tsx | 2 +- .../__stories__/EventCardMessage.stories.tsx | 2 +- .../src/modules/app/components/App.tsx | 2 +- .../src/modules/auth/components/Title.tsx | 2 +- .../auth/hooks/__tests__/useAuth.test.tsx | 2 +- .../src/modules/auth/hooks/useAuth.ts | 2 +- .../components/EmailVerificationSent.tsx | 6 +- .../components/SignInUpGlobalScopeForm.tsx | 4 +- .../components/SignInUpPasswordField.tsx | 2 +- .../SignInUpSSOIdentityProviderSelection.tsx | 3 +- .../components/SignInUpWithCredentials.tsx | 3 +- .../components/SignInUpWithGoogle.tsx | 3 +- .../components/SignInUpWithMicrosoft.tsx | 3 +- .../sign-in-up/components/SignInUpWithSSO.tsx | 3 +- .../components/SignInUpWorkspaceScopeForm.tsx | 3 +- .../availableIdentityProviderForAuthState.ts | 2 +- .../states/billingCheckoutSessionState.ts | 2 +- .../modules/auth/states/currentUserState.ts | 3 +- .../auth/states/currentUserWorkspaceState.ts | 2 +- .../states/currentWorkspaceMemberState.ts | 3 +- .../states/currentWorkspaceMembersStates.ts | 2 +- .../auth/states/currentWorkspaceState.ts | 3 +- .../auth/states/isCurrentUserLoadingState.ts | 3 +- .../modules/auth/states/previousUrlState.ts | 3 +- .../modules/auth/states/signInUpModeState.ts | 2 +- .../modules/auth/states/signInUpStepState.ts | 3 +- .../src/modules/auth/states/tokenPairState.ts | 4 +- .../auth/states/workspacePublicDataState.ts | 2 +- .../src/modules/auth/states/workspaces.ts | 2 +- .../components/SubscriptionBenefit.tsx | 2 +- .../captcha/states/captchaTokenState.ts | 3 +- .../states/isCaptchaScriptLoadedState.ts | 3 +- .../states/isRequestingCaptchaTokenState.ts | 3 +- .../isLoadingTokensFromExtensionState.ts | 3 +- .../client-config/states/apiConfigState.ts | 3 +- .../states/authProvidersState.ts | 3 +- .../client-config/states/billingState.ts | 3 +- .../states/canManageFeatureFlagsState.ts | 3 +- .../client-config/states/captchaState.ts | 3 +- .../states/chromeExtensionIdState.ts | 3 +- .../states/clientConfigApiStatusState.ts | 3 +- .../states/isAnalyticsEnabledState.ts | 3 +- .../states/isAttachmentPreviewEnabledState.ts | 3 +- .../client-config/states/isDebugModeState.ts | 3 +- .../isDeveloperDefaultSignInPrefilledState.ts | 3 +- .../isEmailVerificationRequiredState.ts | 3 +- .../states/isGoogleCalendarEnabledState.ts | 3 +- .../states/isGoogleMessagingEnabledState.ts | 3 +- .../states/isMicrosoftCalendarEnabledState.ts | 3 +- .../isMicrosoftMessagingEnabledState.ts | 3 +- .../states/isMultiWorkspaceEnabledState.ts | 3 +- .../client-config/states/sentryConfigState.ts | 3 +- .../client-config/states/supportChatState.ts | 3 +- .../command-menu/components/CommandGroup.tsx | 2 +- .../components/CommandMenuContainer.tsx | 2 +- .../components/CommandMenuContextChip.tsx | 2 +- .../CommandMenuContextChipGroups.tsx | 2 +- .../CommandMenuContextRecordChipAvatars.tsx | 2 +- .../components/CommandMenuItem.tsx | 3 +- .../components/CommandMenuList.tsx | 2 +- .../components/CommandMenuTopBar.tsx | 10 +- .../ResetContextToSelectionCommandButton.tsx | 2 +- .../__stories__/CommandMenu.stories.tsx | 2 +- .../CommandMenuContextChip.stories.tsx | 8 +- .../CommandMenuContextChipGroups.stories.tsx | 6 +- .../CommandMenuContextRecordChip.stories.tsx | 2 +- .../constants/CommandMenuAnimationVariants.ts | 3 +- ...MenuCloseAnimationCompleteCleanup.test.tsx | 2 +- .../__tests__/useCommandMenuHistory.test.tsx | 2 +- .../__tests__/useNavigateCommandMenu.test.tsx | 2 +- ...useOpenCalendarEventInCommandMenu.test.tsx | 2 +- .../useOpenEmailThreadInCommandMenu.test.tsx | 2 +- .../useOpenRecordInCommandMenu.test.tsx | 2 +- .../useUpdateCommandMenuPageInfo.test.tsx | 2 +- .../__tests__/useWorkflowCommandMenu.test.tsx | 2 +- .../command-menu/hooks/useCommandMenu.ts | 2 +- .../hooks/useCommandMenuSearchRecords.tsx | 2 +- .../hooks/useNavigateCommandMenu.ts | 2 +- .../useOpenCalendarEventInCommandMenu.ts | 2 +- .../hooks/useOpenEmailThreadInCommandMenu.ts | 2 +- .../hooks/useOpenRecordInCommandMenu.ts | 2 +- .../useOpenRecordsSearchPageInCommandMenu.ts | 2 +- .../hooks/useUpdateCommandMenuPageInfo.ts | 2 +- .../hooks/useWorkflowCommandMenu.ts | 6 +- ...dMenuMessageThreadIntermediaryMessages.tsx | 3 +- .../CommandMenuMessageThreadPage.tsx | 3 +- ...CommandMenuWorkflowSelectActionContent.tsx | 3 +- .../CommandMenuWorkflowRunViewStep.tsx | 2 +- ...ndMenuWorkflowSelectTriggerTypeContent.tsx | 3 +- .../commandMenuNavigationMorphItemsState.ts | 2 +- .../commandMenuNavigationRecordsState.ts | 2 +- .../states/commandMenuNavigationStackState.ts | 3 +- .../states/commandMenuPageInfoState.ts | 4 +- .../states/commandMenuPageState.ts | 2 +- .../states/commandMenuSearchState.ts | 3 +- .../states/hasUserSelectedCommandState.ts | 3 +- .../states/isCommandMenuClosingState.ts | 3 +- .../src/modules/command-menu/types/Command.ts | 2 +- .../states/domainConfigurationState.ts | 2 +- .../lastAuthenticatedWorkspaceDomainState.ts | 2 +- .../components/AppRootErrorFallback.tsx | 6 +- .../components/internal/AppErrorDisplay.tsx | 6 +- .../CurrentWorkspaceMemberFavorites.tsx | 10 +- ...CurrentWorkspaceMemberFavoritesFolders.tsx | 3 +- .../CurrentWorkspaceMemberOrphanFavorites.tsx | 4 +- ...riteFolderNavigationDrawerItemDropdown.tsx | 11 +- .../favorites/components/FavoriteIcon.tsx | 2 +- .../favorites/components/FavoritesFolders.tsx | 2 +- .../components/PageFavoriteButton.tsx | 3 +- .../components/FavoriteFolderPickerFooter.tsx | 3 +- .../components/FavoriteFolderPickerList.tsx | 2 +- .../favorites/hooks/__mocks__/useFavorites.ts | 688 +++++---- .../src/modules/favorites/types/Favorite.ts | 3 +- .../components/InformationBanner.tsx | 3 +- .../InformationBannerDeletedRecord.tsx | 2 +- ...tionBannerReconnectAccountEmailAliases.tsx | 2 +- ...econnectAccountInsufficientPermissions.tsx | 2 +- .../components/KeyboardShortcutMenuDialog.tsx | 4 +- .../constants/KeyboardShortcutsGeneral.ts | 2 +- .../states/dateTimeFormatState.ts | 2 +- .../components/AppNavigationDrawer.tsx | 2 +- .../components/MainNavigationDrawerItems.tsx | 2 +- .../components/MobileNavigationBar.tsx | 8 +- .../currentMobileNavigationDrawerState.ts | 3 +- .../lastVisitedObjectMetadataItemIdState.ts | 2 +- ...stVisitedViewPerObjectMetadataItemState.ts | 2 +- ...igationDrawerItemForObjectMetadataItem.tsx | 3 +- ...isAppWaitingForFreshObjectMetadataState.ts | 3 +- .../states/objectMetadataItemsState.ts | 3 +- .../types/FieldMetadataItem.ts | 3 +- .../utils/getIconForObjectType.ts | 3 +- .../fieldMetadataItemSchema.ts | 2 +- .../validation-schemas/selectOptionsSchema.ts | 2 +- .../AdvancedFilterAddFilterRuleSelect.tsx | 4 +- ...eldSelectDropdownButtonClickableSelect.tsx | 2 +- ...FilterRecordFilterGroupOptionsDropdown.tsx | 4 +- ...dvancedFilterRecordFilterOperandSelect.tsx | 2 +- ...ancedFilterRecordFilterOptionsDropdown.tsx | 4 +- .../AdvancedFilterSubFieldSelectMenu.tsx | 3 +- .../object-record/components/RecordChip.tsx | 16 +- .../graphql/types/RecordGqlConnection.ts | 3 +- .../AddObjectFilterFromDetailsButton.tsx | 5 +- .../components/AdvancedFilterButton.tsx | 9 +- .../components/GenericEntityFilterChip.tsx | 4 +- .../ObjectFilterDropdownBooleanSelect.tsx | 2 +- ...pdownFilterSelectCompositeFieldSubMenu.tsx | 3 +- ...jectFilterDropdownFilterSelectMenuItem.tsx | 3 +- ...ctFilterDropdownFilterSelectMenuItemV2.tsx | 3 +- .../ObjectFilterDropdownOperandDropdown.tsx | 3 +- .../ObjectFilterDropdownOperandSelect.tsx | 2 +- .../ObjectFilterDropdownOptionSelect.tsx | 2 +- .../ObjectFilterDropdownRecordPinnedItems.tsx | 2 +- ...lterDropdownRecordRemoveFilterMenuItem.tsx | 4 +- .../ObjectFilterDropdownRecordSelect.tsx | 2 +- ...SingleEntityObjectFilterDropdownButton.tsx | 2 +- .../MultipleFiltersDropdownButton.stories.tsx | 8 +- .../utils/getActorSourceMultiSelectOptions.ts | 2 +- .../ObjectOptionsDropdownFieldsContent.tsx | 4 +- ...jectOptionsDropdownHiddenFieldsContent.tsx | 8 +- ...tionsDropdownHiddenRecordGroupsContent.tsx | 8 +- .../ObjectOptionsDropdownLayoutContent.tsx | 23 +- ...jectOptionsDropdownLayoutOpenInContent.tsx | 13 +- .../ObjectOptionsDropdownMenuContent.tsx | 17 +- .../ObjectOptionsDropdownMenuViewName.tsx | 3 +- ...ptionsDropdownRecordGroupFieldsContent.tsx | 14 +- ...tOptionsDropdownRecordGroupSortContent.tsx | 14 +- ...jectOptionsDropdownRecordGroupsContent.tsx | 22 +- .../ObjectOptionsDropdownContent.stories.tsx | 2 +- .../components/ObjectSortDropdownButton.tsx | 3 +- .../components/RecordBoardCard.tsx | 2 +- .../components/RecordBoardCardHeader.tsx | 11 +- .../RecordBoardColumnDropdownMenu.tsx | 2 +- .../RecordBoardColumnFetchMoreLoader.tsx | 2 +- .../components/RecordBoardColumnHeader.tsx | 4 +- ...ardColumnHeaderAggregateDropdownButton.tsx | 3 +- ...mnHeaderAggregateDropdownFieldsContent.tsx | 8 +- ...lumnHeaderAggregateDropdownMenuContent.tsx | 2 +- ...dColumnHeaderAggregateDropdownMenuItem.tsx | 3 +- ...nHeaderAggregateDropdownOptionsContent.tsx | 2 +- .../RecordBoardColumnNewRecordButton.tsx | 2 +- .../components/LightCopyIconButton.tsx | 3 +- .../components/FormCountryCodeSelectInput.tsx | 3 +- .../components/FormCountrySelectInput.tsx | 3 +- .../components/FormDateTimeFieldInput.tsx | 3 +- .../components/FormMultiSelectFieldInput.tsx | 4 +- .../components/FormSelectFieldInput.tsx | 4 +- .../components/FormSingleRecordPicker.tsx | 3 +- .../form-types/components/VariableChip.tsx | 2 +- .../FormRawJsonFieldInput.stories.tsx | 2 +- .../FormTextFieldInput.stories.tsx | 2 +- .../hooks/__tests__/useGetButtonIcon.test.tsx | 2 +- .../record-field/hooks/useGetButtonIcon.ts | 2 +- .../display/components/ChipFieldDisplay.tsx | 2 +- .../components/FullNameFieldDisplay.tsx | 2 +- .../components/MultiSelectFieldDisplay.tsx | 3 +- .../display/components/PhonesFieldDisplay.tsx | 2 +- .../perf/ActorFieldDisplay.perf.stories.tsx | 2 +- .../perf/AddressFieldDisplay.perf.stories.tsx | 2 +- .../perf/BooleanFieldDisplay.perf.stories.tsx | 2 +- .../perf/ChipFieldDisplay.perf.stories.tsx | 2 +- .../CurrencyFieldDisplay.perf.stories.tsx | 2 +- .../perf/DateFieldDisplay.perf.stories.tsx | 2 +- .../DateTimeFieldDisplay.perf.stories.tsx | 2 +- .../perf/EmailsFieldDisplay.perf.stories.tsx | 2 +- .../FullNameFieldDisplay.perf.stories.tsx | 2 +- .../perf/LinksFieldDisplay.perf.stories.tsx | 2 +- .../MultiSelectFieldDisplay.perf.stories.tsx | 2 +- .../perf/NumberFieldDisplay.perf.stories.tsx | 2 +- .../perf/PhonesFieldDisplay.perf.stories.tsx | 2 +- .../perf/RatingFieldDisplay.perf.stories.tsx | 2 +- ...ationFromManyFieldDisplay.perf.stories.tsx | 2 +- ...RelationToOneFieldDisplay.perf.stories.tsx | 2 +- .../perf/SelectFieldDisplay.perf.stories.tsx | 2 +- .../perf/TextFieldDisplay.perf.stories.tsx | 2 +- .../input/components/DateFieldInput.tsx | 3 +- .../input/components/DateTimeFieldInput.tsx | 3 +- .../input/components/MultiItemBaseInput.tsx | 2 +- .../input/components/MultiItemFieldInput.tsx | 4 +- .../components/MultiItemFieldMenuItem.tsx | 4 +- .../input/components/PhonesFieldInput.tsx | 2 +- .../components/RelationToOneFieldInput.tsx | 2 +- .../input/components/SelectFieldInput.tsx | 3 +- .../MultiItemBaseInput.stories.tsx | 2 +- .../RelationToOneFieldInput.stories.tsx | 2 +- .../states/lastShowPageRecordId.ts | 3 +- .../record-field/types/FieldDefinition.ts | 3 +- .../record-field/types/FieldMetadata.ts | 3 +- .../record-field/types/RecordChipData.ts | 3 +- .../record-field/utils/getFieldButtonIcon.ts | 3 +- .../RecordGroupMenuItemDraggable.tsx | 5 +- .../hooks/useRecordGroupActions.ts | 2 +- .../record-group/types/RecordGroupActions.ts | 3 +- .../types/RecordGroupDefinition.ts | 3 +- .../components/RecordIndexPageHeader.tsx | 2 +- .../RecordIndexPageKanbanAddMenuItem.tsx | 3 +- .../recordIndexFieldDefinitionsState.ts | 3 +- .../recordIndexIsCompactModeActiveState.ts | 3 +- ...ecordIndexKanbanAggregateOperationState.ts | 2 +- .../recordIndexKanbanFieldMetadataIdState.ts | 3 +- .../states/recordIndexOpenRecordInState.ts | 3 +- .../states/recordIndexViewTypeState.ts | 3 +- .../components/RecordInlineCell.tsx | 3 +- .../components/RecordInlineCellContainer.tsx | 10 +- .../components/RecordInlineCellContext.tsx | 2 +- .../components/RecordInlineCellEditButton.tsx | 8 +- .../components/MultipleRecordPicker.tsx | 2 +- .../MultipleRecordPickerMenuItemContent.tsx | 3 +- .../components/SingleRecordPickerMenuItem.tsx | 3 +- .../SingleRecordPickerMenuItems.tsx | 3 +- .../SingleRecordPickerMenuItemsWithSearch.tsx | 2 +- .../SingleRecordPicker.stories.tsx | 3 +- .../states/viewableRecordIdState.ts | 3 +- .../states/viewableRecordNameSingularState.ts | 3 +- .../record-show/constants/BaseRecordLayout.ts | 2 +- .../hooks/useRecordShowContainerTabs.ts | 6 +- .../record-show/hooks/useRecordShowPage.ts | 2 +- .../RecordDetailRelationRecordsListItem.tsx | 20 +- .../RecordDetailRelationSection.tsx | 4 +- .../components/RecordDetailSection.tsx | 3 +- .../RecordDetailDuplicatesSection.stories.tsx | 2 +- .../RecordDetailRelationSection.stories.tsx | 2 +- .../perf/RecordTableCell.perf.stories.tsx | 2 +- ...ordTableEmptyStateByGroupNoRecordAtAll.tsx | 4 +- .../RecordTableEmptyStateDisplay.tsx | 6 +- ...ordTableEmptyStateNoGroupNoRecordAtAll.tsx | 3 +- ...dTableEmptyStateNoRecordFoundForFilter.tsx | 3 +- .../RecordTableEmptyStateReadOnly.tsx | 2 +- .../RecordTableEmptyStateRemote.tsx | 3 +- .../RecordTableEmptyStateSoftDelete.tsx | 3 +- ...EmptyStateNoGroupNoRecordAtAll.stories.tsx | 2 +- ...ptyStateNoRecordFoundForFilter.stories.tsx | 2 +- .../RecordTableEmptyStateRemote.stories.tsx | 2 +- ...ecordTableEmptyStateSoftDelete.stories.tsx | 2 +- .../RecordTableBodyFetchMoreLoader.tsx | 2 +- .../RecordTableCellBaseContainer.tsx | 2 +- .../components/RecordTableCellButton.tsx | 10 +- .../components/RecordTableCellCheckbox.tsx | 2 +- .../RecordTableCellFieldContext.tsx | 2 +- .../components/RecordTableCellGrip.tsx | 2 +- .../RecordTableCellSoftFocusMode.tsx | 3 +- .../components/RecordTableTd.tsx | 2 +- .../components/RecordTableAggregateFooter.tsx | 2 +- ...eColumnAggregateDropdownSubmenuContent.tsx | 2 +- ...egateFooterAggregateOperationMenuItems.tsx | 3 +- ...dTableColumnAggregateFooterMenuContent.tsx | 3 +- .../RecordTableColumnAggregateFooterValue.tsx | 2 +- ...ordTableColumnAggregateFooterValueCell.tsx | 2 +- .../components/RecordTableColumnHead.tsx | 3 +- .../RecordTableColumnHeadDropdownMenu.tsx | 17 +- .../components/RecordTableHeader.tsx | 2 +- .../components/RecordTableHeaderCell.tsx | 3 +- .../RecordTableHeaderCheckboxColumn.tsx | 2 +- .../RecordTableHeaderDragDropColumn.tsx | 2 +- .../RecordTableHeaderLastColumn.tsx | 3 +- .../RecordTableHeaderPlusButtonContent.tsx | 3 +- .../components/RecordTableActionRow.tsx | 2 +- .../RecordTableRecordGroupSection.tsx | 4 +- .../RecordTableRecordGroupSectionAddNew.tsx | 2 +- .../RecordTableRecordGroupSectionLoadMore.tsx | 2 +- .../states/isRemoveSortingModalOpenState.ts | 3 +- .../states/isSoftFocusUsingMouseState.ts | 3 +- .../RecordTitleCellTextFieldDisplay.tsx | 2 +- .../RecordTitleFullNameFieldDisplay.tsx | 2 +- .../components/MultipleSelectDropdown.tsx | 2 +- ...StyledMultipleSelectDropdownAvatarChip.tsx | 2 +- .../select/types/SelectableItem.ts | 3 +- .../hooks/useBuildAvailableFieldsForImport.ts | 3 +- .../types/AvailableFieldForImport.ts | 3 +- .../types/ObjectRecordIdentifier.ts | 3 +- .../states/prefetchFavoriteFoldersState.ts | 2 +- .../prefetch/states/prefetchFavoritesState.ts | 2 +- .../prefetch/states/prefetchViewsState.ts | 2 +- .../ServerlessFunctionExecutionResult.tsx | 9 +- .../SettingsAccountsBlocklistInput.tsx | 2 +- .../SettingsAccountsBlocklistSection.tsx | 3 +- .../SettingsAccountsBlocklistTableRow.tsx | 3 +- ...SettingsAccountsCalendarChannelDetails.tsx | 3 +- ...ettingsAccountsCalendarChannelsGeneral.tsx | 2 +- ...tingsAccountsConnectedAccountsListCard.tsx | 3 +- ...untsConnectedAccountsRowRightContainer.tsx | 2 +- .../SettingsAccountsListEmptyStateCard.tsx | 11 +- .../SettingsAccountsMessageChannelDetails.tsx | 3 +- .../SettingsAccountsRadioSettingsCard.tsx | 4 +- .../SettingsAccountsRowDropdownMenu.tsx | 18 +- .../SettingsAccountsSettingsSection.tsx | 12 +- .../SettingsAccountsToggleSettingCard.tsx | 4 +- .../components/SettingsNewAccountSection.tsx | 4 +- ...SettingsAccountsBlocklistInput.stories.tsx | 2 +- ...ttingsAccountsBlocklistSection.stories.tsx | 2 +- ...SettingsAccountsBlocklistTable.stories.tsx | 2 +- ...tingsAccountsBlocklistTableRow.stories.tsx | 2 +- ...AccountsCalendarChannelDetails.stories.tsx | 2 +- ...ccountsCalendarChannelsGeneral.stories.tsx | 2 +- ...sAccountsMessageChannelDetails.stories.tsx | 2 +- .../AvailableTimezoneOptionsByLabel.ts | 2 +- .../components/SettingsAdminContent.tsx | 2 +- .../SettingsAdminEnvCopyableText.tsx | 2 +- .../components/SettingsAdminEnvVariables.tsx | 4 +- .../SettingsAdminEnvVariablesRow.tsx | 10 +- .../components/SettingsAdminGeneral.tsx | 18 +- .../components/SettingsAdminTableCard.tsx | 3 +- .../SettingsAdminVersionContainer.tsx | 4 +- .../SettingsAdminWorkspaceContent.tsx | 22 +- .../JsonDataIndicatorHealthStatus.tsx | 3 +- ...ngsAdminHealthAccountSyncCountersTable.tsx | 3 +- .../components/SettingsAdminHealthStatus.tsx | 3 +- ...ettingsAdminHealthStatusRightContainer.tsx | 2 +- .../SettingsHealthStatusListCard.tsx | 8 +- .../components/WorkerQueueMetricsSection.tsx | 3 +- .../AdvancedSettingsContentWrapperWithDot.tsx | 2 +- .../components/AdvancedSettingsWrapper.tsx | 3 +- .../SaveAndCancelButtons/CancelButton.tsx | 2 +- .../SaveAndCancelButtons/SaveButton.tsx | 3 +- .../settings/components/SettingsCard.tsx | 4 +- .../settings/components/SettingsCounter.tsx | 3 +- .../settings/components/SettingsListCard.tsx | 3 +- .../SettingsListItemCardContent.tsx | 3 +- .../components/SettingsListSkeletonCard.tsx | 3 +- .../SettingsOptionCardContentCounter.tsx | 2 +- .../SettingsOptionCardContentSelect.tsx | 2 +- .../SettingsOptionCardContentToggle.tsx | 3 +- .../SettingsOptionIconCustomizer.tsx | 2 +- ...ttingsOptionCardContentCounter.stories.tsx | 3 +- ...ettingsOptionCardContentSelect.stories.tsx | 4 +- ...ettingsOptionCardContentToggle.stories.tsx | 9 +- .../settings/components/SettingsRadioCard.tsx | 4 +- .../components/SettingsRadioCardContainer.tsx | 2 +- .../components/SettingsSummaryCard.tsx | 3 +- .../__stories__/SettingsCard.stories.tsx | 3 +- ...ngsDataModelNewFieldBreadcrumbDropDown.tsx | 4 +- .../SettingsDataModelPreviewFormCard.tsx | 2 +- .../data-model/constants/RelationTypes.ts | 11 +- .../SettingsCompositeFieldTypeConfigs.ts | 6 +- .../constants/SettingsFieldCurrencyCodes.ts | 5 +- .../SettingsNonCompositeFieldTypeConfigs.ts | 31 +- .../SettingsDataModelFieldAddressForm.tsx | 9 +- .../SettingsDataModelFieldBooleanForm.tsx | 2 +- .../SettingsDataModelFieldIconLabelForm.tsx | 6 +- .../SettingsObjectNewFieldSelector.tsx | 3 +- ...sDataModelFieldDescriptionForm.stories.tsx | 2 +- ...ngsDataModelFieldIconLabelForm.stories.tsx | 2 +- ...DataModelFieldSettingsFormCard.stories.tsx | 2 +- .../text/SettingsDataModelFieldTextForm.tsx | 2 +- .../SettingsDataModelFieldCurrencyForm.tsx | 2 +- .../SettingsDataModelFieldDateForm.tsx | 2 +- .../SettingsDataModelFieldNumberForm.tsx | 7 +- .../SettingsDataModelFieldPhonesForm.tsx | 2 +- .../SettingsDataModelFieldRelationForm.tsx | 2 +- .../SettingsDataModelFieldSelectForm.tsx | 12 +- ...tingsDataModelFieldSelectFormOptionRow.tsx | 11 +- .../select/utils/generateNewSelectOption.ts | 2 +- .../SettingsDataModelFieldPreview.tsx | 2 +- .../SettingsDataModelFieldPreviewCard.tsx | 2 +- ...tingsDataModelFieldPreviewCard.stories.tsx | 2 +- .../states/settingsPreviewRecordIdState.ts | 3 +- .../components/SettingsDataModelOverview.tsx | 7 +- .../SettingsDataModelOverviewField.tsx | 2 +- ...sDataModelOverviewFieldWithoutRelation.tsx | 2 +- .../SettingsDataModelOverviewObject.tsx | 2 +- ...ngsAvailableStandardObjectItemTableRow.tsx | 3 +- ...ettingsAvailableStandardObjectsSection.tsx | 4 +- ...ettingsObjectFieldActiveActionDropdown.tsx | 13 +- .../SettingsObjectFieldDataType.tsx | 2 +- ...tingsObjectFieldDisabledActionDropdown.tsx | 17 +- .../SettingsObjectFieldItemTableRow.tsx | 10 +- .../components/SettingsObjectItemTableRow.tsx | 2 +- .../components/SettingsObjectSummaryCard.tsx | 16 +- .../components/tabs/ObjectFields.tsx | 5 +- .../components/tabs/ObjectIndexes.tsx | 4 +- .../components/tabs/ObjectSettings.tsx | 4 +- .../SettingsDataModelObjectSummary.tsx | 2 +- .../SettingsDataModelObjectTypeTag.tsx | 2 +- .../components/SettingsObjectCoverImage.tsx | 4 +- .../SettingsObjectInactiveMenuDropDown.tsx | 11 +- ...ingsObjectInactiveMenuDropDown.stories.tsx | 2 +- .../SettingsDataModelObjectAboutForm.tsx | 8 +- ...SettingsDataModelObjectIdentifiersForm.tsx | 3 +- ...ettingsDataModelObjectSettingsFormCard.tsx | 2 +- ...ttingsDataModelObjectAboutForm.stories.tsx | 3 +- .../developers/components/ApiKeyInput.tsx | 4 +- .../SettingsApiKeysFieldItemTableRow.tsx | 3 +- .../components/SettingsApiKeysTable.tsx | 2 +- .../SettingsDevelopersWebhookTableRow.tsx | 2 +- .../__stories__/ApiKeyInput.stories.tsx | 2 +- ...ttingsApiKeysFieldItemTableRow.stories.tsx | 2 +- .../hooks/useSettingsNavigationItems.tsx | 25 +- .../SettingsIntegrationComponent.tsx | 16 +- .../components/SettingsIntegrationGroup.tsx | 3 +- .../components/SettingsIntegrationPreview.tsx | 3 +- ...ingsIntegrationRemoteTableSchemaUpdate.tsx | 3 +- ...IntegrationRemoteTableSyncStatusToggle.tsx | 2 +- ...grationDatabaseConnectionShowContainer.tsx | 2 +- ...tegrationDatabaseConnectionSummaryCard.tsx | 11 +- ...ntegrationDatabaseConnectionSyncStatus.tsx | 2 +- ...IntegrationDatabaseConnectionsListCard.tsx | 3 +- ...tegrationEditDatabaseConnectionContent.tsx | 2 +- .../lab/components/SettingsLabContent.tsx | 2 +- .../components/GraphQLPlayground.tsx | 2 +- .../components/PlaygroundSetupForm.tsx | 10 +- .../SettingsPlaygroundCoverImage.tsx | 2 +- .../__stories__/GraphQLPlayground.stories.tsx | 5 +- .../PlaygroundSetupForm.stories.tsx | 2 +- .../__stories__/RestPlayground.stories.tsx | 2 +- .../playground/states/openAPIReference.ts | 3 +- .../profile/components/ChangePassword.tsx | 4 +- .../profile/components/DeleteAccount.tsx | 3 +- .../profile/components/DeleteWorkspace.tsx | 3 +- .../components/SettingsRolesContainer.tsx | 3 +- .../components/SettingsRolesDefaultRole.tsx | 3 +- .../roles/components/SettingsRolesList.tsx | 4 +- .../components/SettingsRolesTableRow.tsx | 6 +- .../components/SettingsRoleAssignment.tsx | 18 +- ...oleAssignmentConfirmationModalSubtitle.tsx | 2 +- .../SettingsRoleAssignmentTableRow.tsx | 2 +- ...ntWorkspaceMemberPickerDropdownContent.tsx | 2 +- .../SettingsRoleAssignment.stories.tsx | 2 +- .../components/SettingsRolePermissions.tsx | 6 +- ...tingsRolePermissionsObjectsTableHeader.tsx | 2 +- ...SettingsRolePermissionsObjectsTableRow.tsx | 2 +- ...ingsRolePermissionsSettingsTableHeader.tsx | 2 +- ...ettingsRolePermissionsSettingsTableRow.tsx | 2 +- .../SettingsRolePermissions.stories.tsx | 2 +- .../components/SettingsRoleSettings.tsx | 2 +- .../stories/SettingsRoleSettings.stories.tsx | 2 +- .../roles/role/components/SettingsRole.tsx | 3 +- ...SettingsRolePermissionsObjectPermission.ts | 3 +- ...ettingsRolePermissionsSettingPermission.ts | 3 +- .../SettingsSSOIdentitiesProvidersForm.tsx | 3 +- ...SettingsSSOIdentitiesProvidersListCard.tsx | 2 +- ...gsSSOIdentityProviderRowRightContainer.tsx | 2 +- .../components/SSO/SettingsSSOOIDCForm.tsx | 4 +- .../components/SSO/SettingsSSOSAMLForm.tsx | 10 +- .../SettingsSecuritySSORowDropdownMenu.tsx | 13 +- ...ttingsSecurityAuthProvidersOptionsList.tsx | 14 +- .../SettingsApprovedAccessDomainsListCard.tsx | 2 +- ...ityApprovedAccessDomainRowDropdownMenu.tsx | 10 +- .../states/ApprovedAccessDomainsState.ts | 2 +- .../states/SSOIdentitiesProvidersState.ts | 2 +- .../getColorBySSOIdentityProviderStatus.ts | 4 +- .../guessSSOIdentityProviderIconByUrl.ts | 5 +- .../SettingsServerlessFunctionCodeEditor.tsx | 2 +- .../SettingsServerlessFunctionNewForm.tsx | 3 +- ...gsServerlessFunctionsFieldItemTableRow.tsx | 2 +- .../SettingsServerlessFunctionsTableEmpty.tsx | 8 +- ...ettingsServerlessFunctionCodeEditorTab.tsx | 11 +- .../SettingsServerlessFunctionSettingsTab.tsx | 4 +- ...FunctionTabEnvironmentVariableTableRow.tsx | 6 +- ...FunctionTabEnvironmentVariablesSection.tsx | 12 +- .../SettingsServerlessFunctionTestTab.tsx | 12 +- .../components/ToggleImpersonate.tsx | 3 +- .../SignInAppNavigationDrawerMock.tsx | 4 +- .../components/SignInBackgroundMockPage.tsx | 2 +- .../components/MatchColumnSelect.tsx | 4 +- .../components/ModalCloseButton.tsx | 3 +- .../components/ModalWrapper.tsx | 2 +- .../components/SpreadsheetImportTable.tsx | 2 +- .../components/StepNavigationButton.tsx | 4 +- .../states/spreadsheetImportDialogState.ts | 3 +- .../components/SubMatchingSelect.tsx | 4 +- .../components/TemplateColumn.tsx | 2 +- .../components/UnmatchColumn.tsx | 2 +- .../components/UnmatchColumnBanner.tsx | 2 +- .../components/SelectColumn.tsx | 2 +- .../SelectSheetStep/SelectSheetStep.tsx | 2 +- .../components/SpreadsheetImportStepper.tsx | 2 +- .../SpreadsheetImportStepperContainer.tsx | 2 +- .../UploadStep/components/DropZone.tsx | 2 +- .../UploadStep/components/columns.tsx | 2 +- .../ValidationStep/ValidationStep.tsx | 3 +- .../ValidationStep/components/columns.tsx | 3 +- .../types/SpreadsheetImportField.ts | 2 +- .../types/SpreadsheetImportFieldType.ts | 3 +- .../support/components/SupportButton.tsx | 3 +- .../support/components/SupportDropdown.tsx | 3 +- .../dialog-manager/components/Dialog.tsx | 2 +- .../snack-bar-manager/components/SnackBar.tsx | 12 +- .../components/SnackBarProvider.tsx | 2 +- .../__stories__/SnackBar.stories.tsx | 11 +- .../field/display/components/ActorDisplay.tsx | 6 +- .../field/display/components/ArrayDisplay.tsx | 3 +- .../display/components/BooleanDisplay.tsx | 3 +- .../field/display/components/EmailDisplay.tsx | 3 +- .../display/components/EmailsDisplay.tsx | 3 +- .../field/display/components/LinkDisplay.tsx | 2 +- .../field/display/components/LinksDisplay.tsx | 2 +- .../display/components/MultiSelectDisplay.tsx | 6 +- .../field/display/components/PhoneDisplay.tsx | 2 +- .../display/components/PhonesDisplay.tsx | 3 +- .../display/components/SelectDisplay.tsx | 4 +- .../field/display/components/TextDisplay.tsx | 2 +- .../field/display/components/URLDisplay.tsx | 3 +- .../__stories__/ActorDisplay.stories.tsx | 2 +- .../perf/EllipsisDisplay.perf.stories.tsx | 2 +- .../field/input/components/AddressInput.tsx | 2 +- .../field/input/components/CurrencyInput.tsx | 3 +- .../ui/field/input/components/DateInput.tsx | 2 +- .../input/components/MultiSelectInput.tsx | 3 +- .../ui/field/input/components/RatingInput.tsx | 3 +- .../ui/field/input/components/SelectInput.tsx | 2 +- .../field/input/components/TextAreaInput.tsx | 2 +- .../ui/field/input/components/TextInput.tsx | 2 +- .../ui/input/components/AutosizeTextInput.tsx | 3 +- .../ui/input/components/IconPicker.tsx | 16 +- .../ui/input/components/ImageInput.tsx | 3 +- .../ui/input/components/InputLabel.tsx | 2 +- .../modules/ui/input/components/Select.tsx | 9 +- .../ui/input/components/SelectControl.tsx | 7 +- .../ui/input/components/SelectInput.tsx | 4 +- .../modules/ui/input/components/TextArea.tsx | 3 +- .../ui/input/components/TextInputV2.tsx | 3 +- .../ui/input/components/TitleInput.tsx | 2 +- .../__stories__/AutosizeTextInput.stories.tsx | 6 +- .../__stories__/IconPicker.stories.tsx | 2 +- .../__stories__/ImageInput.stories.tsx | 2 +- .../components/__stories__/Select.stories.tsx | 3 +- .../__stories__/TextArea.stories.tsx | 2 +- .../__stories__/TextInput.stories.tsx | 2 +- .../__stories__/TextInputV2.stories.tsx | 2 +- .../__stories__/TitleInput.stories.tsx | 2 +- .../country/components/CountrySelect.tsx | 3 +- .../CurrencyPickerDropdownButton.tsx | 2 +- .../CurrencyPickerDropdownSelect.tsx | 3 +- .../components/AbsoluteDatePickerHeader.tsx | 3 +- .../date/components/InternalDatePicker.tsx | 10 +- .../InternalDatePicker.stories.tsx | 2 +- .../PhoneCountryPickerDropdownButton.tsx | 2 +- .../PhoneCountryPickerDropdownSelect.tsx | 2 +- .../editor/components/CustomSideMenu.tsx | 2 +- .../components/CustomSideMenuOptions.tsx | 2 +- .../editor/components/CustomSlashMenu.tsx | 3 +- .../hooks/__tests__/useIconPicker.test.tsx | 2 +- .../components/CreateNewButton.tsx | 2 +- .../ui/input/states/iconPickerState.ts | 3 +- .../__stories__/DraggableItem.stories.tsx | 4 +- .../__stories__/DraggableList.stories.tsx | 4 +- .../DropdownMenuHeaderLeftComponent.tsx | 3 +- .../dropdown/components/DropdownMenuInput.tsx | 2 +- .../components/DropdownMenuSearchInput.tsx | 2 +- .../StyledDropdownMenuSubheader.tsx | 2 +- .../__stories__/DropdownMenu.stories.tsx | 17 +- .../DropdownMenuHeader.stories.tsx | 17 +- .../__stories__/DropdownMenuInput.stories.tsx | 2 +- .../states/activeDropdownFocusIdState.ts | 3 +- .../states/previousDropdownFocusIdState.ts | 3 +- .../components/ExpandableList.tsx | 8 +- .../__stories__/ExpandableList.stories.tsx | 6 +- .../components/FullScreenContainer.tsx | 4 +- .../FullScreenContainer.stories.tsx | 5 +- .../modal/components/ConfirmationModal.tsx | 12 +- .../__stories__/ConfirmationModal.stories.tsx | 2 +- .../components/__stories__/Modal.stories.tsx | 2 +- .../PageHeaderToggleCommandMenuButton.tsx | 12 +- .../layout/page/components/DefaultLayout.tsx | 2 +- .../layout/page/components/PageAddButton.tsx | 4 +- .../ui/layout/page/components/PageBody.tsx | 2 +- .../ui/layout/page/components/PageHeader.tsx | 14 +- .../components/ShowPageAddButton.tsx | 4 +- .../components/ShowPageSummaryCard.tsx | 7 +- .../isDefaultLayoutAuthModalVisibleState.ts | 3 +- .../modules/ui/layout/tab/components/Tab.tsx | 3 +- .../ui/layout/tab/components/TabList.tsx | 2 +- .../components/__stories__/Tab.stories.tsx | 8 +- .../__stories__/Tablist.stories.tsx | 3 +- .../ui/layout/tab/types/RecordLayoutTab.ts | 2 +- .../table/components/SortableTableHeader.tsx | 2 +- .../ui/layout/table/components/TableRow.tsx | 2 +- .../layout/table/components/TableSection.tsx | 2 +- .../components/__stories__/Table.stories.tsx | 2 +- .../layout/table/types/TableFieldMetadata.ts | 2 +- .../components/MobileBreadcrumb.tsx | 2 +- .../__stories__/Breadcrumb.stories.tsx | 2 +- .../components/MenuItemWithOptionDropdown.tsx | 7 +- .../__stories__/NavigationBar.stories.tsx | 10 +- ...ltiWorkspaceDropdownClickableComponent.tsx | 2 +- ...ultiWorkspaceDropdownDefaultComponents.tsx | 26 +- ...MultiWorkspaceDropdownThemesComponents.tsx | 3 +- ...kspaceDropdownWorkspacesListComponents.tsx | 8 +- .../MultiWorkspacesDropdownStyles.tsx | 2 +- .../components/NavigationDrawer.tsx | 2 +- .../components/NavigationDrawerBackButton.tsx | 3 +- .../NavigationDrawerCollapseButton.tsx | 4 +- .../components/NavigationDrawerInput.tsx | 2 +- .../components/NavigationDrawerItem.tsx | 10 +- .../components/NavigationDrawerSection.tsx | 2 +- .../NavigationDrawerSectionTitle.tsx | 2 +- .../__stories__/NavigationDrawer.stories.tsx | 37 +- ...NavigationDrawerCollapseButton.stories.tsx | 2 +- .../NavigationDrawerItem.stories.tsx | 6 +- .../states/isNavigationDrawerExpanded.ts | 2 +- .../navigationDrawerExpandedMemorizedState.ts | 2 +- .../states/navigationMemorizedUrlState.ts | 3 +- .../navigation/step-bar/components/Step.tsx | 3 +- .../step-bar/components/StepBar.tsx | 2 +- .../step-bar/states/stepBarInternalState.ts | 3 +- .../ui/theme/components/BaseThemeProvider.tsx | 8 +- .../modules/ui/theme/hooks/useColorScheme.ts | 7 +- .../drag-select/components/DragSelect.tsx | 2 +- .../internal/currentHotkeyScopeState.ts | 3 +- .../internalHotkeysEnabledScopesState.ts | 3 +- .../states/internal/pendingHotkeysState.ts | 2 +- .../states/currentPageLocationState.ts | 3 +- .../utilities/responsive/hooks/useIsMobile.ts | 2 +- .../views/components/AdvancedFilterChip.tsx | 3 +- .../views/components/EditableFilterChip.tsx | 3 +- .../views/components/EditableSortChip.tsx | 3 +- .../views/components/SoftDeleteFilterChip.tsx | 3 +- .../views/components/SortOrFilterChip.tsx | 2 +- .../components/UpdateViewButtonGroup.tsx | 11 +- .../views/components/ViewBarDetails.tsx | 2 +- .../ViewFieldsVisibilityDropdownSection.tsx | 16 +- .../states/isPersistingViewFieldsState.ts | 3 +- .../src/modules/views/types/ViewType.ts | 3 +- .../ViewPickerContentCreateMode.tsx | 2 +- .../components/ViewPickerContentEditMode.tsx | 2 +- .../components/ViewPickerCreateButton.tsx | 2 +- .../components/ViewPickerDropdown.tsx | 8 +- .../components/ViewPickerEditButton.tsx | 2 +- .../components/ViewPickerListContent.tsx | 3 +- .../components/ViewPickerOptionDropdown.tsx | 4 +- .../workflow/hooks/useRunWorkflowVersion.tsx | 2 +- .../src/modules/workflow/states/flowState.ts | 2 +- ...rideWorkflowDraftConfirmationModalState.ts | 3 +- .../workflow/states/workflowIdState.ts | 3 +- .../states/workflowLastCreatedStepIdState.ts | 3 +- .../workflow/states/workflowRunIdState.ts | 3 +- .../components/WorkflowDiagramCanvasBase.tsx | 3 +- .../WorkflowDiagramCanvasEditableEffect.tsx | 2 +- .../WorkflowDiagramCanvasReadonlyEffect.tsx | 2 +- .../WorkflowDiagramCreateStepNode.tsx | 3 +- .../WorkflowDiagramStepNodeBase.tsx | 3 +- ...WorkflowDiagramStepNodeEditableContent.tsx | 3 +- .../WorkflowDiagramStepNodeIcon.tsx | 2 +- .../components/WorkflowDiagramSuccessEdge.tsx | 2 +- .../WorkflowRunDiagramCanvasEffect.tsx | 2 +- .../WorkflowRunOutputVisualizer.tsx | 2 +- .../WorkflowDiagramCreateStepNode.stories.tsx | 2 +- .../WorkflowDiagramEmptyTrigger.stories.tsx | 2 +- ...DiagramStepNodeEditableContent.stories.tsx | 2 +- .../constants/NodeIconLeftMargin.ts | 3 +- .../constants/NodeIconWidth.ts | 3 +- .../hooks/useRightDrawerState.ts | 2 +- .../states/workflowDiagramState.ts | 2 +- ...orkflowDiagramTriggerNodeSelectionState.ts | 3 +- .../states/workflowReactFlowRefState.ts | 2 +- .../states/workflowSelectedNodeState.ts | 3 +- .../utils/getWorkflowRunStatusTagProps.ts | 2 +- .../utils/getWorkflowVersionStatusTagProps.ts | 2 +- .../components/WorkflowRunStepInputDetail.tsx | 5 +- .../WorkflowRunStepOutputDetail.tsx | 4 +- .../components/WorkflowStepHeader.tsx | 3 +- .../WorkflowStepHeader.stories.tsx | 4 +- ...workflowCreateStepFromParentStepIdState.ts | 3 +- .../WorkflowEditActionServerlessFunction.tsx | 3 +- ...rkflowReadonlyActionServerlessFunction.tsx | 3 +- .../WorkflowEditActionCreateRecord.tsx | 3 +- .../WorkflowEditActionDeleteRecord.tsx | 3 +- .../WorkflowEditActionFindRecords.tsx | 3 +- .../WorkflowEditActionSendEmail.tsx | 3 +- .../WorkflowEditActionUpdateRecord.tsx | 3 +- ...WorkflowEditActionCreateRecord.stories.tsx | 2 +- ...WorkflowEditActionDeleteRecord.stories.tsx | 2 +- .../WorkflowEditActionFindRecords.stories.tsx | 2 +- ...WorkflowEditActionUpdateRecord.stories.tsx | 2 +- .../WorkflowEditActionFormBuilder.tsx | 7 +- .../WorkflowEditActionFormFieldSettings.tsx | 3 +- .../WorkflowEditActionFormFiller.tsx | 2 +- .../WorkflowFormFieldSettingsRecordPicker.tsx | 3 +- .../WorkflowEditActionFormBuilder.stories.tsx | 2 +- ...lowEditActionFormFieldSettings.stories.tsx | 2 +- .../WorkflowEditActionFormFiller.stories.tsx | 2 +- .../constants/FormSelectFieldTypeOptions.ts | 4 +- ...DrawerWorkflowSelectTriggerTypeContent.tsx | 3 +- .../WorkflowEditTriggerCronForm.tsx | 2 +- .../WorkflowEditTriggerDatabaseEventForm.tsx | 3 +- .../WorkflowEditTriggerManualForm.tsx | 3 +- .../WorkflowEditTriggerWebhookForm.tsx | 2 +- .../constants/CronTriggerIntervalOptions.ts | 3 +- .../ManualTriggerAvailabilityOptions.ts | 2 +- .../components/WorkflowVariablesDropdown.tsx | 2 +- .../WorkflowVariablesDropdownFieldItems.tsx | 4 +- .../WorkflowVariablesDropdownObjectItems.tsx | 4 +- ...flowVariablesDropdownWorkflowStepItems.tsx | 9 +- .../states/workspaceInvitationsStates.ts | 2 +- .../components/WorkspaceInviteLink.tsx | 4 +- .../components/WorkspaceInviteTeam.tsx | 3 +- .../states/workspaceAuthProvidersState.ts | 3 +- .../twenty-front/src/pages/auth/Authorize.tsx | 3 +- .../src/pages/auth/PasswordReset.tsx | 3 +- .../twenty-front/src/pages/auth/SignInUp.tsx | 2 +- .../src/pages/not-found/NotFound.tsx | 6 +- .../RecordShowPageBaseHeader.tsx | 2 +- .../src/pages/onboarding/ChooseYourPlan.tsx | 10 +- .../src/pages/onboarding/CreateProfile.tsx | 3 +- .../src/pages/onboarding/CreateWorkspace.tsx | 4 +- .../src/pages/onboarding/InviteTeam.tsx | 10 +- .../src/pages/onboarding/PaymentSuccess.tsx | 5 +- .../src/pages/onboarding/SyncEmails.tsx | 4 +- .../src/pages/settings/SettingsBilling.tsx | 16 +- .../src/pages/settings/SettingsProfile.tsx | 3 +- .../src/pages/settings/SettingsWorkspace.tsx | 10 +- .../settings/SettingsWorkspaceMembers.tsx | 26 +- .../settings/accounts/SettingsAccounts.tsx | 3 +- .../accounts/SettingsAccountsCalendars.tsx | 2 +- .../accounts/SettingsAccountsEmails.tsx | 2 +- .../SettingsAdminIndicatorHealthStatus.tsx | 3 +- .../SettingsAdminSecondaryEnvVariables.tsx | 2 +- .../settings/data-model/SettingsNewObject.tsx | 3 +- .../data-model/SettingsObjectDetailPage.tsx | 22 +- .../data-model/SettingsObjectFieldEdit.tsx | 10 +- .../data-model/SettingsObjectFieldTable.tsx | 2 +- .../data-model/SettingsObjectIndexTable.tsx | 2 +- .../SettingsObjectNewFieldConfigure.tsx | 4 +- .../settings/data-model/SettingsObjects.tsx | 14 +- .../states/updatedObjectNamePluralState.ts | 3 +- .../playground/GraphQLPlayground.stories.tsx | 5 +- .../playground/SettingsPlayground.stories.tsx | 5 +- .../developers/api-keys/SettingsApiKeys.tsx | 5 +- .../SettingsDevelopersApiKeyDetail.tsx | 4 +- .../api-keys/SettingsDevelopersApiKeysNew.tsx | 3 +- .../SettingsDevelopersWebhookDetail.tsx | 24 +- .../webhooks/components/SettingsWebhooks.tsx | 5 +- .../SettingsIntegrationDatabase.tsx | 3 +- ...ttingsIntegrationNewDatabaseConnection.tsx | 3 +- .../components/SettingsExperience.tsx | 5 +- .../settings/security/SettingsSecurity.tsx | 4 +- .../SettingsSecurityApprovedAccessDomain.tsx | 3 +- .../SettingsServerlessFunctionDetail.tsx | 2 +- .../SettingsServerlessFunctions.tsx | 5 +- .../workspace/SettingsCustomDomain.tsx | 4 +- .../workspace/SettingsCustomDomainRecords.tsx | 3 +- .../SettingsCustomDomainRecordsStatus.tsx | 3 +- .../settings/workspace/SettingsSubdomain.tsx | 3 +- .../states/customDomainRecordsState.ts | 2 +- .../decorators/IconsProviderDecorator.tsx | 2 +- .../src/testing/decorators/PageDecorator.tsx | 2 +- .../getDisplayValueByUrlType.test.ts | 2 +- .../twenty-front/src/utils/checkUrlType.ts | 3 +- ...ompareStrictlyExceptForNullAndUndefined.ts | 2 +- .../src/utils/getDisplayValueByUrlType.ts | 2 +- packages/twenty-front/tsconfig.build.json | 3 +- packages/twenty-front/tsconfig.json | 4 +- packages/twenty-front/tsconfig.spec.json | 4 +- packages/twenty-front/tsup.config.ts | 29 - packages/twenty-front/tsup.ui.index.tsx | 17 - packages/twenty-front/vite.config.ts | 11 +- packages/twenty-shared/jest.config.ts | 2 +- packages/twenty-shared/tsconfig.spec.json | 1 - packages/twenty-ui/.storybook/preview.tsx | 9 +- packages/twenty-ui/jest.config.ts | 2 +- packages/twenty-ui/package.json | 121 +- packages/twenty-ui/project.json | 64 +- packages/twenty-ui/scripts/generateBarrels.js | 105 -- packages/twenty-ui/scripts/generateBarrels.ts | 484 ++++++ .../migrateFromSingleToMultiBarrelImport.ts | 527 +++++++ packages/twenty-ui/src/accessibility/index.ts | 15 +- .../assets => assets/icons}/address-book.svg | 0 .../icon/assets => assets/icons}/gmail.svg | 0 .../icons}/google-calendar.svg | 0 .../icon/assets => assets/icons}/google.svg | 0 .../icons}/illustration-array.svg | 0 .../icons}/illustration-calendar-event.svg | 0 .../icons}/illustration-calendar-time.svg | 0 .../icons}/illustration-currency.svg | 0 .../icons}/illustration-json.svg | 0 .../icons}/illustration-link.svg | 0 .../icons}/illustration-mail.svg | 0 .../icons}/illustration-many-to-many.svg | 0 .../icons}/illustration-map.svg | 0 .../icons}/illustration-numbers.svg | 0 .../icons}/illustration-one-to-many.svg | 0 .../icons}/illustration-one-to-one.svg | 0 .../icons}/illustration-phone.svg | 0 .../icons}/illustration-setting.svg | 0 .../icons}/illustration-star.svg | 0 .../icons}/illustration-tag.svg | 0 .../icons}/illustration-tags.svg | 0 .../icons}/illustration-text.svg | 0 .../icons}/illustration-toggle.svg | 0 .../icons}/illustration-uid.svg | 0 .../icons}/illustration-user.svg | 0 .../icon/assets => assets/icons}/lock.svg | 0 .../assets => assets/icons}/many-to-one.svg | 0 .../icons}/microsoft-calendar.svg | 0 .../icons}/microsoft-outlook.svg | 0 .../assets => assets/icons}/microsoft.svg | 0 .../icons}/twenty-star-filled.svg | 0 .../assets => assets/icons}/twenty-star.svg | 0 .../misc}/list-view-grip.svg | 0 .../assets => assets/themes}/dark-noise.jpg | Bin .../assets => assets/themes}/light-noise.png | Bin .../Pill/__stories__/Pill.stories.ts | 2 +- .../avatar-chip}/AvatarChip.tsx | 6 +- .../avatar-chip}/AvatarChipLeftComponent.tsx | 2 +- .../avatar-chip}/LinkAvatarChip.tsx | 10 +- .../types/AvatarChipsCommonProps.type.ts | 8 + .../types/AvatarChipsVariant.type.ts | 0 .../components => components/chip}/Chip.tsx | 0 .../chip}/LinkChip.tsx | 2 +- .../chip}/__stories__/Chip.stories.tsx | 0 .../chip}/__stories__/EntityChip.stories.tsx | 10 +- packages/twenty-ui/src/components/index.ts | 25 +- .../tag/components => components/tag}/Tag.tsx | 4 +- .../tag}/__stories__/Tag.stories.tsx | 0 .../types/AvatarChipsCommonProps.type.ts | 8 - .../components/__stories__/Avatar.stories.tsx | 8 +- .../__stories__/AvatarGroup.stories.tsx | 5 +- .../icon/components/IconAddressBook.tsx | 3 +- .../src/display/icon/components/IconGmail.tsx | 2 +- .../display/icon/components/IconGoogle.tsx | 2 +- .../icon/components/IconGoogleCalendar.tsx | 2 +- .../src/display/icon/components/IconLock.tsx | 2 +- .../display/icon/components/IconMicrosoft.tsx | 2 +- .../icon/components/IconMicrosoftCalendar.tsx | 2 +- .../icon/components/IconMicrosoftOutlook.tsx | 2 +- .../icon/components/IconRelationManyToOne.tsx | 2 +- .../icon/components/IconTwentyStar.tsx | 2 +- .../icon/components/IconTwentyStarFilled.tsx | 2 +- .../icon/components/IllustrationIconArray.tsx | 2 +- .../IllustrationIconCalendarEvent.tsx | 2 +- .../IllustrationIconCalendarTime.tsx | 2 +- .../components/IllustrationIconCurrency.tsx | 2 +- .../icon/components/IllustrationIconJson.tsx | 2 +- .../icon/components/IllustrationIconLink.tsx | 2 +- .../icon/components/IllustrationIconMail.tsx | 2 +- .../components/IllustrationIconManyToMany.tsx | 2 +- .../icon/components/IllustrationIconMap.tsx | 2 +- .../components/IllustrationIconNumbers.tsx | 2 +- .../components/IllustrationIconOneToMany.tsx | 2 +- .../components/IllustrationIconOneToOne.tsx | 2 +- .../icon/components/IllustrationIconPhone.tsx | 2 +- .../components/IllustrationIconSetting.tsx | 2 +- .../icon/components/IllustrationIconStar.tsx | 2 +- .../icon/components/IllustrationIconTag.tsx | 2 +- .../icon/components/IllustrationIconTags.tsx | 2 +- .../icon/components/IllustrationIconText.tsx | 2 +- .../components/IllustrationIconToggle.tsx | 2 +- .../icon/components/IllustrationIconUid.tsx | 2 +- .../icon/components/IllustrationIconUser.tsx | 2 +- .../display/icon/components/TablerIcons.ts | 9 +- .../display/icon/providers/IconsProvider.tsx | 4 +- .../icon/providers/internal/AllIcons.ts | 290 ++-- packages/twenty-ui/src/display/index.ts | 459 +++++- .../src/display/tooltip/AppTooltip.tsx | 22 +- packages/twenty-ui/src/feedback/index.ts | 21 +- packages/twenty-ui/src/index.ts | 12 +- .../button/components/AnimatedButton.tsx | 2 +- .../src/input/components/IconListViewGrip.tsx | 2 +- packages/twenty-ui/src/input/index.ts | 123 +- .../twenty-ui/src/json-visualizer/index.ts | 39 +- packages/twenty-ui/src/layout/index.ts | 67 +- packages/twenty-ui/src/navigation/index.ts | 95 +- .../navigation/link/components/SocialLink.tsx | 2 +- .../components/MenuItemMultiSelect.tsx | 3 +- .../components/MenuItemMultiSelectTag.tsx | 3 +- .../components/MenuItemSelectTag.tsx | 3 +- .../MenuItemMultiSelectAvatar.stories.tsx | 5 +- .../MenuItemSelectAvatar.stories.tsx | 5 +- .../decorators/RecoilRootDecorator.tsx | 9 + packages/twenty-ui/src/testing/index.ts | 35 +- .../src/theme/constants/BackgroundDark.ts | 2 +- .../src/theme/constants/BackgroundLight.ts | 2 +- packages/twenty-ui/src/theme/index.ts | 106 +- .../utilities/{config/index.ts => config.ts} | 0 packages/twenty-ui/src/utilities/index.ts | 46 +- .../utils/getDisplayValueByUrlType.ts | 2 +- packages/twenty-ui/tsconfig.dev.json | 3 +- packages/twenty-ui/tsconfig.json | 5 +- ...{tsconfig.build.json => tsconfig.lib.json} | 6 + packages/twenty-ui/tsconfig.spec.json | 1 - packages/twenty-ui/vite.config.ts | 90 +- packages/twenty-website/package.json | 3 +- .../best-practices-front.mdx | 2 +- .../content/twenty-ui/display/app-tooltip.mdx | 2 +- .../content/twenty-ui/display/checkmark.mdx | 4 +- .../src/content/twenty-ui/display/chip.mdx | 11 +- .../src/content/twenty-ui/display/icons.mdx | 2 +- .../src/content/twenty-ui/input/checkbox.mdx | 2 +- .../content/twenty-ui/input/color-scheme.mdx | 4 +- .../src/content/twenty-ui/input/radio.mdx | 4 +- .../src/content/twenty-ui/input/select.mdx | 2 +- .../src/content/twenty-ui/input/toggle.mdx | 2 +- .../content/twenty-ui/navigation/links.mdx | 8 +- .../twenty-ui/navigation/menu-item.mdx | 20 +- .../src/content/twenty-ui/progress-bar.mdx | 2 +- yarn.lock | 1365 ++++++++++++++++- 1009 files changed, 5757 insertions(+), 2828 deletions(-) delete mode 100644 packages/twenty-front/tsup.config.ts delete mode 100644 packages/twenty-front/tsup.ui.index.tsx delete mode 100644 packages/twenty-ui/scripts/generateBarrels.js create mode 100644 packages/twenty-ui/scripts/generateBarrels.ts create mode 100644 packages/twenty-ui/scripts/migrateFromSingleToMultiBarrelImport.ts rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/address-book.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/gmail.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/google-calendar.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/google.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-array.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-calendar-event.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-calendar-time.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-currency.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-json.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-link.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-mail.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-many-to-many.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-map.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-numbers.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-one-to-many.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-one-to-one.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-phone.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-setting.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-star.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-tag.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-tags.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-text.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-toggle.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-uid.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/illustration-user.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/lock.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/many-to-one.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/microsoft-calendar.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/microsoft-outlook.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/microsoft.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/twenty-star-filled.svg (100%) rename packages/twenty-ui/src/{display/icon/assets => assets/icons}/twenty-star.svg (100%) rename packages/twenty-ui/src/{input/components => assets/misc}/list-view-grip.svg (100%) rename packages/twenty-ui/src/{theme/assets => assets/themes}/dark-noise.jpg (100%) rename packages/twenty-ui/src/{theme/assets => assets/themes}/light-noise.png (100%) rename packages/twenty-ui/src/{display/avatar-chip/components => components/avatar-chip}/AvatarChip.tsx (72%) rename packages/twenty-ui/src/{display/avatar-chip/components => components/avatar-chip}/AvatarChipLeftComponent.tsx (97%) rename packages/twenty-ui/src/{display/avatar-chip/components => components/avatar-chip}/LinkAvatarChip.tsx (71%) create mode 100644 packages/twenty-ui/src/components/avatar-chip/types/AvatarChipsCommonProps.type.ts rename packages/twenty-ui/src/{display => components}/avatar-chip/types/AvatarChipsVariant.type.ts (100%) rename packages/twenty-ui/src/{display/chip/components => components/chip}/Chip.tsx (100%) rename packages/twenty-ui/src/{display/chip/components => components/chip}/LinkChip.tsx (96%) rename packages/twenty-ui/src/{display/chip/components => components/chip}/__stories__/Chip.stories.tsx (100%) rename packages/twenty-ui/src/{display/chip/components => components/chip}/__stories__/EntityChip.stories.tsx (57%) rename packages/twenty-ui/src/{display/tag/components => components/tag}/Tag.tsx (93%) rename packages/twenty-ui/src/{display/tag/components => components/tag}/__stories__/Tag.stories.tsx (100%) delete mode 100644 packages/twenty-ui/src/display/avatar-chip/types/AvatarChipsCommonProps.type.ts create mode 100644 packages/twenty-ui/src/testing/decorators/RecoilRootDecorator.tsx rename packages/twenty-ui/src/utilities/{config/index.ts => config.ts} (100%) rename packages/twenty-ui/{tsconfig.build.json => tsconfig.lib.json} (67%) diff --git a/.github/workflows/actions/restore-cache/action.yaml b/.github/workflows/actions/restore-cache/action.yaml index a445582a2..29a1ea7ee 100644 --- a/.github/workflows/actions/restore-cache/action.yaml +++ b/.github/workflows/actions/restore-cache/action.yaml @@ -20,7 +20,7 @@ runs: id: cache-primary-key-builder shell: bash run: | - echo "CACHE_PRIMARY_KEY_PREFIX=v2-${{ inputs.key }}-${{ github.ref_name }}" >> "${GITHUB_OUTPUT}" + echo "CACHE_PRIMARY_KEY_PREFIX=v3-${{ inputs.key }}-${{ github.ref_name }}" >> "${GITHUB_OUTPUT}" - name: Restore cache uses: actions/cache/restore@v4 id: restore-cache diff --git a/.github/workflows/actions/yarn-install/action.yaml b/.github/workflows/actions/yarn-install/action.yaml index aa2ce3c94..685cfd96b 100644 --- a/.github/workflows/actions/yarn-install/action.yaml +++ b/.github/workflows/actions/yarn-install/action.yaml @@ -25,8 +25,8 @@ runs: id: cache-node-modules uses: actions/cache/restore@v4 with: - key: v2-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-${{github.sha}} - restore-keys: v2-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}- + key: v3-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-${{github.sha}} + restore-keys: v3-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}- path: ${{ steps.globals.outputs.PATH_TO_CACHE }} - name: Install Dependencies if: ${{ steps.cache-node-modules.outputs.cache-hit != 'true' && steps.cache-node-modules.outputs.cache-matched-key == '' }} diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index d35b87e85..b848c7599 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -3,12 +3,12 @@ import { Preview } from '@storybook/react'; import { initialize, mswDecorator } from 'msw-storybook-addon'; import { useEffect } from 'react'; import { useDarkMode } from 'storybook-dark-mode'; -import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui'; import { RootDecorator } from '../src/testing/decorators/RootDecorator'; import { mockedUserJWT } from '../src/testing/mock-data/jwt'; import 'react-loading-skeleton/dist/skeleton.css'; +import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; initialize({ onUnhandledRequest: async (request: Request) => { diff --git a/packages/twenty-front/.swcrc b/packages/twenty-front/.swcrc index 8632a08ea..450adef1c 100644 --- a/packages/twenty-front/.swcrc +++ b/packages/twenty-front/.swcrc @@ -41,4 +41,4 @@ "lazy": false, "noInterop": false } -} \ No newline at end of file +} diff --git a/packages/twenty-front/jest.config.ts b/packages/twenty-front/jest.config.ts index 8a846a8f4..510d67bf1 100644 --- a/packages/twenty-front/jest.config.ts +++ b/packages/twenty-front/jest.config.ts @@ -15,12 +15,26 @@ const jestConfig: JestConfigWithTsJest = { preset: '../../jest.preset.js', setupFilesAfterEnv: ['./setupTests.ts'], testEnvironment: 'jsdom', - transformIgnorePatterns: ['../../node_modules/'], + + transformIgnorePatterns: [ + '/node_modules/(?!(twenty-ui)/.*)', + '../../node_modules/(?!(twenty-ui)/.*)', + '../../twenty-ui/', + ], transform: { '^.+\\.(ts|js|tsx|jsx)$': [ '@swc/jest', { jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'automatic', + }, + }, experimental: { plugins: [['@lingui/swc-plugin', {}]], }, diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index d967ea576..96801892c 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -56,7 +56,8 @@ "file-saver": "^2.0.5", "recoil-sync": "^0.2.0", "transliteration": "^2.3.5", - "twenty-shared": "workspace:*" + "twenty-shared": "workspace:*", + "twenty-ui": "workspace:*" }, "devDependencies": { "@lingui/cli": "^5.1.2", diff --git a/packages/twenty-front/src/emotion.d.ts b/packages/twenty-front/src/emotion.d.ts index 90e71e26b..6f8b748ab 100644 --- a/packages/twenty-front/src/emotion.d.ts +++ b/packages/twenty-front/src/emotion.d.ts @@ -1,5 +1,4 @@ -import { ThemeType } from 'twenty-ui'; - +import { ThemeType } from 'twenty-ui/theme'; declare module '@emotion/react' { export interface Theme extends ThemeType {} } diff --git a/packages/twenty-front/src/index.tsx b/packages/twenty-front/src/index.tsx index 2a9ce791f..17d431f26 100644 --- a/packages/twenty-front/src/index.tsx +++ b/packages/twenty-front/src/index.tsx @@ -4,6 +4,7 @@ import '@emotion/react'; import { App } from '@/app/components/App'; import 'react-loading-skeleton/dist/skeleton.css'; +import 'twenty-ui/style.css'; import './index.css'; const root = ReactDOM.createRoot( diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index bd529524c..11c44327b 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ANIMATION } from 'twenty-ui'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useTheme } from '@emotion/react'; import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader'; +import { ANIMATION } from 'twenty-ui/theme'; const StyledAnimatedContainer = styled(motion.div)` align-items: center; diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx index 013b6aa08..4221da6f4 100644 --- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx @@ -2,7 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui'; +import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledMainContainer = styled.div` background: ${({ theme }) => theme.background.noisy}; diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx index 8f33bb800..66212bff7 100644 --- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx +++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths'; import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader'; import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledContainer = styled.div` background: ${({ theme }) => theme.background.noisy}; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts index 85d1c54dc..08ca576f8 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts @@ -52,7 +52,7 @@ import { IconTrash, IconTrashX, IconUser, -} from 'twenty-ui'; +} from 'twenty-ui/display'; export const DEFAULT_RECORD_ACTIONS_CONFIG: Record< | NoSelectionRecordActionKeys diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts index d496cdb27..134c04615 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts @@ -26,7 +26,7 @@ import { IconPlayerPlay, IconPower, IconVersions, -} from 'twenty-ui'; +} from 'twenty-ui/display'; export const WORKFLOW_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({ config: { diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts index 7010474cc..3c075be24 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts @@ -12,7 +12,7 @@ import { ActionMenuEntryType, } from '@/action-menu/types/ActionMenuEntry'; import { msg } from '@lingui/core/macro'; -import { IconSettingsAutomation, IconVersions } from 'twenty-ui'; +import { IconSettingsAutomation, IconVersions } from 'twenty-ui/display'; export const WORKFLOW_RUNS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({ config: { diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts index 6805b28fb..f244a0ab2 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts @@ -22,7 +22,7 @@ import { IconPencil, IconSettingsAutomation, IconVersions, -} from 'twenty-ui'; +} from 'twenty-ui/display'; export const WORKFLOW_VERSIONS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig( { diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx index f50afa61b..c259a27f2 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx @@ -12,8 +12,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion'; import { msg } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; -import { IconSettingsAutomation } from 'twenty-ui'; import { capitalize, isDefined } from 'twenty-shared/utils'; +import { IconSettingsAutomation } from 'twenty-ui/display'; export const useWorkflowRunRecordActions = ({ objectMetadataItem, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts index 3185e8474..2cc8f8167 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts @@ -7,7 +7,7 @@ import { ActionMenuEntryType, } from '@/action-menu/types/ActionMenuEntry'; import { msg } from '@lingui/core/macro'; -import { IconSearch } from 'twenty-ui'; +import { IconSearch } from 'twenty-ui/display'; export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record< string, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts index 74ca4007c..7cac79911 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts @@ -1,6 +1,6 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; -import { IconSearch } from 'twenty-ui'; +import { IconSearch } from 'twenty-ui/display'; export const useSearchRecordsRecordAgnosticAction = () => { const { navigateCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx index f5dd470cb..6c0c1e093 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx @@ -7,8 +7,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { msg } from '@lingui/core/macro'; import { capitalize, isDefined } from 'twenty-shared/utils'; -import { IconSettingsAutomation } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated/graphql'; +import { IconSettingsAutomation } from 'twenty-ui/display'; export const useRunWorkflowActions = () => { const isWorkflowEnabled = useIsFeatureEnabled( diff --git a/packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts b/packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts index cdacbf1a1..57be049fc 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts @@ -6,7 +6,8 @@ import { ActionMenuEntryType, } from '@/action-menu/types/ActionMenuEntry'; import { MessageDescriptor } from '@lingui/core'; -import { IconComponent, MenuItemAccent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; +import { MenuItemAccent } from 'twenty-ui/navigation'; export type RecordConfigAction = { type: ActionMenuEntryType; diff --git a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx index 1d113e000..be748480f 100644 --- a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx @@ -1,7 +1,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { Key } from 'ts-key-enum'; -import { Button, getOsControlSymbol } from 'twenty-ui'; +import { Button } from 'twenty-ui/input'; +import { getOsControlSymbol } from 'twenty-ui/utilities'; export const CmdEnterActionButton = ({ title, diff --git a/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx index 6dda3ef6f..597634d7e 100644 --- a/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx @@ -12,7 +12,9 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useTheme } from '@emotion/react'; import { i18n } from '@lingui/core'; -import { Button, getOsControlSymbol, MenuItem } from 'twenty-ui'; +import { Button } from 'twenty-ui/input'; +import { getOsControlSymbol } from 'twenty-ui/utilities'; +import { MenuItem } from 'twenty-ui/navigation'; export const CommandMenuActionMenuDropdown = () => { const actionMenuEntries = useRecoilComponentValueV2( diff --git a/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx index 63bc9cb3c..bbdf869ec 100644 --- a/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx @@ -2,13 +2,8 @@ import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionM import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import styled from '@emotion/styled'; import { i18n } from '@lingui/core'; -import { - AppTooltip, - Button, - IconButton, - TooltipDelay, - TooltipPosition, -} from 'twenty-ui'; +import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display'; +import { Button, IconButton } from 'twenty-ui/input'; const StyledWrapper = styled.div` font-size: ${({ theme }) => theme.font.size.md}; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx index 3341080f0..d338f5d8b 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx @@ -11,8 +11,8 @@ import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/recor import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { useIsMobile } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated/graphql'; +import { useIsMobile } from 'twenty-ui/utilities'; export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => { const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2( diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx index 9ee832a68..623b12049 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx @@ -1,7 +1,8 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconLayoutSidebarRightExpand, getOsControlSymbol } from 'twenty-ui'; +import { IconLayoutSidebarRightExpand } from 'twenty-ui/display'; +import { getOsControlSymbol } from 'twenty-ui/utilities'; const StyledButton = styled.div` border-radius: ${({ theme }) => theme.border.radius.sm}; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx index 9cab9e702..10bcf2da3 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx @@ -17,7 +17,8 @@ import { extractComponentState } from '@/ui/utilities/state/component-state/util import styled from '@emotion/styled'; import { i18n } from '@lingui/core'; import { useRecoilValue } from 'recoil'; -import { IconLayoutSidebarRightExpand, MenuItem } from 'twenty-ui'; +import { IconLayoutSidebarRightExpand } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; const StyledDropdownMenuContainer = styled.div` width: 100%; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx index 7884d2818..c1b172382 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx @@ -8,8 +8,8 @@ import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { useIsMobile } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated/graphql'; +import { useIsMobile } from 'twenty-ui/utilities'; export const RecordShowActionMenu = () => { const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2( diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx index f20bdc61c..e72f4118d 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx @@ -21,8 +21,11 @@ import { useCallback } from 'react'; import { Link } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; -import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui'; import { useNavigateApp } from '~/hooks/useNavigateApp'; +import { Button } from 'twenty-ui/input'; +import { IconBrowserMaximize } from 'twenty-ui/display'; +import { getOsControlSymbol } from 'twenty-ui/utilities'; + const StyledLink = styled(Link)` text-decoration: none; `; diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx index 852f78053..9d77a0e36 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx @@ -14,15 +14,13 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { msg } from '@lingui/core/macro'; import { userEvent, waitFor, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ComponentDecorator, - IconFileExport, - IconHeart, - IconTrash, - MenuItemAccent, getCanvasElementForDropdownTesting, -} from 'twenty-ui'; -import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; +} from 'twenty-ui/testing'; +import { IconFileExport, IconHeart, IconTrash } from 'twenty-ui/display'; +import { MenuItemAccent } from 'twenty-ui/navigation'; const deleteMock = jest.fn(); const addToFavoritesMock = jest.fn(); diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx index 7b024a5ca..43a108862 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx @@ -7,8 +7,9 @@ import { msg } from '@lingui/core/macro'; import { expect, jest } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/testing-library'; -import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; +import { ComponentDecorator } from 'twenty-ui/testing'; +import { IconCheckbox, IconTrash } from 'twenty-ui/display'; const meta: Meta = { title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry', diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx index 1c9b14638..4277626e6 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx @@ -15,13 +15,9 @@ import { import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; import { msg } from '@lingui/core/macro'; -import { - IconCheckbox, - IconHeart, - IconTrash, - getCanvasElementForDropdownTesting, -} from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; +import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui/display'; +import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing'; const deleteMock = jest.fn(); const markAsDoneMock = jest.fn(); diff --git a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts index f3a2546ea..c476bae4c 100644 --- a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts +++ b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts @@ -2,7 +2,8 @@ import { ActionViewType } from '@/action-menu/actions/types/ActionViewType'; import { ConfirmationModalProps } from '@/ui/layout/modal/components/ConfirmationModal'; import { MessageDescriptor } from '@lingui/core'; import { MouseEvent, ReactElement } from 'react'; -import { IconComponent, MenuItemAccent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; +import { MenuItemAccent } from 'twenty-ui/navigation'; export enum ActionMenuEntryType { Standard = 'Standard', diff --git a/packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx b/packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx index 9628ec705..20390712f 100644 --- a/packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx +++ b/packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx @@ -2,13 +2,13 @@ import { createReactBlockSpec } from '@blocknote/react'; import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { ChangeEvent, useRef } from 'react'; -import { Button } from 'twenty-ui'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { AttachmentIcon } from '../../files/components/AttachmentIcon'; import { AttachmentType } from '../../files/types/Attachment'; import { getFileType } from '../../files/utils/getFileType'; import { isDefined } from 'twenty-shared/utils'; +import { Button } from 'twenty-ui/input'; const StyledFileInput = styled.input` display: none; diff --git a/packages/twenty-front/src/modules/activities/blocks/utils/getSlashMenu.ts b/packages/twenty-front/src/modules/activities/blocks/utils/getSlashMenu.ts index 7bac01b75..ff8dd6027 100644 --- a/packages/twenty-front/src/modules/activities/blocks/utils/getSlashMenu.ts +++ b/packages/twenty-front/src/modules/activities/blocks/utils/getSlashMenu.ts @@ -1,4 +1,8 @@ import { getDefaultReactSlashMenuItems } from '@blocknote/react'; + +import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu'; + +import { BLOCK_SCHEMA } from '../constants/Schema'; import { IconCode, IconComponent, @@ -15,11 +19,7 @@ import { IconPilcrow, IconTable, IconVideo, -} from 'twenty-ui'; - -import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu'; - -import { BLOCK_SCHEMA } from '../constants/Schema'; +} from 'twenty-ui/display'; const Icons: Record = { 'Heading 1': IconH1, diff --git a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx index 0be4c731a..2c89215d5 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx @@ -1,15 +1,5 @@ import styled from '@emotion/styled'; import { format, getYear } from 'date-fns'; -import { - AnimatedPlaceholder, - AnimatedPlaceholderEmptyContainer, - AnimatedPlaceholderEmptySubTitle, - AnimatedPlaceholderEmptyTextContainer, - AnimatedPlaceholderEmptyTitle, - EMPTY_PLACEHOLDER_TRANSITION_PROPS, - H3Title, - Section, -} from 'twenty-ui'; import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard'; import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar'; @@ -23,6 +13,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver'; import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { TimelineCalendarEventsWithTotal } from '~/generated/graphql'; +import { + AnimatedPlaceholder, + AnimatedPlaceholderEmptyContainer, + AnimatedPlaceholderEmptySubTitle, + AnimatedPlaceholderEmptyTextContainer, + AnimatedPlaceholderEmptyTitle, + EMPTY_PLACEHOLDER_TRANSITION_PROPS, + Section, +} from 'twenty-ui/layout'; +import { H3Title } from 'twenty-ui/display'; const StyledContainer = styled.div` box-sizing: border-box; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx index 1ccf03716..48839ed8b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx @@ -4,8 +4,8 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns'; import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow'; import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate'; -import { CardContent } from 'twenty-ui'; import { TimelineCalendarEvent } from '~/generated/graphql'; +import { CardContent } from 'twenty-ui/layout'; type CalendarDayCardContentProps = { calendarEvents: TimelineCalendarEvent[]; 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 3623fd12f..f0b8fab57 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -1,12 +1,5 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { - Chip, - ChipAccent, - ChipSize, - ChipVariant, - IconCalendarEvent, -} from 'twenty-ui'; import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus'; import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent'; @@ -20,6 +13,8 @@ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/com import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; +import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components'; +import { IconCalendarEvent } from 'twenty-ui/display'; type CalendarEventDetailsProps = { calendarEvent: CalendarEvent; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 1e9e1a761..97572a147 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,13 +1,13 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRef } from 'react'; -import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; +import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display'; const StyledInlineCellBaseContainer = styled.div` align-items: center; 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 6c6721245..675ccb6d6 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx @@ -11,19 +11,18 @@ import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalend import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu'; -import { - Avatar, - AvatarGroup, - Card, - CardContent, - IconArrowRight, - IconLock, -} from 'twenty-ui'; import { CalendarChannelVisibility, TimelineCalendarEvent, } from '~/generated-metadata/graphql'; import { isDefined } from 'twenty-shared/utils'; +import { + Avatar, + AvatarGroup, + IconArrowRight, + IconLock, +} from 'twenty-ui/display'; +import { Card, CardContent } from 'twenty-ui/layout'; type CalendarEventRowProps = { calendarEvent: TimelineCalendarEvent; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx index 97ca1d029..c443df565 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx @@ -2,7 +2,7 @@ import { useContext } from 'react'; import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent'; import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext'; -import { Card } from 'twenty-ui'; +import { Card } from 'twenty-ui/layout'; type CalendarMonthCardProps = { dayTimes: number[]; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx b/packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx index eb4aa38ed..dd25232b2 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx @@ -1,7 +1,6 @@ import { getOperationName } from '@apollo/client/utilities'; import { Meta, StoryObj } from '@storybook/react'; import { HttpResponse, graphql } from 'msw'; -import { ComponentDecorator } from 'twenty-ui'; import { Calendar } from '@/activities/calendar/components/Calendar'; import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/graphql/queries/getTimelineCalendarEventsFromCompanyId'; @@ -9,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedTimelineCalendarEvents } from '~/testing/mock-data/timeline-calendar-events'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/Activities/Calendar/Calendar', diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx index 0bb0e367e..75d4f2c32 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { Card } from 'twenty-ui'; +import { Card } from 'twenty-ui/layout'; const StyledList = styled(Card)` & > :not(:last-child) { diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx index 075758fc8..2d5a4501b 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { CardContent } from 'twenty-ui'; import React from 'react'; +import { CardContent } from 'twenty-ui/layout'; const StyledRowContent = styled(CardContent)<{ clickable?: boolean; diff --git a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx index b10ff2802..871f33d8b 100644 --- a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx @@ -1,6 +1,6 @@ import { useInView } from 'react-intersection-observer'; import styled from '@emotion/styled'; -import { GRAY_SCALE } from 'twenty-ui'; +import { GRAY_SCALE } from 'twenty-ui/theme'; type CustomResolverFetchMoreLoaderProps = { loading: boolean; diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index 82d48531d..ee0ff6b9f 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; -import { Avatar } from 'twenty-ui'; import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { RecordChip } from '@/object-record/components/RecordChip'; +import { Avatar } from 'twenty-ui/display'; const StyledAvatar = styled(Avatar)` margin-right: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx index 444685852..9ee586f27 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx @@ -3,8 +3,8 @@ import { AnimatedPlaceholderEmptyContainer, AnimatedPlaceholderEmptyTextContainer, AnimatedPlaceholderEmptyTitle, - Loader, -} from 'twenty-ui'; +} from 'twenty-ui/layout'; +import { Loader } from 'twenty-ui/feedback'; export const EmailLoader = ({ loadingText }: { loadingText?: string }) => ( diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx index 902039f45..03529dfe1 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import { Button, IconArrowBackUp, IconUserCircle } from 'twenty-ui'; +import { Button } from 'twenty-ui/input'; +import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display'; const StyledThreadBottomBar = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx index b31fa54fe..4a0a96605 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { AnimatedEaseInOut } from 'twenty-ui'; +import { AnimatedEaseInOut } from 'twenty-ui/utilities'; const StyledThreadMessageBody = styled(motion.div)` color: ${({ theme }) => theme.font.color.primary}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx index dc58a920f..66ca9fe8e 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant'; import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; type EmailThreadMessageReceiversProps = { receivers: EmailThreadMessageParticipant[]; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx index 87623cb0e..17921d2c3 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconLock } from 'twenty-ui'; +import { IconLock } from 'twenty-ui/display'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index 383f9d538..4c1eaaa59 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,11 +1,12 @@ import styled from '@emotion/styled'; -import { Avatar, GRAY_SCALE } from 'twenty-ui'; import { ActivityRow } from '@/activities/components/ActivityRow'; import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared'; import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu'; import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql'; import { formatToHumanReadableDate } from '~/utils/date-utils'; +import { Avatar } from 'twenty-ui/display'; +import { GRAY_SCALE } from 'twenty-ui/theme'; const StyledHeading = styled.div<{ unread: boolean }>` display: flex; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index 38f150dcc..03294a499 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -1,15 +1,4 @@ import styled from '@emotion/styled'; -import { - AnimatedPlaceholder, - AnimatedPlaceholderEmptyContainer, - AnimatedPlaceholderEmptySubTitle, - AnimatedPlaceholderEmptyTextContainer, - AnimatedPlaceholderEmptyTitle, - EMPTY_PLACEHOLDER_TRANSITION_PROPS, - H1Title, - H1TitleFontColor, - Section, -} from 'twenty-ui'; import { ActivityList } from '@/activities/components/ActivityList'; import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader'; @@ -22,6 +11,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver'; import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql'; +import { + AnimatedPlaceholder, + AnimatedPlaceholderEmptyContainer, + AnimatedPlaceholderEmptySubTitle, + AnimatedPlaceholderEmptyTextContainer, + AnimatedPlaceholderEmptyTitle, + EMPTY_PLACEHOLDER_TRANSITION_PROPS, + Section, +} from 'twenty-ui/layout'; +import { H1Title, H1TitleFontColor } from 'twenty-ui/display'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx index 04de8d718..18fefe347 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx @@ -2,7 +2,8 @@ import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThread import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; -import { IconPlus, MenuItemAvatar } from 'twenty-ui'; +import { IconPlus } from 'twenty-ui/display'; +import { MenuItemAvatar } from 'twenty-ui/navigation'; export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({ workspaceMember, diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx index a10b37781..47c575a80 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx @@ -1,14 +1,9 @@ import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber'; import { isNonEmptyString } from '@sniptt/guards'; import { useContext } from 'react'; -import { - Avatar, - AvatarGroup, - Chip, - ChipVariant, - IconChevronDown, - ThemeContext, -} from 'twenty-ui'; +import { Avatar, AvatarGroup, IconChevronDown } from 'twenty-ui/display'; +import { Chip, ChipVariant } from 'twenty-ui/components'; +import { ThemeContext } from 'twenty-ui/theme'; const MAX_NUMBER_OF_AVATARS = 3; diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx index 6f0c50dde..1c35a91a4 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx @@ -1,5 +1,4 @@ import { offset } from '@floating-ui/react'; -import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui'; import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber'; import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip'; @@ -11,6 +10,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose'; import { useState } from 'react'; +import { IconMinus, IconPlus } from 'twenty-ui/display'; +import { MenuItem, MenuItemAvatar } from 'twenty-ui/navigation'; export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID = 'message-thread-subscriber'; diff --git a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts index 2bcf9c1e2..23b183773 100644 --- a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts +++ b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const emailThreadIdWhenEmailThreadWasClosedState = createState< string | null >({ diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx index 88c51bb06..c27dc6bed 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx @@ -1,15 +1,14 @@ +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { IconDotsVertical, IconDownload, IconPencil, IconTrash, - LightIconButton, - MenuItem, -} from 'twenty-ui'; - -import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +} from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; +import { MenuItem } from 'twenty-ui/navigation'; type AttachmentDropdownProps = { onDownload: () => void; diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx index fd74b42b2..cd1bc13e4 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx @@ -1,5 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; + +import { AttachmentType } from '@/activities/files/types/Attachment'; import { IconComponent, IconFile, @@ -10,9 +12,7 @@ import { IconPresentation, IconTable, IconVideo, -} from 'twenty-ui'; - -import { AttachmentType } from '@/activities/files/types/Attachment'; +} from 'twenty-ui/display'; const StyledIconContainer = styled.div<{ background: string }>` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx index 0d48f8a60..f1e92d6f2 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { lazy, ReactElement, Suspense, useState } from 'react'; -import { IconButton, IconDownload, IconX } from 'twenty-ui'; import { DropZone } from '@/activities/files/components/DropZone'; import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile'; @@ -14,6 +13,8 @@ import { useRecoilValue } from 'recoil'; import { ActivityList } from '@/activities/components/ActivityList'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { AttachmentRow } from './AttachmentRow'; +import { IconButton } from 'twenty-ui/input'; +import { IconDownload, IconX } from 'twenty-ui/display'; const DocumentViewer = lazy(() => import('@/activities/files/components/DocumentViewer').then((module) => ({ diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 7fe665cc5..ac3046ccd 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -16,14 +16,11 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { - IconCalendar, - OverflowingTextWithTooltip, - isModifiedEvent, -} from 'twenty-ui'; import { formatToHumanReadableDate } from '~/utils/date-utils'; import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension'; +import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display'; +import { isModifiedEvent } from 'twenty-ui/utilities'; const StyledLeftContent = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx index 75d00f0d7..41dc27f40 100644 --- a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx @@ -1,15 +1,5 @@ import styled from '@emotion/styled'; import { ChangeEvent, useRef, useState } from 'react'; -import { - AnimatedPlaceholder, - AnimatedPlaceholderEmptyContainer, - AnimatedPlaceholderEmptySubTitle, - AnimatedPlaceholderEmptyTextContainer, - AnimatedPlaceholderEmptyTitle, - Button, - EMPTY_PLACEHOLDER_TRANSITION_PROPS, - IconPlus, -} from 'twenty-ui'; import { SkeletonLoader } from '@/activities/components/SkeletonLoader'; import { AttachmentList } from '@/activities/files/components/AttachmentList'; @@ -19,6 +9,16 @@ import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttac import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; import { isDefined } from 'twenty-shared/utils'; +import { + AnimatedPlaceholder, + AnimatedPlaceholderEmptyContainer, + AnimatedPlaceholderEmptySubTitle, + AnimatedPlaceholderEmptyTextContainer, + AnimatedPlaceholderEmptyTitle, + EMPTY_PLACEHOLDER_TRANSITION_PROPS, +} from 'twenty-ui/layout'; +import { Button } from 'twenty-ui/input'; +import { IconPlus } from 'twenty-ui/display'; const StyledAttachmentsContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx index 7fa8cf1ab..89763bbf6 100644 --- a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx @@ -1,9 +1,9 @@ import { useDropzone } from 'react-dropzone'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconUpload } from 'twenty-ui'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; +import { IconUpload } from 'twenty-ui/display'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx index 5e4439e19..d6406f084 100644 --- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx +++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx @@ -1,5 +1,4 @@ import { useContext } from 'react'; -import { IconArrowUpRight, IconPencil } from 'twenty-ui'; import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips'; import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords'; @@ -16,6 +15,7 @@ import { RecordInlineCellContext } from '@/object-record/record-inline-cell/comp import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker'; import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope'; +import { IconArrowUpRight, IconPencil } from 'twenty-ui/display'; type ActivityTargetsInlineCellProps = { activityRecordId: string; diff --git a/packages/twenty-front/src/modules/activities/notes/components/Notes.tsx b/packages/twenty-front/src/modules/activities/notes/components/Notes.tsx index f9b083298..0ed1d90d6 100644 --- a/packages/twenty-front/src/modules/activities/notes/components/Notes.tsx +++ b/packages/twenty-front/src/modules/activities/notes/components/Notes.tsx @@ -12,10 +12,10 @@ import { AnimatedPlaceholderEmptySubTitle, AnimatedPlaceholderEmptyTextContainer, AnimatedPlaceholderEmptyTitle, - Button, EMPTY_PLACEHOLDER_TRANSITION_PROPS, - IconPlus, -} from 'twenty-ui'; +} from 'twenty-ui/layout'; +import { Button } from 'twenty-ui/input'; +import { IconPlus } from 'twenty-ui/display'; const StyledNotesContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts index c251913b9..dc9b541b4 100644 --- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { ActivityTargetableObject } from '../types/ActivityTargetableEntity'; +import { createState } from 'twenty-ui/utilities'; export const activityTargetableEntityArrayState = createState< ActivityTargetableObject[] diff --git a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts index 709399107..5098324d5 100644 --- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts +++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const canCreateActivityState = createState({ key: 'canCreateActivityState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts index 4ae973044..33fcfdf0e 100644 --- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts +++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isActivityInCreateModeState = createState({ key: 'isActivityInCreateModeState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts index 30e111a66..3d818d85c 100644 --- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts +++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isUpsertingActivityInDBState = createState({ key: 'isUpsertingActivityInDBState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx b/packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx index 0ebac034b..05f00eca1 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx @@ -1,10 +1,11 @@ import { isNonEmptyArray } from '@sniptt/guards'; -import { Button, IconPlus } from 'twenty-ui'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; +import { Button } from 'twenty-ui/input'; +import { IconPlus } from 'twenty-ui/display'; export const AddTaskButton = ({ activityTargetableObjects, diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx index 0c8f1ba70..0c3ebe168 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx @@ -1,14 +1,4 @@ import styled from '@emotion/styled'; -import { - AnimatedPlaceholder, - AnimatedPlaceholderEmptyContainer, - AnimatedPlaceholderEmptySubTitle, - AnimatedPlaceholderEmptyTextContainer, - AnimatedPlaceholderEmptyTitle, - Button, - EMPTY_PLACEHOLDER_TRANSITION_PROPS, - IconPlus, -} from 'twenty-ui'; import { SkeletonLoader } from '@/activities/components/SkeletonLoader'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; @@ -22,6 +12,16 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import groupBy from 'lodash.groupby'; import { AddTaskButton } from './AddTaskButton'; import { TaskList } from './TaskList'; +import { + AnimatedPlaceholder, + AnimatedPlaceholderEmptyContainer, + AnimatedPlaceholderEmptySubTitle, + AnimatedPlaceholderEmptyTextContainer, + AnimatedPlaceholderEmptyTitle, + EMPTY_PLACEHOLDER_TRANSITION_PROPS, +} from 'twenty-ui/layout'; +import { Button } from 'twenty-ui/input'; +import { IconPlus } from 'twenty-ui/display'; const StyledContainer = styled.div` display: flex; 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 594369e6e..0d14eafbf 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx @@ -1,11 +1,5 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { - Checkbox, - CheckboxShape, - IconCalendar, - OverflowingTextWithTooltip, -} from 'twenty-ui'; import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell'; import { getActivitySummary } from '@/activities/utils/getActivitySummary'; @@ -17,6 +11,8 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { FieldContextProvider } from '@/object-record/record-field/components/FieldContextProvider'; import { useCompleteTask } from '../hooks/useCompleteTask'; +import { Checkbox, CheckboxShape } from 'twenty-ui/input'; +import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledTaskBody = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx index 7f4814f9b..4dc533cb0 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { TaskList } from '@/activities/tasks/components/TaskList'; import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator'; @@ -9,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedTasks } from '~/testing/mock-data/tasks'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/Activity/TaskList', diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx index 2933035ac..c6942ca7f 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx @@ -13,8 +13,8 @@ import { AnimatedPlaceholderEmptyTextContainer, AnimatedPlaceholderEmptyTitle, EMPTY_PLACEHOLDER_TRANSITION_PROPS, - MOBILE_VIEWPORT, -} from 'twenty-ui'; +} from 'twenty-ui/layout'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledMainContainer = styled.div` align-items: flex-start; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx index 3880f07a4..93270e660 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx @@ -1,12 +1,12 @@ import { Meta, StoryObj } from '@storybook/react'; import { HttpResponse, graphql } from 'msw'; -import { ComponentDecorator } from 'twenty-ui'; import { TimelineActivities } from '@/activities/timeline-activities/components/TimelineActivities'; import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { mockedTimelineActivities } from '~/testing/mock-data/timeline-activities'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/TimelineActivities', diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx index f99d3b8d0..308efaf2e 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx @@ -9,7 +9,8 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache'; import { isNonEmptyString } from '@sniptt/guards'; -import { MOBILE_VIEWPORT, OverflowingTextWithTooltip } from 'twenty-ui'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; type EventRowActivityProps = EventRowDynamicComponentProps; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx index 8e8f4b3aa..f6bf963a5 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { HttpResponse, graphql } from 'msw'; -import { ComponentDecorator } from 'twenty-ui'; import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/Rows/CalendarEvent/EventCardCalendarEvent', diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx index 01129a057..502368d82 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; - -import { Card, MOBILE_VIEWPORT } from 'twenty-ui'; +import { Card } from 'twenty-ui/layout'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; type EventCardProps = { children: React.ReactNode; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx index 2e0795845..f8fe48ae3 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import { IconButton, IconChevronDown, IconChevronUp } from 'twenty-ui'; +import { IconButton } from 'twenty-ui/input'; +import { IconChevronDown, IconChevronUp } from 'twenty-ui/display'; type EventCardToggleButtonProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventIconDynamicComponent.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventIconDynamicComponent.tsx index 6e4b49b8f..69ca9ec6a 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventIconDynamicComponent.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventIconDynamicComponent.tsx @@ -1,7 +1,11 @@ -import { IconCirclePlus, IconEditCircle, IconTrash, useIcons } from 'twenty-ui'; - import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { + IconCirclePlus, + IconEditCircle, + IconTrash, + useIcons, +} from 'twenty-ui/display'; export const EventIconDynamicComponent = ({ event, diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx index d64f0d836..25d756958 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { Icon123, useIcons } from 'twenty-ui'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; +import { Icon123, useIcons } from 'twenty-ui/display'; type EventFieldDiffLabelProps = { fieldMetadataItem: FieldMetadataItem; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx index 1e6f1950b..88b6c4881 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx @@ -5,7 +5,7 @@ import { } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent'; import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated'; import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; type EventRowMainObjectProps = EventRowDynamicComponentProps; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx index 0065f6ea7..34ba07e63 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx @@ -8,7 +8,7 @@ import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/m import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; type EventRowMainObjectUpdatedProps = { mainObjectMetadataItem: ObjectMetadataItem; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx index d4a12a465..13cc0c754 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx @@ -1,11 +1,11 @@ import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated'; import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity'; import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator, RouterDecorator } from 'twenty-ui'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/Rows/MainObject/EventRowMainObjectUpdated', diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx index acf535ee4..b549003f0 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { isUndefined } from '@sniptt/guards'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage'; import { EventCardMessageNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageNotShared'; @@ -8,6 +7,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { isDefined } from 'twenty-shared/utils'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledEventCardMessageContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx index 93106c4fd..18ae476e8 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { IconLock } from 'twenty-ui'; +import { IconLock } from 'twenty-ui/display'; const StyledEventCardMessageContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx index ff0c85a9f..63087827f 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { HttpResponse, graphql } from 'msw'; -import { ComponentDecorator } from 'twenty-ui'; import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext'; import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/Rows/Message/EventCardMessage', diff --git a/packages/twenty-front/src/modules/app/components/App.tsx b/packages/twenty-front/src/modules/app/components/App.tsx index a753f5b5b..6ee92bd1f 100644 --- a/packages/twenty-front/src/modules/app/components/App.tsx +++ b/packages/twenty-front/src/modules/app/components/App.tsx @@ -10,8 +10,8 @@ import { I18nProvider } from '@lingui/react'; import { HelmetProvider } from 'react-helmet-async'; import { RecoilRoot } from 'recoil'; import { RecoilURLSyncJSON } from 'recoil-sync'; -import { IconsProvider } from 'twenty-ui'; import { initialI18nActivate } from '~/utils/i18n/initialI18nActivate'; +import { IconsProvider } from 'twenty-ui/display'; initialI18nActivate(); diff --git a/packages/twenty-front/src/modules/auth/components/Title.tsx b/packages/twenty-front/src/modules/auth/components/Title.tsx index 7f87362b1..52dba3607 100644 --- a/packages/twenty-front/src/modules/auth/components/Title.tsx +++ b/packages/twenty-front/src/modules/auth/components/Title.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import React from 'react'; -import { AnimatedEaseIn } from 'twenty-ui'; +import { AnimatedEaseIn } from 'twenty-ui/utilities'; type TitleProps = React.PropsWithChildren & { animate?: boolean; diff --git a/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx b/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx index 0a45988de..fee67c15c 100644 --- a/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx +++ b/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx @@ -4,7 +4,6 @@ import { expect } from '@storybook/test'; import { ReactNode, act } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { RecoilRoot, useRecoilValue } from 'recoil'; -import { iconsState } from 'twenty-ui'; import { useAuth } from '@/auth/hooks/useAuth'; import { billingState } from '@/client-config/states/billingState'; import { isDebugModeState } from '@/client-config/states/isDebugModeState'; @@ -15,6 +14,7 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; import { renderHook } from '@testing-library/react'; import { email, mocks, password, results, token } from '../__mocks__/useAuth'; +import { iconsState } from 'twenty-ui/display'; const redirectSpy = jest.fn(); diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts index 0b5e9e15c..64bf4eab1 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts +++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts @@ -8,7 +8,6 @@ import { useRecoilValue, useSetRecoilState, } from 'recoil'; -import { iconsState } from 'twenty-ui'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; @@ -65,6 +64,7 @@ import { APP_LOCALES } from 'twenty-shared/translations'; import { isDefined } from 'twenty-shared/utils'; import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl'; import { dynamicActivate } from '~/utils/i18n/dynamicActivate'; +import { iconsState } from 'twenty-ui/display'; export const useAuth = () => { const setTokenPair = useSetRecoilState(tokenPairState); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx index 1205e2689..0b85a8026 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx @@ -4,7 +4,11 @@ import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; import { useHandleResendEmailVerificationToken } from '@/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken'; import { useTheme } from '@emotion/react'; -import { AnimatedEaseIn, IconMail, Loader, MainButton, RGBA } from 'twenty-ui'; +import { AnimatedEaseIn } from 'twenty-ui/utilities'; +import { IconMail } from 'twenty-ui/display'; +import { Loader } from 'twenty-ui/feedback'; +import { MainButton } from 'twenty-ui/input'; +import { RGBA } from 'twenty-ui/theme'; const StyledMailContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx index 8560eb964..bbdb6578f 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx @@ -4,7 +4,6 @@ import { useState } from 'react'; import { FormProvider } from 'react-hook-form'; import { useLocation } from 'react-router-dom'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; -import { HorizontalSeparator, Loader, MainButton } from 'twenty-ui'; import { useAuth } from '@/auth/hooks/useAuth'; import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField'; @@ -28,6 +27,9 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl'; import { isDefined } from 'twenty-shared/utils'; +import { HorizontalSeparator } from 'twenty-ui/display'; +import { Loader } from 'twenty-ui/feedback'; +import { MainButton } from 'twenty-ui/input'; const StyledContentContainer = styled(motion.div)` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx index 586a1017d..616f17800 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx @@ -6,7 +6,7 @@ import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { motion } from 'framer-motion'; import { Controller, useFormContext } from 'react-hook-form'; -import { StyledText } from 'twenty-ui'; +import { StyledText } from 'twenty-ui/display'; const StyledFullWidthMotionDiv = styled(motion.div)` width: 100%; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx index 61535724f..31eda6d45 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx @@ -4,11 +4,12 @@ import { useSSO } from '@/auth/sign-in-up/hooks/useSSO'; import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { HorizontalSeparator, MainButton } from 'twenty-ui'; import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState'; import React from 'react'; import { isDefined } from 'twenty-shared/utils'; +import { HorizontalSeparator } from 'twenty-ui/display'; +import { MainButton } from 'twenty-ui/input'; const StyledContentContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx index c86dce22f..a8317b567 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx @@ -15,8 +15,9 @@ import { useLingui } from '@lingui/react/macro'; import { useMemo, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { Loader, MainButton } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { Loader } from 'twenty-ui/feedback'; +import { MainButton } from 'twenty-ui/input'; const StyledForm = styled.form` align-items: center; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithGoogle.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithGoogle.tsx index 0c9c063ec..c1587532d 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithGoogle.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithGoogle.tsx @@ -7,7 +7,8 @@ import { useTheme } from '@emotion/react'; import { useLingui } from '@lingui/react/macro'; import { memo } from 'react'; import { useRecoilValue } from 'recoil'; -import { HorizontalSeparator, IconGoogle, MainButton } from 'twenty-ui'; +import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display'; +import { MainButton } from 'twenty-ui/input'; const GoogleIcon = memo(() => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithMicrosoft.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithMicrosoft.tsx index 0888fa6b3..c491c87c2 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithMicrosoft.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithMicrosoft.tsx @@ -6,7 +6,8 @@ import { import { useTheme } from '@emotion/react'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; -import { HorizontalSeparator, IconMicrosoft, MainButton } from 'twenty-ui'; +import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display'; +import { MainButton } from 'twenty-ui/input'; export const SignInUpWithMicrosoft = () => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx index 8b6164836..9133728ed 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx @@ -7,8 +7,9 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro import { useTheme } from '@emotion/react'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { HorizontalSeparator, IconLock } from 'twenty-ui/display'; +import { MainButton } from 'twenty-ui/input'; export const SignInUpWithSSO = () => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx index 4cb94546f..43650bfc6 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx @@ -11,7 +11,8 @@ import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; import { FormProvider } from 'react-hook-form'; import { useRecoilValue } from 'recoil'; -import { ActionLink, HorizontalSeparator } from 'twenty-ui'; +import { ActionLink } from 'twenty-ui/navigation'; +import { HorizontalSeparator } from 'twenty-ui/display'; const StyledContentContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts index a8ecdfd93..a902a0152 100644 --- a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts +++ b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { UserExists } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const availableSSOIdentityProvidersForAuthState = createState< NonNullable[0]['sso'] diff --git a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts b/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts index e80cd0e16..2d52390df 100644 --- a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts +++ b/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts @@ -1,7 +1,7 @@ import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type'; import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue'; -import { createState } from '@ui/utilities/state/utils/createState'; import { syncEffect } from 'recoil-sync'; +import { createState } from 'twenty-ui/utilities'; export const billingCheckoutSessionState = createState({ key: 'billingCheckoutSessionState', diff --git a/packages/twenty-front/src/modules/auth/states/currentUserState.ts b/packages/twenty-front/src/modules/auth/states/currentUserState.ts index 8d623eb1f..d71203a21 100644 --- a/packages/twenty-front/src/modules/auth/states/currentUserState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentUserState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { User } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export type CurrentUser = Pick< User, diff --git a/packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts b/packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts index 1554ff75e..042156fe7 100644 --- a/packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { UserWorkspace } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export type CurrentUserWorkspace = Pick< UserWorkspace, diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts index 33013f124..4e67bc7af 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; +import { createState } from 'twenty-ui/utilities'; export type CurrentWorkspaceMember = Omit< WorkspaceMember, diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts index 160e786b6..2411c4a66 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts @@ -1,5 +1,5 @@ import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const currentWorkspaceMembersState = createState< CurrentWorkspaceMember[] diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts index 2a8dd59cf..467ce7e0e 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { Role, Workspace } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export type CurrentWorkspace = Pick< Workspace, diff --git a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts index 242739b7b..86c827b2a 100644 --- a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts +++ b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isCurrentUserLoadedState = createState({ key: 'isCurrentUserLoadedState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts index 951436d33..b8a7ed2d8 100644 --- a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts +++ b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const previousUrlState = createState({ key: 'previousUrlState', defaultValue: '', diff --git a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts index 398fe2604..d66633001 100644 --- a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts +++ b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts @@ -1,5 +1,5 @@ import { SignInUpMode } from '@/auth/types/signInUpMode'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const signInUpModeState = createState({ key: 'signInUpModeState', diff --git a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts index 613d3a019..9522195a7 100644 --- a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts +++ b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export enum SignInUpStep { Init = 'init', Email = 'email', diff --git a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts index 2d8d597e4..0e13c7abe 100644 --- a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts +++ b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts @@ -1,7 +1,7 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { AuthTokenPair } from '~/generated/graphql'; import { cookieStorageEffect } from '~/utils/recoil-effects'; +import { createState } from 'twenty-ui/utilities'; + export const tokenPairState = createState({ key: 'tokenPairState', defaultValue: null, diff --git a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts index 64bafed36..343fe3a01 100644 --- a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts +++ b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { PublicWorkspaceDataOutput } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const workspacePublicDataState = createState({ diff --git a/packages/twenty-front/src/modules/auth/states/workspaces.ts b/packages/twenty-front/src/modules/auth/states/workspaces.ts index de70cd7b2..73fe34fe1 100644 --- a/packages/twenty-front/src/modules/auth/states/workspaces.ts +++ b/packages/twenty-front/src/modules/auth/states/workspaces.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { Workspace } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export type Workspaces = Pick< Workspace, diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx index f4feac748..2ccb1d09d 100644 --- a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx +++ b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCheck } from 'twenty-ui'; +import { IconCheck } from 'twenty-ui/display'; const StyledBenefitContainer = styled.div` color: ${({ theme }) => theme.font.color.secondary}; diff --git a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts index 7ec02e494..a2239f023 100644 --- a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts +++ b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const captchaTokenState = createState({ key: 'captchaTokenState', defaultValue: undefined, diff --git a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts index f6fa69169..d75b25f32 100644 --- a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts +++ b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isCaptchaScriptLoadedState = createState({ key: 'isCaptchaScriptLoadedState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts index 86f4e9f6a..d32e7c90b 100644 --- a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts +++ b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isRequestingCaptchaTokenState = createState({ key: 'isRequestingCaptchaTokenState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts index 91525e562..b9e22ca1e 100644 --- a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts +++ b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isLoadingTokensFromExtensionState = createState({ key: 'isLoadingTokensFromExtensionState', defaultValue: null, diff --git a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts index 77e8295c7..596402848 100644 --- a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts +++ b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { ApiConfig } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const apiConfigState = createState({ key: 'apiConfigState', diff --git a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts index 46646c40d..b5b204421 100644 --- a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts +++ b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { AuthProviders } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const authProvidersState = createState({ key: 'authProvidersState', diff --git a/packages/twenty-front/src/modules/client-config/states/billingState.ts b/packages/twenty-front/src/modules/client-config/states/billingState.ts index b188943b0..986516a48 100644 --- a/packages/twenty-front/src/modules/client-config/states/billingState.ts +++ b/packages/twenty-front/src/modules/client-config/states/billingState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { Billing } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const billingState = createState({ key: 'billingState', diff --git a/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts b/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts index 1d0222a6e..16b094dc2 100644 --- a/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts +++ b/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts @@ -1,5 +1,4 @@ -import { createState } from 'twenty-ui'; - +import { createState } from 'twenty-ui/utilities'; export const canManageFeatureFlagsState = createState({ key: 'canManageFeatureFlagsState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/captchaState.ts b/packages/twenty-front/src/modules/client-config/states/captchaState.ts index 8d22c88f6..e1b16bbe7 100644 --- a/packages/twenty-front/src/modules/client-config/states/captchaState.ts +++ b/packages/twenty-front/src/modules/client-config/states/captchaState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { Captcha } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const captchaState = createState({ key: 'captchaState', diff --git a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts index b29db3633..2d042e728 100644 --- a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts +++ b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const chromeExtensionIdState = createState({ key: 'chromeExtensionIdState', defaultValue: null, diff --git a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts index 9f5f6f9e5..4e2c053f6 100644 --- a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts +++ b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; type ClientConfigApiStatus = { isLoaded: boolean; isErrored: boolean; diff --git a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts index f21835209..23582676e 100644 --- a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isAnalyticsEnabledState = createState({ key: 'isAnalyticsEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isAttachmentPreviewEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isAttachmentPreviewEnabledState.ts index 6ea94cc84..71aa53e16 100644 --- a/packages/twenty-front/src/modules/client-config/states/isAttachmentPreviewEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isAttachmentPreviewEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isAttachmentPreviewEnabledState = createState({ key: 'isAttachmentPreviewEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts index 037661f1a..094995765 100644 --- a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isDebugModeState = createState({ key: 'isDebugModeState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts index 30839339a..33947777b 100644 --- a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isDeveloperDefaultSignInPrefilledState = createState({ key: 'isDeveloperDefaultSignInPrefilledState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts b/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts index e06d73779..e9690377a 100644 --- a/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts @@ -1,5 +1,4 @@ -import { createState } from 'twenty-ui'; - +import { createState } from 'twenty-ui/utilities'; export const isEmailVerificationRequiredState = createState({ key: 'isEmailVerificationRequired', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isGoogleCalendarEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isGoogleCalendarEnabledState.ts index 12074285f..8077771e2 100644 --- a/packages/twenty-front/src/modules/client-config/states/isGoogleCalendarEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isGoogleCalendarEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isGoogleCalendarEnabledState = createState({ key: 'isGoogleCalendarEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isGoogleMessagingEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isGoogleMessagingEnabledState.ts index 1142b6eb6..10c3920a3 100644 --- a/packages/twenty-front/src/modules/client-config/states/isGoogleMessagingEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isGoogleMessagingEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isGoogleMessagingEnabledState = createState({ key: 'isGoogleMessagingEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isMicrosoftCalendarEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isMicrosoftCalendarEnabledState.ts index 6942fb88a..29df04052 100644 --- a/packages/twenty-front/src/modules/client-config/states/isMicrosoftCalendarEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isMicrosoftCalendarEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isMicrosoftCalendarEnabledState = createState({ key: 'isMicrosoftCalendarEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isMicrosoftMessagingEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isMicrosoftMessagingEnabledState.ts index c4493a9a3..7efd9a154 100644 --- a/packages/twenty-front/src/modules/client-config/states/isMicrosoftMessagingEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isMicrosoftMessagingEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isMicrosoftMessagingEnabledState = createState({ key: 'isMicrosoftMessagingEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts index a18c415f5..12c6a8261 100644 --- a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isMultiWorkspaceEnabledState = createState({ key: 'isMultiWorkspaceEnabled', defaultValue: false, diff --git a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts index 5046ce9b6..29bb3afe5 100644 --- a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts +++ b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { Sentry } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const sentryConfigState = createState({ key: 'sentryConfigState', diff --git a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts index 81d7fb901..a49a4720b 100644 --- a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts +++ b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { Support } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const supportChatState = createState({ key: 'supportChatState', diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx index 47450003b..25c042fd1 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import React from 'react'; -import { Label } from 'twenty-ui'; +import { Label } from 'twenty-ui/display'; const StyledGroupHeading = styled(Label)` align-items: center; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx index 633367bae..77cf3c343 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx @@ -32,8 +32,8 @@ import styled from '@emotion/styled'; import { AnimatePresence, motion } from 'framer-motion'; import { useRef } from 'react'; import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil'; -import { useIsMobile } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; +import { useIsMobile } from 'twenty-ui/utilities'; const StyledCommandMenu = styled(motion.div)` background: ${({ theme }) => theme.background.primary}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx index 1ba7ff02a..480c77db7 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; -import { OverflowingTextWithTooltip } from '@ui/display'; import { Fragment } from 'react/jsx-runtime'; import { isDefined } from 'twenty-shared/utils'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledChip = styled.button<{ withText: boolean; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx index f769e6f54..928f4c3bf 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx @@ -4,11 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { isDefined } from 'twenty-shared/utils'; -import { MenuItem } from 'twenty-ui'; import { CommandMenuContextChip, CommandMenuContextChipProps, } from './CommandMenuContextChip'; +import { MenuItem } from 'twenty-ui/navigation'; export const CommandMenuContextChipGroups = ({ contextChips, diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx index 23bc1ea75..3fa5d0026 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx @@ -4,7 +4,7 @@ import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { Avatar } from 'twenty-ui'; +import { Avatar } from 'twenty-ui/display'; const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>` background: ${({ theme, withIconBackground }) => diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx index 7d48f3d10..2c0f4a515 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx @@ -1,10 +1,11 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui'; import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { ReactNode } from 'react'; +import { IconArrowUpRight, IconComponent } from 'twenty-ui/display'; +import { MenuItemCommand } from 'twenty-ui/navigation'; export type CommandMenuItemProps = { label: string; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx index 4c2e2a180..33aecbf48 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx @@ -15,7 +15,7 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const MOBILE_NAVIGATION_BAR_HEIGHT = 64; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx index 7b1760d5d..a6cce40c7 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx @@ -20,14 +20,10 @@ import { AnimatePresence, motion } from 'framer-motion'; import { useRef } from 'react'; import { useLocation } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { - Button, - IconChevronLeft, - IconX, - getOsControlSymbol, - useIsMobile, -} from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { Button } from 'twenty-ui/input'; +import { IconChevronLeft, IconX } from 'twenty-ui/display'; +import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities'; const StyledInputContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx b/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx index a71b3aef2..1912072bd 100644 --- a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx @@ -9,8 +9,8 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { t } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; -import { IconArrowBackUp } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconArrowBackUp } from 'twenty-ui/display'; export const ResetContextToSelectionCommandButton = () => { const contextStoreTargetedRecordsRule = useRecoilComponentValueV2( diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx index 279a0bfb0..c341f1e57 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx @@ -26,10 +26,10 @@ import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/reco import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; import { HttpResponse, graphql } from 'msw'; -import { IconDotsVertical } from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter'; import { CommandMenu } from '../CommandMenu'; +import { IconDotsVertical } from 'twenty-ui/display'; const openTimeout = 50; diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx index 8abfc3e2e..1fd2a10a7 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx @@ -1,11 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; - -import { - ComponentDecorator, - IconBuildingSkyscraper, - IconUser, -} from 'twenty-ui'; import { CommandMenuContextChip } from '../CommandMenuContextChip'; +import { ComponentDecorator } from 'twenty-ui/testing'; +import { IconBuildingSkyscraper, IconUser } from 'twenty-ui/display'; const meta: Meta = { title: 'Modules/CommandMenu/CommandMenuContextChip', diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx index bba2906f4..f5de8c924 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx @@ -1,14 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; import styled from '@emotion/styled'; +import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups'; +import { ComponentDecorator } from 'twenty-ui/testing'; import { - ComponentDecorator, IconBuildingSkyscraper, IconSearch, IconSettingsAutomation, IconUser, -} from 'twenty-ui'; -import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups'; +} from 'twenty-ui/display'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx index 1e08fc800..90ddccb25 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx @@ -6,10 +6,10 @@ import { PreComputedChipGeneratorsContext } from '@/object-metadata/contexts/Pre import { RecordChipData } from '@/object-record/record-field/types/RecordChipData'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { ComponentDecorator } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { getCompaniesMock } from '~/testing/mock-data/companies'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { ComponentDecorator } from 'twenty-ui/testing'; const FIND_MANY_COMPANIES = gql` query FindManyCompanies( diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts index 77e6da68e..fd33b3de7 100644 --- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts +++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts @@ -1,5 +1,4 @@ -import { THEME_COMMON } from 'twenty-ui'; - +import { THEME_COMMON } from 'twenty-ui/theme'; export const COMMAND_MENU_ANIMATION_VARIANTS = { fullScreen: { x: '0%', diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx index 66bd00bc6..cc7165222 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx @@ -18,7 +18,7 @@ import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuCl import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; -import { IconList } from 'twenty-ui'; +import { IconList } from 'twenty-ui/display'; const mockCloseDropdown = jest.fn(); const mockResetContextStoreStates = jest.fn(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx index 5f1dc3ffb..efef9a91a 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx @@ -11,7 +11,7 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; -import { IconList, IconSearch } from 'twenty-ui'; +import { IconList, IconSearch } from 'twenty-ui/display'; const Wrapper = ({ children }: { children: React.ReactNode }) => ( diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx index 37d3a06c5..3ff8de9c4 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx @@ -9,9 +9,9 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; -import { Icon123, useIcons } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { Icon123, useIcons } from 'twenty-ui/display'; jest.mock('uuid', () => ({ v4: jest.fn().mockReturnValue('mocked-uuid'), diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx index 12f136c7a..7133b2518 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx @@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconCalendarEvent } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { IconCalendarEvent } from 'twenty-ui/display'; jest.mock('uuid', () => ({ v4: jest.fn().mockReturnValue('mocked-uuid'), diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx index ea0249f03..714bf7e84 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx @@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconMail } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { IconMail } from 'twenty-ui/display'; jest.mock('uuid', () => ({ v4: jest.fn().mockReturnValue('mocked-uuid'), diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx index 63c04f1a4..4e834b595 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx @@ -15,9 +15,9 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useIcons } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { useIcons } from 'twenty-ui/display'; jest.mock('uuid', () => ({ v4: jest.fn().mockReturnValue('mocked-uuid'), diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx index 90d80cbe3..25be05a3d 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx @@ -5,7 +5,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { renderHook } from '@testing-library/react'; import { act } from 'react'; import { RecoilRoot, useRecoilValue } from 'recoil'; -import { IconArrowDown, IconDotsVertical } from 'twenty-ui'; +import { IconArrowDown, IconDotsVertical } from 'twenty-ui/display'; const mockedPageInfo = { title: 'Initial Title', diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx index 8fdae3d2c..4e00fe3aa 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx @@ -16,10 +16,10 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { t } from '@lingui/core/macro'; import { act } from 'react'; -import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui'; import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { useWorkflowCommandMenu } from '../useWorkflowCommandMenu'; +import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui/display'; jest.mock('uuid', () => ({ v4: jest.fn().mockReturnValue('mocked-uuid'), diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index 76b6d4e20..7690e6b9d 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -1,7 +1,6 @@ import { useRecoilCallback } from 'recoil'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; -import { IconDotsVertical } from 'twenty-ui'; import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu'; import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState'; @@ -9,6 +8,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState'; import { useCallback } from 'react'; import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; +import { IconDotsVertical } from 'twenty-ui/display'; export const useCommandMenu = () => { const { navigateCommandMenu } = useNavigateCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx index efb48f433..8d792614b 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx @@ -6,9 +6,9 @@ import { t } from '@lingui/core/macro'; import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import { capitalize } from 'twenty-shared/utils'; -import { Avatar } from 'twenty-ui'; import { useDebounce } from 'use-debounce'; import { useSearchQuery } from '~/generated/graphql'; +import { Avatar } from 'twenty-ui/display'; export const useCommandMenuSearchRecords = () => { const commandMenuSearch = useRecoilValue(commandMenuSearchState); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts index 1253a1f45..401b62349 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts @@ -15,8 +15,8 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useRecoilCallback } from 'recoil'; -import { IconComponent } from 'twenty-ui'; import { v4 } from 'uuid'; +import { IconComponent } from 'twenty-ui/display'; export type CommandMenuNavigationStackItem = { page: CommandMenuPages; diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts index 3cd7a1aa1..08e63f7d9 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts @@ -3,8 +3,8 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { t } from '@lingui/core/macro'; import { useRecoilCallback } from 'recoil'; -import { IconCalendarEvent } from 'twenty-ui'; import { v4 } from 'uuid'; +import { IconCalendarEvent } from 'twenty-ui/display'; export const useOpenCalendarEventInCommandMenu = () => { const { navigateCommandMenu } = useNavigateCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts index f55698c39..871653aee 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts @@ -2,8 +2,8 @@ import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandM import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { useRecoilCallback } from 'recoil'; -import { IconMail } from 'twenty-ui'; import { v4 } from 'uuid'; +import { IconMail } from 'twenty-ui/display'; export const useOpenEmailThreadInCommandMenu = () => { const { navigateCommandMenu } = useNavigateCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts index c59222d26..81d986b60 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts @@ -16,9 +16,9 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state import { useTheme } from '@emotion/react'; import { t } from '@lingui/core/macro'; import { useRecoilCallback } from 'recoil'; -import { useIcons } from 'twenty-ui'; import { v4 } from 'uuid'; import { capitalize } from 'twenty-shared/utils'; +import { useIcons } from 'twenty-ui/display'; export const useOpenRecordInCommandMenu = () => { const { navigateCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts index 28a74b225..158735e2a 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts @@ -1,8 +1,8 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { t } from '@lingui/core/macro'; -import { IconSearch } from 'twenty-ui'; import { v4 } from 'uuid'; +import { IconSearch } from 'twenty-ui/display'; export const useOpenRecordsSearchPageInCommandMenu = () => { const { navigateCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts b/packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts index 896547b2a..d8248e584 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts @@ -1,7 +1,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState'; import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState'; import { useRecoilCallback } from 'recoil'; -import { IconComponent, IconDotsVertical } from 'twenty-ui'; +import { IconComponent, IconDotsVertical } from 'twenty-ui/display'; export const useUpdateCommandMenuPageInfo = () => { const updateCommandMenuPageInfo = useRecoilCallback( diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts index e964cc14a..fb36c68c4 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts @@ -3,8 +3,12 @@ import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/w import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { t } from '@lingui/core/macro'; import { useRecoilCallback } from 'recoil'; -import { IconBolt, IconComponent, IconSettingsAutomation } from 'twenty-ui'; import { v4 } from 'uuid'; +import { + IconBolt, + IconComponent, + IconSettingsAutomation, +} from 'twenty-ui/display'; export const useWorkflowCommandMenu = () => { const { navigateCommandMenu } = useNavigateCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx index 806d8a938..9b700ede4 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx @@ -1,9 +1,10 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import { Button, IconArrowsVertical } from 'twenty-ui'; import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage'; import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender'; +import { Button } from 'twenty-ui/input'; +import { IconArrowsVertical } from 'twenty-ui/display'; const StyledButtonContainer = styled.div` border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx index dafdfdc96..492406f18 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx @@ -11,8 +11,9 @@ import { messageThreadComponentState } from '@/command-menu/pages/message-thread import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { assertUnreachable } from '@/workflow/utils/assertUnreachable'; -import { Button, IconArrowBackUp } from 'twenty-ui'; import { ConnectedAccountProvider } from 'twenty-shared/types'; +import { Button } from 'twenty-ui/input'; +import { IconArrowBackUp } from 'twenty-ui/display'; const StyledWrapper = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx index 7999c5805..8dd2abb85 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx @@ -4,7 +4,8 @@ import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/co import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep'; import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions'; import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions'; -import { MenuItemCommand, useIcons } from 'twenty-ui'; +import { MenuItemCommand } from 'twenty-ui/navigation'; +import { useIcons } from 'twenty-ui/display'; export const CommandMenuWorkflowSelectActionContent = ({ workflow, diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx index b288a5750..b362d87fd 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx @@ -17,8 +17,8 @@ import { import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus'; import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId'; import styled from '@emotion/styled'; -import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx index c12ae9b7a..92799918d 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx @@ -13,7 +13,8 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger'; import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition'; import { useSetRecoilState } from 'recoil'; -import { MenuItemCommand, useIcons } from 'twenty-ui'; +import { MenuItemCommand } from 'twenty-ui/navigation'; +import { useIcons } from 'twenty-ui/display'; export const CommandMenuWorkflowSelectTriggerTypeContent = ({ workflow, diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts index 11a082cb6..dea8e9d4e 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts @@ -1,5 +1,5 @@ import { MorphItem } from '@/object-record/multiple-objects/types/MorphItem'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const commandMenuNavigationMorphItemByPageState = createState< Map diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts index a33e0e1dc..a3b6d7f3e 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts @@ -1,6 +1,6 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const commandMenuNavigationRecordsState = createState< { diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts index 3160f3e4f..135a06895 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts @@ -1,5 +1,6 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; -import { IconComponent, createState } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; +import { createState } from 'twenty-ui/utilities'; export type CommandMenuNavigationStackItem = { page: CommandMenuPages; diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts index e5a5c0ba2..93d3690f9 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; +import { createState } from 'twenty-ui/utilities'; export const commandMenuPageInfoState = createState<{ title?: string; diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts index 34b1253d3..de7d6333c 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts @@ -1,5 +1,5 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const commandMenuPageState = createState({ key: 'command-menu/commandMenuPageState', diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts index b7315d5d0..0bed1b7f4 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const commandMenuSearchState = createState({ key: 'command-menu/commandMenuSearchState', defaultValue: '', diff --git a/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts b/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts index f029ba375..bba2dee05 100644 --- a/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts @@ -1,5 +1,4 @@ -import { createState } from 'twenty-ui'; - +import { createState } from 'twenty-ui/utilities'; export const hasUserSelectedCommandState = createState({ key: 'hasUserSelectedCommandState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts b/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts index fac28fa44..64f2d0887 100644 --- a/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts @@ -1,5 +1,4 @@ -import { createState } from 'twenty-ui'; - +import { createState } from 'twenty-ui/utilities'; export const isCommandMenuClosingState = createState({ key: 'command-menu/isCommandMenuClosingState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts index 3c55038e4..4750a218d 100644 --- a/packages/twenty-front/src/modules/command-menu/types/Command.ts +++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts @@ -1,4 +1,4 @@ -import { IconComponent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; export enum CommandType { Navigate = 'Navigate', Create = 'Create', diff --git a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts index 0ea281bce..eaf7188d7 100644 --- a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts +++ b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { ClientConfig } from '~/generated/graphql'; +import { createState } from 'twenty-ui/utilities'; export const domainConfigurationState = createState< Pick diff --git a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts index 040f7fc93..634f8e6e0 100644 --- a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts +++ b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts @@ -1,5 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; import { cookieStorageEffect } from '~/utils/recoil-effects'; +import { createState } from 'twenty-ui/utilities'; export const lastAuthenticatedWorkspaceDomainState = createState< | { diff --git a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx index 3479fdb3e..316e1abdf 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx @@ -1,13 +1,13 @@ import { AppErrorDisplayProps } from '@/error-handler/types/AppErrorDisplayProps'; import styled from '@emotion/styled'; -import LightNoise from '@ui/theme/assets/light-noise.png'; import { motion } from 'framer-motion'; -import { GRAY_SCALE, IconReload } from 'twenty-ui'; +import { IconReload } from 'twenty-ui/display'; +import { GRAY_SCALE, THEME_DARK } from 'twenty-ui/theme'; type AppRootErrorFallbackProps = AppErrorDisplayProps; const StyledContainer = styled.div` - background: url(${LightNoise.toString()}); + background: ${THEME_DARK.background.noisy}; box-sizing: border-box; display: flex; height: 100vh; diff --git a/packages/twenty-front/src/modules/error-handler/components/internal/AppErrorDisplay.tsx b/packages/twenty-front/src/modules/error-handler/components/internal/AppErrorDisplay.tsx index 5b05f7389..a1237739e 100644 --- a/packages/twenty-front/src/modules/error-handler/components/internal/AppErrorDisplay.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/internal/AppErrorDisplay.tsx @@ -5,9 +5,9 @@ import { AnimatedPlaceholderEmptySubTitle, AnimatedPlaceholderEmptyTextContainer, AnimatedPlaceholderEmptyTitle, - Button, - IconRefresh, -} from 'twenty-ui'; +} from 'twenty-ui/layout'; +import { Button } from 'twenty-ui/input'; +import { IconRefresh } from 'twenty-ui/display'; export const AppErrorDisplay = ({ error, diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index c432de023..9a3f85409 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -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: { diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx index 87c21e250..8e728a452 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx @@ -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); diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx index bdb42cf81..3205b066c 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx @@ -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%; diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx index bcbbfa971..b8fc7682b 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx index 94d9f24e3..f4f042bfc 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx @@ -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(); diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx index fb7c53603..939d7972e 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx index e8c324382..24b5d862c 100644 --- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx +++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx index 1f60d986c..2b4020ec4 100644 --- a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx +++ b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx @@ -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, diff --git a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerList.tsx b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerList.tsx index ba3b59f8b..5287f268c 100644 --- a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerList.tsx +++ b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerList.tsx @@ -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%; diff --git a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts index f5e09ae32..190fcfc12 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts +++ b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts @@ -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, }, }, diff --git a/packages/twenty-front/src/modules/favorites/types/Favorite.ts b/packages/twenty-front/src/modules/favorites/types/Favorite.ts index 3338b00ff..e33fad7e2 100644 --- a/packages/twenty-front/src/modules/favorites/types/Favorite.ts +++ b/packages/twenty-front/src/modules/favorites/types/Favorite.ts @@ -1,5 +1,4 @@ -import { AvatarType } from 'twenty-ui'; - +import { AvatarType } from 'twenty-ui/display'; export type Favorite = { id: string; position: number; diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx index 2cb79486a..583930413 100644 --- a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import { Banner, BannerVariant, Button, IconComponent } from 'twenty-ui'; +import { Banner, BannerVariant, IconComponent } from 'twenty-ui/display'; +import { Button } from 'twenty-ui/input'; const StyledBanner = styled(Banner)` position: absolute; diff --git a/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx b/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx index 6c7e16ef7..7e445dcd3 100644 --- a/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx @@ -1,7 +1,7 @@ import { InformationBanner } from '@/information-banner/components/InformationBanner'; import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords'; import styled from '@emotion/styled'; -import { IconRefresh } from 'twenty-ui'; +import { IconRefresh } from 'twenty-ui/display'; const StyledInformationBannerDeletedRecord = styled.div` height: 40px; diff --git a/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx b/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx index 67fc042a9..1ce7f5dcf 100644 --- a/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx @@ -2,7 +2,7 @@ import { InformationBanner } from '@/information-banner/components/InformationBa import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToReconnect'; import { InformationBannerKeys } from '@/information-banner/types/InformationBannerKeys'; import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth'; -import { IconRefresh } from 'twenty-ui'; +import { IconRefresh } from 'twenty-ui/display'; export const InformationBannerReconnectAccountEmailAliases = () => { const { accountToReconnect } = useAccountToReconnect( diff --git a/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx b/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx index 306452b56..c1da9376f 100644 --- a/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx @@ -2,7 +2,7 @@ import { InformationBanner } from '@/information-banner/components/InformationBa import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToReconnect'; import { InformationBannerKeys } from '@/information-banner/types/InformationBannerKeys'; import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth'; -import { IconRefresh } from 'twenty-ui'; +import { IconRefresh } from 'twenty-ui/display'; export const InformationBannerReconnectAccountInsufficientPermissions = () => { const { accountToReconnect } = useAccountToReconnect( diff --git a/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx b/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx index 36c800f31..2701d9cb5 100644 --- a/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx +++ b/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx @@ -1,10 +1,10 @@ -import { IconButton, IconX } from 'twenty-ui'; - import { StyledContainer, StyledDialog, StyledHeading, } from './KeyboardShortcutMenuStyles'; +import { IconButton } from 'twenty-ui/input'; +import { IconX } from 'twenty-ui/display'; type KeyboardMenuDialogProps = { onClose: () => void; diff --git a/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts b/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts index 93a72a891..54a816de5 100644 --- a/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts +++ b/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts @@ -1,5 +1,5 @@ -import { getOsControlSymbol } from 'twenty-ui'; import { Shortcut, ShortcutType } from '../types/Shortcut'; +import { getOsControlSymbol } from 'twenty-ui/utilities'; export const KEYBOARD_SHORTCUTS_GENERAL: Shortcut[] = [ { diff --git a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts index 60bd66c61..ba4e12d1d 100644 --- a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts +++ b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts @@ -1,7 +1,7 @@ import { DateFormat } from '@/localization/constants/DateFormat'; import { TimeFormat } from '@/localization/constants/TimeFormat'; import { detectTimeZone } from '@/localization/utils/detectTimeZone'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export const dateTimeFormatState = createState<{ timeZone: string; diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx index aa6871fbc..b93536c42 100644 --- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx @@ -13,7 +13,7 @@ import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; import { MainNavigationDrawerItems } from '@/navigation/components/MainNavigationDrawerItems'; import { useLingui } from '@lingui/react/macro'; -import { AdvancedSettingsToggle } from 'twenty-ui'; +import { AdvancedSettingsToggle } from 'twenty-ui/navigation'; export type AppNavigationDrawerProps = { className?: string; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index 31f7061f8..f9b994a68 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -1,6 +1,5 @@ import { useLocation } from 'react-router-dom'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { IconSearch, IconSettings } from 'twenty-ui'; import { useOpenRecordsSearchPageInCommandMenu } from '@/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu'; import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders'; @@ -18,6 +17,7 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; +import { IconSearch, IconSettings } from 'twenty-ui/display'; const StyledMainSection = styled(NavigationDrawerSection)` min-height: fit-content; diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index ded641d49..e652bc61d 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -4,15 +4,15 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useRecoilState } from 'recoil'; +import { useIsSettingsPage } from '../hooks/useIsSettingsPage'; +import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState'; import { IconComponent, IconList, IconSearch, IconSettings, - NavigationBar, -} from 'twenty-ui'; -import { useIsSettingsPage } from '../hooks/useIsSettingsPage'; -import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState'; +} from 'twenty-ui/display'; +import { NavigationBar } from 'twenty-ui/navigation'; type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings'; diff --git a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts index 540c6fad1..8065c36a1 100644 --- a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts +++ b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const currentMobileNavigationDrawerState = createState< 'main' | 'settings' >({ diff --git a/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts b/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts index b879581ae..4bd38faa6 100644 --- a/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts +++ b/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts @@ -1,5 +1,5 @@ -import { createState } from 'twenty-ui'; import { localStorageEffect } from '~/utils/recoil-effects'; +import { createState } from 'twenty-ui/utilities'; export const lastVisitedObjectMetadataItemIdState = createState({ key: 'lastVisitedObjectMetadataItemIdState', diff --git a/packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts b/packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts index a22a42b21..cee7f2682 100644 --- a/packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts +++ b/packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts @@ -1,5 +1,5 @@ -import { createState } from 'twenty-ui'; import { localStorageEffect } from '~/utils/recoil-effects'; +import { createState } from 'twenty-ui/utilities'; export const lastVisitedViewPerObjectMetadataItemState = createState({ key: 'isAppWaitingForFreshObjectMetadataState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts index 57545e5b1..058411d88 100644 --- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts +++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { createState } from 'twenty-ui/utilities'; export const objectMetadataItemsState = createState({ key: 'objectMetadataItemsState', diff --git a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts index d14dce5de..1a57f47ca 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts +++ b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts @@ -1,11 +1,10 @@ -import { ThemeColor } from 'twenty-ui'; - import { Field, Object as MetadataObject, RelationDefinition, RelationDefinitionType, } from '~/generated-metadata/graphql'; +import { ThemeColor } from 'twenty-ui/theme'; export type FieldMetadataItemOption = { color: ThemeColor; diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getIconForObjectType.ts b/packages/twenty-front/src/modules/object-metadata/utils/getIconForObjectType.ts index 3689bd53f..5fccb5721 100644 --- a/packages/twenty-front/src/modules/object-metadata/utils/getIconForObjectType.ts +++ b/packages/twenty-front/src/modules/object-metadata/utils/getIconForObjectType.ts @@ -1,5 +1,4 @@ -import { IconCheckbox, IconComponent, IconNotes } from 'twenty-ui'; - +import { IconCheckbox, IconComponent, IconNotes } from 'twenty-ui/display'; export const getIconForObjectType = ( objectType: string, ): IconComponent | undefined => { diff --git a/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts b/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts index 65f0f8a0d..739e0b271 100644 --- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts +++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts @@ -1,4 +1,3 @@ -import { themeColorSchema } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; @@ -8,6 +7,7 @@ import { RelationDefinitionType, } from '~/generated-metadata/graphql'; import { camelCaseStringSchema } from '~/utils/validation-schemas/camelCaseStringSchema'; +import { themeColorSchema } from 'twenty-ui/theme'; export const fieldMetadataItemSchema = (existingLabels?: string[]) => { return z.object({ diff --git a/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts b/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts index b91bdfade..8e1daa26e 100644 --- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts +++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts @@ -1,8 +1,8 @@ -import { themeColorSchema } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem'; import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils'; +import { themeColorSchema } from 'twenty-ui/theme'; const selectOptionSchema = z .object({ diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx index 48df13fa6..da22e0d22 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx @@ -11,9 +11,11 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; -import { IconLibraryPlus, IconPlus, LightButton, MenuItem } from 'twenty-ui'; import { v4 } from 'uuid'; import { isDefined } from 'twenty-shared/utils'; +import { IconLibraryPlus, IconPlus } from 'twenty-ui/display'; +import { LightButton } from 'twenty-ui/input'; +import { MenuItem } from 'twenty-ui/navigation'; type AdvancedFilterAddFilterRuleSelectProps = { recordFilterGroup: RecordFilterGroup; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx index 368d85a76..ff19f993f 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx @@ -4,7 +4,7 @@ import { SelectControl } from '@/ui/input/components/SelectControl'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isNonEmptyString } from '@sniptt/guards'; import { isDefined } from 'twenty-shared/utils'; -import { useIcons } from 'twenty-ui'; +import { useIcons } from 'twenty-ui/display'; type AdvancedFilterFieldSelectDropdownButtonClickableSelectProps = { recordFilterId: string; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx index 530b8bcef..7e0bf3bb3 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx @@ -6,7 +6,9 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui'; +import { IconButton } from 'twenty-ui/input'; +import { IconDotsVertical, IconTrash } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; type AdvancedFilterRecordFilterGroupOptionsDropdownProps = { recordFilterGroupId: string; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx index 1cba49729..97bfeb526 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx @@ -15,7 +15,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared/utils'; -import { MenuItem } from 'twenty-ui'; +import { MenuItem } from 'twenty-ui/navigation'; const StyledContainer = styled.div` width: 100px; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx index e20932d47..02dc42d82 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx @@ -11,7 +11,9 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isDefined } from 'twenty-shared/utils'; -import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui'; +import { IconButton } from 'twenty-ui/input'; +import { IconDotsVertical, IconTrash } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; type AdvancedFilterRecordFilterOptionsDropdownProps = { recordFilterId: string; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx index 918251f05..5b4353c56 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx @@ -19,7 +19,8 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; -import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui'; +import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; type AdvancedFilterSubFieldSelectMenuProps = { recordFilterId: string; 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 9d07eab1f..ad355fdf5 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx @@ -1,11 +1,3 @@ -import { - AvatarChip, - AvatarChipVariant, - ChipSize, - LinkAvatarChip, - isModifiedEvent, -} from 'twenty-ui'; - import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu'; import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage'; import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; @@ -13,6 +5,14 @@ import { recordIndexOpenRecordInState } from '@/object-record/record-index/state import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import { useRecoilValue } from 'recoil'; +import { + AvatarChip, + AvatarChipVariant, + ChipSize, + LinkAvatarChip, +} from 'twenty-ui/components'; +import { isModifiedEvent } from 'twenty-ui/utilities'; + export type RecordChipProps = { objectNameSingular: string; record: ObjectRecord; diff --git a/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlConnection.ts b/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlConnection.ts index 99de9b65e..d76134be8 100644 --- a/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlConnection.ts +++ b/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlConnection.ts @@ -1,6 +1,5 @@ -import { Nullable } from 'twenty-ui'; - import { RecordGqlEdge } from '@/object-record/graphql/types/RecordGqlEdge'; +import { Nullable } from 'twenty-ui/utilities'; export type RecordGqlConnection = { __typename?: string; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index 1417717a5..e21006267 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx @@ -1,10 +1,11 @@ -import { IconPlus, LightButton } from 'twenty-ui'; - import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { t } from '@lingui/core/macro'; +import { IconPlus } from 'twenty-ui/display'; +import { LightButton } from 'twenty-ui/input'; + type AddObjectFilterFromDetailsButtonProps = { filterDropdownId?: string; }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx index 36cad84e7..db9a50cd2 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx @@ -16,14 +16,11 @@ import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLog import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; -import { - IconFilter, - MenuItemLeftContent, - Pill, - StyledMenuItemBase, -} from 'twenty-ui'; import { v4 } from 'uuid'; import { isDefined } from 'twenty-shared/utils'; +import { IconFilter } from 'twenty-ui/display'; +import { MenuItemLeftContent, StyledMenuItemBase } from 'twenty-ui/navigation'; +import { Pill } from 'twenty-ui/components'; export const StyledContainer = styled.div` align-items: center; 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 447608e8f..d54eee962 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 { AvatarChip, IconComponent } from 'twenty-ui'; - import { RecordFilter } from '../../record-filter/types/RecordFilter'; +import { AvatarChip } from 'twenty-ui/components'; +import { IconComponent } from 'twenty-ui/display'; type GenericEntityFilterChipProps = { filter: RecordFilter; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx index da432a10b..e612805d3 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx @@ -15,7 +15,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isDefined } from 'twenty-shared/utils'; -import { IconCheck } from 'twenty-ui'; +import { IconCheck } from 'twenty-ui/display'; const StyledBooleanSelectContainer = styled.div<{ selected?: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx index dad887061..e95184286 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx @@ -23,7 +23,8 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui'; +import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { const [searchText] = useState(''); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx index 09887c78d..9e4fd5d87 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx @@ -20,8 +20,9 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useRecoilValue } from 'recoil'; -import { MenuItemSelect, useIcons } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { MenuItemSelect } from 'twenty-ui/navigation'; +import { useIcons } from 'twenty-ui/display'; export type ObjectFilterDropdownFilterSelectMenuItemProps = { fieldMetadataItemToSelect: FieldMetadataItem; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItemV2.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItemV2.tsx index 431f81b9d..97bbba6cf 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItemV2.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItemV2.tsx @@ -4,7 +4,8 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useRecoilValue } from 'recoil'; -import { MenuItemSelect, useIcons } from 'twenty-ui'; +import { MenuItemSelect } from 'twenty-ui/navigation'; +import { useIcons } from 'twenty-ui/display'; export type ObjectFilterDropdownFilterSelectMenuItemV2Props = { fieldMetadataItemToSelect: FieldMetadataItem; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx index 681d4566c..e2dc9a0a0 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx @@ -1,5 +1,3 @@ -import { IconChevronDown } from 'twenty-ui'; - import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect'; @@ -11,6 +9,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { getOperandLabel } from '../utils/getOperandLabel'; +import { IconChevronDown } from 'twenty-ui/display'; const StyledDropdownMenuHeader = styled(DropdownMenuHeader)` cursor: pointer; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx index 0497ba2da..c2ee9f99a 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx @@ -15,8 +15,8 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared/utils'; -import { MenuItem } from 'twenty-ui'; import { getOperandLabel } from '../utils/getOperandLabel'; +import { MenuItem } from 'twenty-ui/navigation'; const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)` background-color: ${({ theme }) => theme.background.primary}; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx index aa2e3aa74..53bf03bdc 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx @@ -24,7 +24,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isDefined } from 'twenty-shared/utils'; -import { MenuItem, MenuItemMultiSelect } from 'twenty-ui'; +import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation'; export const EMPTY_FILTER_VALUE = ''; export const MAX_OPTIONS_TO_DISPLAY = 3; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx index fa975fabc..de74ebcd3 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx @@ -1,7 +1,7 @@ import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip'; import { SelectableItem } from '@/object-record/select/types/SelectableItem'; import styled from '@emotion/styled'; -import { MenuItemMultiSelectAvatar } from 'twenty-ui'; +import { MenuItemMultiSelectAvatar } from 'twenty-ui/navigation'; const StyledPinnedItemsContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx index dafbabe76..ba896562e 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx @@ -1,8 +1,8 @@ -import { IconFilterOff, MenuItem } from 'twenty-ui'; - import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { IconFilterOff } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => { const { emptyRecordFilter } = useEmptyRecordFilter(); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx index 1a967e63d..412172f4b 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx @@ -22,8 +22,8 @@ import { RelationFilterValue } from '@/views/view-filter-value/types/RelationFil import { jsonRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/jsonRelationFilterValueSchema'; import { simpleRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/simpleRelationFilterValueSchema'; import { isDefined } from 'twenty-shared/utils'; -import { IconUserCircle } from 'twenty-ui'; import { v4 } from 'uuid'; +import { IconUserCircle } from 'twenty-ui/display'; export const EMPTY_FILTER_VALUE: string = JSON.stringify({ isCurrentWorkspaceMemberSelected: false, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx index 9048d8668..fb74e5ace 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx @@ -1,5 +1,4 @@ import { useTheme } from '@emotion/react'; -import { IconChevronDown } from 'twenty-ui'; import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; @@ -14,6 +13,7 @@ import { useLingui } from '@lingui/react/macro'; import { GenericEntityFilterChip } from './GenericEntityFilterChip'; import { ObjectFilterDropdownRecordSelect } from './ObjectFilterDropdownRecordSelect'; import { ObjectFilterDropdownSearchInput } from './ObjectFilterDropdownSearchInput'; +import { IconChevronDown } from 'twenty-ui/display'; const SINGLE_ENTITY_FILTER_DROPDOWN_ID = 'single-entity-filter-dropdown'; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx index d4d583c33..6ab9730c4 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx @@ -15,16 +15,16 @@ import { tableColumnsComponentState } from '@/object-record/record-table/states/ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; import { within } from '@storybook/test'; -import { - ComponentDecorator, - getCanvasElementForDropdownTesting, -} from 'twenty-ui'; import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { + ComponentDecorator, + getCanvasElementForDropdownTesting, +} from 'twenty-ui/testing'; const meta: Meta = { title: diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions.ts index 73a6ebf0b..6ae8959c3 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions.ts @@ -8,7 +8,7 @@ import { IconSettingsAutomation, IconUserCircle, IconWebhook, -} from 'twenty-ui'; +} from 'twenty-ui/display'; export const getActorSourceMultiSelectOptions = ( selectedSourceNames: string[], diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx index a75fc3563..60fd25e8d 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx @@ -1,5 +1,3 @@ -import { IconChevronLeft, IconEyeOff, MenuItemNavigate } from 'twenty-ui'; - import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard'; import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; @@ -10,6 +8,8 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel import { ViewType } from '@/views/types/ViewType'; import { useLingui } from '@lingui/react/macro'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { IconChevronLeft, IconEyeOff } from 'twenty-ui/display'; +import { MenuItemNavigate } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownFieldsContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx index 3112823ae..14a868249 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx @@ -1,11 +1,5 @@ import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; -import { - IconChevronLeft, - IconSettings, - MenuItem, - UndecoratedLink, -} from 'twenty-ui'; import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular'; @@ -22,6 +16,8 @@ import { ViewType } from '@/views/types/ViewType'; import { useLingui } from '@lingui/react/macro'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { IconChevronLeft, IconSettings } from 'twenty-ui/display'; +import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownHiddenFieldsContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx index e663000c6..fbd7a3c07 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx @@ -1,10 +1,4 @@ import { useEffect } from 'react'; -import { - IconChevronLeft, - IconSettings, - MenuItem, - UndecoratedLink, -} from 'twenty-ui'; import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular'; @@ -24,6 +18,8 @@ import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { IconChevronLeft, IconSettings } from 'twenty-ui/display'; +import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx index 447046977..f00ae7e47 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx @@ -1,16 +1,3 @@ -import { - IconBaselineDensitySmall, - IconChevronLeft, - IconLayoutList, - IconLayoutNavbar, - IconLayoutSidebarRight, - IconTable, - MenuItem, - MenuItemSelect, - MenuItemToggle, - OverflowingTextWithTooltip, -} from 'twenty-ui'; - import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { useSetViewTypeFromLayoutOptionsMenu } from '@/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu'; @@ -29,6 +16,16 @@ import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGet import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; +import { + IconBaselineDensitySmall, + IconChevronLeft, + IconLayoutList, + IconLayoutNavbar, + IconLayoutSidebarRight, + IconTable, + OverflowingTextWithTooltip, +} from 'twenty-ui/display'; +import { MenuItem, MenuItemSelect, MenuItemToggle } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownLayoutContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx index 9d8e4d82f..d7cabe7d7 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx @@ -1,10 +1,3 @@ -import { - IconChevronLeft, - IconLayoutNavbar, - IconLayoutSidebarRight, - MenuItemSelect, -} from 'twenty-ui'; - import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { useUpdateObjectViewOptions } from '@/object-record/object-options-dropdown/hooks/useUpdateObjectViewOptions'; import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState'; @@ -15,6 +8,12 @@ import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import { t } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; +import { + IconChevronLeft, + IconLayoutNavbar, + IconLayoutSidebarRight, +} from 'twenty-ui/display'; +import { MenuItemSelect } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownLayoutOpenInContent = () => { const { onContentChange } = useOptionsDropdown(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx index a2e1a38c9..d1fa4550e 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx @@ -1,12 +1,4 @@ import { Key } from 'ts-key-enum'; -import { - AppTooltip, - IconCopy, - IconLayoutList, - IconListDetails, - IconTrash, - MenuItem, -} from 'twenty-ui'; import { ObjectOptionsDropdownMenuViewName } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName'; import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard'; @@ -27,6 +19,15 @@ import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/sta import { useTheme } from '@emotion/react'; import { useLingui } from '@lingui/react/macro'; import { capitalize, isDefined } from 'twenty-shared/utils'; +import { + AppTooltip, + IconCopy, + IconLayoutList, + IconListDetails, + IconTrash, +} from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; + export const ObjectOptionsDropdownMenuContent = () => { const { t } = useLingui(); const { recordIndexId, objectMetadataItem, onContentChange, closeDropdown } = diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx index 15e977681..a2b2556a3 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx @@ -16,10 +16,9 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { OverflowingTextWithTooltip } from '@ui/display'; import { useState } from 'react'; -import { useIcons } from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; +import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display'; const StyledDropdownMenuIconAndNameContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx index 890f44af8..59a8e9c43 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx @@ -1,12 +1,4 @@ import { useEffect } from 'react'; -import { - IconChevronLeft, - IconSettings, - MenuItem, - MenuItemSelect, - UndecoratedLink, - useIcons, -} from 'twenty-ui'; import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular'; @@ -31,6 +23,12 @@ import { FieldMetadataType } from '~/generated-metadata/graphql'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; import { isDefined } from 'twenty-shared/utils'; +import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display'; +import { + MenuItem, + MenuItemSelect, + UndecoratedLink, +} from 'twenty-ui/navigation'; export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx index 2ae2c1a3c..30120a903 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx @@ -1,11 +1,4 @@ import { useEffect } from 'react'; -import { - IconChevronLeft, - IconHandMove, - IconSortAZ, - IconSortZA, - MenuItemSelect, -} from 'twenty-ui'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector'; @@ -16,6 +9,13 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { + IconChevronLeft, + IconHandMove, + IconSortAZ, + IconSortZA, +} from 'twenty-ui/display'; +import { MenuItemSelect } from 'twenty-ui/navigation'; export const ObjectOptionsDropdownRecordGroupSortContent = () => { const { currentContentId, onContentChange } = useOptionsDropdown(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx index 8c42139db..e68e87892 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx @@ -1,14 +1,4 @@ import { useEffect } from 'react'; -import { - IconChevronLeft, - IconCircleOff, - IconEyeOff, - IconLayoutList, - IconSortDescending, - MenuItem, - MenuItemNavigate, - MenuItemToggle, -} from 'twenty-ui'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { RecordGroupReorderConfirmationModal } from '@/object-record/record-group/components/RecordGroupReorderConfirmationModal'; @@ -28,6 +18,18 @@ import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component- import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { useLingui } from '@lingui/react/macro'; +import { + IconChevronLeft, + IconCircleOff, + IconEyeOff, + IconLayoutList, + IconSortDescending, +} from 'twenty-ui/display'; +import { + MenuItem, + MenuItemNavigate, + MenuItemToggle, +} from 'twenty-ui/navigation'; export const ObjectOptionsDropdownRecordGroupsContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx index bb647be79..5d26454c5 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent'; @@ -23,6 +22,7 @@ import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecora import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; +import { ComponentDecorator } from 'twenty-ui/testing'; const instanceId = 'entity-options-scope'; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index a50d93e53..c70bde46b 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui'; import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; @@ -33,6 +32,8 @@ import { Trans, useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useTheme } from '@emotion/react'; +import { IconChevronDown, useIcons } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const StyledInput = styled.input` background: transparent; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 54a6566c0..5c7ec30e4 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -25,9 +25,9 @@ import styled from '@emotion/styled'; import { useContext, useState } from 'react'; import { InView, useInView } from 'react-intersection-observer'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { AnimatedEaseInOut } from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; import { useNavigateApp } from '~/hooks/useNavigateApp'; +import { AnimatedEaseInOut } from 'twenty-ui/utilities'; const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx index e1bf6937e..66b8cb5da 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx @@ -18,15 +18,10 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import styled from '@emotion/styled'; import { Dispatch, SetStateAction, useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { - AvatarChipVariant, - Checkbox, - CheckboxVariant, - IconEye, - IconEyeOff, - LightIconButton, -} from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { AvatarChipVariant } from 'twenty-ui/components'; +import { Checkbox, CheckboxVariant, LightIconButton } from 'twenty-ui/input'; +import { IconEye, IconEyeOff } from 'twenty-ui/display'; const StyledCompactIconContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx index bcf0c98e3..35225e5cf 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx @@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { ViewType } from '@/views/types/ViewType'; -import { MenuItem } from 'twenty-ui'; +import { MenuItem } from 'twenty-ui/navigation'; const StyledMenuContainer = styled.div` position: absolute; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx index 809237272..eda0fc17e 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import { useContext, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import { useRecoilValue } from 'recoil'; -import { GRAY_SCALE } from 'twenty-ui'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState'; @@ -10,6 +9,7 @@ import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/record-index/states/isRecordIndexLoadMoreLockedComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2'; +import { GRAY_SCALE } from 'twenty-ui/theme'; const StyledText = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx index 8f7fd93d5..1fcc71f26 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx @@ -11,7 +11,9 @@ import { RecordGroupDefinitionType } from '@/object-record/record-group/types/Re import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; -import { IconDotsVertical, IconPlus, LightIconButton, Tag } from 'twenty-ui'; +import { IconDotsVertical, IconPlus } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; +import { Tag } from 'twenty-ui/components'; const StyledHeader = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx index 35a3188ae..32ad8948a 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx @@ -1,7 +1,8 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import styled from '@emotion/styled'; -import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui'; +import { AppTooltip, TooltipDelay } from 'twenty-ui/display'; +import { Tag } from 'twenty-ui/components'; const StyledTag = styled(Tag)` width: 100%; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx index 6acaf76c4..782b64559 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx @@ -9,15 +9,15 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate'; import { useRecoilValue } from 'recoil'; +import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { isDefined } from 'twenty-shared/utils'; import { Icon123, IconCheck, IconChevronLeft, - MenuItem, useIcons, -} from 'twenty-ui'; -import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; -import { isDefined } from 'twenty-shared/utils'; +} from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => { const { diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx index f109114c3..d215d2594 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx @@ -1,5 +1,4 @@ import { Key } from 'ts-key-enum'; -import { MenuItem } from 'twenty-ui'; import { useDropdown } from '@/dropdown/hooks/useDropdown'; import { @@ -11,6 +10,7 @@ import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/Tabl import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useLingui } from '@lingui/react/macro'; +import { MenuItem } from 'twenty-ui/navigation'; export const RecordBoardColumnHeaderAggregateDropdownMenuContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem.tsx index 69a7fb8ed..2bfcbae96 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem.tsx @@ -1,4 +1,5 @@ -import { IconComponent, MenuItem } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const RecordBoardColumnHeaderAggregateDropdownMenuItem = ({ onContentChange, diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx index d55e743bf..a8b9bcaea 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx @@ -20,8 +20,8 @@ import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate'; import isEmpty from 'lodash.isempty'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconCheck, IconChevronLeft } from 'twenty-ui'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { IconCheck, IconChevronLeft } from 'twenty-ui/display'; export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({ availableAggregations, diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx index fd00b51b0..2256abe9d 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx @@ -5,7 +5,7 @@ import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObj import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext } from 'react'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus } from 'twenty-ui/display'; const StyledNewButton = styled.button` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx index 931bc0f0e..f94231405 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx @@ -1,10 +1,11 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCopy, LightIconButton } from 'twenty-ui'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useLingui } from '@lingui/react/macro'; +import { IconCopy } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; const StyledButtonContainer = styled.div` padding: 0 ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx index 7f9d83e97..bb0ecede3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx @@ -1,10 +1,11 @@ import { useMemo } from 'react'; -import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui'; import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput'; import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; import { CountryCode } from 'libphonenumber-js'; +import { IconCircleOff, IconComponentProps } from 'twenty-ui/display'; +import { SelectOption } from 'twenty-ui/input'; export type FormCountryCodeSelectInputUpdatedValue = CountryCode | ''; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx index 58b1a19ef..6f1bc59ba 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx @@ -1,9 +1,10 @@ import { useMemo } from 'react'; -import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui'; import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput'; import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; +import { IconCircleOff, IconComponentProps } from 'twenty-ui/display'; +import { SelectOption } from 'twenty-ui/input'; export const FormCountrySelectInput = ({ selectedCountryName, diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx index e686a9e84..52542ca56 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx @@ -30,7 +30,8 @@ import { useState, } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui'; +import { Nullable } from 'twenty-ui/utilities'; +import { TEXT_INPUT_STYLE } from 'twenty-ui/theme'; const StyledInputContainer = styled(FormFieldInputInputContainer)` display: grid; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx index 6b718f206..97d47e514 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx @@ -17,7 +17,9 @@ import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariabl import { useTheme } from '@emotion/react'; import { useId, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { IconChevronDown, SelectOption, VisibilityHidden } from 'twenty-ui'; +import { IconChevronDown } from 'twenty-ui/display'; +import { SelectOption } from 'twenty-ui/input'; +import { VisibilityHidden } from 'twenty-ui/accessibility'; type FormMultiSelectFieldInputProps = { label?: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx index dde905075..2616c688b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx @@ -18,7 +18,9 @@ import styled from '@emotion/styled'; import { useId, useState } from 'react'; import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; -import { IconChevronDown, SelectOption, VisibilityHidden } from 'twenty-ui'; +import { IconChevronDown } from 'twenty-ui/display'; +import { SelectOption } from 'twenty-ui/input'; +import { VisibilityHidden } from 'twenty-ui/accessibility'; type FormSelectFieldInputProps = { label?: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx index 12f4507ca..f112dc7d2 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx @@ -17,7 +17,8 @@ import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariabl import styled from '@emotion/styled'; import { useCallback } from 'react'; import { isDefined, isValidUuid } from 'twenty-shared/utils'; -import { IconChevronDown, IconForbid, LightIconButton } from 'twenty-ui'; +import { IconChevronDown, IconForbid } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; const StyledFormSelectContainer = styled(FormFieldInputInputContainer)` justify-content: space-between; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx index d30ee1489..7ced05652 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx @@ -6,8 +6,8 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; -import { IconAlertTriangle, IconX } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconAlertTriangle, IconX } from 'twenty-ui/display'; const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>` background-color: ${({ theme, danger }) => diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx index c10877175..6caa05f3a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx @@ -1,11 +1,11 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { fn, userEvent, waitFor, within } from '@storybook/test'; -import { getUserDevice } from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormRawJsonFieldInput } from '../FormRawJsonFieldInput'; +import { getUserDevice } from 'twenty-ui/utilities'; const meta: Meta = { title: 'UI/Data/Field/Form/Input/FormRawJsonFieldInput', diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx index c619505b3..0fa9023bf 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx @@ -7,11 +7,11 @@ import { waitForElementToBeRemoved, within, } from '@storybook/test'; -import { getUserDevice } from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormTextFieldInput } from '../FormTextFieldInput'; +import { getUserDevice } from 'twenty-ui/utilities'; const meta: Meta = { title: 'UI/Data/Field/Form/Input/FormTextFieldInput', diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/__tests__/useGetButtonIcon.test.tsx b/packages/twenty-front/src/modules/object-record/record-field/hooks/__tests__/useGetButtonIcon.test.tsx index e7c147a58..12e3d8036 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/__tests__/useGetButtonIcon.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/__tests__/useGetButtonIcon.test.tsx @@ -1,7 +1,6 @@ import { renderHook } from '@testing-library/react'; import { ReactNode } from 'react'; import { RecoilRoot } from 'recoil'; -import { IconPencil } from 'twenty-ui'; import { phonesFieldDefinition, @@ -11,6 +10,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { IconPencil } from 'twenty-ui/display'; const recordId = 'recordId'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts index ebd413adc..dd475413b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts @@ -1,9 +1,9 @@ import { useContext } from 'react'; -import { IconComponent } from 'twenty-ui'; import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon'; import { FieldContext } from '../contexts/FieldContext'; +import { IconComponent } from 'twenty-ui/display'; export const useGetButtonIcon = (): IconComponent | undefined => { const { fieldDefinition } = useContext(FieldContext); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx index 6db5b345a..2c99b8cb7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx @@ -1,7 +1,7 @@ import { RecordChip } from '@/object-record/components/RecordChip'; import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay'; -import { ChipSize } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { ChipSize } from 'twenty-ui/components'; export const ChipFieldDisplay = () => { const { diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx index 293c4856c..3629109e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx @@ -1,7 +1,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; export const FullNameFieldDisplay = () => { const { fieldValue } = useFullNameFieldDisplay(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx index 42d258b77..58948550f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx @@ -1,9 +1,8 @@ -import { Tag } from 'twenty-ui'; - import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { useMultiSelectFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useMultiSelectFieldDisplay'; import { MultiSelectDisplay } from '@/ui/field/display/components/MultiSelectDisplay'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; +import { Tag } from 'twenty-ui/components'; export const MultiSelectFieldDisplay = () => { const { fieldValue, fieldDefinition } = useMultiSelectFieldDisplay(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx index e9f9bc6d7..1cffcb4d6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx @@ -5,7 +5,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay'; import { useLingui } from '@lingui/react/macro'; import React from 'react'; -import { useIcons } from 'twenty-ui'; +import { useIcons } from 'twenty-ui/display'; export const PhonesFieldDisplay = () => { const { fieldValue } = usePhonesFieldDisplay(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx index a03427a7c..ccd8b3c4e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx @@ -1,11 +1,11 @@ import { ActorFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ActorFieldDisplay'; import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/ActorFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx index 708ebe4e5..f05e45d44 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { AddressFieldDisplay } from '@/object-record/record-field/meta-types/display/components/AddressFieldDisplay'; import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/AddressFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx index ded792eaf..c719f92d1 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/display/components/BooleanFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/BooleanFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx index bc2964a29..984568f91 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; @@ -10,6 +9,7 @@ import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/ChipFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/CurrencyFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/CurrencyFieldDisplay.perf.stories.tsx index 476e62163..1c7a00212 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/CurrencyFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/CurrencyFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { CurrencyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/CurrencyFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateFieldDisplay.perf.stories.tsx index 35e9c6562..b7c2d5849 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateFieldDisplay.perf.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { DateFormat } from '@/localization/constants/DateFormat'; import { TimeFormat } from '@/localization/constants/TimeFormat'; @@ -8,6 +7,7 @@ import { UserContext } from '@/users/contexts/UserContext'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/DateFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateTimeFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateTimeFieldDisplay.perf.stories.tsx index 9e2cb6b78..4b4c96aac 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateTimeFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateTimeFieldDisplay.perf.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { DateFormat } from '@/localization/constants/DateFormat'; import { TimeFormat } from '@/localization/constants/TimeFormat'; @@ -8,6 +7,7 @@ import { UserContext } from '@/users/contexts/UserContext'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/DateTimeFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/EmailsFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/EmailsFieldDisplay.perf.stories.tsx index 283224dd8..81b9974a4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/EmailsFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/EmailsFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { EmailsFieldDisplay } from '@/object-record/record-field/meta-types/display/components/EmailsFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/EmailsFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/FullNameFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/FullNameFieldDisplay.perf.stories.tsx index 4b7985289..f2f0b0a4b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/FullNameFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/FullNameFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { FullNameFieldDisplay } from '@/object-record/record-field/meta-types/display/components/FullNameFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/FullNameFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx index 1f6d09a8a..b363c6bde 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; import { useContext, useEffect } from 'react'; -import { ComponentDecorator } from 'twenty-ui'; import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider'; @@ -8,6 +7,7 @@ import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/displ import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const FieldFocusEffect = () => { const { setIsFocused } = useContext(FieldFocusContext); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx index 0eae95f09..0bd2afc8c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; import { useContext, useEffect } from 'react'; -import { ComponentDecorator } from 'twenty-ui'; import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider'; @@ -8,6 +7,7 @@ import { MultiSelectFieldDisplay } from '@/object-record/record-field/meta-types import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const FieldFocusEffect = () => { const { setIsFocused } = useContext(FieldFocusContext); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/NumberFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/NumberFieldDisplay.perf.stories.tsx index 89263a0b8..9adaa27f5 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/NumberFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/NumberFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { NumberFieldDisplay } from '@/object-record/record-field/meta-types/display/components/NumberFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/NumberFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx index 4e43a8dcd..29e02b438 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; @@ -7,6 +6,7 @@ import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/PhonesFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx index 3d4b5950a..f9dce7465 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/RatingFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx index 270b36a1a..3ae75c133 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; -import { ComponentDecorator } from 'twenty-ui'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay'; @@ -21,6 +20,7 @@ import { otherPersonMock, relationFromManyFieldDisplayMock, } from './relationFromManyFieldDisplayMock'; +import { ComponentDecorator } from 'twenty-ui/testing'; const RelationFieldValueSetterEffect = () => { const setEntity = useSetRecoilState( diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationToOneFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationToOneFieldDisplay.perf.stories.tsx index 989de5e74..038433ea5 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationToOneFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationToOneFieldDisplay.perf.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { RelationToOneFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationToOneFieldDisplay'; import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/RelationFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx index 98e5eb566..6967b6fff 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { SelectFieldDisplay } from '@/object-record/record-field/meta-types/display/components/SelectFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/SelectFieldDisplay', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/TextFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/TextFieldDisplay.perf.stories.tsx index 29ac8cc22..f80ba1b0c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/TextFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/TextFieldDisplay.perf.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { TextFieldDisplay } from '@/object-record/record-field/meta-types/display/components/TextFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Display/TextFieldDisplay', 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 2bf0033b8..f5655c71a 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,11 +1,10 @@ -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 { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { isDefined } from 'twenty-shared/utils'; import { usePersistField } from '../../../hooks/usePersistField'; +import { Nullable } from 'twenty-ui/utilities'; type FieldInputEvent = (persist: () => void) => void; 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 e3007f221..bbeaab903 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,3 @@ -import { Nullable } from 'twenty-ui'; - import { DateInput } from '@/ui/field/input/components/DateInput'; import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/components/NumberFieldInput'; @@ -7,6 +5,7 @@ import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/c import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { usePersistField } from '../../../hooks/usePersistField'; import { useDateTimeField } from '../../hooks/useDateTimeField'; +import { Nullable } from 'twenty-ui/utilities'; export type DateTimeFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx index c9004c169..993ccef2d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx @@ -1,10 +1,10 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'; -import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { useCombinedRefs } from '~/hooks/useCombinedRefs'; +import { TEXT_INPUT_STYLE } from 'twenty-ui/theme'; const StyledInput = styled.input<{ withRightComponent?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index 3534f6e82..cab357f06 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx @@ -1,6 +1,5 @@ import React, { useRef, useState } from 'react'; import { Key } from 'ts-key-enum'; -import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui'; import { MultiItemBaseInput, @@ -17,6 +16,9 @@ import { FieldMetadataType } from '~/generated-metadata/graphql'; import { moveArrayItem } from '~/utils/array/moveArrayItem'; import { toSpliced } from '~/utils/array/toSpliced'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; +import { IconCheck, IconPlus } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; +import { MenuItem } from 'twenty-ui/navigation'; type MultiItemFieldInputProps = { items: T[]; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx index fe2abdf9e..89d69f99c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx @@ -7,8 +7,8 @@ import { IconBookmarkPlus, IconPencil, IconTrash, - MenuItem, -} from 'twenty-ui'; +} from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; type MultiItemFieldMenuItemProps = { dropdownId: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx index bce7a0364..346f89bd3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx @@ -4,7 +4,6 @@ import styled from '@emotion/styled'; import { E164Number, parsePhoneNumber } from 'libphonenumber-js'; import ReactPhoneNumberInput from 'react-phone-number-input'; import 'react-phone-number-input/style.css'; -import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { MultiItemFieldInput } from './MultiItemFieldInput'; @@ -14,6 +13,7 @@ import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal import { css } from '@emotion/react'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString'; +import { TEXT_INPUT_STYLE } from 'twenty-ui/theme'; export const DEFAULT_PHONE_CALLING_CODE = '1'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx index 0178a1f08..cc0cbd261 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx @@ -10,7 +10,7 @@ import { SingleRecordPicker } from '@/object-record/record-picker/single-record- import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconForbid } from 'twenty-ui'; +import { IconForbid } from 'twenty-ui/display'; export type RelationToOneFieldInputProps = { onSubmit?: FieldInputEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index f090c42c7..6268aaaca 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -8,7 +8,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useState } from 'react'; import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; -import { SelectOption } from 'twenty-ui'; +import { SelectOption } from 'twenty-ui/input'; + type SelectFieldInputProps = { onSubmit?: FieldInputEvent; onCancel?: () => void; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx index eac534cf5..f9af6d7fc 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { MultiItemBaseInput } from '../MultiItemBaseInput'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'UI/Data/Field/Input/BaseFieldInput', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx index 4a7a985ee..926b141bf 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx @@ -21,11 +21,11 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { FieldMetadataType } from 'twenty-shared/types'; -import { getCanvasElementForDropdownTesting } from 'twenty-ui'; import { RelationToOneFieldInput, RelationToOneFieldInputProps, } from '../RelationToOneFieldInput'; +import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing'; const RelationWorkspaceSetterEffect = () => { const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts index 42e159bbd..06bdc429f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const lastShowPageRecordIdState = createState({ key: 'lastShowPageRecordIdState', defaultValue: null, diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts index 16f05f241..d2eb8bcc9 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts @@ -1,8 +1,7 @@ -import { IconComponent } from 'twenty-ui'; - import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldMetadata } from './FieldMetadata'; +import { IconComponent } from 'twenty-ui/display'; export type FieldDefinition = { fieldMetadataId: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts index 6e88ca9c3..217afd2d7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts @@ -1,5 +1,3 @@ -import { ThemeColor } from 'twenty-ui'; - import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues'; import { ZodHelperLiteral } from '@/object-record/record-field/types/ZodHelperLiteral'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; @@ -7,6 +5,7 @@ import * as z from 'zod'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; import { CurrencyCode } from './CurrencyCode'; import { ConnectedAccountProvider } from 'twenty-shared/types'; +import { ThemeColor } from 'twenty-ui/theme'; export type FieldUuidMetadata = { objectMetadataNameSingular?: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts b/packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts index d6ef0c2f6..c615dae35 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts @@ -1,5 +1,4 @@ -import { AvatarType } from 'twenty-ui'; - +import { AvatarType } from 'twenty-ui/display'; export type RecordChipData = { recordId: string; name: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldButtonIcon.ts b/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldButtonIcon.ts index afb99cda1..020f3d802 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldButtonIcon.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldButtonIcon.ts @@ -1,5 +1,3 @@ -import { IconComponent, IconPencil } from 'twenty-ui'; - import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone'; @@ -11,6 +9,7 @@ import { isFieldRelation } from '@/object-record/record-field/types/guards/isFie import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { isFieldArray } from '@/object-record/record-field/types/guards/isFieldArray'; +import { IconComponent, IconPencil } from 'twenty-ui/display'; export const getFieldButtonIcon = ( fieldDefinition: diff --git a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx index 5f3a4c04f..235d61057 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx @@ -1,5 +1,3 @@ -import { IconEye, IconEyeOff, MenuItemDraggable, Tag } from 'twenty-ui'; - import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { RecordGroupDefinition, @@ -7,6 +5,9 @@ import { } from '@/object-record/record-group/types/RecordGroupDefinition'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; +import { IconEye, IconEyeOff } from 'twenty-ui/display'; +import { MenuItemDraggable } from 'twenty-ui/navigation'; +import { Tag } from 'twenty-ui/components'; type RecordGroupMenuItemDraggableProps = { recordGroupId: string; diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts index 36c20fcc4..bc14d25d4 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts @@ -13,9 +13,9 @@ import { useCallback, useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; -import { IconEyeOff, IconSettings } from 'twenty-ui'; import { SettingPermissionType } from '~/generated/graphql'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; +import { IconEyeOff, IconSettings } from 'twenty-ui/display'; type UseRecordGroupActionsParams = { viewType: ViewType; diff --git a/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupActions.ts index 7fd2d731b..828b63778 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupActions.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupActions.ts @@ -1,5 +1,4 @@ -import { IconComponent } from 'twenty-ui'; - +import { IconComponent } from 'twenty-ui/display'; export type RecordGroupAction = { id: string; label: string; diff --git a/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts b/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts index 2c6884ce1..dae249c84 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts @@ -1,5 +1,4 @@ -import { ThemeColor } from 'twenty-ui'; - +import { ThemeColor } from 'twenty-ui/theme'; export const enum RecordGroupDefinitionType { Value = 'value', NoValue = 'no-value', diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx index 3638e96e4..bd2f93932 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx @@ -8,7 +8,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import { capitalize } from 'twenty-shared/utils'; -import { useIcons } from 'twenty-ui'; +import { useIcons } from 'twenty-ui/display'; const StyledTitleWithSelectedRecords = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx index 9ddf2a8fc..72c027a2e 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx @@ -2,8 +2,9 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/s import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { MenuItem, Tag } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { MenuItem } from 'twenty-ui/navigation'; +import { Tag } from 'twenty-ui/components'; const StyledMenuItem = styled(MenuItem)` width: calc(100% - 2 * var(--horizontal-padding)); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts index dfd92d42e..ccb57eaef 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts @@ -1,7 +1,6 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; +import { createState } from 'twenty-ui/utilities'; export const recordIndexFieldDefinitionsState = createState< ColumnDefinition[] diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts index 3cc57f14f..c35992af7 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const recordIndexIsCompactModeActiveState = createState({ key: 'recordIndexIsCompactModeActiveState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts index c0ba9cf3c..f57b44227 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts @@ -1,5 +1,5 @@ import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; -import { createState } from '@ui/utilities/state/utils/createState'; +import { createState } from 'twenty-ui/utilities'; export type KanbanAggregateOperation = { operation?: ExtendedAggregateOperations | null; diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts index bb28f4ad0..426f58201 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const recordIndexKanbanFieldMetadataIdState = createState( { key: 'recordIndexKanbanFieldMetadataIdState', diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexOpenRecordInState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexOpenRecordInState.ts index 32d472f4d..232a5b52e 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexOpenRecordInState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexOpenRecordInState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; +import { createState } from 'twenty-ui/utilities'; export const recordIndexOpenRecordInState = createState({ key: 'recordIndexOpenRecordInState', diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts index ad8fbfc5c..c6533b1f4 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts @@ -1,6 +1,5 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - import { ViewType } from '@/views/types/ViewType'; +import { createState } from 'twenty-ui/utilities'; export const recordIndexViewTypeState = createState({ key: 'recordIndexViewTypeState', diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx index 98894445a..25cb0ecfe 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx @@ -1,5 +1,4 @@ import { useContext } from 'react'; -import { useIcons } from 'twenty-ui'; import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay'; import { FieldInput } from '@/object-record/record-field/components/FieldInput'; @@ -32,6 +31,8 @@ import { RecordInlineCellContext, RecordInlineCellContextProps, } from './RecordInlineCellContext'; +import { useIcons } from 'twenty-ui/display'; + type RecordInlineCellProps = { readonly?: boolean; loading?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index 174674b8f..34613c42a 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -1,11 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext } from 'react'; -import { - AppTooltip, - OverflowingTextWithTooltip, - TooltipDelay, -} from 'twenty-ui'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; @@ -16,6 +11,11 @@ import { assertFieldMetadata } from '@/object-record/record-field/types/guards/a import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { useRecordInlineCellContext } from './RecordInlineCellContext'; +import { + AppTooltip, + OverflowingTextWithTooltip, + TooltipDelay, +} from 'twenty-ui/display'; const StyledIconContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContext.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContext.tsx index a4c1367bf..8e15a22d6 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContext.tsx @@ -1,5 +1,5 @@ import { createContext, ReactElement, useContext } from 'react'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; export type RecordInlineCellContextProps = { readonly?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx index 3bdb231d5..6dc7f3aa8 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx @@ -1,9 +1,7 @@ import styled from '@emotion/styled'; -import { - AnimatedContainer, - FloatingIconButton, - IconComponent, -} from 'twenty-ui'; +import { AnimatedContainer } from 'twenty-ui/utilities'; +import { FloatingIconButton } from 'twenty-ui/input'; +import { IconComponent } from 'twenty-ui/display'; const StyledInlineCellButtonContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx index 47ff8ba3c..2cd868675 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx @@ -26,7 +26,7 @@ import { useRef } from 'react'; import { useRecoilCallback } from 'recoil'; import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus } from 'twenty-ui/display'; export const StyledSelectableItem = styled(SelectableItem)` height: 100%; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx index 84a051292..359d945ad 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { Avatar, MenuItemMultiSelectAvatar } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { getAvatarType } from '@/object-metadata/utils/getAvatarType'; @@ -13,6 +12,8 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { SearchRecord } from '~/generated-metadata/graphql'; +import { Avatar } from 'twenty-ui/display'; +import { MenuItemMultiSelectAvatar } from 'twenty-ui/navigation'; export const StyledSelectableItem = styled(SelectableItem)` height: 100%; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItem.tsx index 5284dac47..993e8a50a 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItem.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { Avatar, MenuItemSelectAvatar } from 'twenty-ui'; import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord'; @@ -8,6 +7,8 @@ import { getSingleRecordPickerSelectableListId } from '@/object-record/record-pi import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; +import { Avatar } from 'twenty-ui/display'; +import { MenuItemSelectAvatar } from 'twenty-ui/navigation'; type SingleRecordPickerMenuItemProps = { record: SingleRecordPickerRecord; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItems.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItems.tsx index 84b5a9dbd..975b8025b 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItems.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItems.tsx @@ -2,7 +2,6 @@ import { isNonEmptyString, isUndefined } from '@sniptt/guards'; import { useRef } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconComponent, MenuItemSelect } from 'twenty-ui'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -20,6 +19,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared/utils'; +import { IconComponent } from 'twenty-ui/display'; +import { MenuItemSelect } from 'twenty-ui/navigation'; export type SingleRecordPickerMenuItemsProps = { EmptyIcon?: IconComponent; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx index 7de1996c0..deef6351a 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx @@ -14,8 +14,8 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconPlus } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconPlus } from 'twenty-ui/display'; export type SingleRecordPickerMenuItemsWithSearchProps = { excludedRecordIds?: string[]; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/__stories__/SingleRecordPicker.stories.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/__stories__/SingleRecordPicker.stories.tsx index dda45db93..99b843f1b 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/__stories__/SingleRecordPicker.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/__stories__/SingleRecordPicker.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { ComponentDecorator, IconUserCircle } from 'twenty-ui'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; @@ -12,6 +11,8 @@ import { sleep } from '~/utils/sleep'; import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord'; +import { ComponentDecorator } from 'twenty-ui/testing'; +import { IconUserCircle } from 'twenty-ui/display'; const records = allMockPersonRecords.map( (person) => ({ diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts index ae72a9435..5956aaa63 100644 --- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const viewableRecordIdState = createState({ key: 'activities/viewable-record-id', defaultValue: null, diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts index 21b64525e..3d977e2f2 100644 --- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; // TODO: deprecate this state once we remove IS_COMMAND_MENU_V2_ENABLED flag export const viewableRecordNameSingularState = createState({ key: 'activities/viewable-record-name-singular', diff --git a/packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts b/packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts index 8851d7140..3892da683 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts +++ b/packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts @@ -7,7 +7,7 @@ import { IconNotes, IconPaperclip, IconTimelineEvent, -} from 'twenty-ui'; +} from 'twenty-ui/display'; export const BASE_RECORD_LAYOUT: RecordLayout = { tabs: { diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts index c0655a912..e475c0f34 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts +++ b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts @@ -10,6 +10,8 @@ import { RecordLayoutTab } from '@/ui/layout/tab/types/RecordLayoutTab'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; +import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { FeatureFlagKey } from '~/generated/graphql'; import { IconCalendarEvent, IconHome, @@ -17,9 +19,7 @@ import { IconNotes, IconPrinter, IconSettings, -} from 'twenty-ui'; -import { FieldMetadataType } from '~/generated-metadata/graphql'; -import { FeatureFlagKey } from '~/generated/graphql'; +} from 'twenty-ui/display'; export const useRecordShowContainerTabs = ( loading: boolean, diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts index be9c54d96..fb3a92ebd 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts +++ b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts @@ -1,8 +1,8 @@ import { useParams } from 'react-router-dom'; -import { useIcons } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { isDefined } from 'twenty-shared/utils'; +import { useIcons } from 'twenty-ui/display'; export const useRecordShowPage = ( propsObjectNameSingular: string, diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index 5ed5d741a..fdd205792 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -2,16 +2,6 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { useCallback, useContext, useState } from 'react'; -import { - AnimatedEaseInOut, - IconChevronDown, - IconComponent, - IconDotsVertical, - IconTrash, - IconUnlink, - LightIconButton, - MenuItem, -} from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; @@ -46,6 +36,16 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { createPortal } from 'react-dom'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; +import { AnimatedEaseInOut } from 'twenty-ui/utilities'; +import { + IconChevronDown, + IconComponent, + IconDotsVertical, + IconTrash, + IconUnlink, +} from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; +import { MenuItem } from 'twenty-ui/navigation'; const StyledListItem = styled(RecordDetailRecordsListItem)<{ isDropdownOpen?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx index 8004cf94b..cbc4258bc 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { useCallback, useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconForbid, IconPencil, IconPlus, LightIconButton } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; @@ -37,6 +36,9 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import { useLingui } from '@lingui/react/macro'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; import { getAppPath } from '~/utils/navigation/getAppPath'; +import { IconForbid, IconPencil, IconPlus } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; + type RecordDetailRelationSectionProps = { loading: boolean; }; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx index 5350fe09f..537c2f8e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; - -import { Section } from 'twenty-ui'; +import { Section } from 'twenty-ui/layout'; const StyledRecordDetailSection = styled(Section)` border-top: 1px solid ${({ theme }) => theme.border.color.light}; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailDuplicatesSection.stories.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailDuplicatesSection.stories.tsx index bfa43973d..9bd242555 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailDuplicatesSection.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailDuplicatesSection.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; @@ -9,6 +8,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks'; import { getCompaniesMock } from '~/testing/mock-data/companies'; import { RecordDetailDuplicatesSection } from '../RecordDetailDuplicatesSection'; +import { ComponentDecorator } from 'twenty-ui/testing'; const companiesMock = getCompaniesMock(); diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx index dc788344b..1933e0d49 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx @@ -1,5 +1,4 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; @@ -15,6 +14,7 @@ import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { allMockPersonRecords } from '~/testing/mock-data/people'; import { RecordDetailRelationSection } from '../RecordDetailRelationSection'; +import { ComponentDecorator } from 'twenty-ui/testing'; const companiesMock = getCompaniesMock(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx index 65dd0fe19..0dfcd31a6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { useEffect } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { ComponentDecorator } from 'twenty-ui'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; @@ -26,6 +25,7 @@ import { RecordTableRowDraggableContextProvider } from '@/object-record/record-t import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { mockPerformance } from './mock'; +import { ComponentDecorator } from 'twenty-ui/testing'; const RelationFieldValueSetterEffect = () => { const setEntity = useSetRecoilState( diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx index 08043fe86..bbc2c3074 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx @@ -1,5 +1,3 @@ -import { Button, IconPlus } from 'twenty-ui'; - import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { RecordIndexAddRecordInGroupDropdown } from '@/object-record/record-index/components/RecordIndexAddRecordInGroupDropdown'; import { recordIndexRecordGroupHideComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentFamilyState'; @@ -9,6 +7,8 @@ import { getEmptyStateSubTitle } from '@/object-record/record-table/empty-state/ import { getEmptyStateTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateTitle'; import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2'; import { ViewType } from '@/views/types/ViewType'; +import { Button } from 'twenty-ui/input'; +import { IconPlus } from 'twenty-ui/display'; export const RecordTableEmptyStateByGroupNoRecordAtAll = () => { const { objectMetadataItem } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx index 0efe8dbd6..5312230d8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx @@ -7,9 +7,9 @@ import { AnimatedPlaceholderEmptyTextContainer, AnimatedPlaceholderEmptyTitle, AnimatedPlaceholderType, - Button, - IconComponent, -} from 'twenty-ui'; +} from 'twenty-ui/layout'; +import { Button } from 'twenty-ui/input'; +import { IconComponent } from 'twenty-ui/display'; type RecordTableEmptyStateDisplayButtonComponentProps = { buttonComponent?: React.ReactNode; diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx index e846608bd..e9d05cab8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx @@ -1,11 +1,10 @@ -import { IconPlus } from 'twenty-ui'; - import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; import { getEmptyStateSubTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateSubTitle'; import { getEmptyStateTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateTitle'; import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord'; +import { IconPlus } from 'twenty-ui/display'; export const RecordTableEmptyStateNoGroupNoRecordAtAll = () => { const { objectMetadataItem } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter.tsx index 3753bd7f0..d5eaf46e1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter.tsx @@ -1,9 +1,8 @@ -import { IconPlus } from 'twenty-ui'; - import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord'; +import { IconPlus } from 'twenty-ui/display'; export const RecordTableEmptyStateNoRecordFoundForFilter = () => { const { objectMetadataItem } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateReadOnly.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateReadOnly.tsx index aa45b9244..9231ac27f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateReadOnly.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateReadOnly.tsx @@ -2,7 +2,7 @@ import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; import { t } from '@lingui/core/macro'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus } from 'twenty-ui/display'; export const RecordTableEmptyStateReadOnly = () => { const { objectMetadataItem } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx index f8177e25e..e5bad9c33 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx @@ -1,8 +1,7 @@ /* eslint-disable @nx/workspace-no-navigate-prefer-link */ -import { IconSettings } from 'twenty-ui'; - import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; import { SettingsPath } from '@/types/SettingsPath'; +import { IconSettings } from 'twenty-ui/display'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; export const RecordTableEmptyStateRemote = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx index 422e7340b..d148f796d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx @@ -1,5 +1,3 @@ -import { IconFilterOff } from 'twenty-ui'; - import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { useCheckIsSoftDeleteFilter } from '@/object-record/record-filter/hooks/useCheckIsSoftDeleteFilter'; import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; @@ -10,6 +8,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { isDefined } from 'twenty-shared/utils'; +import { IconFilterOff } from 'twenty-ui/display'; export const RecordTableEmptyStateSoftDelete = () => { const { objectMetadataItem, objectNameSingular, recordTableId } = diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx index 473d9f53e..b85c30533 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx @@ -3,11 +3,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableEmptyStateNoGroupNoRecordAtAll } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; -import { ComponentDecorator } from 'twenty-ui'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx index fcb2ec8a3..60896f838 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx @@ -3,11 +3,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; -import { ComponentDecorator } from 'twenty-ui'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx index f50744a49..5092f7e27 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx @@ -3,11 +3,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; -import { ComponentDecorator } from 'twenty-ui'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/ObjectRecord/RecordTable/RecordTableEmptyStateRemote', diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx index 32d1c3615..9fff5e04a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx @@ -4,11 +4,11 @@ import { RecordFiltersComponentInstanceContext } from '@/object-record/record-fi import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; -import { ComponentDecorator } from 'twenty-ui'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; +import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/ObjectRecord/RecordTable/RecordTableEmptyStateSoftDelete', diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx index 3a73c095c..0fd58bb75 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx @@ -2,13 +2,13 @@ import styled from '@emotion/styled'; import { useContext } from 'react'; import { useInView } from 'react-intersection-observer'; import { useRecoilCallback } from 'recoil'; -import { GRAY_SCALE } from 'twenty-ui'; import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/record-index/states/isRecordIndexLoadMoreLockedComponentState'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2'; import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { GRAY_SCALE } from 'twenty-ui/theme'; const StyledText = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx index b374fb146..c170246a2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx @@ -1,6 +1,5 @@ import { styled } from '@linaria/react'; import { ReactNode, useContext } from 'react'; -import { BORDER_COMMON, ThemeContext } from 'twenty-ui'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; @@ -12,6 +11,7 @@ import { DEFAULT_CELL_SCOPE, useOpenRecordTableCellFromCell, } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; +import { BORDER_COMMON, ThemeContext } from 'twenty-ui/theme'; const StyledBaseContainer = styled.div<{ hasSoftFocus: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx index 49574a0c5..aa681b5e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx @@ -1,10 +1,8 @@ import styled from '@emotion/styled'; -import { - AnimatedContainer, - FloatingIconButton, - IconComponent, - MOBILE_VIEWPORT, -} from 'twenty-ui'; +import { AnimatedContainer } from 'twenty-ui/utilities'; +import { FloatingIconButton } from 'twenty-ui/input'; +import { IconComponent } from 'twenty-ui/display'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledButtonContainer = styled.div` margin: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx index a9273b9ea..c4f7a4eca 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx @@ -4,7 +4,7 @@ import { useCallback } from 'react'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected'; -import { Checkbox } from 'twenty-ui'; +import { Checkbox } from 'twenty-ui/input'; export const TABLE_CELL_CHECKBOX_MIN_WIDTH = '24px'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContext.tsx index 9d691e58e..944b28904 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContext.tsx @@ -1,5 +1,4 @@ import { ReactNode, useContext } from 'react'; -import { useIsMobile } from 'twenty-ui'; import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; @@ -18,6 +17,7 @@ import { isRecordTableScrolledLeftComponentState } from '../../states/isRecordTa import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { useIsMobile } from 'twenty-ui/utilities'; export const RecordTableCellFieldContext = ({ children, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx index 05632c438..198e581fb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx @@ -4,7 +4,7 @@ import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/co import { useRecordTableRowDraggableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; import { css } from '@emotion/react'; -import { IconListViewGrip } from 'twenty-ui'; +import { IconListViewGrip } from 'twenty-ui/input'; export const TABLE_CELL_GRIP_WIDTH = '16px'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index bcabe483c..63405f479 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -1,6 +1,5 @@ import { ReactElement, useContext, useEffect, useRef } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight, useIsMobile } from 'twenty-ui'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty'; @@ -15,6 +14,8 @@ import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useI import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer'; import { isDefined } from 'twenty-shared/utils'; +import { IconArrowUpRight } from 'twenty-ui/display'; +import { useIsMobile } from 'twenty-ui/utilities'; type RecordTableCellSoftFocusModeProps = { editModeContent: ReactElement; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx index 4f558161f..b85d0276a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx @@ -1,7 +1,7 @@ import { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { styled } from '@linaria/react'; import { ReactNode, useContext } from 'react'; -import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui'; +import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme'; export const RECORD_TABLE_TD_WIDTH = '32px'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx index db98a71f3..b91c74bd7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx @@ -7,7 +7,7 @@ import { visibleTableColumnsComponentSelector } from '@/object-record/record-tab import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isUndefined } from '@sniptt/guards'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledTd = styled.td` background-color: ${({ theme }) => theme.background.primary}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx index d28f70e70..f5bbf442b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx @@ -8,8 +8,8 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useContext } from 'react'; import { Key } from 'ts-key-enum'; -import { IconChevronLeft } from 'twenty-ui'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; +import { IconChevronLeft } from 'twenty-ui/display'; export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({ aggregateOperations, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx index 0fbc3781b..d787e216d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx @@ -4,8 +4,9 @@ import { useViewFieldAggregateOperation } from '@/object-record/record-table/rec import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { ReactNode, useContext } from 'react'; -import { IconCheck, MenuItem } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconCheck } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({ aggregateOperations, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx index f498733cc..91fbfae94 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx @@ -11,9 +11,10 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { t } from '@lingui/core/macro'; import { useContext, useMemo } from 'react'; import { Key } from 'ts-key-enum'; -import { IconCheck, MenuItem } from 'twenty-ui'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils'; +import { IconCheck } from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export const RecordTableColumnAggregateFooterMenuContent = () => { const { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx index 6d8f843db..f6d404399 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx @@ -1,8 +1,8 @@ import { useAggregateRecordsForRecordTableColumnFooter } from '@/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter'; import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledText = styled.span` overflow: hidden; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx index f189f7afa..3da666ae1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx @@ -9,7 +9,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext, useState } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconChevronDown } from 'twenty-ui'; +import { IconChevronDown } from 'twenty-ui/display'; const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx index 25490595e..7596ed5f0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx @@ -1,12 +1,13 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ColumnDefinition } from '../../types/ColumnDefinition'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { useIcons } from 'twenty-ui/display'; type RecordTableColumnHeadProps = { column: ColumnDefinition; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx index 2d66ea463..09f6ea9c8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx @@ -1,12 +1,3 @@ -import { - IconArrowLeft, - IconArrowRight, - IconEyeOff, - IconFilter, - IconSortDescending, - MenuItem, -} from 'twenty-ui'; - import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; @@ -19,6 +10,14 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { useLingui } from '@lingui/react/macro'; import { useTableColumns } from '../../hooks/useTableColumns'; import { ColumnDefinition } from '../../types/ColumnDefinition'; +import { + IconArrowLeft, + IconArrowRight, + IconEyeOff, + IconFilter, + IconSortDescending, +} from 'twenty-ui/display'; +import { MenuItem } from 'twenty-ui/navigation'; export type RecordTableColumnHeadDropdownMenuProps = { column: ColumnDefinition; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx index cf33fa7d7..56421f3f2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell'; import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn'; import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn'; import { RecordTableHeaderLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; export const FIRST_TH_WIDTH = '9px'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx index 599c3c7ce..994b24269 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { useCallback, useMemo, useState } from 'react'; import { useRecoilCallback } from 'recoil'; -import { IconPlus, LightIconButton } from 'twenty-ui'; import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; @@ -21,6 +20,8 @@ import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/componen import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; +import { IconPlus } from 'twenty-ui/display'; +import { LightIconButton } from 'twenty-ui/input'; const COLUMN_MIN_WIDTH = 104; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx index 970e511c3..4008c0aed 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { Checkbox } from 'twenty-ui'; +import { Checkbox } from 'twenty-ui/input'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx index ec80673be..454e9dbc4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui'; +import { ThemeContext } from 'twenty-ui/theme'; const StyledTh = styled.th<{ backgroundColor: string }>` background: ${({ backgroundColor }) => backgroundColor}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx index ff470e7ad..009cea794 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx @@ -1,12 +1,13 @@ import { Theme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext } from 'react'; -import { IconPlus, ThemeContext } from 'twenty-ui'; import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId'; import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef'; +import { IconPlus } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; const StyledPlusIconHeaderCell = styled.th<{ theme: Theme; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx index e3ca5c9cb..4d674b2aa 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx @@ -1,7 +1,6 @@ import { useCallback } from 'react'; import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; -import { IconSettings, MenuItem, UndecoratedLink, useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; @@ -16,6 +15,8 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; import { useLingui } from '@lingui/react/macro'; +import { IconSettings, useIcons } from 'twenty-ui/display'; +import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation'; export const RecordTableHeaderPlusButtonContent = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index f04d37b79..34827de05 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -4,7 +4,7 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; import { RecordTableDraggableTr } from '@/object-record/record-table/record-table-row/components/RecordTableDraggableTr'; import { useTheme } from '@emotion/react'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent } from 'twenty-ui/display'; const StyledRecordTableDraggableTr = styled(RecordTableDraggableTr)` cursor: pointer; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx index 4236fd7b1..328ae9577 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -15,8 +15,10 @@ import { visibleTableColumnsComponentSelector } from '@/object-record/record-tab import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilValue } from 'recoil'; -import { AnimatedLightIconButton, IconChevronDown, Tag } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { AnimatedLightIconButton } from 'twenty-ui/input'; +import { IconChevronDown } from 'twenty-ui/display'; +import { Tag } from 'twenty-ui/components'; const StyledTrContainer = styled.tr` cursor: pointer; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx index 514ef0cb0..661fc3152 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx @@ -8,7 +8,7 @@ import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObj import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { t } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus } from 'twenty-ui/display'; export const RecordTableRecordGroupSectionAddNew = () => { const { objectMetadataItem } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionLoadMore.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionLoadMore.tsx index 4f959e054..0f59433a7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionLoadMore.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionLoadMore.tsx @@ -7,7 +7,7 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconArrowDown } from 'twenty-ui'; +import { IconArrowDown } from 'twenty-ui/display'; export const RecordTableRecordGroupSectionLoadMore = () => { const { objectNameSingular } = useRecordTableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts index 542c069d2..32bbf386e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isRemoveSortingModalOpenState = createState({ key: 'isRemoveSortingModalOpenState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts index 4d295db42..d1ad40261 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts @@ -1,5 +1,4 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - +import { createState } from 'twenty-ui/utilities'; export const isSoftFocusUsingMouseState = createState({ key: 'isSoftFocusUsingMouseState', defaultValue: false, diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index cb678575b..ce6126793 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx @@ -3,7 +3,7 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import styled from '@emotion/styled'; import { useContext } from 'react'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledDiv = styled.div` background: inherit; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx index 4e59b92ff..ca538b83d 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx @@ -4,7 +4,7 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { useContext } from 'react'; -import { OverflowingTextWithTooltip } from 'twenty-ui'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledDiv = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx index 5ca333f95..a711a1181 100644 --- a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui'; import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip'; import { SelectableItem } from '@/object-record/select/types/SelectableItem'; @@ -12,6 +11,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui/navigation'; export const MultipleSelectDropdown = ({ selectableListId, diff --git a/packages/twenty-front/src/modules/object-record/select/components/StyledMultipleSelectDropdownAvatarChip.tsx b/packages/twenty-front/src/modules/object-record/select/components/StyledMultipleSelectDropdownAvatarChip.tsx index 821767b91..d813088d1 100644 --- a/packages/twenty-front/src/modules/object-record/select/components/StyledMultipleSelectDropdownAvatarChip.tsx +++ b/packages/twenty-front/src/modules/object-record/select/components/StyledMultipleSelectDropdownAvatarChip.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { AvatarChip } from 'twenty-ui'; +import { AvatarChip } from 'twenty-ui/components'; export const StyledMultipleSelectDropdownAvatarChip = styled(AvatarChip)` &.avatar-icon-container { diff --git a/packages/twenty-front/src/modules/object-record/select/types/SelectableItem.ts b/packages/twenty-front/src/modules/object-record/select/types/SelectableItem.ts index 57122ebe7..2de2c6982 100644 --- a/packages/twenty-front/src/modules/object-record/select/types/SelectableItem.ts +++ b/packages/twenty-front/src/modules/object-record/select/types/SelectableItem.ts @@ -1,5 +1,4 @@ -import { AvatarType, IconComponent } from 'twenty-ui'; - +import { AvatarType, IconComponent } from 'twenty-ui/display'; export type SelectableItem = T & { id: string; name: string; diff --git a/packages/twenty-front/src/modules/object-record/spreadsheet-import/hooks/useBuildAvailableFieldsForImport.ts b/packages/twenty-front/src/modules/object-record/spreadsheet-import/hooks/useBuildAvailableFieldsForImport.ts index 27fb7dc9c..2bf19f867 100644 --- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/hooks/useBuildAvailableFieldsForImport.ts +++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/hooks/useBuildAvailableFieldsForImport.ts @@ -1,11 +1,10 @@ -import { useIcons } from 'twenty-ui'; - import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { COMPOSITE_FIELD_IMPORT_LABELS } from '@/object-record/spreadsheet-import/constants/CompositeFieldImportLabels'; import { AvailableFieldForImport } from '@/object-record/spreadsheet-import/types/AvailableFieldForImport'; import { getSpreadSheetFieldValidationDefinitions } from '@/object-record/spreadsheet-import/utils/getSpreadSheetFieldValidationDefinitions'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { useIcons } from 'twenty-ui/display'; type CompositeFieldType = keyof typeof COMPOSITE_FIELD_IMPORT_LABELS; diff --git a/packages/twenty-front/src/modules/object-record/spreadsheet-import/types/AvailableFieldForImport.ts b/packages/twenty-front/src/modules/object-record/spreadsheet-import/types/AvailableFieldForImport.ts index 693dac58c..1a8b46a62 100644 --- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/types/AvailableFieldForImport.ts +++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/types/AvailableFieldForImport.ts @@ -2,8 +2,9 @@ import { SpreadsheetImportFieldType, SpreadsheetImportFieldValidationDefinition, } from '@/spreadsheet-import/types'; -import { IconComponent } from 'twenty-ui'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { IconComponent } from 'twenty-ui/display'; + export type AvailableFieldForImport = { Icon: IconComponent; label: 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 766fe0dea..80b07ce44 100644 --- a/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts +++ b/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts @@ -1,5 +1,4 @@ -import { AvatarType } from 'twenty-ui'; - +import { AvatarType } from 'twenty-ui/display'; export type ObjectRecordIdentifier = { id: string; name: string; diff --git a/packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts b/packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts index 18ba7398f..778852c57 100644 --- a/packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts +++ b/packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts @@ -1,5 +1,5 @@ import { FavoriteFolder } from '@/favorites/types/FavoriteFolder'; -import { createState } from 'twenty-ui'; +import { createState } from 'twenty-ui/utilities'; export const prefetchFavoriteFoldersState = createState({ key: 'prefetchFavoriteFoldersState', diff --git a/packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts b/packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts index e3143ab33..a35a8a8e8 100644 --- a/packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts +++ b/packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts @@ -1,5 +1,5 @@ import { Favorite } from '@/favorites/types/Favorite'; -import { createState } from 'twenty-ui'; +import { createState } from 'twenty-ui/utilities'; export const prefetchFavoritesState = createState({ key: 'prefetchFavoritesState', diff --git a/packages/twenty-front/src/modules/prefetch/states/prefetchViewsState.ts b/packages/twenty-front/src/modules/prefetch/states/prefetchViewsState.ts index 240d8d7a1..e89aaa3c9 100644 --- a/packages/twenty-front/src/modules/prefetch/states/prefetchViewsState.ts +++ b/packages/twenty-front/src/modules/prefetch/states/prefetchViewsState.ts @@ -1,5 +1,5 @@ import { View } from '@/views/types/View'; -import { createState } from 'twenty-ui'; +import { createState } from 'twenty-ui/utilities'; export const prefetchViewsState = createState({ key: 'prefetchViewsState', diff --git a/packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx b/packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx index 83f4b520c..0fc1c7b66 100644 --- a/packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx +++ b/packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx @@ -3,15 +3,14 @@ import styled from '@emotion/styled'; import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton'; import { ServerlessFunctionTestData } from '@/workflow/states/serverlessFunctionTestDataFamilyState'; import { useTheme } from '@emotion/react'; +import { ServerlessFunctionExecutionStatus } from '~/generated-metadata/graphql'; +import { CodeEditor, CoreEditorHeader } from 'twenty-ui/input'; import { - CodeEditor, - CoreEditorHeader, IconSquareRoundedCheck, IconSquareRoundedX, IconLoader, - AnimatedCircleLoading, -} from 'twenty-ui'; -import { ServerlessFunctionExecutionStatus } from '~/generated-metadata/graphql'; +} from 'twenty-ui/display'; +import { AnimatedCircleLoading } from 'twenty-ui/utilities'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx index 45e360b1e..25b4ed406 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx @@ -7,8 +7,8 @@ import { z } from 'zod'; import { TextInput } from '@/ui/input/components/TextInput'; import { useLingui } from '@lingui/react/macro'; -import { Button } from 'twenty-ui'; import { isValidHostname } from 'twenty-shared/utils'; +import { Button } from 'twenty-ui/input'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx index 660a8e645..954b52de4 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx @@ -1,5 +1,4 @@ import { useRecoilValue } from 'recoil'; -import { H2Title, Section } from 'twenty-ui'; import { BlocklistItem } from '@/accounts/types/BlocklistItem'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; @@ -11,6 +10,8 @@ import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/S import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable'; import { useLingui } from '@lingui/react/macro'; import { isDefined } from 'twenty-shared/utils'; +import { H2Title } from 'twenty-ui/display'; +import { Section } from 'twenty-ui/layout'; export const SettingsAccountsBlocklistSection = () => { const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx index cb6966a1c..9193e33c8 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx @@ -1,8 +1,9 @@ import { BlocklistItem } from '@/accounts/types/BlocklistItem'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { IconButton, IconX, OverflowingTextWithTooltip } from 'twenty-ui'; import { formatToHumanReadableDate } from '~/utils/date-utils'; +import { IconButton } from 'twenty-ui/input'; +import { IconX, OverflowingTextWithTooltip } from 'twenty-ui/display'; type SettingsAccountsBlocklistTableRowProps = { blocklistItem: BlocklistItem; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index 80f336228..c74c9046e 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -5,9 +5,10 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; -import { Card, H2Title, IconUserPlus } from 'twenty-ui'; import { CalendarChannelVisibility } from '~/generated-metadata/graphql'; import { t } from '@lingui/core/macro'; +import { Card } from 'twenty-ui/layout'; +import { H2Title, IconUserPlus } from 'twenty-ui/display'; const StyledDetailsContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx index 50a6fc76b..14898148c 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx @@ -6,12 +6,12 @@ import styled from '@emotion/styled'; import { Section } from '@react-email/components'; import { addMinutes, endOfDay, min, startOfDay } from 'date-fns'; import { useRecoilValue } from 'recoil'; -import { H2Title } from 'twenty-ui'; import { CalendarChannelVisibility, TimelineCalendarEvent, } from '~/generated/graphql'; import { t } from '@lingui/core/macro'; +import { H2Title } from 'twenty-ui/display'; const StyledGeneralContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx index 9eeb6a532..bc4ae82f1 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx @@ -1,5 +1,3 @@ -import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui'; - import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; import { SettingsPath } from '@/types/SettingsPath'; @@ -8,6 +6,7 @@ import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/a import { useNavigateSettings } from '~/hooks/useNavigateSettings'; import { SettingsListCard } from '../../components/SettingsListCard'; import { useLingui } from '@lingui/react/macro'; +import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui/display'; const ProviderIcons: { [k: string]: IconComponent } = { google: IconGoogle, diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx index 7903da750..3b7400320 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx @@ -2,9 +2,9 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu'; import { SyncStatus } from '@/settings/accounts/constants/SyncStatus'; import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus'; -import { Status } from 'twenty-ui'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; +import { Status } from 'twenty-ui/display'; const StyledRowRightContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx index cf0760802..e2b36ba6d 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx @@ -6,15 +6,10 @@ import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAut import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; -import { - Button, - Card, - CardContent, - CardHeader, - IconGoogle, - IconMicrosoft, -} from 'twenty-ui'; import { ConnectedAccountProvider } from 'twenty-shared/types'; +import { Button } from 'twenty-ui/input'; +import { Card, CardContent, CardHeader } from 'twenty-ui/layout'; +import { IconGoogle, IconMicrosoft } from 'twenty-ui/display'; const StyledHeader = styled(CardHeader)` align-items: center; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx index e3aac7de8..14be299f3 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { Card, H2Title, IconBriefcase, IconUsers, Section } from 'twenty-ui'; import { MessageChannel, @@ -12,6 +11,8 @@ import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/compo import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle'; import { MessageChannelVisibility } from '~/generated-metadata/graphql'; import { t } from '@lingui/core/macro'; +import { Card, Section } from 'twenty-ui/layout'; +import { H2Title, IconBriefcase, IconUsers } from 'twenty-ui/display'; type SettingsAccountsMessageChannelDetailsProps = { messageChannel: Pick< diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx index 8d2080ccc..1961dbe9e 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx @@ -2,8 +2,8 @@ import styled from '@emotion/styled'; import { MessageDescriptor } from '@lingui/core'; import { Trans } from '@lingui/react'; import { ReactNode } from 'react'; - -import { Card, CardContent, Radio } from 'twenty-ui'; +import { Card, CardContent } from 'twenty-ui/layout'; +import { Radio } from 'twenty-ui/input'; type SettingsAccountsRadioSettingsCardProps