Migrate to twenty-ui - navigation/link (#7837)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7535](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7535). --- ### Description. Migrate link components to `twenty-ui` \ \ Fixes #7535 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Oct 22, 2024 · 4306444 · 4306444
1 parent 02c34d5
commit 4306444
Show file tree

Hide file tree

Showing 71 changed files with 262 additions and 154 deletions.
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { Controller } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconGoogle, IconMicrosoft, IconKey } from 'twenty-ui';
+import { ActionLink, IconGoogle, IconKey, IconMicrosoft } from 'twenty-ui';
 
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
 import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
@@ -14,15 +14,14 @@ import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
 import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
+import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { captchaProviderState } from '@/client-config/states/captchaProviderState';
 import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 import { isDefined } from '~/utils/isDefined';
-import { SignInUpStep } from '@/auth/states/signInUpStepState';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -1,4 +1,4 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
@@ -7,12 +7,12 @@ import {
   NavigationDrawer,
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
-
+import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
-import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle';
+import { AdvancedSettingsToggle } from 'twenty-ui';
 import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
 
 export type AppNavigationDrawerProps = {
@@ -25,12 +25,20 @@ export const AppNavigationDrawer = ({
   const isSettingsDrawer = useIsSettingsDrawer();
 
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState(
+    isAdvancedModeEnabledState,
+  );
 
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
     ? {
         title: 'Exit Settings',
         children: <SettingsNavigationDrawerItems />,
-        footer: <AdvancedSettingsToggle />,
+        footer: (
+          <AdvancedSettingsToggle
+            isAdvancedModeEnabled={isAdvancedModeEnabled}
+            setIsAdvancedModeEnabled={setIsAdvancedModeEnabled}
+          />
+        ),
       }
     : {
         logo:

diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
@@ -1,9 +1,8 @@
-import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
+import { AvatarChip, AvatarChipVariant, UndecoratedLink } from 'twenty-ui';
 
 import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MouseEvent } from 'react';
 
 export type RecordChipProps = {

diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -9,6 +9,7 @@ import {
   IconRotate2,
   IconSettings,
   IconTag,
+  UndecoratedLink,
 } from 'twenty-ui';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@@ -30,7 +31,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
 import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';

diff --git a/...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconSettings, useIcons } from 'twenty-ui';
+import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui';
 
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -12,7 +12,6 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 

diff --git a/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@@ -2,13 +2,12 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title } from 'twenty-ui';
+import { H2Title, Toggle } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
-import { Card } from '@/ui/layout/card/components/Card';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Toggle } from '@/ui/input/components/Toggle';
 
 const StyledDetailsContainer = styled.div`
   display: flex;

diff --git a/...-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/...-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title } from 'twenty-ui';
+import { H2Title, Toggle } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -9,11 +9,10 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
+import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
-import { Card } from '@/ui/layout/card/components/Card';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Toggle } from '@/ui/input/components/Toggle';
 
 type SettingsAccountsMessageChannelDetailsProps = {
   messageChannel: Pick<

diff --git a/...twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx b/...twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
@@ -4,13 +4,13 @@ import {
   IconCalendarEvent,
   IconMailCog,
   MOBILE_VIEWPORT,
+  UndecoratedLink,
 } from 'twenty-ui';
 
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Section } from '@/ui/layout/section/components/Section';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useTheme } from '@emotion/react';
 
 const StyledCardsContainer = styled.div`

diff --git a/.../src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx b/.../src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx
@@ -1,11 +1,11 @@
-import { Toggle } from '@/ui/input/components/Toggle';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { createPortal } from 'react-dom';
 import {
   AppTooltip,
   IconComponent,
   IconInfoCircle,
+  Toggle,
   TooltipDelay,
 } from 'twenty-ui';
 

diff --git a/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@@ -9,13 +9,12 @@ import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fiel
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { H2Title, IconSearch } from 'twenty-ui';
+import { H2Title, IconSearch, UndecoratedLink } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
 

diff --git a/...dules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx b/...dules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
+import { Toggle } from 'twenty-ui';
 
-import { Toggle } from '@/ui/input/components/Toggle';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 
 export const SettingsIntegrationRemoteTableSyncStatusToggle = ({

diff --git a/...tions/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/...tions/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
@@ -1,13 +1,17 @@
 import styled from '@emotion/styled';
-import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui';
+import {
+  IconDotsVertical,
+  IconPencil,
+  IconTrash,
+  UndecoratedLink,
+} from 'twenty-ui';
 
 import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
 import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {

diff --git a/...ges/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/...ges/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
@@ -1,13 +1,12 @@
-import { IconLink } from 'twenty-ui';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
-import { Toggle } from '@/ui/input/components/Toggle';
-import { useUpdateWorkspaceMutation } from '~/generated/graphql';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useRecoilState } from 'recoil';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { IconLink, Toggle } from 'twenty-ui';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`
   margin-left: auto;

diff --git a/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx b/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx
@@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Toggle } from '@/ui/input/components/Toggle';
+import { Toggle } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 export const ToggleImpersonate = () => {

diff --git a/...y-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/...y-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react';
 // @ts-expect-error Todo: remove usage of react-data-grid`
 import { RowsChangeData } from 'react-data-grid';
-import { IconTrash } from 'twenty-ui';
+import { IconTrash, Toggle } from 'twenty-ui';
 
 import { Heading } from '@/spreadsheet-import/components/Heading';
 import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
@@ -25,7 +25,6 @@ import {
 import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { Button } from '@/ui/input/button/components/Button';
-import { Toggle } from '@/ui/input/components/Toggle';
 import { isDefined } from '~/utils/isDefined';
 
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/...ont/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
@@ -2,13 +2,12 @@ import styled from '@emotion/styled';
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
-import { AppTooltip } from 'twenty-ui';
+import { AppTooltip, Toggle } from 'twenty-ui';
 
 import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import { Fields, ImportedStructuredRow } from '@/spreadsheet-import/types';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { Toggle } from '@/ui/input/components/Toggle';
 import { isDefined } from '~/utils/isDefined';
 
 import { ImportedStructuredRowMetadata } from '../types';

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
@@ -1,8 +1,8 @@
 import { MouseEvent } from 'react';
 
-import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
 import { isDefined } from '~/utils/isDefined';
 
+import { ContactLink } from 'twenty-ui';
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 const validateEmail = (email: string) => {

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx
@@ -1,9 +1,8 @@
 import { useMemo } from 'react';
-import { THEME_COMMON } from 'twenty-ui';
+import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
 import styled from '@emotion/styled';
 import { isDefined } from '~/utils/isDefined';
 

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
@@ -1,10 +1,5 @@
 import { isNonEmptyString } from '@sniptt/guards';
-
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
-import {
-  LinkType,
-  SocialLink,
-} from '@/ui/navigation/link/components/SocialLink';
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
 
 type LinkDisplayProps = {
   value?: { url: string; label?: string };

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
@@ -1,14 +1,9 @@
-import { useMemo } from 'react';
 import { styled } from '@linaria/react';
-import { THEME_COMMON } from 'twenty-ui';
+import { useMemo } from 'react';
+import { LinkType, RoundedLink, SocialLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
-import {
-  LinkType,
-  SocialLink,
-} from '@/ui/navigation/link/components/SocialLink';
 import { checkUrlType } from '~/utils/checkUrlType';
 import { isDefined } from '~/utils/isDefined';
 import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
@@ -1,7 +1,7 @@
 import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
 import { MouseEvent } from 'react';
+import { ContactLink } from 'twenty-ui';
 
-import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
 import { isDefined } from '~/utils/isDefined';
 
 type PhoneDisplayProps = {

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
-import { THEME_COMMON } from 'twenty-ui';
+import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
 
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { isDefined } from '~/utils/isDefined';

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx
@@ -1,13 +1,9 @@
-import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
+import { MouseEvent } from 'react';
 
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
-import {
-  LinkType,
-  SocialLink,
-} from '@/ui/navigation/link/components/SocialLink';
 import { checkUrlType } from '~/utils/checkUrlType';
 
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 const StyledRawLink = styled(RoundedLink)`

diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import React, { MouseEvent, useMemo, useRef, useState } from 'react';
+import { MouseEvent, useMemo, useRef, useState } from 'react';
 import { IconChevronDown, IconComponent } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -10,8 +10,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
-import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
+import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
 export type SelectOption<Value extends string | number | null> = {
   value: Value;

diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx
@@ -1,10 +1,9 @@
-import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
+import { useState } from 'react';
+import { ComponentDecorator, IconPlus } from 'twenty-ui';
 
 import { Select, SelectProps } from '../Select';
-import { IconPlus } from 'packages/twenty-ui';
 
 type RenderProps = SelectProps<string | number | null>;