From a1f309a34d58bb02bc918a9de18d97e1ca44f6a7 Mon Sep 17 00:00:00 2001 From: Grzegorz Zdunek Date: Fri, 25 Oct 2024 17:55:02 +0200 Subject: [PATCH] Make `web/design` a separate TypeScript project (#47694) * Make `web/design` a separate TypeScript project * Fix compile errors It seems that making `web/design` a separate project slightly changes the behavior of type inference --- Makefile | 2 + package.json | 2 +- tsconfig.base.json | 33 +++++++++++++ tsconfig.json | 47 +++++-------------- tsconfig.node.json | 11 +++-- .../design/src/theme/{fonts.js => fonts.ts} | 7 ++- web/packages/design/src/theme/themes/types.ts | 4 +- .../src/theme/utils/colorManipulator.js | 2 +- web/packages/design/src/utils/testing.tsx | 5 +- web/packages/design/tsconfig.json | 10 ++++ 10 files changed, 78 insertions(+), 45 deletions(-) create mode 100644 tsconfig.base.json rename web/packages/design/src/theme/{fonts.js => fonts.ts} (93%) create mode 100644 web/packages/design/tsconfig.json diff --git a/Makefile b/Makefile index ca5fa33f3f9e1..a6cf23c23e277 100644 --- a/Makefile +++ b/Makefile @@ -528,6 +528,7 @@ endif .PHONY: clean-ui clean-ui: rm -rf webassets/* + rm -rf build.assets/.cache/ts rm -rf web/packages/teleterm/build find . -type d -name node_modules -prune -exec rm -rf {} \; @@ -1292,6 +1293,7 @@ ADDLICENSE_COMMON_ARGS := -c 'Gravitational, Inc.' \ -ignore '**/.terraform.lock.hcl' \ -ignore '**/Dockerfile' \ -ignore '**/node_modules/**' \ + -ignore 'build.assets/.cache/**' \ -ignore 'api/version.go' \ -ignore 'docs/pages/includes/**/*.go' \ -ignore 'e/**' \ diff --git a/package.json b/package.json index e3b328df0d7f0..dce649b86d057 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "lint": "pnpm prettier-check && pnpm eslint", "lint-fix": "pnpm prettier-write && pnpm eslint --fix", "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'", - "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc", + "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --build", "prettier-check": "prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'", "prettier-write": "prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'", "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'", diff --git a/tsconfig.base.json b/tsconfig.base.json new file mode 100644 index 0000000000000..10ce6a8e31c3d --- /dev/null +++ b/tsconfig.base.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "allowJs": true, + "baseUrl": ".", + "useDefineForClassFields": true, + "esModuleInterop": true, + "importHelpers": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "target": "esnext", + "module": "esnext", + "moduleResolution": "bundler", + "lib": ["dom", "dom.iterable", "esnext"], + "jsx": "react-jsx", + "strictBindCallApply": true, + "noEmitHelpers": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": false, + "paths": { + "shared/*": ["web/packages/shared/*"], + "design/*": ["web/packages/design/src/*"], + "design": ["web/packages/design/src/"], + "teleport/*": ["web/packages/teleport/src/*"], + "teleport": ["web/packages/teleport/src/"], + "teleterm/*": ["web/packages/teleterm/src/*"], + "e-teleport/*": ["e/web/teleport/src/*"], + "gen-proto-js/*": ["gen/proto/js/*"], + "gen-proto-ts/*": ["gen/proto/ts/*"], + } + } +} diff --git a/tsconfig.json b/tsconfig.json index 8282fc214ba40..fb2e21c789052 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,37 +1,5 @@ { - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "allowJs": true, - "baseUrl": ".", - "useDefineForClassFields": true, - "esModuleInterop": true, - "importHelpers": true, - "forceConsistentCasingInFileNames": true, - "isolatedModules": true, - "lib": ["dom", "dom.iterable", "esnext"], - "jsx": "react-jsx", - "module": "esnext", - "moduleResolution": "bundler", - "strictBindCallApply": true, - "noEmit": true, - "noEmitHelpers": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": false, - "target": "esnext", - "types": ["node", "@types/wicg-file-system-access"], - "paths": { - "shared/*": ["web/packages/shared/*"], - "design/*": ["web/packages/design/src/*"], - "design": ["web/packages/design/src/"], - "teleport/*": ["web/packages/teleport/src/*"], - "teleport": ["web/packages/teleport/src/"], - "teleterm/*": ["web/packages/teleterm/src/*"], - "e-teleport/*": ["e/web/teleport/src/*"], - "gen-proto-js/*": ["gen/proto/js/*"], - "gen-proto-ts/*": ["gen/proto/ts/*"], - } - }, + "extends": "./tsconfig.base.json", "include": [ "e/web/**/*.ts", "e/web/**/*.tsx", @@ -44,12 +12,19 @@ "../web/src/**/*.ts", "../web/src/**/*.tsx" ], - "references": [{ "path": "./tsconfig.node.json" }], + "references": [ + { "path": "./tsconfig.node.json" }, + { "path": "./web/packages/design/tsconfig.json" } + ], + "compilerOptions": { + "outDir": "build.assets/.cache/ts", + "noEmit": true, + "types": ["node", "@types/wicg-file-system-access"] + }, "exclude": [ + "web/packages/design", "node_modules", "**/node_modules/*", - "dist", - "**/dist/*", "**/build/app/**", "**/build/release/**" ] diff --git a/tsconfig.node.json b/tsconfig.node.json index 8e9e3191bcab3..f6a4b6a620fa9 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -1,12 +1,17 @@ { "compilerOptions": { + "outDir": "build.assets/.cache/ts", "composite": true, - "module": "nodenext", - "moduleResolution": "nodenext", + "emitDeclarationOnly": true, + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, "include": [ "e/web/**/*.mts", - "web/**/*.mts" + "web/**/*.mts", + "web/packages/build/vite", + "web/packages/teleterm/csp.ts" ] } diff --git a/web/packages/design/src/theme/fonts.js b/web/packages/design/src/theme/fonts.ts similarity index 93% rename from web/packages/design/src/theme/fonts.js rename to web/packages/design/src/theme/fonts.ts index bb79dba39811e..6058088b79170 100644 --- a/web/packages/design/src/theme/fonts.js +++ b/web/packages/design/src/theme/fonts.ts @@ -24,7 +24,12 @@ const fontMonoMac = `Menlo, Monaco, "Courier New", monospace`; export const font = `Ubuntu2, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";`; -export const fonts = { +export interface Fonts { + sansSerif: string; + mono: string; +} + +export const fonts: Fonts = { sansSerif: font, mono: getMonoFont(), }; diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts index b0b59b43d081f..e8b9f9aa5fd91 100644 --- a/web/packages/design/src/theme/themes/types.ts +++ b/web/packages/design/src/theme/themes/types.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { fonts } from '../fonts'; +import { Fonts } from '../fonts'; import { blueGrey } from '../palette'; import typography, { fontSizes, fontWeights } from '../typography'; @@ -321,7 +321,7 @@ export type SharedStyles = { borders: (string | number)[]; typography: typeof typography; font: string; - fonts: typeof fonts; + fonts: Fonts; fontWeights: typeof fontWeights; fontSizes: typeof fontSizes; radii: (number | string)[]; diff --git a/web/packages/design/src/theme/utils/colorManipulator.js b/web/packages/design/src/theme/utils/colorManipulator.js index 04430b96f6d30..5168d0804acd1 100644 --- a/web/packages/design/src/theme/utils/colorManipulator.js +++ b/web/packages/design/src/theme/utils/colorManipulator.js @@ -104,7 +104,7 @@ export function rgbToHex(color) { * Note: Does not support rgb % values. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() - * @returns {object} - A MUI color object: {type: string, values: number[]} + * @returns {{type: string, values: number[]}} - A MUI color object: {type: string, values: number[]} */ export function decomposeColor(color) { if (color.charAt(0) === '#') { diff --git a/web/packages/design/src/utils/testing.tsx b/web/packages/design/src/utils/testing.tsx index cae8740ee8671..37da83637133a 100644 --- a/web/packages/design/src/utils/testing.tsx +++ b/web/packages/design/src/utils/testing.tsx @@ -43,7 +43,10 @@ function Providers({ children }: { children: React.ReactElement }) { ); } -function render(ui: React.ReactElement, options?: RenderOptions) { +function render( + ui: React.ReactElement, + options?: RenderOptions +): ReturnType { return testingRender(ui, { wrapper: Providers, ...options }); } diff --git a/web/packages/design/tsconfig.json b/web/packages/design/tsconfig.json new file mode 100644 index 0000000000000..2161d7f91f695 --- /dev/null +++ b/web/packages/design/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../../tsconfig.base.json", + "include": ["src", "@types", "../../../web/@types"], + "compilerOptions": { + "composite": true, + "outDir": "../../../build.assets/.cache/ts/design", + "emitDeclarationOnly": true, + "declarationMap": true, + } +}