chore: upgrade next (#1208)

* chore: upgrade next

* fix: jsx preserve

* fix: type errors

* fix: linting

* fix: linting

* chore: upgrade react and fix type errors

Author: kylemcd

.eslintrc.json

@@ -1,6 +1,30 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["eslint:recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
   "rules": {
-    "react/no-unescaped-entities": "off"
-  }
+    "react/no-unescaped-entities": "off",
+    "no-unused-vars": "off",
+    "no-undef": "off",
+    "no-extra-boolean-cast": "off",
+    "no-unreachable": "off"
+  },
+  "ignorePatterns": [
+    ".next/**",
+    "node_modules/**",
+    "out/**",
+    "public/**",
+    "pages/api/og.tsx"
+  ]
 }

components/Typedoc/Provider.tsx

@@ -1,9 +1,9 @@
 import { createContext, useContext } from "react";
 import { TypedocPage } from "@/lib/typedoc";
 
-const TypedocsContext = createContext<{ typedocs: TypedocPage[] }>({
-  typedocs: [],
-});
+const TypedocsContext = createContext<{ typedocs: TypedocPage[] } | undefined>(
+  undefined,
+);
 
 export const TypedocsProvider = ({
   children,

components/ui/Autocomplete.tsx

@@ -13,6 +13,7 @@ import { ScrollerBottomGradient } from "./Page/ScrollerBottomGradient";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, {
+  RefObject,
   useCallback,
   useEffect,
   useMemo,
@@ -629,7 +630,7 @@ const Autocomplete = () => {
         >
           {/* Adds a white shadow to the bottom of the autocomplete when items below scroll */}
           <ScrollerBottomGradient
-            scrollerRef={scrollerRef}
+            scrollerRef={scrollerRef as RefObject<HTMLDivElement>}
             gradientProps={{
               height: "20",
             }}

components/ui/Breadcrumbs.tsx

@@ -32,7 +32,6 @@ const Breadcrumbs = ({ pages }: BreadcrumbsProps) => {
               size="2"
               color="gray"
               style={{
-                // @ts-expect-error shut it
                 textWrap: "nowrap",
               }}
             >

components/ui/Callout.tsx

@@ -44,7 +44,7 @@ export const Callout = ({
   isCentered?: boolean;
   maxWidth?: string;
   style?: React.CSSProperties;
-}): JSX.Element => {
+}): React.JSX.Element => {
   // Determine emoji and bgColor:
   // 1. If type is provided, use type's config
   // 2. If custom emoji/bgColor provided, use those

components/ui/Card.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { Box, Stack } from "@telegraph/layout";
 import { MenuItem } from "@telegraph/menu";
 import Link from "next/link";
@@ -7,12 +7,18 @@ import { Text } from "@telegraph/typography";
 type Props = {
   emoji?: string;
   title: string;
+  children?: ReactNode;
   linkUrl: string;
   footer?: ReactElement;
   isExternal?: boolean;
 };
 
-const CardGroup = ({ children, cols = 2 }) => (
+type CardGroupProps = {
+  children: ReactNode;
+  cols?: number;
+};
+
+const CardGroup = ({ children, cols = 2 }: CardGroupProps) => (
   <Stack
     style={{
       display: "grid",
@@ -24,14 +30,14 @@ const CardGroup = ({ children, cols = 2 }) => (
   </Stack>
 );
 
-const Card: React.FC<Props> = ({
+const Card = ({
   emoji,
   title,
   children,
   footer,
   linkUrl,
   isExternal = false,
-}) => (
+}: Props) => (
   <Stack h="full" rounded="2" border="px" borderColor="gray-4">
     <MenuItem
       h="full"

components/ui/NavItem.tsx

@@ -81,15 +81,16 @@ const NavItem = ({
       <Text
         as="span"
         weight="medium"
-        style={{
-          fontSize: "13px",
-          // @ts-expect-error textWrap is fine
-          textWrap: "nowrap",
-          // Easy way to vertically align the text
-          verticalAlign: "text-bottom",
-          "--color": isActive ? "var(--tgph-gray-12)" : "var(--tgph-gray-11)",
-          ...(textProps.style || {}),
-        }}
+        style={
+          {
+            fontSize: "13px",
+            textWrap: "nowrap",
+            // Easy way to vertically align the text
+            verticalAlign: "text-bottom",
+            "--color": isActive ? "var(--tgph-gray-12)" : "var(--tgph-gray-11)",
+            ...(textProps.style || {}),
+          } as React.CSSProperties
+        }
         {...textPropsWithoutStyle}
       >
         {children}

components/ui/OverviewContent/Blocks.tsx

@@ -8,12 +8,12 @@ import React from "react";
 import Image from "next/image";
 import { TgphComponentProps } from "@telegraph/helpers";
 
-type IconComponent = () => JSX.Element;
+type IconComponent = () => React.JSX.Element;
 type IconType = keyof typeof Icons | LucideIcon | IconComponent;
 
-function getIcon(icon?: IconType): IconComponent | React.ReactNode {
+function getIcon(icon?: IconType): IconComponent | LucideIcon {
   if (typeof icon === "function") {
-    return icon as IconComponent;
+    return icon as IconComponent | LucideIcon;
   }
 
   if (typeof icon === "string") {
@@ -22,7 +22,7 @@ function getIcon(icon?: IconType): IconComponent | React.ReactNode {
     // can't be properly type checked.
     const lowercasedIcon = icon.toLowerCase();
     if (Icons[lowercasedIcon as keyof typeof Icons]) {
-      return Icons[lowercasedIcon as keyof typeof Icons] as () => JSX.Element;
+      return Icons[lowercasedIcon as keyof typeof Icons] as IconComponent;
     }
 
     // We throw an error here so that a build can't complete if there is an icon that
@@ -32,7 +32,7 @@ function getIcon(icon?: IconType): IconComponent | React.ReactNode {
     );
   }
 
-  return icon as React.ReactNode;
+  return icon as unknown as LucideIcon;
 }
 
 export const Tool = ({
@@ -66,7 +66,7 @@ export const Tool = ({
       >
         {typeof _icon === "function" ? (
           <Box w="8" h="8" bg="black" color="white" p="2" borderRadius="2">
-            {_icon()}
+            {(_icon as IconComponent)()}
           </Box>
         ) : (
           <Icon
@@ -134,7 +134,7 @@ export const ContentCard = ({
       >
         {typeof _icon === "function" ? (
           <Box w="10" h="10" bg="gray-2" p="2" borderRadius="2">
-            {_icon()}
+            {(_icon as IconComponent)()}
           </Box>
         ) : (
           <Icon

components/ui/Page/OnThisPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, RefObject } from "react";
 import Link from "next/link";
 import { Box, Stack } from "@telegraph/layout";
 import { Text as TextIcon } from "lucide-react";
@@ -156,7 +156,9 @@ const OnThisPage: React.FC<Props> = ({ title, sourcePath }) => {
           >
             <HeaderList headers={headers} nesting={0} />
           </Stack>
-          <ScrollerBottomGradient scrollerRef={scrollerRef} />
+          <ScrollerBottomGradient
+            scrollerRef={scrollerRef as RefObject<HTMLDivElement>}
+          />
           <Box borderTop="px" borderColor="gray-3" mb="4" />
           <Text
             as="a"

components/ui/Page/ScrollerBottomGradient.tsx

@@ -3,7 +3,7 @@ import { Box } from "@telegraph/layout";
 import { TgphComponentProps } from "@telegraph/helpers";
 
 export function useOnRefReady<T extends HTMLElement>(
-  ref: React.RefObject<T>,
+  ref: React.RefObject<T | null>,
   callback: (node: T) => void,
 ) {
   const lastNodeRef = useRef<T | null>(null);