From be20a690b30243cc80e9b94799c0a00d8cfb9fac Mon Sep 17 00:00:00 2001 From: Syed Md Mihan Chistie <42113027+Mihan786Chistie@users.noreply.github.com> Date: Tue, 20 Aug 2024 14:35:13 +0530 Subject: [PATCH] added typechecking for all ts files (#6466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Co-authored-by: Lucas Bordeau --- nx.json | 2 +- packages/twenty-front/project.json | 6 + .../components/__stories__/Status.stories.tsx | 1 + .../src/utils/__tests__/title-utils.test.ts | 4 - ...{tsconfig.app.json => tsconfig.build.json} | 0 packages/twenty-front/tsconfig.dev.json | 13 ++ packages/twenty-front/tsconfig.json | 7 +- packages/twenty-front/vite.config.ts | 6 +- packages/twenty-ui/.storybook/main.ts | 15 +++ .../components/__stories__/Banner.stories.tsx | 5 +- .../twenty-ui/src/utilities/config/index.ts | 4 +- ...{tsconfig.lib.json => tsconfig.build.json} | 0 packages/twenty-ui/tsconfig.dev.json | 19 +++ packages/twenty-ui/tsconfig.json | 5 +- packages/twenty-ui/vite.config.ts | 114 ++++++++++-------- 15 files changed, 135 insertions(+), 66 deletions(-) rename packages/twenty-front/{tsconfig.app.json => tsconfig.build.json} (100%) create mode 100644 packages/twenty-front/tsconfig.dev.json rename packages/twenty-ui/{tsconfig.lib.json => tsconfig.build.json} (100%) create mode 100644 packages/twenty-ui/tsconfig.dev.json diff --git a/nx.json b/nx.json index 35b6e75017..4ec242fd51 100644 --- a/nx.json +++ b/nx.json @@ -32,7 +32,7 @@ }, "start": { "cache": true, - "dependsOn": ["^build"] + "dependsOn": ["^typecheck","^build"] }, "lint": { "executor": "@nx/eslint:lint", diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index 636fd29af6..4dcb7f444a 100644 --- a/packages/twenty-front/project.json +++ b/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": { diff --git a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx b/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx index 7db5637d04..cd480d45aa 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx +++ b/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx @@ -15,6 +15,7 @@ const meta: Meta = { component: Status, args: { text: 'Urgent', + weight: 'medium', }, }; diff --git a/packages/twenty-front/src/utils/__tests__/title-utils.test.ts b/packages/twenty-front/src/utils/__tests__/title-utils.test.ts index 6fee91bf0a..d67c5ecb0c 100644 --- a/packages/twenty-front/src/utils/__tests__/title-utils.test.ts +++ b/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, ); diff --git a/packages/twenty-front/tsconfig.app.json b/packages/twenty-front/tsconfig.build.json similarity index 100% rename from packages/twenty-front/tsconfig.app.json rename to packages/twenty-front/tsconfig.build.json diff --git a/packages/twenty-front/tsconfig.dev.json b/packages/twenty-front/tsconfig.dev.json new file mode 100644 index 0000000000..f90dcae862 --- /dev/null +++ b/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" + ] +} diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json index ac1d6e2f99..f6c268d9c2 100644 --- a/packages/twenty-front/tsconfig.json +++ b/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" -} +} \ No newline at end of file diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts index 924f9c9d7e..682b6466ab 100644 --- a/packages/twenty-front/vite.config.ts +++ b/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, }; diff --git a/packages/twenty-ui/.storybook/main.ts b/packages/twenty-ui/.storybook/main.ts index 270259adfd..f3f46370d1 100644 --- a/packages/twenty-ui/.storybook/main.ts +++ b/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; diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx index 4252098025..73e6d6a316 100644 --- a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx +++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx @@ -13,10 +13,7 @@ const meta: Meta = { Sync lost with mailbox hello@twenty.com. Please reconnect for updates: ), - argTypes: { - as: { control: false }, - theme: { control: false }, - }, + argTypes: {}, }; export default meta; diff --git a/packages/twenty-ui/src/utilities/config/index.ts b/packages/twenty-ui/src/utilities/config/index.ts index 4525e814d6..5038c50108 100644 --- a/packages/twenty-ui/src/utilities/config/index.ts +++ b/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(); diff --git a/packages/twenty-ui/tsconfig.lib.json b/packages/twenty-ui/tsconfig.build.json similarity index 100% rename from packages/twenty-ui/tsconfig.lib.json rename to packages/twenty-ui/tsconfig.build.json diff --git a/packages/twenty-ui/tsconfig.dev.json b/packages/twenty-ui/tsconfig.dev.json new file mode 100644 index 0000000000..7cf734bdd0 --- /dev/null +++ b/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" + ] +} diff --git a/packages/twenty-ui/tsconfig.json b/packages/twenty-ui/tsconfig.json index c7c587845c..cb70a38df1 100644 --- a/packages/twenty-ui/tsconfig.json +++ b/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" diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts index 3692ff0653..03fc2e351f 100644 --- a/packages/twenty-ui/vite.config.ts +++ b/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 || {}), - }, - }, + }; });