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

Split from #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 <[email protected]>
twentyhq · Apr 4, 2024 · c534929 · c534929
1 parent 41960f3
commit c534929
Show file tree

Hide file tree

Showing 41 changed files with 403 additions and 591 deletions.
diff --git 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)$'],
         ],
       },

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

diff --git 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": "[email protected]",
   "resolutions": {
     "graphql": "16.8.0",
-    "type-fest": "4.10.1"
+    "type-fest": "4.10.1",
+    "typescript": "5.3.3"
   },
   "version": "0.2.1",
   "scripts": {

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

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

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

diff --git 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;
diff --git a/packages/twenty-front/src/setupTests.ts → packages/twenty-front/setupTests.ts b/packages/twenty-front/src/setupTests.ts → packages/twenty-front/setupTests.ts
diff --git 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

diff --git a/...ges/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx b/...ges/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';
 

diff --git a/...ages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/...ages/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'),
           },
         ]);

diff --git 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,

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

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/...ules/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 = '';

diff --git a/...cord/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/...cord/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();

diff --git a/...c/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx b/...c/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 = () => {

diff --git a/...ject-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx b/...ject-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`

diff --git a/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/...cord/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)<{

diff --git a/...ront/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx b/...ront/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;

diff --git a/...s/twenty-front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx b/...s/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: {

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

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

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

diff --git a/...nty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx b/...nty-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'),
                     },
                   ],

diff --git a/.../src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/.../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'),
                     },
                   ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -146,6 +146,7 @@ describe('useFavorites', () => { @@
           };
           const responderProvided: ResponderProvided = {
+            // eslint-disable-next-line no-console
             announce: (message: string) => console.log(message),
           };
@@ Expand Down @@