ci: fix typecheck

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

web/src/components/project/filter.tsx

@@ -3,7 +3,7 @@ import styles from "./filter.module.css";
 
 import { type DimensionFilter, type FilterType, dimensionNames, filterNames, filterNamesInverted } from "../../api";
 
-import { useRef, useState } from "react";
+import { useRef, useState, type ReactElement } from "react";
 import { capitalizeAll, cls } from "../../utils";
 import { Dialog } from "../dialog";
 
@@ -122,7 +122,7 @@ const filters = {
 		filterTypes: FilterType[];
 		invertable?: boolean;
 		custom?: boolean;
-		render?: () => JSX.Element;
+		render?: () => ReactElement;
 		getFilter?: (data: FormData) => DimensionFilter;
 		displayValue?: (filter: DimensionFilter) => string;
 		displayType?: (filter: DimensionFilter) => string;

web/src/components/settings/dialogs.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactElement } from "react";
 
 import { Dialog } from "../dialog";
 import { type Tag, Tags } from "../tags";
@@ -28,7 +28,7 @@ export const DeleteDialog = ({
 	displayName,
 	type,
 	trigger,
-}: { id: string; displayName: string; type: "project" | "entity" | "user"; trigger: JSX.Element }) => {
+}: { id: string; displayName: string; type: "project" | "entity" | "user"; trigger: ReactElement }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
 	const { role } = useMe();
 
@@ -98,7 +98,7 @@ export const DeleteDialog = ({
 	);
 };
 
-export const EditProject = ({ project, trigger }: { project: ProjectResponse; trigger: JSX.Element }) => {
+export const EditProject = ({ project, trigger }: { project: ProjectResponse; trigger: ReactElement }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
 	const { role } = useMe();
 
@@ -283,7 +283,7 @@ export const CreateProject = () => {
 	);
 };
 
-export const EditEntity = ({ entity, trigger }: { entity: EntityResponse; trigger: JSX.Element }) => {
+export const EditEntity = ({ entity, trigger }: { entity: EntityResponse; trigger: ReactElement }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
 	const { role } = useMe();
 
@@ -452,7 +452,7 @@ export const CreateEntity = () => {
 	);
 };
 
-export const EditPassword = ({ user, trigger }: { user: UserResponse; trigger: JSX.Element }) => {
+export const EditPassword = ({ user, trigger }: { user: UserResponse; trigger: ReactElement }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
 	const confirmPasswordRef = useRef<HTMLInputElement>(null);
 	const { role } = useMe();
@@ -521,7 +521,7 @@ export const EditPassword = ({ user, trigger }: { user: UserResponse; trigger: J
 
 const roles = ["admin", "user"] as const;
 
-export const EditUser = ({ user, trigger }: { user: UserResponse; trigger: JSX.Element }) => {
+export const EditUser = ({ user, trigger }: { user: UserResponse; trigger: ReactElement }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
 	const { mutate, error, reset } = useMutation({
 		mutationFn: api["/api/dashboard/user/{username}"].put,

web/src/components/settings/tables.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useRef } from "react";
+import { Fragment, useRef, type ReactElement } from "react";
 import styles from "./tables.module.css";
 
 import { EditIcon, EllipsisVerticalIcon, RectangleEllipsisIcon, TrashIcon } from "lucide-react";
@@ -17,7 +17,7 @@ import {
 import { cls } from "../../utils";
 import { createToast } from "../toast";
 
-type DropdownOptions = Record<string, ((close: () => void) => JSX.Element) | null>;
+type DropdownOptions = Record<string, ((close: () => void) => ReactElement) | null>;
 
 const Dropdown = ({ options }: { options: DropdownOptions }) => {
 	const detailsRef = useRef<HTMLDetailsElement>(null);

web/src/components/table.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactElement } from "react";
 import styles from "./table.module.css";
 
 export type Column<T> = {
 	id: string;
-	header?: string | JSX.Element;
-	icon?: JSX.Element;
-	render?: (row: T) => JSX.Element | string;
+	header?: string | ReactElement;
+	icon?: ReactElement;
+	render?: (row: T) => ReactElement | string;
 	full?: boolean;
 	nowrap?: boolean;
 };

web/src/components/worldmap/index.tsx

@@ -57,7 +57,7 @@ export const Worldmap = ({
 	const biggest = useMemo(() => data?.reduce((a, b) => (a.value > b.value ? a : b), data[0]), [data]);
 	const countries = useMemo(() => getCountries(data ?? []), [data]);
 
-	const zoomBehavior = useRef<ZoomBehavior<SVGSVGElement, unknown>>();
+	const zoomBehavior = useRef<ZoomBehavior<SVGSVGElement, unknown>>(null);
 	if (!zoomBehavior.current) {
 		zoomBehavior.current = d3Zoom<SVGSVGElement, unknown>()
 			.scaleExtent([1, 8]) // Min and max zoom levels