chore(website): enable strict compiler option (#6012)

website/docusaurus.config.js

@@ -45,7 +45,7 @@ const allDocHomesPaths = [
 const isDev = process.env.NODE_ENV === 'development';
 
 const isDeployPreview =
-  process.env.NETLIFY && process.env.CONTEXT === 'deploy-preview';
+  !!process.env.NETLIFY && process.env.CONTEXT === 'deploy-preview';
 
 // Used to debug production build issues faster
 const isBuildFast = !!process.env.BUILD_FAST;

website/src/components/APITable/index.tsx

@@ -38,7 +38,7 @@ const APITableRow = forwardRef(
       name,
       children,
     }: {name: string | undefined; children: ReactElement<ComponentProps<'tr'>>},
-    ref: React.RefObject<HTMLTableRowElement>,
+    ref: React.ForwardedRef<HTMLTableRowElement>,
   ) => {
     const entryName = getText(children);
     const id = name ? `${name}-${entryName}` : entryName;

website/src/data/__tests__/user.test.ts

@@ -29,20 +29,20 @@ describe('users', () => {
     for (const file of files) {
       const size = imageSize(path.join(imageDir, file));
 
-      if (size.width < minCardImageWidth) {
+      if (size.width! < minCardImageWidth) {
         throw new Error(
           `Image width should be >= ${minCardImageWidth}
 Image=${file}`,
         );
       }
-      if (size.height < minCardImageHeight) {
+      if (size.height! < minCardImageHeight) {
         throw new Error(
           `Image height should be >= ${minCardImageHeight}
 Image=${file}`,
         );
       }
 
-      const scaledHeight = size.height / (size.width / minCardImageWidth);
+      const scaledHeight = size.height! / (size.width! / minCardImageWidth);
       if (scaledHeight < minCardImageHeightScaled) {
         throw new Error(
           `Image height is too small compared to width
@@ -159,7 +159,9 @@ function ensureUserValid(user: User) {
     checkOpenSource();
   } catch (e) {
     throw new Error(
-      `Showcase site with title=${user.title} contains errors:\n${e.message}`,
+      `Showcase site with title=${user.title} contains errors:\n${
+        (e as Error).message
+      }`,
     );
   }
 }

website/src/pages/index.tsx

@@ -82,13 +82,11 @@ const QUOTES = [
 
 function Home(): JSX.Element {
   const {
-    siteConfig: {
+    siteConfig: {customFields, tagline},
-      customFields: {description},
-      tagline,
-    },
   } = useDocusaurusContext();
+  const {description} = customFields as {description: string};
   return (
-    <Layout title={tagline} description={description as string}>
+    <Layout title={tagline} description={description}>
       <main>
         <div className={styles.hero}>
           <div className={styles.heroInner}>

website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx

@@ -71,13 +71,13 @@ const ShowcaseTagSelect = React.forwardRef<HTMLLabelElement, Props>(
           }}
           onFocus={(e) => {
             if (e.relatedTarget) {
-              e.target.nextElementSibling.dispatchEvent(
+              e.target.nextElementSibling?.dispatchEvent(
                 new KeyboardEvent('focus'),
               );
             }
           }}
           onBlur={(e) => {
-            e.target.nextElementSibling.dispatchEvent(
+            e.target.nextElementSibling?.dispatchEvent(
               new KeyboardEvent('blur'),
             );
           }}

website/src/pages/showcase/_components/ShowcaseTooltip/index.tsx

@@ -26,10 +26,12 @@ export default function Tooltip({
   delay,
 }: Props): JSX.Element {
   const [open, setOpen] = useState(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
-  const [popperElement, setPopperElement] = useState<HTMLElement>(null);
+    null,
-  const [arrowElement, setArrowElement] = useState<HTMLElement>(null);
+  );
-  const [container, setContainer] = useState<Element>(null);
+  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
+  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
+  const [container, setContainer] = useState<Element | null>(null);
   const {styles: popperStyles, attributes} = usePopper(
     referenceElement,
     popperElement,
@@ -51,7 +53,7 @@ export default function Tooltip({
     },
   );
 
-  const timeout = useRef<number>(null);
+  const timeout = useRef<number | null>(null);
   const tooltipId = `${id}_tooltip`;
 
   useEffect(() => {
@@ -78,7 +80,7 @@ export default function Tooltip({
 
       // Remove the title ahead of time to avoid displaying
       // two tooltips at the same time (native + this one).
-      referenceElement.removeAttribute('title');
+      referenceElement?.removeAttribute('title');
 
       timeout.current = window.setTimeout(() => {
         setOpen(true);
@@ -86,7 +88,7 @@ export default function Tooltip({
     };
 
     const handleClose = () => {
-      clearInterval(timeout.current);
+      clearInterval(timeout.current!);
       setOpen(false);
     };
 

website/src/pages/showcase/index.tsx

@@ -42,6 +42,7 @@ function restoreUserState(userState: UserState | null) {
     scrollTopPosition: 0,
     focusedElementId: undefined,
   };
+  // @ts-expect-error: if focusedElementId is undefined it returns null
   document.getElementById(focusedElementId)?.focus();
   window.scrollTo({top: scrollTopPosition});
 }

website/src/pages/versions.tsx

@@ -22,7 +22,9 @@ function Version(): JSX.Element {
   } = useDocusaurusContext();
   const versions = useVersions();
   const latestVersion = useLatestVersion();
-  const currentVersion = versions.find((version) => version.name === 'current');
+  const currentVersion = versions.find(
+    (version) => version.name === 'current',
+  )!;
   const pastVersions = versions.filter(
     (version) => version !== latestVersion && version.name !== 'current',
   );

website/src/utils/jsUtils.ts

@@ -11,7 +11,10 @@ export function difference<T>(...arrays: T[][]): T[] {
 }
 
 // Inspired by https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_sortby-and-_orderby
-export function sortBy<T>(array: T[], getter: (item: T) => unknown): T[] {
+export function sortBy<T>(
+  array: T[],
+  getter: (item: T) => string | number | boolean,
+): T[] {
   const sortedArray = [...array];
   sortedArray.sort((a, b) =>
     // eslint-disable-next-line no-nested-ternary

website/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
     "resolveJsonModule": true,
+    "strict": true,
     "types": ["@types/jest"]
   },
   "exclude": ["src/sw.js"]