switch to TS

.eslintrc.json

@@ -4,6 +4,30 @@
     // https://nextjs.org/docs/basic-features/eslint
     "react/no-unescaped-entities": "off",
     "@next/next/no-img-element": "off",
-    "react/prop-types": 1
+    "react/prop-types": 0,
+    "react-hooks/exhaustive-deps": "off",
+    "no-unused-vars": ["warn", { "args": "none" }],
+    "no-console": "warn",
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal"],
+        "pathGroups": [
+          { "pattern": "react", "group": "builtin", "position": "before" },
+          { "pattern": "next/**", "group": "external", "position": "before" },
+          { "pattern": "@data/**", "group": "internal", "position": "before" },
+          { "pattern": "@components/**", "group": "internal", "position": "before" },
+          { "pattern": "@types/**", "group": "internal", "position": "before" },
+          { "pattern": "./*", "group": "internal", "position": "after" },
+          { "pattern": "../*", "group": "internal", "position": "after" }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "newlines-between": "never",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
   }
 }

README.md

@@ -33,7 +33,7 @@ This will trigger Github Action and deploy the changes to gh-pages.
 ## TODO
 
 - shorten cv old web experience? + add senior dev? + new skills to filter?
-- switch to TS
+- switch to TS: => remove proptypes + add types + fix TS errors
 - optimize images with script
 - add new projects (tripser, kineval, todolist?)
 - review images (avoid bg-img, use different resolutions: https://dev.to/builderio/optimal-images-in-html-5bg9)

components/blogLayout.js → components/blogLayout.tsx

@@ -1,21 +1,20 @@
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
 import Link from 'next/link';
-import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-scss.min.js';
 import 'prismjs/components/prism-json.min.js';
 import 'prismjs/components/prism-bash.min.js';
 import 'prismjs/themes/prism.css';
 import { AiFillCaretLeft } from 'react-icons/ai';
 import posts from '@data/posts';
-import Layout from '@components/layout';
 import Grid from '@components/grid';
+import Layout from '@components/layout';
 
 const convertDate = (d) =>
   d === '' ? 'No date' : `${new Date(d).getDate()}.${new Date(d).getMonth() + 1}.${new Date(d).getFullYear()}`;
 
-export default function BlogLayout({ children }) {
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   useEffect(() => {
     Prism.highlightAll();
@@ -93,7 +92,3 @@ export default function BlogLayout({ children }) {
     </>
   );
 }
-
-BlogLayout.propTypes = {
-  children: PropTypes.node,
-};

components/codepen.js → components/codepen.tsx

@@ -1,6 +1,10 @@
-import PropTypes from 'prop-types';
+type CodepenProps = {
+  className?: string;
+  pen: string;
+  title: string;
+};
 
-export default function Codepen({ className, pen, title }) {
+export default function Codepen({ className, pen, title }: CodepenProps) {
   return (
     <>
       <div className={'code-iframe-wrapper ' + (className || '')}>
@@ -23,9 +27,3 @@ export default function Codepen({ className, pen, title }) {
     </>
   );
 }
-
-Codepen.propTypes = {
-  className: PropTypes.string,
-  pen: PropTypes.string,
-  title: PropTypes.string,
-};

components/codesandbox.js → components/codesandbox.tsx

@@ -1,13 +1,17 @@
-import PropTypes from 'prop-types';
+type CodesandboxProps = {
+  className?: string;
+  sandbox: string;
+  title: string;
+};
 
-export default function Codesandbox({ className, sandbox, title }) {
+export default function Codesandbox({ className, sandbox, title }: CodesandboxProps) {
   return (
     <>
       <div className={'code-iframe-wrapper ' + (className || '')}>
         <iframe
           height="300"
           title={title}
-          view="preview"
+          // view="preview"
           loading="lazy"
           src={'https://codesandbox.io/embed/' + sandbox + '?fontsize=14&theme=dark'}
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -20,9 +24,3 @@ export default function Codesandbox({ className, sandbox, title }) {
     </>
   );
 }
-
-Codesandbox.propTypes = {
-  className: PropTypes.string,
-  sandbox: PropTypes.string,
-  title: PropTypes.string,
-};

components/grid.js → components/grid.tsx

@@ -1,10 +1,20 @@
 import Link from 'next/link';
-import PropTypes from 'prop-types';
 import { FaCodepen, FaGithub } from 'react-icons/fa';
 import { MdPublic, MdSettingsBackupRestore } from 'react-icons/md';
 import { SiCodesandbox } from 'react-icons/si';
+import { PostType, ProjectType } from '@types';
 
-function GridItem({ item }) {
+type Item = Partial<ProjectType> & Partial<PostType>;
+type GridItemProps = {
+  item: Item;
+};
+
+type GridProps = {
+  data: Item[];
+  className: string;
+};
+
+function GridItem({ item }: GridItemProps) {
   return (
     <div className="card">
       <div className="card__behind">
@@ -61,7 +71,7 @@ function GridItem({ item }) {
         ) : null}
       </div>
       <Link href={item.link || ''}>
-        <a title={item.title} tabIndex="-1">
+        <a title={item.title} tabIndex={-1}>
           <div className="card__img">
             <img src={item.img} alt={item.title} width="260" height="146" loading="lazy" />
           </div>
@@ -71,11 +81,7 @@ function GridItem({ item }) {
   );
 }
 
-GridItem.propTypes = {
-  item: PropTypes.object,
-};
-
-export default function Grid({ data, className }) {
+export default function Grid({ data, className }: GridProps) {
   return (
     <div className={'grid ' + (className || '')}>
       {data.map((item) => {
@@ -84,8 +90,3 @@ export default function Grid({ data, className }) {
     </div>
   );
 }
-
-Grid.propTypes = {
-  data: PropTypes.array,
-  className: PropTypes.string,
-};

components/header.js → components/header.tsx

@@ -1,9 +1,14 @@
 import Link from 'next/link';
-import PropTypes from 'prop-types';
 import { MdLightMode, MdDarkMode } from 'react-icons/md';
 import { nav } from '@data/nav';
+import { ThemeType } from '@types';
 
-export default function Header({ onClick, theme }) {
+type HeaderProps = {
+  onClick: () => void;
+  theme: ThemeType;
+};
+
+export default function Header({ onClick, theme }: HeaderProps) {
   return (
     <header className="header">
       <div className="container">
@@ -34,8 +39,3 @@ export default function Header({ onClick, theme }) {
     </header>
   );
 }
-
-Header.propTypes = {
-  onClick: PropTypes.func,
-  theme: PropTypes.string,
-};

components/layout.js → components/layout.tsx

@@ -1,18 +1,29 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
-import PropTypes from 'prop-types';
-import Header from '@components/header';
-import Footer from '@components/footer';
 import Breadcrumb from '@components/breadcrumb';
+import Footer from '@components/footer';
+import Header from '@components/header';
+import { ThemeType } from '@types';
 // import MobileNav from '@components/mobileNav';
 
-export default function Layout({ title, description, img, url, children, itemtype, published, modified }) {
-  const [theme, setTheme] = useState('');
+type LayoutProps = {
+  title: string;
+  description?: string;
+  img?: string;
+  url?: string;
+  children: React.ReactNode;
+  itemtype?: string;
+  published?: string;
+  modified?: string;
+};
+
+export default function Layout({ title, description, img, url, children, itemtype, published, modified }: LayoutProps) {
+  const [theme, setTheme] = useState<ThemeType>('');
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       let localTheme = window.localStorage.getItem('theme');
-      setTheme(localTheme);
+      setTheme(localTheme as ThemeType);
     }
   }, []);
 
@@ -64,14 +75,3 @@ export default function Layout({ title, description, img, url, children, itemtyp
     </main>
   );
 }
-
-Layout.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  img: PropTypes.string,
-  url: PropTypes.string,
-  children: PropTypes.node,
-  itemtype: PropTypes.string,
-  published: PropTypes.string,
-  modified: PropTypes.string,
-};

components/tech.js → components/tech.tsx

@@ -19,9 +19,13 @@ import {
   SiMongodb,
   SiJest,
 } from 'react-icons/si';
-import PropTypes from 'prop-types';
 
-export default function Tech({ name, color }) {
+type TechProps = {
+  name: string;
+  color?: boolean;
+};
+
+export default function Tech({ name, color }: TechProps) {
   return (
     <>
       {name === 'html' ? <SiHtml5 color={color ? '#E44D26' : ''} title="HTML" aria-labelledby="HTML" /> : null}
@@ -68,8 +72,3 @@ export default function Tech({ name, color }) {
     </>
   );
 }
-
-Tech.propTypes = {
-  name: PropTypes.string,
-  color: PropTypes.bool,
-};

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -24,7 +24,7 @@ const conf = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
+  pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
 };
 
 export default conf;

package.json

@@ -2,10 +2,10 @@
   "name": "rb",
   "version": "1.4.0",
   "description": "My portfolio website created with Next.js presenting projects and blog posts.",
-  "main": "index.js",
   "scripts": {
     "dev": "npm run blog && next dev",
     "lint": "next lint",
+    "ts": "tsc --noEmit --incremental",
     "build": "next build",
     "start": "next start",
     "local": "npm run blog && next build && next start",
@@ -17,7 +17,6 @@
     "screen": "node ./generate-projects-screens.js https://remybeumier.be/Memory memory.jpg",
     "optimize": "node ./optimize-image.js"
   },
-  "keywords": [],
   "author": "Rémy Beumier",
   "license": "ISC",
   "dependencies": {
@@ -31,20 +30,25 @@
     "eslint-config-prettier": "8.3.0",
     "globby": "13.1.1",
     "gray-matter": "4.0.2",
-    "next": "12.0.10",
-    "playwright": "^1.34.3",
+    "next": "12.3.4",
+    "playwright": "1.34.3",
     "prettier": "2.5.1",
     "prismjs": "1.27.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-icons": "4.3.1",
     "remark-frontmatter": "4.0.1",
     "sass": "1.37.5",
-    "sharp": "^0.32.1"
+    "sharp": "0.32.1"
   },
-  "devDependencies": {},
-  "resolutions": {
-    "cssnano-preset-simple": "3.0.0"
+  "devDependencies": {
+    "@types/node": "14.18.3",
+    "@types/react": "18.2.51",
+    "@types/react-dom": "18.2.18",
+    "eslint": "7.32.0",
+    "eslint-config-next": "12.0.10",
+    "multer": "1.4.4",
+    "typescript": "4.8.3"
   }
 }