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>

.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)$'],
         ],
       },

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"
       }
     }
   },

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": {

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",

packages/twenty-emails/vite.config.ts

@@ -13,8 +13,7 @@ export default defineConfig({
     tsconfigPaths(),
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
     }),
   ],
 

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

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',
+    ...pathsToModuleNameMapper(compilerOptions.paths),
-    '@/(.+)': '<rootDir>/src/modules/$1',
+    // Include internal library aliases, so there is no need to build the library before tests.
-    'twenty-ui': '<rootDir>/../twenty-ui/src/index.ts',
+    ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths),
-    '@testing/(.+)': '<rootDir>/src/testing/$1',
     '\\.(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;

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

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

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'),
           },
         ]);

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,

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

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

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

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

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`

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

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;

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

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

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

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" />

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

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",
+    "**/*.stories.ts",
-    "jest.config.ts",
+    "**/*.stories.tsx",
-    "tsup.config.ts",
+    "**/*.test.ts",
-    "tsup.ui.index.tsx"
+    "**/*.test.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

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"
 }

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"
   ]
 }

packages/twenty-front/vite.config.ts

@@ -31,24 +31,34 @@ export default defineConfig(({ command, mode }) => {
     };
   }
 
-  const plugins = [
+  return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-front',
+
+    server: {
+      port: 3001,
+      host: 'localhost',
+    },
+
+    plugins: [
       react({ jsxImportSource: '@emotion/react' }),
-    tsconfigPaths(),
+      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),
-  ];
+    ],
 
-  return {
-    // base: ,
-    envPrefix: 'REACT_APP_',
     build: {
       outDir: 'build',
     },
-    plugins,
+
-    server: {
+    envPrefix: 'REACT_APP_',
-      // open: true,
+
-      port: 3001,
-    },
     define: {
       'process.env': {
         REACT_APP_SERVER_BASE_URL,

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",

packages/twenty-ui/jest.config.ts

@@ -1,9 +1,8 @@
-import { JestConfigWithTsJest } from 'ts-jest';
+export default {
-
-const jestConfig: JestConfigWithTsJest = {
   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;

packages/twenty-ui/package.json

@@ -1,12 +1,16 @@
 {
   "name": "twenty-ui",
   "version": "0.0.1",
-  "main": "./index.js",
+  "type": "module",
-  "module": "./index.mjs",
+  "main": "./dist/index.js",
-  "typings": "./index.d.ts",
+  "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",
+    "build": "vite build"
-    "start": "storybook dev -p 6006",
-    "build": "npx vite build"
   }
 }

packages/twenty-ui/tsconfig.json

@@ -1,15 +1,16 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "commonjs",
+    "jsx": "react-jsx",
-    "forceConsistentCasingInFileNames": true,
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noImplicitOverride": true,
     "esModuleInterop": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noEmit": true,
-    "noImplicitReturns": true,
+    "types": ["node"],
-    "noFallthroughCasesInSwitch": true,
+    "paths": {
-    "jsx": "react-jsx"
+      "@ui/*": ["packages/twenty-ui/src/*"]
+    }
   },
   "files": [],
   "include": [],

packages/twenty-ui/tsconfig.lib.json

@@ -1,8 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../../dist/out-tsc"
-    "types": ["node"]
   },
   "exclude": [
     "**/*.spec.ts",

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"
   ]
 }

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'),
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+    }),
+    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: {