davidcsally · davidcsally · Aug 25, 2022
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -48,5 +48,12 @@ module.exports = {
     'react-hooks/exhaustive-deps': 0,
 
     semi: ['error', 'never'],
+    // mac / windows end of line
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 }
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/package.json b/package.json
@@ -27,16 +27,16 @@
   "homepage": "https://www.davidcsally.com",
   "dependencies": {
     "border-box.css": "^1.0.0",
-    "framer-motion": "^4.1.17",
-    "next": "^11.1.2",
+    "framer-motion": "^7.2.1",
+    "next": "^12.2.5",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.14.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^11.1.2",
+    "@next/eslint-plugin-next": "^12.2.5",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/addons": "^6.3.12",
@@ -45,15 +45,14 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.30",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/react-modal": "^3.13.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
-    "babel-plugin-styled-components": "^1.13.3",
     "cypress": "^9.5.4",
-    "eslint": "^8.12.0",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -65,6 +64,6 @@
     "jest": "^27.3.1",
     "prettier": "^2.4.1",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.7.0"
   }
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -38,7 +38,10 @@ export default class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
-          <style dangerouslySetInnerHTML={{ __html: fonts }} />
+          <style
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: fonts }}
+          />
         </body>
       </Html>
     )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -25,7 +25,9 @@ const Home = () => (
       />
     </Head>
     <App />
-    <Script strategy="afterInteractive">{GA}</Script>
+    <Script id="ga-script" strategy="afterInteractive">
+      {GA}
+    </Script>
   </>
 )
 

diff --git a/src/components/modules/App/index.tsx b/src/components/modules/App/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import GlobalStyles from 'styles/global'
+import { GlobalStyle } from 'styles/global'
 
 import HeroBlock from '../HeroBlock'
 import Chatbot from '../Chatbot'
@@ -49,7 +49,8 @@ const App = () => {
 
   return (
     <div data-testid="app">
-      <GlobalStyles />
+      {/* @ts-expect-error Idk something is wrong with the types */}
+      <GlobalStyle />
       <main>
         <HeroBlock />
         <AboutMe />

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { palette } from './colors'
 
-export default createGlobalStyle`
+export const GlobalStyle = createGlobalStyle`
   ${palette}
 
   body {

diff --git a/tsconfig.json b/tsconfig.json
@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "incremental": true
   },
   "include": [
     "src"
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,9 @@ const Home = () => ( @@
           />
         </Head>
         <App />
-        <Script strategy="afterInteractive">{GA}</Script>
+        <Script id="ga-script" strategy="afterInteractive">
+          {GA}
+        </Script>
       </>
     )
@@ Expand Down @@