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

@@ -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/**' \

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

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/*"],
+    }
+  }
+}

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

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

web/packages/design/src/theme/fonts.js → 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(),
 };

web/packages/design/src/theme/themes/types.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-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)[];

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) === '#') {

web/packages/design/src/utils/testing.tsx

@@ -43,7 +43,10 @@ function Providers({ children }: { children: React.ReactElement }) {
   );
 }
 
-function render(ui: React.ReactElement<any>, options?: RenderOptions) {
+function render(
+  ui: React.ReactElement<any>,
+  options?: RenderOptions
+): ReturnType<typeof testingRender> {
   return testingRender(ui, { wrapper: Providers, ...options });
 }
 

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