[deps]: Update typescript to v6 (#795)

* [deps]: Update typescript to v6
* fix `JSX` import; disable remaining typechecks
* add type definition to fix `remark-kroki` type lookup failure
* fix typechecks
* use enum-like pattern

---------

Co-authored-by: ✨ Audrey ✨ <ajensen@bitwarden.com>

Author: renovate[bot]

package-lock.json

@@ -49,7 +49,7 @@
     "husky": "9.1.7",
     "lint-staged": "16.4.0",
     "prettier": "3.8.1",
-    "typescript": "5.9.2"
+    "typescript": "6.0.2"
   },
   "browserslist": {
     "production": [

package.json

@@ -1,34 +1,61 @@
 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 = {
-  Proposed: "primary",
-  Accepted: "success",
-  Rejected: "danger",
-  Deprecated: "warning",
-  Superseded: "warning",
+const AdrStatus = {
+  Proposed: "Proposed",
+  Accepted: "Accepted",
+  Rejected: "Rejected",
+  Deprecated: "Deprecated",
+  Superseded: "Superseded",
+} as const;
+
+type AdrStatus = (typeof AdrStatus)[keyof typeof AdrStatus];
+
+const badgeColors: Record<AdrStatus, string> = {
+  [AdrStatus.Proposed]: "primary",
+  [AdrStatus.Accepted]: "success",
+  [AdrStatus.Rejected]: "danger",
+  [AdrStatus.Deprecated]: "warning",
+  [AdrStatus.Superseded]: "warning",
 };
 
-export default function AdrTable({ frontMatter }): JSX.Element {
+function isAdrStatus(value: unknown): value is AdrStatus {
+  return typeof value === "string" && value in AdrStatus;
+}
+
+interface AdrFrontMatter {
+  adr: string;
+  status?: string;
+  date: Date;
+}
+
+export default function AdrTable({
+  frontMatter,
+}: {
+  frontMatter: AdrFrontMatter;
+}): React.JSX.Element {
+  const { status } = frontMatter;
+  const badgeColor = isAdrStatus(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/AdrTable.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { useDevMode } from "../contexts/devMode";
 
-export default function Bitwarden({ children }): JSX.Element {
+export default function Bitwarden({ children }: { children: ReactNode }): React.JSX.Element {
   const { devMode } = useDevMode();
 
   if (devMode === "bitwarden") {

src/components/Bitwarden.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { useDevMode } from "../contexts/devMode";
 
-export default function Community({ children }): JSX.Element {
+export default function Community({ children }: { children: ReactNode }): React.JSX.Element {
   const { devMode } = useDevMode();
 
   if (devMode === "community") {

src/components/Community.tsx

@@ -1,5 +1,7 @@
 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 = [
@@ -11,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
-}): 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} />;
 }

src/components/DevDropdown/index.tsx

@@ -74,7 +74,7 @@ function useContextValue(): ContextValue {
   );
 }
 
-export function DevModeProvider({ children }: { children: ReactNode }): JSX.Element {
+export function DevModeProvider({ children }: { children: ReactNode }): React.JSX.Element {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

src/contexts/devMode.tsx

@@ -7,7 +7,7 @@ import { DevModeProvider } from "@site/src/contexts/devMode";
 
 const Provider = composeProviders([DevModeProvider]);
 
-export default function LayoutProvider({ children }: Props): JSX.Element {
+export default function LayoutProvider({ children }: Props): React.JSX.Element {
   return (
     <ThemeLayoutProvider>
       <Provider>{children}</Provider>

src/theme/Layout/Provider/index.tsx

@@ -2,6 +2,9 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": null,
+    "paths": {
+      "@site/*": ["./*"]
+    }
   }
 }

tsconfig.json

@@ -0,0 +1,14 @@
+// FIXME: delete this file once `remark-kroki` ships its own type definitions
+// (or once `@types/remark-kroki` is published on DefinitelyTyped). Track
+// upstream at https://github.com/show-docs/remark-kroki.
+declare module "remark-kroki" {
+  export interface RemarkKrokiOptions {
+    server?: string;
+    headers?: Record<string, string>;
+    alias?: string[];
+    output?: string;
+    target?: "html" | "mdx3";
+  }
+
+  export function remarkKroki(options?: RemarkKrokiOptions): (tree: unknown) => Promise<void>;
+}