fix react/jsx typing issues

build-scripts/social-previews/base.ts

@@ -1,5 +1,5 @@
 import { ExtendedPostInfo } from "types/index";
-import * as React from "react";
+import { FunctionComponent } from "preact";
 
 export type ComponentProps = {
 	post: ExtendedPostInfo;
@@ -12,7 +12,7 @@ export type ComponentProps = {
 export type Layout = {
 	name: string;
 	css: string;
-	Component: React.FunctionComponent<ComponentProps>;
+	Component: FunctionComponent<ComponentProps>;
 };
 
 export const PAGE_WIDTH = 1280;

package-lock.json

@@ -27,6 +27,7 @@
 				"@testing-library/preact": "^3.2.3",
 				"@types/jest": "^29.4.0",
 				"@types/node": "^18.13.0",
+				"@types/react": "^18.0.33",
 				"@types/uuid": "^9.0.0",
 				"@typescript-eslint/eslint-plugin": "^5.51.0",
 				"@typescript-eslint/parser": "^5.51.0",
@@ -59,6 +60,7 @@
 				"prettier": "^2.8.4",
 				"prettier-plugin-astro": "^0.8.0",
 				"puppeteer-core": "^10.4.0",
+				"react": "^18.2.0",
 				"rehype-raw": "^6.1.1",
 				"rehype-retext": "^3.0.2",
 				"rehype-slug-custom-id": "^1.1.0",
@@ -3631,6 +3633,23 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/@types/prop-types": {
+			"version": "15.7.5",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+			"dev": true
+		},
+		"node_modules/@types/react": {
+			"version": "18.0.33",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.33.tgz",
+			"integrity": "sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==",
+			"dev": true,
+			"dependencies": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -3652,6 +3671,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/scheduler": {
+			"version": "0.16.3",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+			"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+			"dev": true
+		},
 		"node_modules/@types/semver": {
 			"version": "7.3.13",
 			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -6397,6 +6422,12 @@
 			"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
 			"dev": true
 		},
+		"node_modules/csstype": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+			"dev": true
+		},
 		"node_modules/damerau-levenshtein": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -13933,6 +13964,18 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dev": true,
+			"dependencies": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			},
+			"bin": {
+				"loose-envify": "cli.js"
+			}
+		},
 		"node_modules/lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -17019,6 +17062,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+			"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+			"dev": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/read-pkg": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -24156,6 +24211,23 @@
 			"dev": true,
 			"peer": true
 		},
+		"@types/prop-types": {
+			"version": "15.7.5",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+			"dev": true
+		},
+		"@types/react": {
+			"version": "18.0.33",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.33.tgz",
+			"integrity": "sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==",
+			"dev": true,
+			"requires": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
 		"@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -24177,6 +24249,12 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/scheduler": {
+			"version": "0.16.3",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+			"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+			"dev": true
+		},
 		"@types/semver": {
 			"version": "7.3.13",
 			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -26220,6 +26298,12 @@
 				}
 			}
 		},
+		"csstype": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+			"dev": true
+		},
 		"damerau-levenshtein": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -31876,6 +31960,15 @@
 			"integrity": "sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==",
 			"dev": true
 		},
+		"loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dev": true,
+			"requires": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			}
+		},
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -34072,6 +34165,15 @@
 				}
 			}
 		},
+		"react": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+			"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+			"dev": true,
+			"requires": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"read-pkg": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

package.json

@@ -52,6 +52,7 @@
 		"@testing-library/preact": "^3.2.3",
 		"@types/jest": "^29.4.0",
 		"@types/node": "^18.13.0",
+		"@types/react": "^18.0.33",
 		"@types/uuid": "^9.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.51.0",
 		"@typescript-eslint/parser": "^5.51.0",
@@ -84,6 +85,7 @@
 		"prettier": "^2.8.4",
 		"prettier-plugin-astro": "^0.8.0",
 		"puppeteer-core": "^10.4.0",
+		"react": "^18.2.0",
 		"rehype-raw": "^6.1.1",
 		"rehype-retext": "^3.0.2",
 		"rehype-slug-custom-id": "^1.1.0",

src/components/base/button/button.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "../types";
 import style from "./button.module.scss";
 import { createElement } from "preact";
+import { JSX } from "preact";
 
 type ButtonProps = PropsWithChildren<
 	{
@@ -8,7 +9,7 @@ type ButtonProps = PropsWithChildren<
 		class?: string;
 		state?: "selected" | "inactive";
 		variant?: "primary" | "borderless";
-	} & React.ButtonHTMLAttributes<any> & React.AnchorHTMLAttributes<any>
+	} & JSX.HTMLAttributes<HTMLButtonElement & HTMLAnchorElement>
 >;
 
 function ButtonWrapper({ tag = "a", class: className, children, state, variant, ...props }: ButtonProps) {

src/components/base/image/picture.tsx

@@ -1,10 +1,11 @@
 import { GetPictureResult } from "@astrojs/image/dist/lib/get-picture";
+import { JSX } from "preact";
 
 interface PictureProps {
 	picture: GetPictureResult;
 	alt: string,
 	class?: string;
-	imgAttrs?: React.ImgHTMLAttributes<any>;
+	imgAttrs?: JSX.HTMLAttributes<HTMLImageElement>;
 }
 
 export const Picture = ({

src/components/base/types.ts

@@ -1,3 +1,5 @@
+import { JSX } from "preact";
+
 export type JSXNode = string | JSX.Element | (string | JSX.Element)[];
 
 export type PropsWithChildren<T = {}> = Omit<T, "children"> & {