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/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/Toggle.tsx

@@ -1,88 +0,0 @@
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { VisibilityHiddenInput } from 'twenty-ui';
-
-export type ToggleSize = 'small' | 'medium';
-
-type ContainerProps = {
-  isOn: boolean;
-  color?: string;
-  toggleSize: ToggleSize;
-  'data-disabled'?: boolean;
-};
-
-const StyledContainer = styled.label<ContainerProps>`
-  align-items: center;
-  background-color: ${({ theme, isOn, color }) =>
-    isOn ? (color ?? theme.color.blue) : theme.background.transparent.medium};
-  border-radius: 10px;
-  cursor: pointer;
-  display: flex;
-  height: ${({ toggleSize }) => (toggleSize === 'small' ? 16 : 20)}px;
-  transition: background-color 0.3s ease;
-  width: ${({ toggleSize }) => (toggleSize === 'small' ? 24 : 32)}px;
-  opacity: ${({ 'data-disabled': disabled }) => (disabled ? 0.5 : 1)};
-  pointer-events: ${({ 'data-disabled': disabled }) =>
-    disabled ? 'none' : 'auto'};
-`;
-
-const StyledCircle = styled(motion.span)<{
-  size: ToggleSize;
-}>`
-  display: block;
-  background-color: ${({ theme }) => theme.background.primary};
-  border-radius: 50%;
-  height: ${({ size }) => (size === 'small' ? 12 : 16)}px;
-  width: ${({ size }) => (size === 'small' ? 12 : 16)}px;
-`;
-
-export type ToggleProps = {
-  id?: string;
-  value?: boolean;
-  onChange?: (value: boolean, e?: React.MouseEvent<HTMLDivElement>) => void;
-  color?: string;
-  toggleSize?: ToggleSize;
-  className?: string;
-  disabled?: boolean;
-};
-
-export const Toggle = ({
-  id,
-  value = false,
-  onChange,
-  color,
-  toggleSize = 'medium',
-  className,
-  disabled,
-}: ToggleProps) => {
-  const circleVariants = {
-    on: { x: toggleSize === 'small' ? 10 : 14 },
-    off: { x: 2 },
-  };
-
-  return (
-    <StyledContainer
-      isOn={value}
-      color={color}
-      toggleSize={toggleSize}
-      className={className}
-      data-disabled={disabled}
-    >
-      <VisibilityHiddenInput
-        id={id}
-        type="checkbox"
-        checked={value}
-        disabled={disabled}
-        onChange={(event) => {
-          onChange?.(event.target.checked);
-        }}
-      />
-
-      <StyledCircle
-        animate={value ? 'on' : 'off'}
-        variants={circleVariants}
-        size={toggleSize}
-      />
-    </StyledContainer>
-  );
-};

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