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>
2025-10-30 12:22:29 +00:00 · 2024-04-04 15:38:01 +02:00
parent 41960f3593
commit c5349291c8
41 changed files with 406 additions and 594 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -48,11 +48,16 @@ module.exports = {
      'error',
      {
        groups: [
+          // Packages
          ['^react', '^@?\\w'],
-          ['^(@|~|src)(/.*|$)'],
+          // Internal modules
+          ['^(@|~|src|@ui)(/.*|$)'],
+          // Side effect imports
          ['^\\u0000'],
+          // Relative imports
          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // CSS imports
          ['^.+\\.?(css)$'],
        ],
      },
--- a/nx.json
+++ b/nx.json
@@ -19,6 +19,19 @@
      "cache": true,
      "dependsOn": ["^build"]
    },
+    "storybook:build": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
+    },
+    "storybook:dev": {
+      "cache": true,
+      "dependsOn": ["^build"]
+    },
    "@nx/jest:jest": {
      "cache": true,
      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"],
@@ -48,15 +61,6 @@
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": ["default", "^default"]
-    },
-    "storybook:build": {
-      "cache": true,
-      "inputs": [
-        "default",
-        "^default",
-        "{projectRoot}/.storybook/**/*",
-        "{projectRoot}/tsconfig.storybook.json"
-      ]
    }
  },
  "installation": {
@@ -65,10 +69,24 @@
  "generators": {
    "@nx/react": {
      "application": {
-        "babel": true
+        "babel": true,
+        "style": "@emotion/styled",
+        "linter": "eslint",
+        "bundler": "vite",
+        "compiler": "swc",
+        "unitTestRunner": "jest",
+        "projectNameAndRootFormat": "derived"
      },
      "library": {
-        "unitTestRunner": "none"
+        "style": "@emotion/styled",
+        "linter": "eslint",
+        "bundler": "vite",
+        "compiler": "swc",
+        "unitTestRunner": "jest",
+        "projectNameAndRootFormat": "derived"
+      },
+      "component": {
+        "style": "@emotion/styled"
      }
    }
  },
--- a/package.json
+++ b/package.json
@@ -303,10 +303,10 @@
    "ts-loader": "^9.2.3",
    "ts-node": "10.9.1",
    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "5.3.3",
    "vite": "^5.0.0",
    "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-dts": "~2.3.0",
+    "vite-plugin-dts": "3.8.1",
    "vite-plugin-svgr": "^4.2.0",
    "vitest": "1.4.0"
  },
@@ -320,7 +320,8 @@
  "packageManager": "yarn@4.0.2",
  "resolutions": {
    "graphql": "16.8.0",
-    "type-fest": "4.10.1"
+    "type-fest": "4.10.1",
+    "typescript": "5.3.3"
  },
  "version": "0.2.1",
  "scripts": {
--- a/packages/twenty-emails/package.json
+++ b/packages/twenty-emails/package.json
@@ -17,13 +17,6 @@
      "require": "./dist/index.js"
    }
  },
-  "devDependencies": {
-    "@nx/vite": "17.2.8",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "~2.3.0",
-    "vite-tsconfig-paths": "^4.2.1"
-  },
  "engines": {
    "node": "^18.17.1",
    "npm": "please-use-yarn",
--- a/packages/twenty-emails/vite.config.ts
+++ b/packages/twenty-emails/vite.config.ts
@@ -13,8 +13,7 @@ export default defineConfig({
    tsconfigPaths(),
    dts({
      entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
    }),
  ],

--- a/packages/twenty-front/.storybook/preview.ts
+++ b/packages/twenty-front/.storybook/preview.ts
@@ -21,6 +21,7 @@ initialize({
    }

    const requestBody = await request.json();
+    // eslint-disable-next-line no-console
    console.warn(`Unhandled ${request.method} request to ${request.url} 
      with payload ${JSON.stringify(requestBody)}\n
      This request should be mocked with MSW`);
--- a/packages/twenty-front/jest.config.ts
+++ b/packages/twenty-front/jest.config.ts
@@ -1,20 +1,30 @@
-export default {
+/* eslint-disable @nx/enforce-module-boundaries,import/no-relative-packages */
+import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
+
+import { compilerOptions as twentyUiCompilerOptions } from '../twenty-ui/tsconfig.json';
+
+import { compilerOptions } from './tsconfig.json';
+
+const jestConfig: JestConfigWithTsJest = {
  // to enable logs, comment out the following line
  silent: true,
-  setupFilesAfterEnv: ['./src/setupTests.ts'],
+  displayName: 'twenty-front',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['./setupTests.ts'],
  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['../../node_modules/'],
  transform: {
    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
  },
  moduleNameMapper: {
-    '~/(.+)': '<rootDir>/src/$1',
-    '@/(.+)': '<rootDir>/src/modules/$1',
-    'twenty-ui': '<rootDir>/../twenty-ui/src/index.ts',
-    '@testing/(.+)': '<rootDir>/src/testing/$1',
+    ...pathsToModuleNameMapper(compilerOptions.paths),
+    // Include internal library aliases, so there is no need to build the library before tests.
+    ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths),
    '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
      '<rootDir>/__mocks__/imageMock.js',
    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  coverageThreshold: {
    global: {
@@ -41,5 +51,7 @@ export default {
    '__stories__/*',
    'display/icon/index.ts',
  ],
-  // coverageDirectory: '<rootDir>/coverage/',
+  coverageDirectory: './coverage',
 };
+
+export default jestConfig;
--- a/packages/twenty-front/src/setupTests.ts
+++ b/packages/twenty-front/src/setupTests.ts
--- a/packages/twenty-front/src/modules/activities/files/utils/tests/downloadFile.test.ts
+++ b/packages/twenty-front/src/modules/activities/files/utils/tests/downloadFile.test.ts
@@ -28,7 +28,7 @@ describe.skip('downloadFile', () => {
    const link = document.querySelector(
      'a[href="mock-url"][download="file.pdf"]',
    );
-    console.log(document.body.innerHTML, link);
+
    expect(link).not.toBeNull();
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
@@ -1,9 +1,10 @@
 import { useSetRecoilState } from 'recoil';
-import { Button, ButtonGroup } from 'tsup.ui.index';
 import { IconCheckbox, IconNotes, IconPaperclip } from 'twenty-ui';

 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { Button } from '@/ui/input/button/components/Button';
+import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
 import { TAB_LIST_COMPONENT_ID } from '@/ui/layout/show-page/components/ShowPageRightContainer';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';

--- 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
@@ -46,6 +46,7 @@ const meta: Meta<typeof CommandMenu> = {
            label: 'Create Task',
            type: CommandType.Create,
            Icon: IconCheckbox,
+            // eslint-disable-next-line no-console
            onCommandClick: () => console.log('create task click'),
          },
          {
@@ -54,6 +55,7 @@ const meta: Meta<typeof CommandMenu> = {
            label: 'Create Note',
            type: CommandType.Create,
            Icon: IconNotes,
+            // eslint-disable-next-line no-console
            onCommandClick: () => console.log('create note click'),
          },
        ]);
--- a/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
@@ -1,7 +1,7 @@
 import { FallbackProps } from 'react-error-boundary';
-import { Button } from 'tsup.ui.index';
 import { IconRefresh } from 'twenty-ui';

+import { Button } from '@/ui/input/button/components/Button';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
  AnimatedPlaceholderEmptyContainer,
--- a/packages/twenty-front/src/modules/favorites/hooks/tests/useFavorites.test.tsx
+++ b/packages/twenty-front/src/modules/favorites/hooks/tests/useFavorites.test.tsx
@@ -146,6 +146,7 @@ describe('useFavorites', () => {
      };

      const responderProvided: ResponderProvided = {
+        // eslint-disable-next-line no-console
        announce: (message: string) => console.log(message),
      };

--- 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
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { MenuItem, MenuItemMultiSelect } from 'tsup.ui.index';

 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemMultiSelect } from '@/ui/navigation/menu-item/components/MenuItemMultiSelect';
 import { isDefined } from '~/utils/isDefined';

 export const EMPTY_FILTER_VALUE = '';
--- 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,9 +1,9 @@
-import { MenuItem } from 'tsup.ui.index';
 import { IconFilterOff } from 'twenty-ui';

 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';

 export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
  const { emptyFilterButKeepDefinition } = useFilterDropdown();
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/tests/useFilterDropdown.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/tests/useFilterDropdown.test.tsx
@@ -351,6 +351,7 @@ describe('useFilterDropdown', () => {
  });

  it('should handle scopeId undefined on initial values', () => {
+    // eslint-disable-next-line no-console
    console.error = jest.fn();

    const renderFunction = () => {
--- 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
@@ -1,10 +1,10 @@
 import { useCallback, useContext, useRef } from 'react';
 import styled from '@emotion/styled';
-import { MenuItem } from 'tsup.ui.index';

 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';

 const StyledMenuContainer = styled.div`
--- 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,7 +2,6 @@ import { useCallback, useContext } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { LightIconButton, MenuItem } from 'tsup.ui.index';
 import {
  IconChevronDown,
  IconDotsVertical,
@@ -32,10 +31,12 @@ import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRe
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 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 { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';

 const StyledListItem = styled(RecordDetailRecordsListItem)<{
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@@ -1,7 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { LightIconButton } from 'tsup.ui.index';
 import { IconChevronRight } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@@ -16,6 +15,7 @@ import {
 } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';

 const StyledRowRightContainer = styled.div`
  align-items: center;
--- a/packages/twenty-front/src/modules/ui/layout/draggable-list/stories/DraggableList.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/stories/DraggableList.stories.tsx
@@ -12,6 +12,7 @@ const meta: Meta<typeof DraggableList> = {
  component: DraggableList,
  decorators: [ComponentDecorator],
  parameters: {
+    // eslint-disable-next-line no-console
    onDragEnd: () => console.log('dragged'),
  },
  argTypes: {
--- a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx
+++ b/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 = {
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
+++ b/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';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx
+++ b/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';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/stories/MenuItem.stories.tsx
+++ b/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'),
                    },
                  ],
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/stories/MenuItemDraggable.stories.tsx
+++ b/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'),
                    },
                  ],
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/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">
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useAvailableScopeId.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useAvailableScopeId.test.tsx
@@ -52,6 +52,7 @@ describe('useAvailableScopeIdOrThrow', () => {
  });

  it('should throw an error if no scopeId is provided and scopeId is undefined in the context', () => {
+    // eslint-disable-next-line no-console
    console.error = jest.fn();

    const renderFunction = () =>
--- a/packages/twenty-front/src/nx-react.d.ts
+++ b/packages/twenty-front/src/nx-react.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="@nx/react/typings/cssmodule.d.ts" />
+/// <reference types="@nx/react/typings/image.d.ts" />
+/// <reference types="@nx/react/typings/styled-jsx.d.ts" />
--- a/packages/twenty-front/src/pages/auth/Authorize.tsx
+++ b/packages/twenty-front/src/pages/auth/Authorize.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { MainButton } from 'tsup.ui.index';

 import { AppPath } from '@/types/AppPath';
+import { MainButton } from '@/ui/input/button/components/MainButton';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

--- a/packages/twenty-front/tsconfig.app.json
+++ b/packages/twenty-front/tsconfig.app.json
@@ -1,16 +1,17 @@
 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../dist/out-tsc"
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
  },
  "exclude": [
+    "**/__mocks__/**/*",
    "**/*.spec.ts",
-    "**/*.test.ts",
    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "jest.config.ts",
-    "tsup.config.ts",
-    "tsup.ui.index.tsx"
+    "**/*.stories.ts",
+    "**/*.stories.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx"
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
--- a/packages/twenty-front/tsconfig.json
+++ b/packages/twenty-front/tsconfig.json
@@ -7,14 +7,6 @@
    "skipLibCheck": true,
    "allowJs": true,
    "esModuleInterop": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/modules/*"],
-      "~/*": ["src/*"],
-      "twenty-ui": ["../twenty-ui/src/index.ts"]
-    },
-
-    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
@@ -22,13 +14,16 @@
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
-
-    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["packages/twenty-front/src/modules/*"],
+      "~/*": ["packages/twenty-front/src/*"],
+      "twenty-ui": ["packages/twenty-ui/src/index.ts"]
+    }
  },
  "files": [],
  "include": [],
@@ -39,5 +34,6 @@
    {
      "path": "./tsconfig.spec.json"
    }
-  ]
+  ],
+  "extends": "../../tsconfig.base.json"
 }
--- a/packages/twenty-front/tsconfig.spec.json
+++ b/packages/twenty-front/tsconfig.spec.json
@@ -5,13 +5,19 @@
    "types": ["jest", "node"]
  },
  "include": [
-    "vite.config.ts",
-    "jest.config.ts",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.spec.ts",
-    "**/*.d.ts",
    ".storybook/**/*",
-    "**/*.stories.tsx"
+    "**/__mocks__/**/*",
+    "jest.config.ts",
+    "setupTests.ts",
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.tsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "tsup.config.ts",
+    "tsup.ui.index.tsx",
+    "vite.config.ts"
  ]
 }
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -31,24 +31,34 @@ export default defineConfig(({ command, mode }) => {
    };
  }

-  const plugins = [
-    react({ jsxImportSource: '@emotion/react' }),
-    tsconfigPaths(),
-    svgr(),
-    checker(checkers),
-  ];
-
  return {
-    // base: ,
-    envPrefix: 'REACT_APP_',
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-front',
+
+    server: {
+      port: 3001,
+      host: 'localhost',
+    },
+
+    plugins: [
+      react({ jsxImportSource: '@emotion/react' }),
+      tsconfigPaths({
+        projects: [
+          'tsconfig.json',
+          // Include internal library aliases in development mode, so hot reload is enabled for libraries.
+          mode === 'development' ? '../twenty-ui/tsconfig.json' : undefined,
+        ].filter(Boolean) as string[],
+      }),
+      svgr(),
+      checker(checkers),
+    ],
+
    build: {
      outDir: 'build',
    },
-    plugins,
-    server: {
-      // open: true,
-      port: 3001,
-    },
+
+    envPrefix: 'REACT_APP_',
+
    define: {
      'process.env': {
        REACT_APP_SERVER_BASE_URL,
--- a/packages/twenty-server/package.json
+++ b/packages/twenty-server/package.json
@@ -46,7 +46,7 @@
    "@types/lodash.upperfirst": "^4.3.7",
    "@types/react": "^18.2.39",
    "rimraf": "^5.0.5",
-    "typescript": "^5.3.3"
+    "typescript": "5.3.3"
  },
  "engines": {
    "node": "^18.17.1",
--- a/packages/twenty-ui/jest.config.ts
+++ b/packages/twenty-ui/jest.config.ts
@@ -1,9 +1,8 @@
-import { JestConfigWithTsJest } from 'ts-jest';
-
-const jestConfig: JestConfigWithTsJest = {
+export default {
  displayName: 'twenty-ui',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['./setupTests.ts'],
+  testEnvironment: 'jsdom',
  transformIgnorePatterns: ['../../node_modules/'],
  transform: {
    '^.+\\.[tj]sx?$': [
@@ -17,7 +16,7 @@ const jestConfig: JestConfigWithTsJest = {
    ],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/packages/twenty-ui',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  coverageDirectory: './coverage',
 };

-export default jestConfig;
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -1,12 +1,16 @@
 {
  "name": "twenty-ui",
  "version": "0.0.1",
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "typings": "./index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
  "scripts": {
-    "nx": "NX_DEFAULT_PROJECT=twenty-ui node ../../node_modules/nx/bin/nx.js",
-    "start": "storybook dev -p 6006",
-    "build": "npx vite build"
+    "build": "vite build"
  }
 }
--- a/packages/twenty-ui/tsconfig.json
+++ b/packages/twenty-ui/tsconfig.json
@@ -1,15 +1,16 @@
 {
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
-    "module": "commonjs",
-    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
    "strict": true,
-    "noImplicitOverride": true,
    "esModuleInterop": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "react-jsx"
+    "noEmit": true,
+    "types": ["node"],
+    "paths": {
+      "@ui/*": ["packages/twenty-ui/src/*"]
+    }
  },
  "files": [],
  "include": [],
--- a/packages/twenty-ui/tsconfig.lib.json
+++ b/packages/twenty-ui/tsconfig.lib.json
@@ -1,8 +1,7 @@
 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "outDir": "../../dist/out-tsc"
  },
  "exclude": [
    "**/*.spec.ts",
--- a/packages/twenty-ui/tsconfig.spec.json
+++ b/packages/twenty-ui/tsconfig.spec.json
@@ -7,11 +7,10 @@
  },
  "include": [
    "jest.config.ts",
+    "setupTests.ts",
    "src/**/*.d.ts",
    "src/**/*.spec.ts",
-    "src/**/*.spec.tsx",
    "src/**/*.test.ts",
-    "src/**/*.test.tsx",
    "vite.config.ts"
  ]
 }
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -3,6 +3,7 @@ import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import { defineConfig } from 'vite';
+import checker from 'vite-plugin-checker';
 import dts from 'vite-plugin-dts';

 export default defineConfig({
@@ -14,16 +15,15 @@ export default defineConfig({
    nxViteTsPaths(),
    dts({
      entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+    checker({
+      typescript: {
+        tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      },
    }),
  ],

-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
  // Configuration for building your library.
  // See: https://vitejs.dev/guide/build.html#library-mode
  build: {
--- a/yarn.lock
+++ b/yarn.lock