fix typescript errors

Author: mattcarrollcode

.eslintrc

@@ -6,7 +6,8 @@
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "react/no-unknown-property": ["error", { "ignore": ["meta"] }]
   },
   "env": {
     "node": true,

package.json

@@ -55,8 +55,8 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "asyncro": "^3.0.0",

src/components/ExternalLink.tsx

@@ -1,13 +1,17 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
+import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react';
 
 export function ExternalLink({
   href,
   target,
   children,
   ...props
-}: JSX.IntrinsicElements['a']) {
+}: DetailedHTMLProps<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+>) {
   return (
     <a href={href} target={target ?? '_blank'} rel="noopener" {...props}>
       {children}

src/components/Icon/IconArrow.tsx

@@ -4,9 +4,10 @@
 
 import {memo} from 'react';
 import cn from 'classnames';
+import type {SVGProps} from 'react';
 
 export const IconArrow = memo<
-  JSX.IntrinsicElements['svg'] & {
+  SVGProps<SVGSVGElement> & {
     /**
      * The direction the arrow should point.
      * `start` and `end` are relative to the current locale.

src/components/Icon/IconArrowSmall.tsx

@@ -4,9 +4,10 @@
 
 import {memo} from 'react';
 import cn from 'classnames';
+import type {SVGProps} from 'react';
 
 export const IconArrowSmall = memo<
-  JSX.IntrinsicElements['svg'] & {
+  SVGProps<SVGSVGElement> & {
     /**
      * The direction the arrow should point.
      * `start` and `end` are relative to the current locale.

src/components/Icon/IconBsky.tsx

@@ -3,10 +3,9 @@
  */
 
 import {memo} from 'react';
+import type {SVGProps} from 'react';
 
-export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
-  props
-) {
+export const IconBsky = memo<SVGProps<SVGSVGElement>>(function IconBsky(props) {
   return (
     <svg
       aria-label="Bluesky"

src/components/Icon/IconClose.tsx

@@ -3,8 +3,9 @@
  */
 
 import {memo} from 'react';
+import type {SVGProps} from 'react';
 
-export const IconClose = memo<JSX.IntrinsicElements['svg']>(function IconClose(
+export const IconClose = memo<SVGProps<SVGSVGElement>>(function IconClose(
   props
 ) {
   return (

src/components/Icon/IconFacebookCircle.tsx

@@ -3,8 +3,9 @@
  */
 
 import {memo} from 'react';
+import type {SVGProps} from 'react';
 
-export const IconFacebookCircle = memo<JSX.IntrinsicElements['svg']>(
+export const IconFacebookCircle = memo<SVGProps<SVGSVGElement>>(
   function IconFacebookCircle(props) {
     return (
       <svg

src/components/Icon/IconGitHub.tsx

@@ -3,19 +3,20 @@
  */
 
 import {memo} from 'react';
+import type {SVGProps} from 'react';
 
-export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
-  function IconGitHub(props) {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1.5em"
-        height="1.5em"
-        viewBox="0 -2 24 24"
-        fill="currentColor"
-        {...props}>
-        <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
-      </svg>
-    );
-  }
-);
+export const IconGitHub = memo<SVGProps<SVGSVGElement>>(function IconGitHub(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
+    </svg>
+  );
+});

src/components/Icon/IconHamburger.tsx

@@ -3,8 +3,9 @@
  */
 
 import {memo} from 'react';
+import type {SVGProps} from 'react';
 
-export const IconHamburger = memo<JSX.IntrinsicElements['svg']>(
+export const IconHamburger = memo<SVGProps<SVGSVGElement>>(
   function IconHamburger(props) {
     return (
       <svg