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 <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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)};

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:

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 = {

packages/twenty-front/src/modules/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';

packages/twenty-front/src/modules/object-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';
 

packages/twenty-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;

packages/twenty-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<

packages/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`

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx

@@ -1,4 +1,3 @@
-import { Toggle } from '@/ui/input/components/Toggle';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { createPortal } from 'react-dom';
@@ -6,6 +5,7 @@ import {
   AppTooltip,
   IconComponent,
   IconInfoCircle,
+  Toggle,
   TooltipDelay,
 } from 'twenty-ui';
 

packages/twenty-front/src/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';
 

packages/twenty-front/src/modules/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 = ({

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -1,5 +1,10 @@
 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';
@@ -7,7 +12,6 @@ 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 = {

packages/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 { IconLink, Toggle } from 'twenty-ui';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`
   margin-left: auto;

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 = () => {

packages/twenty-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';

packages/twenty-front/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';

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) => {

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';
 

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -1,10 +1,5 @@
 import { isNonEmptyString } from '@sniptt/guards';
-
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
-import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
-import {
-  LinkType,
-  SocialLink,
-} from '@/ui/navigation/link/components/SocialLink';
 
 type LinkDisplayProps = {
   value?: { url: string; label?: string };

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';

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 = {

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';

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)`

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;

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>;
 

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -1,7 +1,6 @@
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { IconExternalLink, UndecoratedLink } from 'twenty-ui';
-import { IconExternalLink } from 'twenty-ui';
 
 export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => {
   const { closeRightDrawer } = useRightDrawer();

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx

@@ -1,6 +1,4 @@
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, Toggle, ToggleSize } from 'twenty-ui';
-
-import { Toggle, ToggleSize } from '@/ui/input/components/Toggle';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -1,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconX } from 'twenty-ui';
+import { IconX, UndecoratedLink } from 'twenty-ui';
 
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import {
+  GithubVersionLink,
   IconAt,
   IconBell,
   IconBuildingSkyscraper,
@@ -18,18 +19,17 @@ import {
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { CurrentWorkspaceMemberFavorites } from '@/favorites/components/CurrentWorkspaceMemberFavorites';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import jsonPage from '../../../../../../../package.json';
 import { NavigationDrawer } from '../NavigationDrawer';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
 import { NavigationDrawerSection } from '../NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
-
 const meta: Meta<typeof NavigationDrawer> = {
   title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
   component: NavigationDrawer,
@@ -148,6 +148,6 @@ export const Settings: Story = {
         </NavigationDrawerSection>
       </>
     ),
-    footer: <GithubVersionLink />,
+    footer: <GithubVersionLink version={jsonPage.version} />,
   },
 };

packages/twenty-front/src/pages/auth/Authorize.tsx

@@ -4,7 +4,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { UndecoratedLink } from 'twenty-ui';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/pages/not-found/NotFound.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import {
   AnimatedPlaceholder,
@@ -11,6 +11,7 @@ import {
   AnimatedPlaceholderErrorContainer,
   AnimatedPlaceholderErrorSubTitle,
   AnimatedPlaceholderErrorTitle,
+  UndecoratedLink,
 } from 'twenty-ui';
 
 const StyledBackDrop = styled.div`

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { isNonEmptyString, isNumber } from '@sniptt/guards';
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -15,8 +15,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { CardPicker } from '@/ui/input/components/CardPicker';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
+import { ActionLink, CAL_LINK } from 'twenty-ui';
-import { CAL_LINK } from '@/ui/navigation/link/constants/Cal';
 import {
   ProductPriceEntity,
   SubscriptionInterval,

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconCheck, RGBA } from 'twenty-ui';
+import { IconCheck, RGBA, UndecoratedLink } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 import { OnboardingStatus } from '~/generated/graphql';
 

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconGoogle } from 'twenty-ui';
+import { ActionLink, IconGoogle } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
@@ -14,7 +14,6 @@ import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerG
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import {
   CalendarChannelVisibility,

packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx

@@ -1,4 +1,4 @@
-import { H2Title } from 'twenty-ui';
+import { GithubVersionLink, H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
@@ -9,8 +9,7 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
+import packageJson from '../../../package.json';
-
 export const SettingsWorkspace = () => (
   <SubMenuTopBarContainer
     title="General"
@@ -42,7 +41,7 @@ export const SettingsWorkspace = () => (
         <DeleteWorkspace />
       </Section>
       <Section>
-        <GithubVersionLink />
+        <GithubVersionLink version={packageJson.version} />
       </Section>
     </SettingsPageContainer>
   </SubMenuTopBarContainer>

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx

@@ -7,13 +7,12 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { H2Title, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus, UndecoratedLink } from 'twenty-ui';
 import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
 import { SettingsObjectIndexTable } from '~/pages/settings/data-model/SettingsObjectIndexTable';
 

packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx

@@ -1,6 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { H2Title, IconChevronRight, IconPlus, IconSearch } from 'twenty-ui';
+import {
+  H2Title,
+  IconChevronRight,
+  IconPlus,
+  IconSearch,
+  UndecoratedLink,
+} from 'twenty-ui';
 
 import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -26,7 +32,6 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useMemo, useState } from 'react';
 import { SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata';

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx

@@ -4,8 +4,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { IconPlus, UndecoratedLink } from 'twenty-ui';
-import { IconPlus } from 'twenty-ui';
 
 export const SettingsServerlessFunctions = () => {
   return (

packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts

@@ -1,4 +1,4 @@
-import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+import { LinkType } from 'twenty-ui';
 import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
 
 describe('getDisplayValueByUrlType', () => {

packages/twenty-front/src/utils/checkUrlType.ts

@@ -1,5 +1,4 @@
-import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+import { LinkType } from 'twenty-ui';
-
 import { isDefined } from './isDefined';
 
 export const checkUrlType = (url: string) => {

packages/twenty-front/src/utils/getDisplayValueByUrlType.ts

@@ -1,5 +1,4 @@
-import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+import { LinkType } from 'twenty-ui';
-
 import { isDefined } from './isDefined';
 
 type getUrlDisplayValueByUrlTypeProps = {

packages/twenty-front/tsup.ui.index.tsx

@@ -26,13 +26,7 @@ export * from './src/modules/ui/input/components/RadioGroup';
 export * from './src/modules/ui/input/components/Select';
 export * from './src/modules/ui/input/components/TextArea';
 export * from './src/modules/ui/input/components/TextInput';
-export * from './src/modules/ui/input/components/Toggle';
 export * from './src/modules/ui/input/editor/components/BlockEditor';
-export * from './src/modules/ui/navigation/link/components/ActionLink';
-export * from './src/modules/ui/navigation/link/components/ContactLink';
-export * from './src/modules/ui/navigation/link/components/RawLink';
-export * from './src/modules/ui/navigation/link/components/RoundedLink';
-export * from './src/modules/ui/navigation/link/components/SocialLink';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItem';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemCommand';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemDraggable';
@@ -50,5 +44,3 @@ declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends ThemeType {}
 }
-
-

packages/twenty-ui/src/index.ts

@@ -1,6 +1,7 @@
 export * from './accessibility';
 export * from './components';
 export * from './display';
+export * from './input';
 export * from './layout';
 export * from './navigation';
 export * from './testing';

packages/twenty-ui/src/input/components/Toggle.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { VisibilityHiddenInput } from '@ui/accessibility';
 import { motion } from 'framer-motion';
-import { VisibilityHiddenInput } from 'twenty-ui';
 
 export type ToggleSize = 'small' | 'medium';
 

packages/twenty-ui/src/input/index.ts

@@ -0,0 +1 @@
+export * from './components/Toggle';

packages/twenty-ui/src/navigation/index.ts

@@ -1 +1,11 @@
 export * from './breadcrumb/components/Breadcrumb';
+export * from './link/components/ActionLink';
+export * from './link/components/AdvancedSettingsToggle';
+export * from './link/components/ContactLink';
+export * from './link/components/GithubVersionLink';
+export * from './link/components/RawLink';
+export * from './link/components/RoundedLink';
+export * from './link/components/SocialLink';
+export * from './link/components/UndecoratedLink';
+export * from './link/constants/Cal';
+export * from './link/constants/GithubLink';

packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -1,9 +1,8 @@
-import { Toggle } from '@/ui/input/components/Toggle';
-import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import styled from '@emotion/styled';
+import { IconTool } from '@ui/display';
+import { Toggle } from '@ui/input';
+import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
-import { useRecoilState } from 'recoil';
-import { IconTool, MAIN_COLORS } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -38,15 +37,19 @@ const StyledIconTool = styled(IconTool)`
   margin-right: ${({ theme }) => theme.spacing(0.5)};
 `;
 
-export const AdvancedSettingsToggle = () => {
+type AdvancedSettingsToggleProps = {
-  const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState(
+  isAdvancedModeEnabled: boolean;
-    isAdvancedModeEnabledState,
+  setIsAdvancedModeEnabled: (enabled: boolean) => void;
-  );
+};
-  const inputId = useId();
 
+export const AdvancedSettingsToggle = ({
+  isAdvancedModeEnabled,
+  setIsAdvancedModeEnabled,
+}: AdvancedSettingsToggleProps) => {
   const onChange = (newValue: boolean) => {
     setIsAdvancedModeEnabled(newValue);
   };
+  const inputId = useId();
 
   return (
     <StyledContainer>

packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx

@@ -1,18 +1,19 @@
 import { useTheme } from '@emotion/react';
-import { IconBrandGithub } from 'twenty-ui';
+import { IconBrandGithub } from '@ui/display';
-
+import { ActionLink } from '@ui/navigation/link/components/ActionLink';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
-
-import packageJson from '../../../../../../package.json';
 import { GITHUB_LINK } from '../constants/GithubLink';
 
-export const GithubVersionLink = () => {
+interface GithubVersionLinkProps {
+  version: string;
+}
+
+export const GithubVersionLink = ({ version }: GithubVersionLinkProps) => {
   const theme = useTheme();
 
   return (
     <ActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
       <IconBrandGithub size={theme.icon.size.md} />
-      {packageJson.version}
+      {version}
     </ActionLink>
   );
 };

packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
+import { FONT_COMMON, THEME_COMMON, ThemeContext } from '@ui/theme';
 import { MouseEvent, useContext } from 'react';
-import { FONT_COMMON, THEME_COMMON, ThemeContext } from 'twenty-ui';
 
 type RoundedLinkProps = {
   href: string;

packages/twenty-ui/src/navigation/link/components/SocialLink.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
+import { getDisplayValueByUrlType } from '@ui/utilities';
-
 import { RoundedLink } from './RoundedLink';
 
 export enum LinkType {

packages/twenty-ui/src/navigation/link/components/__stories__/ActionLink.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ActionLink } from '@ui/navigation/link/components/ActionLink';
-
+import { ComponentDecorator } from '@ui/testing';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 
 const meta: Meta<typeof ActionLink> = {
   title: 'UI/navigation/link/ActionLink',

packages/twenty-ui/src/navigation/link/components/__stories__/ContactLink.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-
 import { ContactLink } from '../ContactLink';
 
 const meta: Meta<typeof ContactLink> = {

packages/twenty-ui/src/navigation/link/components/__stories__/GithubVersionLink.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-
 import { GithubVersionLink } from '../GithubVersionLink';
 
 const meta: Meta<typeof GithubVersionLink> = {

packages/twenty-ui/src/navigation/link/components/__stories__/RawLink.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-
 import { RawLink } from '../RawLink';
 
 const meta: Meta<typeof RawLink> = {

packages/twenty-ui/src/navigation/link/components/__stories__/RoundedLink.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-
 import { RoundedLink } from '../RoundedLink';
 
 const meta: Meta<typeof RoundedLink> = {

packages/twenty-ui/src/navigation/link/components/__stories__/SocialLink.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-
 import { LinkType, SocialLink } from '../SocialLink';
 
 const meta: Meta<typeof SocialLink> = {

packages/twenty-ui/src/navigation/link/components/__stories__/UndecoratedLink.stories.tsx

@@ -1,9 +1,8 @@
 import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-
+import { UndecoratedLink } from '@ui/navigation/link/components/UndecoratedLink';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { ComponentWithRouterDecorator } from '@ui/testing';
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
 const meta: Meta<typeof UndecoratedLink> = {
   title: 'UI/navigation/link/UndecoratedLink',

packages/twenty-ui/src/navigation/link/components/index.ts

@@ -0,0 +1,8 @@
+export * from './ActionLink';
+export * from './AdvancedSettingsToggle';
+export * from './ContactLink';
+export * from './GithubVersionLink';
+export * from './RawLink';
+export * from './RoundedLink';
+export * from './SocialLink';
+export * from './UndecoratedLink';

packages/twenty-ui/src/navigation/link/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants/Cal';
+export * from './constants/GithubLink';

packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx

@@ -0,0 +1,82 @@
+import { Decorator } from '@storybook/react';
+import {
+  createMemoryRouter,
+  createRoutesFromElements,
+  Outlet,
+  Route,
+  RouterProvider,
+} from 'react-router-dom';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+interface StrictArgs {
+  [name: string]: unknown;
+}
+export type RouteParams = {
+  [param: string]: string;
+};
+
+export const isRouteParams = (obj: any): obj is RouteParams => {
+  if (typeof obj !== 'object' || obj === null) {
+    return false;
+  }
+
+  return Object.keys(obj).every((key) => typeof obj[key] === 'string');
+};
+
+export const computeLocation = (
+  routePath: string,
+  routeParams?: RouteParams,
+) => {
+  return {
+    pathname: routePath.replace(
+      /:(\w+)/g,
+      (paramName) => routeParams?.[paramName] ?? '',
+    ),
+  };
+};
+
+const Providers = () => (
+  <ComponentStorybookLayout>
+    <Outlet />
+  </ComponentStorybookLayout>
+);
+
+const createRouter = ({
+  Story,
+  args,
+  initialEntries,
+  initialIndex,
+}: {
+  Story: () => JSX.Element;
+  args: StrictArgs;
+  initialEntries?: {
+    pathname: string;
+  }[];
+  initialIndex?: number;
+}) =>
+  createMemoryRouter(
+    createRoutesFromElements(
+      <Route element={<Providers />}>
+        <Route path={(args.routePath as string) ?? '*'} element={<Story />} />
+      </Route>,
+    ),
+    { initialEntries, initialIndex },
+  );
+
+export const ComponentWithRouterDecorator: Decorator = (Story, { args }) => {
+  return (
+    <RouterProvider
+      router={createRouter({
+        Story,
+        args,
+        initialEntries:
+          args.routePath &&
+          typeof args.routePath === 'string' &&
+          (args.routeParams === undefined || isRouteParams(args.routeParams))
+            ? [computeLocation(args.routePath, args.routeParams)]
+            : [{ pathname: '/' }],
+      })}
+    />
+  );
+};

packages/twenty-ui/src/testing/index.ts

@@ -1,6 +1,7 @@
 export * from './ComponentStorybookLayout';
 export * from './decorators/CatalogDecorator';
 export * from './decorators/ComponentDecorator';
+export * from './decorators/ComponentWithRouterDecorator';
 export * from './decorators/RouterDecorator';
 export * from './mocks/avatarUrlMock';
 export * from './types/CatalogStory';

packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts

@@ -0,0 +1,34 @@
+import { LinkType } from '@ui/navigation/link';
+import { isDefined } from './isDefined';
+
+type getUrlDisplayValueByUrlTypeProps = {
+  type: LinkType;
+  href: string;
+};
+
+export const getDisplayValueByUrlType = ({
+  type,
+  href,
+}: getUrlDisplayValueByUrlTypeProps) => {
+  if (type === 'linkedin') {
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company|school)\/(.*)/,
+    );
+    if (isDefined(matches?.[1])) {
+      return decodeURIComponent(matches?.[1]);
+    } else {
+      return 'LinkedIn';
+    }
+  }
+
+  if (type === 'twitter') {
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
+    );
+    if (isDefined(matches?.[1])) {
+      return `@${matches?.[1]}`;
+    } else {
+      return '@twitter';
+    }
+  }
+};

packages/twenty-ui/src/utilities/index.ts

@@ -1,6 +1,7 @@
 export * from './color/utils/stringToHslColor';
+export * from './getDisplayValueByUrlType';
 export * from './image/getImageAbsoluteURI';
 export * from './isDefined';
+export * from './screen-size/hooks/useScreenSize';
 export * from './state/utils/createState';
 export * from './types/Nullable';
-export * from './screen-size/hooks/useScreenSize';

packages/twenty-website/src/content/twenty-ui/input/toggle.mdx

@@ -7,7 +7,7 @@ image: /images/user-guide/table-views/table.png
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { Toggle } from "@/ui/input/components/Toggle";
+<SandpackEditor content={`import { Toggle } from "twenty-ui";
 
 export const MyComponent = () => {
   return (

packages/twenty-website/src/content/twenty-ui/navigation/links.mdx

@@ -13,7 +13,7 @@ A stylized link component for displaying contact information.
 
 <SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
 
-import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
+import { ContactLink } from 'twenty-ui';
 
 export const MyComponent = () => {
   const handleLinkClick = (event) => {
@@ -56,7 +56,7 @@ A stylized link component for displaying links.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { RawLink } from "@/ui/navigation/link/components/RawLink";
+<SandpackEditor content={`import { RawLink } from "twenty-ui";
 import { BrowserRouter as Router } from "react-router-dom";
 
 export const MyComponent = () => {
@@ -97,7 +97,7 @@ A rounded-styled link with a Chip component for links.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { RoundedLink } from "@/ui/navigation/link/components/RoundedLink";
+<SandpackEditor content={`import { RoundedLink } from "twenty-ui";
 import { BrowserRouter as Router } from "react-router-dom";
 
 export const MyComponent = () => {
@@ -134,7 +134,7 @@ Stylized social links, with support for various social link types, such as URLs,
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { SocialLink } from "@/ui/navigation/link/components/SocialLink";
+<SandpackEditor content={`import { SocialLink } from "twenty-ui";
 import { BrowserRouter as Router } from "react-router-dom";
 
 export const MyComponent = () => {