chore: type check website as well

.github/workflows/CI.yaml

@@ -47,7 +47,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Type Check ʦ
-        run: yarn run type-check
+        run: yarn run typecheck
 
       - name: Linting 🕵
         run: yarn run lint

package.json

@@ -4,7 +4,7 @@
     "packages/*"
   ],
   "scripts": {
-    "type-check": "yarn workspaces foreach run type-check",
+    "typecheck": "yarn workspaces foreach run typecheck",
     "test": "yarn workspaces foreach run test",
     "cypress:component": "yarn workspaces foreach run cypress:component",
     "cypress:e2e": "yarn workspaces foreach run cypress:e2e",

packages/example-app/package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "dev": "../../node_modules/.bin/parcel serve",
     "serve": "PORT=1234 ../../node_modules/.bin/serve ./dist",
-    "jest:type-check": "tsc --project tsconfig.jest.json",
+    "jest:typecheck": "tsc --project tsconfig.jest.json",
     "test": "jest",
-    "type-check": "tsc --project tsconfig.app.json && yarn run jest:type-check",
+    "typecheck": "tsc --project tsconfig.app.json && yarn run jest:typecheck",
     "build": "../../node_modules/.bin/parcel build"
   },
   "source": "src/index.html",

packages/jui/package.json

@@ -26,16 +26,16 @@
     "storybook:build": "storybook build",
     "storybook:typecheck": "tsc --project tsconfig.stories.json",
     "test": "yarn run jest",
-    "type-check": "tsc --project tsconfig.lib.json && yarn run storybook:typecheck && yarn run cypress:type-check && yarn run jest:type-check",
+    "typecheck": "tsc --project tsconfig.lib.json && yarn run storybook:typecheck && yarn run cypress:typecheck && yarn run jest:typecheck",
     "jest": "jest",
-    "jest:type-check": "tsc --project tsconfig.jest.json",
+    "jest:typecheck": "tsc --project tsconfig.jest.json",
     "jest:watch": "jest --watch",
     "generate:known-theme-props": "node ./scripts/generate-known-theme-properties.js",
     "generate:component": "hygen component new",
     "cypress:component": "ELECTRON_EXTRA_LAUNCH_ARGS=--disable-color-correct-rendering percy exec -- cypress run --component --browser=electron",
     "cypress:e2e": "percy exec -- cypress run --e2e --browser=electron",
     "cypress:open": "ELECTRON_EXTRA_LAUNCH_ARGS=--disable-color-correct-rendering cypress open --browser=electron",
-    "cypress:type-check": "tsc --project tsconfig.cypress.json && tsc --project tsconfig.cypress-e2e.json",
+    "cypress:typecheck": "tsc --project tsconfig.cypress.json && tsc --project tsconfig.cypress-e2e.json",
     "api-docs:extract": "yarn api-extractor run -c ./api-extractor.json --local",
     "parcel": "../../node_modules/.bin/parcel",
     "api-extractor": "../../node_modules/.bin/api-extractor"

packages/website/src/components/ExampleContext.tsx

@@ -36,12 +36,15 @@ export const ExampleContext: React.FC<{
 /**
  * TODO: add a surrounding UI for examples, with tools for theme selection for example.
  */
-export const Example: React.FC = ({ children }) => (
+export const Example: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
   <ExampleContext>
     <div
       // @ts-expect-error: css prop is not working for some reason
       css={`
-        background: ${({ theme }) => theme.color("*.background")};
+        background: ${({ theme }: { theme: Theme }) =>
+          theme.color("*.background")};
       `}
     >
       {children}
@@ -86,10 +89,14 @@ function undoUseKeyboardNavigation() {
   document
     .querySelectorAll<HTMLLinkElement>("link[rel=stylesheet]")
     .forEach((linkEl) => {
-      for (let i = 0; i < linkEl.sheet.cssRules.length; i++) {
-        const rule = linkEl.sheet.cssRules.item(i);
-        if (rule.cssText?.startsWith("body:not(.navigation-with-keyboard)")) {
-          linkEl.sheet.deleteRule(i); // We can change the rule to only disable it within the boundary of example
+      if (linkEl.sheet) {
+        for (let i = 0; i < linkEl.sheet.cssRules.length; i++) {
+          const rule = linkEl.sheet.cssRules.item(i);
+          if (
+            rule?.cssText?.startsWith("body:not(.navigation-with-keyboard)")
+          ) {
+            linkEl.sheet.deleteRule(i); // We can change the rule to only disable it within the boundary of example
+          }
         }
       }
     });

packages/website/src/components/component-linking.tsx

@@ -8,7 +8,7 @@ function useDocs() {
   return (
     useDocusaurusContext().globalData["docusaurus-plugin-content-docs"]
       .default as GlobalPluginData
-  ).versions.find((version) => version.name === "current").docs;
+  ).versions.find((version) => version.name === "current")?.docs;
 }
 
 /**
@@ -19,8 +19,8 @@ function useDocs() {
 export function useComponentLinkMap(): { [componentName: string]: string } {
   const docs = useDocs();
   return useMemo(() => {
-    const linkMap = {};
-    docs.forEach((doc) => {
+    const linkMap: Record<string, string> = {};
+    docs?.forEach((doc) => {
       // maybe change the criteria based on sidebar later, if components are moved to a dedicated sidebar
       const componentName = doc.id.match(/components\/(.*)/)?.[1];
       if (componentName) {

packages/website/src/pages/_index/WindowFrame/WindowFrame.tsx

@@ -11,7 +11,7 @@ export function WindowFrame({
   children: React.ReactNode;
   title?: React.ReactNode;
 } & Pick<HTMLProps<HTMLDivElement>, "style" | "className">) {
-  const onLinkClick = (e) => e.preventDefault();
+  const onLinkClick = (e: React.MouseEvent) => e.preventDefault();
   return (
     <div {...otherProps} className={clsx(classes.window, otherProps.className)}>
       <div className={classes.titlebar}>

packages/website/src/pages/index.tsx

@@ -13,9 +13,9 @@ import {
   PageSection2 as SectionType,
 } from "./_index/PageSection2";
 
-const demoAppClickHandler = (e) => {
+const demoAppClickHandler = (e: React.MouseEvent) => {
   e.preventDefault();
-  document.getElementById("demo-app").scrollIntoView({ behavior: "smooth" });
+  document.getElementById("demo-app")?.scrollIntoView({ behavior: "smooth" });
 };
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

packages/website/src/theme/CodeBlock/Expandable.tsx

@@ -42,11 +42,13 @@ export function Expandable({
   isExpandable: boolean;
   setIsExpandable: (isExpandable: boolean) => void;
 }) {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    const expandable = ref.current?.scrollHeight > ref.current?.offsetHeight;
-    if (expandable !== isExpandable) {
-      setIsExpandable(expandable);
+    if (ref.current) {
+      const expandable = ref.current?.scrollHeight > ref.current?.offsetHeight;
+      if (expandable !== isExpandable) {
+        setIsExpandable(expandable);
+      }
     }
   });
   return (

packages/website/src/theme/CodeBlock/Playground.tsx

@@ -175,6 +175,7 @@ function EditorWithHeader() {
 export default function Playground({
   children,
   transformCode,
+  ref,
   ...props
 }: Props): JSX.Element {
   const prismTheme = usePrismTheme();
@@ -183,7 +184,7 @@ export default function Playground({
 
   return (
     <>
-      <div className={styles.playgroundContainer}>
+      <div ref={ref} className={styles.playgroundContainer}>
         <LiveProvider
           code={children.replace(/\n$/, "")}
           noInline={noInline}

packages/website/tsconfig.json

@@ -1,13 +1,31 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
+  // TODO(TS5): change to an array to extend the root tsconfig too, and remove some duplication
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "resolveJsonModule": true,
+    "resolveJsonModule": true, // Could be inherited from root tsconfig
+    "experimentalDecorators": true, // Could be inherited from root tsconfig
+    "strict": true, // Could be inherited from root tsconfig
+    "target": "ES2022", // Could be inherited from root tsconfig
+    "module": "commonjs", // Could be inherited from root tsconfig.
+    "lib": null, // needed to undo the lib set in docusaurus base tsconfig, as if it's unset.
+    "types": [
+      "node",
+      "@docusaurus/module-type-aliases",
+      "@docusaurus/theme-classic",
+      "@docusaurus/theme-live-codeblock" // addition with respect to the default types in @tsconfig/docusaurus/tsconfig.json
+    ],
     "paths": {
       "jui": ["../jui/src"],
-      "jui/*": ["../jui/src/*"]
-    },
-    "jsx": "react"
-  }
+      "jui/*": ["../jui/src/*"],
+      "@intellij-platform/core": ["../jui/src"], // Could be inherited from root tsconfig
+      "@intellij-platform/core/*": ["../jui/src/*"] // Could be inherited from root tsconfig
+    }
+  },
+  "include": [
+    "src",
+    // declaration files are not directly imported by another module but are necessary for the code to compile
+    "../example-app/**/*.d.ts"
+  ]
 }

tsconfig.json

@@ -76,7 +76,7 @@
     "baseUrl": ".",
     "paths": {
       // The following path mapping doesn't affect storybook or website build. The only important thing for those to
-      // build is the webpack alias configuration. This is just for type-check scripts and IDE support.
+      // build is the webpack alias configuration. This is just for typecheck scripts and IDE support.
       "@intellij-platform/core": ["./packages/jui/src"],
       "@intellij-platform/core/*": ["./packages/jui/src/*"]
     }