chore: setup twenty-ui absolute path alias (#4732)

Split from https://github.com/twentyhq/twenty/pull/4518

- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx

@@ -1,12 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { MenuItem } from 'tsup.ui.index';
 import { IconChevronDown } 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';
 import { ActionBarEntry } from '@/ui/navigation/action-bar/types/ActionBarEntry';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
 type ActionBarItemProps = {

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

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { Tag } from 'tsup.ui.index';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Tag } from '@/ui/display/tag/components/Tag';
 import { Checkbox } from '@/ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';

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

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
-import { Tag } from 'tsup.ui.index';
 import { IconCheck } from 'twenty-ui';
 
+import { Tag } from '@/ui/display/tag/components/Tag';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx

@@ -23,7 +23,9 @@ export const Default: Story = {
     LeftIcon: IconBell,
     accent: 'default',
     iconButtons: [
+      // eslint-disable-next-line no-console
       { Icon: IconBell, onClick: () => console.log('Clicked') },
+      // eslint-disable-next-line no-console
       { Icon: IconBell, onClick: () => console.log('Clicked') },
     ],
   },
@@ -85,11 +87,13 @@ export const Catalog: CatalogStory<Story, typeof MenuItem> = {
                     {
                       Icon: IconBell,
                       onClick: () =>
+                        // eslint-disable-next-line no-console
                         console.log('Clicked on first icon button'),
                     },
                     {
                       Icon: IconBell,
                       onClick: () =>
+                        // eslint-disable-next-line no-console
                         console.log('Clicked on second icon button'),
                     },
                   ],

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx

@@ -24,7 +24,9 @@ export const Default: Story = {
   args: {
     LeftIcon: IconBell,
     accent: 'default',
+    // eslint-disable-next-line no-console
     iconButtons: [{ Icon: IconMinus, onClick: () => console.log('Clicked') }],
+    // eslint-disable-next-line no-console
     onClick: () => console.log('Clicked'),
     text: 'Menu item draggable',
     isDragDisabled: false,
@@ -86,6 +88,7 @@ export const Catalog: Story = {
                     {
                       Icon: IconMinus,
                       onClick: () =>
+                        // eslint-disable-next-line no-console
                         console.log('Clicked on minus icon button'),
                     },
                   ],

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

@@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useSetRecoilState } from 'recoil';
+import { Pill } from 'twenty-ui';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
@@ -85,18 +86,6 @@ const StyledItemLabel = styled.div`
   white-space: nowrap;
 `;
 
-const StyledSoonPill = styled.div`
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.transparent.light};
-  border-radius: 50px;
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.xs};
-  height: 16px;
-  justify-content: center;
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-`;
-
 const StyledItemCount = styled.div`
   align-items: center;
   background-color: ${({ theme }) => theme.color.blue};
@@ -168,7 +157,7 @@ export const NavigationDrawerItem = ({
     >
       {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />}
       <StyledItemLabel>{label}</StyledItemLabel>
-      {soon && <StyledSoonPill>Soon</StyledSoonPill>}
+      {soon && <Pill label="Soon" />}
       {!!count && <StyledItemCount>{count}</StyledItemCount>}
       {keyboard && (
         <StyledKeyBoardShortcut className="keyboard-shortcuts">