added typechecking for all ts files (#6466)

Fixes: #6436 

Changes made: 

- Added typecheck step before twenty-ui build to check stories TS errors
- Added a tsconfig.dev.json to add stories and tests to typecheking when
in dev mode
- Added tsconfig.dev.json to storybook dev command of twenty-ui to
typecheck stories while developing
- Fixed twenty-ui stories that were broken

- Added a serve command to serve front build
- Fixed unit test from another PR

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

nx.json

@@ -32,7 +32,7 @@
     },
     "start": {
       "cache": true,
-      "dependsOn": ["^build"]
+      "dependsOn": ["^typecheck","^build"]
     },
     "lint": {
       "executor": "@nx/eslint:lint",

packages/twenty-front/project.json

@@ -10,6 +10,12 @@
         "outputPath": "{projectRoot}/build"
       }
     },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx serve -s {projectRoot}/build"
+      }
+    },
     "start": {
       "executor": "@nx/vite:dev-server",
       "options": {

packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx

@@ -15,6 +15,7 @@ const meta: Meta<typeof Status> = {
   component: Status,
   args: {
     text: 'Urgent',
+    weight: 'medium',
   },
 };
 

packages/twenty-front/src/utils/__tests__/title-utils.test.ts

@@ -9,10 +9,6 @@ describe('title-utils', () => {
     expect(getPageTitleFromPath('/invite/:workspaceInviteHash')).toBe('Invite');
     expect(getPageTitleFromPath('/create/workspace')).toBe('Create Workspace');
     expect(getPageTitleFromPath('/create/profile')).toBe('Create Profile');
-    expect(getPageTitleFromPath('/tasks')).toBe('Tasks');
-    expect(getPageTitleFromPath('/objects/opportunities')).toBe(
-      'Opportunities',
-    );
     expect(getPageTitleFromPath('/settings/objects/opportunities')).toBe(
       SettingsPageTitles.Objects,
     );

packages/twenty-front/tsconfig.dev.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

packages/twenty-front/tsconfig.json

@@ -32,7 +32,10 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.app.json"
+      "path": "./tsconfig.dev.json"
+    },
+    {
+      "path": "./tsconfig.build.json"
     },
     {
       "path": "./tsconfig.spec.json"
@@ -42,4 +45,4 @@
     }
   ],
   "extends": "../../tsconfig.base.json"
-}
+}

packages/twenty-front/vite.config.ts

@@ -19,9 +19,13 @@ export default defineConfig(({ command, mode }) => {
 
   const isBuildCommand = command === 'build';
 
+  const tsConfigPath = isBuildCommand
+    ? path.resolve(__dirname, './tsconfig.build.json')
+    : path.resolve(__dirname, './tsconfig.dev.json');
+
   const checkers: Checkers = {
     typescript: {
-      tsconfigPath: path.resolve(__dirname, './tsconfig.app.json'),
+      tsconfigPath: tsConfigPath,
     },
     overlay: false,
   };

packages/twenty-ui/.storybook/main.ts

@@ -1,4 +1,6 @@
 import { StorybookConfig } from '@storybook/react-vite';
+import * as path from 'path';
+import checker from 'vite-plugin-checker';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
@@ -16,6 +18,19 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  viteFinal: (config) => {
+    return {
+      ...config,
+      plugins: [
+        ...(config.plugins ?? []),
+        checker({
+          typescript: {
+            tsconfigPath: path.resolve(__dirname, '../tsconfig.dev.json'),
+          },
+        }),
+      ],
+    };
+  },
 };
 
 export default config;

packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx

@@ -13,10 +13,7 @@ const meta: Meta<typeof Banner> = {
       Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
     </Banner>
   ),
-  argTypes: {
-    as: { control: false },
-    theme: { control: false },
-  },
+  argTypes: {},
 };
 
 export default meta;

packages/twenty-ui/src/utilities/config/index.ts

@@ -25,6 +25,4 @@ const getDefaultUrl = () => {
 };
 
 export const REACT_APP_SERVER_BASE_URL =
-  window._env_?.REACT_APP_SERVER_BASE_URL ||
-  process.env.REACT_APP_SERVER_BASE_URL ||
-  getDefaultUrl();
+  window._env_?.REACT_APP_SERVER_BASE_URL || getDefaultUrl();

packages/twenty-ui/tsconfig.dev.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "jest.config.ts",
+    "setupTests.ts",
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.stories.tsx",
+    "src/**/*.tsx",
+    "src/**/*.ts",
+    "vite.config.ts"
+  ]
+}

packages/twenty-ui/tsconfig.json

@@ -17,7 +17,10 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.dev.json"
     },
     {
       "path": "./tsconfig.spec.json"

packages/twenty-ui/vite.config.ts

@@ -4,64 +4,78 @@ import wyw from '@wyw-in-js/vite';
 import * as path from 'path';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
-import dts from 'vite-plugin-dts';
+import dts, { PluginOptions } from 'vite-plugin-dts';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+import { UserPluginConfig } from 'vite-plugin-checker/dist/esm/types';
+
 // eslint-disable-next-line @nx/enforce-module-boundaries, import/no-relative-packages
 import packageJson from '../../package.json';
 
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/packages/twenty-ui',
+export default defineConfig(({ command }) => {
+  const isBuildCommand = command === 'build';
 
-  plugins: [
-    react({ jsxImportSource: '@emotion/react' }),
-    tsconfigPaths(),
-    svgr(),
-    dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-    }),
-    checker({
-      typescript: {
-        tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-      },
-    }),
-    wyw({
-      include: [
-        '**/OverflowingTextWithTooltip.tsx',
-        '**/Chip.tsx',
-        '**/Tag.tsx',
-        '**/Avatar.tsx',
-        '**/AvatarChip.tsx',
-      ],
-      babelOptions: {
-        presets: ['@babel/preset-typescript', '@babel/preset-react'],
-      },
-    }),
-  ],
+  const tsConfigPath = isBuildCommand
+    ? path.resolve(__dirname, './tsconfig.build.json')
+    : path.resolve(__dirname, './tsconfig.dev.json');
 
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    outDir: './dist',
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
+  const checkersConfig: UserPluginConfig = {
+    typescript: {
+      tsconfigPath: tsConfigPath,
     },
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'twenty-ui',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+  };
+
+  const dtsConfig: PluginOptions = {
+    entryRoot: 'src',
+    tsconfigPath: tsConfigPath,
+  };
+
+  return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-ui',
+
+    plugins: [
+      react({ jsxImportSource: '@emotion/react' }),
+      tsconfigPaths(),
+      svgr(),
+      dts(dtsConfig),
+      checker(checkersConfig),
+      wyw({
+        include: [
+          '**/OverflowingTextWithTooltip.tsx',
+          '**/Chip.tsx',
+          '**/Tag.tsx',
+          '**/Avatar.tsx',
+          '**/AvatarChip.tsx',
+        ],
+        babelOptions: {
+          presets: ['@babel/preset-typescript', '@babel/preset-react'],
+        },
+      }),
+    ],
+
+    // Configuration for building your library.
+    // See: https://vitejs.dev/guide/build.html#library-mode
+    build: {
+      outDir: './dist',
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+      lib: {
+        // Could also be a dictionary or array of multiple entry points.
+        entry: 'src/index.ts',
+        name: 'twenty-ui',
+        fileName: 'index',
+        // Change this to the formats you want to support.
+        // Don't forget to update your package.json as well.
+        formats: ['es', 'cjs'],
+      },
+      rollupOptions: {
+        // External packages that should not be bundled into your library.
+        external: Object.keys(packageJson.dependencies || {}),
+      },
     },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: Object.keys(packageJson.dependencies || {}),
-    },
-  },
+  };
 });