Convert entire project to Typescript

Author: adamgraham

.prettierignore

@@ -2,7 +2,10 @@ build/
 coverage/
 dist/
 node_modules/
+public/
 package.json
 .cache/
+.github/
+.vscode/
 .snapshots/
 *.min.js

.prettierrc

@@ -1,11 +1,15 @@
 {
-  "useTabs": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
   "printWidth": 80,
-  "tabWidth": 2,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": false,
-  "parser": "babel",
-  "noSemi": true,
-  "rcVerbose": false
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
 }

.vscode/settings.json

@@ -18,5 +18,4 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
   },
-  "typescript.validate.enable": false,
 }

css-styles

@@ -1,5 +1,4 @@
 import '@zigurous/css-styles/dist/index.css';
-import '@zigurous/react-components/dist/index.css';
 import './src/styles/global.css';
 
 const updateFavicon = (isDark) => {

gatsby-browser.js

@@ -11,6 +11,15 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   });
 };
 
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPlugin({
+    name: '@babel/plugin-transform-react-jsx',
+    options: {
+      runtime: 'automatic',
+    },
+  });
+};
+
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
@@ -26,7 +35,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
-      imageBorder: String
+      imageBorder: Boolean
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
@@ -42,7 +51,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
-      imageBorder: String
+      imageBorder: Boolean
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
@@ -58,7 +67,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
-      imageBorder: String
+      imageBorder: Boolean
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
@@ -74,7 +83,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
-      imageBorder: String
+      imageBorder: Boolean
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
@@ -90,7 +99,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
-      imageBorder: String
+      imageBorder: Boolean
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
@@ -107,8 +116,8 @@ exports.createSchemaCustomization = ({ actions }) => {
       tags: [String]
     }
     type ProjectButton {
+      to: String!
       name: String!
-      url: String!
       icon: String
     }
     type ProjectSection {

gatsby-node.js

@@ -1,11 +1,11 @@
 {
   "name": "@adamgraham/portfolio",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "homepage": "https://adamgraham.github.io",
   "private": true,
   "dependencies": {
-    "@zigurous/css-styles": "^2.2.0",
-    "@zigurous/react-components": "^2.2.0",
+    "@zigurous/css-styles": "^3.0.0",
+    "@zigurous/react-components": "^3.0.0",
     "classnames": "^2.3.1",
     "gatsby": "^4.17.0",
     "gatsby-plugin-google-analytics": "^4.17.0",
@@ -21,13 +21,17 @@
     "gatsby-transformer-json": "^4.17.0",
     "gatsby-transformer-sharp": "^4.17.0",
     "gh-pages": "^4.0.0",
-    "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "use-query-params": "^2.2.1"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.25.7",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.1.0",
+    "@types/react-dom": "^18.1.0",
+    "@types/react-helmet": "^6.1.11",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",
@@ -51,6 +55,7 @@
     "precommit": "eslint src --fix --quiet",
     "predeploy": "gatsby build",
     "serve": "gatsby serve",
-    "start": "gatsby develop"
+    "start": "gatsby develop",
+    "typecheck": "tsc --noEmit"
   }
 }

package.json

@@ -1,21 +1,32 @@
 import '../styles/dock.css';
-import { Icon, Link, SocialIcon } from '@zigurous/react-components';
+import { Icon, Link, SocialIcon, Theme } from '@zigurous/react-components'; // prettier-ignore
 import { Link as GatsbyLink } from 'gatsby';
 import React from 'react';
 import { dockLinks, socialLinks } from '../links';
+import type { LinkType } from '../types';
 
-const Dock = ({ theme, toggleTheme, secondaryLinks }) => {
+export interface DockProps {
+  theme: Theme;
+  toggleTheme: () => void;
+  secondaryLinks?: LinkType[];
+}
+
+export default function Dock({
+  theme,
+  toggleTheme,
+  secondaryLinks,
+}: DockProps) {
   return (
     <div className="dock">
       <div className="dock__container" id="primary">
         <div className="dock__section" id="navigation">
-          {dockLinks.map((link) => (
-            <DockItem link={link} key={link.key} />
+          {dockLinks.map(link => (
+            <DockItem link={link} key={link.id} />
           ))}
         </div>
         <div className="dock__section" id="socials">
-          {socialLinks.map((link) => (
-            <DockItem link={link} key={link.key} external />
+          {socialLinks.map(link => (
+            <DockItem link={link} key={link.id} external />
           ))}
         </div>
         <div className="dock__section" id="gallery">
@@ -57,33 +68,35 @@ const Dock = ({ theme, toggleTheme, secondaryLinks }) => {
       </div>
       {secondaryLinks && (
         <div className="dock__container" id="secondary">
-          {secondaryLinks.map((link) => (
-            <DockItem link={link} key={link.key || link.name} external />
+          {secondaryLinks.map(link => (
+            <DockItem link={link} key={link.id || link.name} external />
           ))}
         </div>
       )}
     </div>
   );
-};
+}
+
+export interface DockItemProps {
+  link: LinkType;
+  external?: boolean;
+}
 
-const DockItem = ({ link, external = false }) => {
+export function DockItem({ link, external = false }: DockItemProps) {
   return (
     <div className="dock__item" id={link.name}>
       <Link
-        ElementType={link.ElementType || (external ? 'a' : GatsbyLink)}
+        as={external ? 'a' : GatsbyLink}
         external={external}
-        to={link.to || link.url}
+        to={link.to}
         unstyled
       >
-        {link.icon ? (
-          <Icon name={link.icon} />
-        ) : (
-          <SocialIcon iconName={link.key} innerPadding={0} size={18} />
+        {link.icon && <Icon name={link.icon} />}
+        {link.socialIcon && (
+          <SocialIcon icon={link.socialIcon} innerPadding={0} size={18} />
         )}
       </Link>
       <div className="dock__tooltip">{link.name}</div>
     </div>
   );
-};
-
-export default Dock;
+}

react-components

@@ -2,31 +2,41 @@ import '../styles/gallery.css';
 import { useMediaQuery } from '@zigurous/react-components';
 import classNames from 'classnames';
 import { navigate } from 'gatsby';
-import PropTypes from 'prop-types';
 import React, { useCallback, useEffect } from 'react';
-import Slide, { SlideProps } from './Slide';
+import Slide from './Slide';
+import type { SlideData } from '../types';
 import { getSessionIndex, setSessionIndex } from '../utils/session';
 
-const Gallery = ({ category, location, slides = [] }) => {
+export interface GalleryProps {
+  category: string;
+  location: Location;
+  slides: SlideData[];
+}
+
+export default function Gallery({
+  category,
+  location,
+  slides = [],
+}: GalleryProps) {
   const vertical = useMediaQuery('(max-width: 1365px)');
 
   const urlParams = new URLSearchParams(location?.search);
   const slideIndex =
     (urlParams.has('index')
-      ? Number.parseInt(urlParams.get('index')) || 0
+      ? Number.parseInt(urlParams.get('index')!) || 0
       : getSessionIndex(category)) % slides.length;
 
   const currentSlide =
-    slideIndex >= 0 && slideIndex < slides.length && slides[slideIndex];
+    slideIndex >= 0 && slideIndex < slides.length ? slides[slideIndex] : null;
 
   const setSlideIndex = useCallback(
-    (index) => {
+    (index: number) => {
       if (index >= slides.length) index = 0;
       if (index < 0) index = slides.length - 1;
       setSessionIndex(category, index);
       navigate(`/${category}?index=${index}`, { replace: true });
     },
-    [category, slides, slideIndex]
+    [category, slides, slideIndex],
   );
 
   useEffect(() => {
@@ -81,12 +91,4 @@ const Gallery = ({ category, location, slides = [] }) => {
       </button>
     </div>
   );
-};
-
-Gallery.propTypes = {
-  category: PropTypes.string,
-  location: PropTypes.object,
-  slides: PropTypes.arrayOf(SlideProps),
-};
-
-export default Gallery;
+}

src/components/Dock.js src/components/Dock.tsx

@@ -1,16 +1,20 @@
 import '../styles/header.css';
 import { Button, NavBar } from '@zigurous/react-components';
 import { Link as GatsbyLink, navigate } from 'gatsby';
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import Logo from './Logo';
 import MenuGallery from './MenuGallery';
 import { headerLinks } from '../links';
 
-const Header = ({ location, pageTitle }) => {
+export interface HeaderProps {
+  location?: Location;
+  pageTitle?: string;
+}
+
+export default function Header({ location, pageTitle }: HeaderProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   return (
-    <React.Fragment>
+    <>
       <header className="header">
         <div className="header__container container-fluid">
           <Logo size={44} />
@@ -23,16 +27,14 @@ const Header = ({ location, pageTitle }) => {
             <Button
               className="header__title-button"
               onClick={() => {
-                const link = headerLinks.find(
-                  (link) => link.name === pageTitle
-                );
+                const link = headerLinks.find(link => link.name === pageTitle);
                 if (link) {
                   navigate(link.to);
                 } else {
                   setIsMenuOpen(true);
                 }
               }}
-              style={Button.style.none}
+              style="unstyled"
             >
               {pageTitle}
             </Button>
@@ -68,13 +70,6 @@ const Header = ({ location, pageTitle }) => {
         open={isMenuOpen}
         onRequestClose={() => setIsMenuOpen(false)}
       />
-    </React.Fragment>
+    </>
   );
-};
-
-Header.propType = {
-  location: PropTypes.object,
-  pageTitle: PropTypes.string,
-};
-
-export default Header;
+}