fix(ts): fix ts types and remove react types

package.json

@@ -17,15 +17,13 @@
   "dependencies": {},
   "devDependencies": {
     "@astrojs/preact": "^1.0.1",
-    "@astrojs/react": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
     "@preact/preset-vite": "^2.3.0",
     "@tailwindcss/typography": "^0.5.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/preact": "^3.2.2",
     "@testing-library/user-event": "^14.2.1",
     "@types/node": "^17.0.18",
-    "@types/react": "^18.0.15",
     "@vitejs/plugin-react": "^1.3.2",
     "@vitest/ui": "^0.16.0",
     "astro": "^1.0.2",

src/components/app/AppLayout.tsx

@@ -1,9 +1,9 @@
-import React from "react";
 import Header from "./Header";
 import Footer from "./Footer";
+import { ComponentChildren } from "preact";
 
 interface Props {
-  children?: React.ReactNode;
+  children?: ComponentChildren;
   currentUrl?: string;
   currentPathName?: string;
 }

src/components/app/Logo.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import classNames from "classnames";
 
 interface Props {

src/components/app/blog/BlogEntry.tsx

@@ -1,5 +1,7 @@
+import { ComponentChildren } from "preact";
+
 type Props = {
-  children: React.ReactNode;
+  children: ComponentChildren;
 };
 
 const BlogEntry = ({ children }: Props) => {

src/components/app/home/sections/TechnicalSkills.tsx

@@ -1,12 +1,12 @@
-import React from "react";
 import { technicalSkills as defaultTechnicalSkills } from "@/constants";
+import { JSX } from "preact";
 
 function TechnicalSection({
   title,
   children,
   ...props
-}: Omit<React.HTMLProps<HTMLDivElement>, "title"> & {
-  title: React.ReactElement;
+}: Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> & {
+  title: JSX.Element | string;
 }) {
   return (
     <div className="mt-8 mb-8 pb-8" {...props}>
@@ -16,7 +16,7 @@ function TechnicalSection({
   );
 }
 
-function NestedList(props: React.HTMLProps<HTMLUListElement>) {
+function NestedList(props: JSX.HTMLAttributes<HTMLUListElement>) {
   return (
     <ul
       className="border-l-2 border-gray-700 pl-4 pt-4 pb-4 mt-2 mb-2"

src/components/app/home/sections/ThreeSellPoints.tsx

@@ -1,7 +1,7 @@
 import { threeSellPoints as defaultThreeSellPoints } from "@/constants";
-import React from "react";
+import { JSX } from "preact";
 
-interface Props extends React.HTMLProps<HTMLDivElement> {}
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {}
 
 function Item({ title, children, ...props }: Props) {
   return (

src/components/icons/Github.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { twMerge } from "tailwind-merge";
+import { JSX } from "preact";
 
-interface Props extends React.SVGProps<SVGSVGElement> {}
+interface Props extends JSX.SVGAttributes<SVGSVGElement> {}
 
 const Github = ({ className, ...props }: Props) => {
   const _className = twMerge("w-6 h-6 fill-current", className);

src/components/icons/LinkedIn.tsx

@@ -1,6 +1,7 @@
 import { twMerge } from "tailwind-merge";
+import { JSX } from "preact";
 
-interface Props extends React.SVGProps<SVGSVGElement> {}
+interface Props extends JSX.HTMLAttributes<SVGSVGElement> {}
 
 const LinkedIn = ({ className, ...props }: Props) => {
   const _className = twMerge("w-6 h-6 fill-current", className);

src/components/icons/Menu.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { JSX } from "preact";
 
-interface Props extends Omit<React.HTMLProps<SVGSVGElement>, "crossOrigin"> {
+interface Props extends Omit<JSX.HTMLAttributes<SVGSVGElement>, "crossOrigin"> {
   className?: string;
 }
 

src/components/layout/Drawer.tsx

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-import React from "react";
+import { JSX } from "preact";
 
 type Props = {
   isOpen?: boolean;
-} & React.HTMLProps<HTMLElement>;
+} & JSX.HTMLAttributes<HTMLElement>;
 
 const Drawer = ({ isOpen = false, children, className, ...props }: Props) => {
   return (

src/components/layout/Overlay.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { JSX } from "preact";
 
 import classNames from "classnames";
 import { twMerge } from "tailwind-merge";
 
-type Props = {} & React.HTMLProps<HTMLDivElement>;
+type Props = {} & JSX.HTMLAttributes<HTMLDivElement>;
 
 const Overlay = ({ className, ...props }: Props) => {
   return (

src/components/layout/SubPageHeader.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import { ComponentChildren } from "preact";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
-  children?: React.ReactNode;
+  children?: ComponentChildren;
   bgClassName?: string;
   className?: string;
 };

src/components/nav/NavDrawer.tsx

@@ -1,12 +1,12 @@
-import { cloneElement } from "preact";
+import { cloneElement, JSX } from "preact";
 import Drawer from "../layout/Drawer";
 import Logo from "@/components/app/Logo";
 
 type Props = {
   links: JSX.Element[];
   isOpen?: boolean;
   onLinkClicked?: () => void;
-} & React.HTMLProps<HTMLElement>;
+} & JSX.HTMLAttributes<HTMLElement>;
 
 const NavDrawer = ({ isOpen = false, links, onLinkClicked }: Props) => {
   return (

src/components/portfolio/PortfolioEntry.tsx

@@ -1,9 +1,10 @@
 import TechnologiesUsed from "@/components/portfolio/TechnologiesUsed";
+import { ComponentChildren } from "preact";
 import { PortfolioFrontmatter } from "../../types/frontmatter";
 import PortfolioMedia from "./PortfolioMedia";
 import WhatIDid from "./WhatIDid";
 
-type Props = PortfolioFrontmatter & { children?: React.ReactNode };
+type Props = PortfolioFrontmatter & { children?: ComponentChildren };
 
 const PortfolioEntry = ({
   title,

src/components/portfolio/PortfolioMedia.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Slider from "@/components/portfolio/Slider";
 import { PortfolioFrontmatter } from "types/frontmatter";
 

src/components/portfolio/Slider.tsx

@@ -1,9 +1,9 @@
 import { useState, useCallback, useEffect, useRef } from "preact/hooks";
-import { cloneElement, toChildArray } from "preact";
+import { cloneElement, toChildArray, JSX } from "preact";
 import debounce from "lodash.debounce";
 import classnames from "classnames";
 
-interface Props extends React.HTMLProps<HTMLDivElement> {
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   isAutoPlay?: boolean;
   className?: string;
 }

src/components/portfolio/WhatIDid.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { PortfolioFrontmatter } from "types/frontmatter";
 
 type Props = Pick<PortfolioFrontmatter, "whatIDid">;

src/constants.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "preact";
 export const GITHUB_URL = "https://www.github.com/hrgui";
 export const LINKEDIN_URL = "https://www.linkedin.com/in/hrgui";
 

src/global.d.ts

@@ -0,0 +1 @@
+declare module "chart.js/dist/chart.mjs"; // see node_modules. required to make vite happy.

src/hooks/useAnimationEnd.tsx

@@ -1,4 +1,5 @@
-import { RefObject, useEffect, useState } from "react";
+import { useEffect, useState } from "preact/hooks";
+import type { RefObject } from "preact";
 
 export function useAnimationEnd(elementRef: RefObject<Element>) {
   const [animationEnded, setAnimationEnded] = useState(false);

src/hooks/useIntersectionObserver.tsx

@@ -1,5 +1,5 @@
-import { RefObject, useEffect, useState } from "preact/hooks";
-
+import { useEffect, useState } from "preact/hooks";
+import type { RefObject } from "preact";
 interface Args extends IntersectionObserverInit {
   freezeOnceVisible?: boolean;
 }

src/hooks/useInterval.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from "preact/hooks";
 
 const useInterval = (callback: (...args) => any, delay) => {
   const savedCallback = useRef<(...args) => any>();

src/hooks/useTransitionEnd.tsx

@@ -1,4 +1,5 @@
-import { RefObject, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
+import type { RefObject } from "preact";
 
 export function useTransitionEnd(elementRef: RefObject<Element>) {
   const [transitionEnded, setTransitionEnded] = useState(false);

src/types/frontmatter.tsx

@@ -1,9 +1,11 @@
+import type { JSX } from "preact";
+
 export interface PortfolioTechnology {
   type?: string;
   value?: number;
 }
 
-interface PortfolioIframe extends React.HTMLProps<HTMLIFrameElement> {}
+interface PortfolioIframe extends JSX.HTMLAttributes<HTMLIFrameElement> {}
 
 export type PortfolioFrontmatter = {
   slug?: string;

yarn.lock

@@ -95,14 +95,6 @@
   dependencies:
     prismjs "^1.28.0"
 
-"@astrojs/react@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@astrojs/react/-/react-1.0.0.tgz#44f270e45a1608f623275c89d52fd1617315e2bf"
-  integrity sha512-CHJQ1dwjpYOTunioi02yWKdSxN/YeLP1vI70Xq+AqhcTmcmdbCMwbtYOEVwIK1k/AJmLItsJMcrsTfRoQU+Z+Q==
-  dependencies:
-    "@babel/core" ">=7.0.0-0 <8.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.17.12"
-
 "@astrojs/tailwind@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@astrojs/tailwind/-/tailwind-1.0.0.tgz#05f75c46611d70963c5978126d0924ff781b77e1"
@@ -1071,30 +1063,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
-"@types/prop-types@*":
-  version "15.7.4"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
-  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
-
-"@types/react@^18.0.15":
-  version "18.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
-  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/resolve@^1.17.0":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
 "@types/testing-library__jest-dom@^5.9.1":
   version "5.14.5"
   resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz#d113709c90b3c75fdb127ec338dad7d5f86c974f"
@@ -1820,11 +1793,6 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2:
-  version "3.0.9"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz"
-  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
-
 data-uri-to-buffer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"