replace FIXMEs with typechecking fixes

Author: audreyality

src/components/AdrTable.tsx

@@ -1,11 +1,11 @@
-// FIXME: remove @ts-nocheck and address type errors in this file
-// @ts-nocheck
 import React from "react";
 
-const formatDate = (date: Date) => {
+const formatDate = (date: Date): string | undefined => {
   try {
     return date.toISOString().split("T")[0];
-  } catch {}
+  } catch {
+    return undefined;
+  }
 };
 
 const badgeColors = {
@@ -16,21 +16,34 @@ const badgeColors = {
   Superseded: "warning",
 };
 
-export default function AdrTable({ frontMatter }): React.JSX.Element {
+const isBadgeColorKey = (key: string): key is keyof typeof badgeColors => key in badgeColors;
+
+interface AdrFrontMatter {
+  adr: string;
+  status?: string;
+  date: Date;
+}
+
+export default function AdrTable({
+  frontMatter,
+}: {
+  frontMatter: AdrFrontMatter;
+}): React.JSX.Element {
+  const { status } = frontMatter;
+  const badgeColor = status && isBadgeColorKey(status) ? badgeColors[status] : "secondary";
+
   return (
     <table>
       <tbody>
         <tr>
           <th>ID:</th>
           <td>ADR-{frontMatter.adr}</td>
         </tr>
-        {frontMatter.status && (
+        {status && (
           <tr>
             <th>Status:</th>
             <td>
-              <span className={`badge badge--${badgeColors[frontMatter.status] ?? "secondary"}`}>
-                {frontMatter.status?.toUpperCase()}
-              </span>
+              <span className={`badge badge--${badgeColor}`}>{status.toUpperCase()}</span>
             </td>
           </tr>
         )}

src/components/Bitwarden.tsx

@@ -1,9 +1,7 @@
-// FIXME: remove @ts-nocheck and address type errors in this file
-// @ts-nocheck
-import React from "react";
+import React, { type ReactNode } from "react";
 import { useDevMode } from "../contexts/devMode";
 
-export default function Bitwarden({ children }): React.JSX.Element {
+export default function Bitwarden({ children }: { children: ReactNode }): React.JSX.Element {
   const { devMode } = useDevMode();
 
   if (devMode === "bitwarden") {

src/components/Community.tsx

@@ -1,9 +1,7 @@
-// FIXME: remove @ts-nocheck and address type errors in this file
-// @ts-nocheck
-import React from "react";
+import React, { type ReactNode } from "react";
 import { useDevMode } from "../contexts/devMode";
 
-export default function Community({ children }): React.JSX.Element {
+export default function Community({ children }: { children: ReactNode }): React.JSX.Element {
   const { devMode } = useDevMode();
 
   if (devMode === "community") {

src/components/DevDropdown/index.tsx

@@ -1,7 +1,7 @@
-// FIXME: remove @ts-nocheck and address type errors in this file
-// @ts-nocheck
 import React from "react";
 import DropdownNavbarItem from "@theme-original/NavbarItem/DropdownNavbarItem";
+import type { Props as DropdownNavbarItemProps } from "@theme/NavbarItem/DropdownNavbarItem";
+import type { LinkLikeNavbarItemProps } from "@theme/NavbarItem";
 import { useDevMode, DevModes } from "@site/src/contexts/devMode";
 
 const dropdownOptions = [
@@ -13,28 +13,31 @@ const dropdownOptions = [
     id: DevModes.bitwarden,
     label: "Bitwarden Developer",
   },
-];
+] as const;
+
+interface Props extends Omit<DropdownNavbarItemProps, "items" | "label"> {
+  readonly dropdownItemsBefore?: LinkLikeNavbarItemProps[];
+  readonly dropdownItemsAfter?: LinkLikeNavbarItemProps[];
+}
 
 export default function DevDropdown({
   mobile,
   dropdownItemsBefore,
   dropdownItemsAfter,
   ...props
-}): React.JSX.Element {
+}: Props): React.JSX.Element {
   const { devMode, setDevMode } = useDevMode();
 
-  const items = dropdownOptions.map((item) => {
-    return {
-      label: item.label,
-      to: "#",
-      onClick: (e) => {
-        setDevMode(item.id);
-        e.preventDefault();
-      },
-    };
-  });
+  const items: DropdownNavbarItemProps["items"] = dropdownOptions.map((item) => ({
+    label: item.label,
+    to: "#",
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+      setDevMode(item.id);
+      e.preventDefault();
+    },
+  }));
 
-  const dropdownLabel = dropdownOptions.find((i) => i.id == devMode).label;
+  const dropdownLabel = dropdownOptions.find((i) => i.id === devMode)?.label;
 
   return <DropdownNavbarItem {...props} mobile={mobile} label={dropdownLabel} items={items} />;
 }