Migrate to typescript (#53)

* adding typescript dep

* Adding tsconfig file

* convert hero component to ts and adding type deps

* convert hero test file to ts

* converting biscuit component|

* fixing build error dependencies

* change title to be heading

* add basic content type

* convert cool section and use fixture content

* convery cool test file to tsx

* convert work section to typescript and update snapshots

* fixing props that were the wrong way around

* update snapshot tests again

* update type import to correct syntax

* type linting

* update index js files to be index ts

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alex-dev",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "start": "react-scripts start",
@@ -15,16 +15,23 @@
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "18.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^5.0.1",
     "tailwindcss": "^1.6.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "6.7.2",
+    "@typescript-eslint/parser": "6.7.2",
+    "eslint": "^8.0.0",
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [

src/App.js

@@ -4,17 +4,17 @@ import { Hero, Biscuit, Work, Cool } from "./components"
 import { content } from "./fixtures/content"
 
 export const App = () => {
-  // ---------- to go into a selector as it gets bigger -------
   const heroContent = content.hero
   const biscuitContent = content.biscuit
-  // ----------------------------------------------------------
+  const workContent = content.work
+  const coolContent = content.cool
 
   return (
     <main className="page-section">
       <Hero {...heroContent} />
       <Biscuit {...biscuitContent} />
-      <Work />
-      <Cool />
+      <Work {...workContent} />
+      <Cool {...coolContent} />
     </main>
   )
 }

src/__snapshots__/App.test.js.snap

@@ -32,7 +32,7 @@ exports[`renders site correctly 1`] = `
           class="profile-intro"
           data-testid="profile-intro"
         >
-          Software developer, coffee enthusiast
+          Software engineer, coffee enthusiast
         </p>
         <code
           style="display: none;"
@@ -134,7 +134,7 @@ exports[`renders site correctly 1`] = `
         <p
           class="profile-intro"
         >
-          Coming soon...
+          Coming soon ...
         </p>
       </div>
     </section>

src/components/BiscuitSection/__snapshots__/biscuit.spec.jsx.snap → src/components/BiscuitSection/__snapshots__/biscuit.spec.tsx.snap

@@ -11,15 +11,21 @@ exports[`Biscuit section Headings renders Biscuit section correctly 1`] = `
       <h2
         class="profile-heading"
         data-testid="biscuit-heading"
-      />
+      >
+        heading
+      </h2>
       <p
         class="profile-caption"
         data-testid="biscuit-caption"
-      />
+      >
+        caption
+      </p>
       <p
         class="profile-intro"
         data-testid="biscuit-intro"
-      />
+      >
+        intro
+      </p>
     </div>
     <div
       class="biscuit-image-row"

src/components/BiscuitSection/biscuit.spec.jsx → src/components/BiscuitSection/biscuit.spec.tsx

@@ -1,20 +1,21 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import { Biscuit } from "./"
+import { Biscuit } from "."
 
 describe("Biscuit section", () => {
   describe("Headings", () => {
     const headings = ["biscuit-heading", "biscuit-caption", "biscuit-intro"]
-    
+
     test("renders Biscuit section correctly", () => {
-      const { container } = render(<Biscuit />)
+      const { container } = render(
+        <Biscuit heading="heading" caption="caption" intro="intro" />
+      )
 
       expect(container).toMatchSnapshot()
     })
 
-
     test.each(headings)("renders Biscuit heading correctly - %p", (heading) => {
-      render(<Biscuit />)
+      render(<Biscuit heading="heading" caption="caption" intro="intro" />)
 
       expect(screen.getByTestId(heading)).toBeInTheDocument()
     })
@@ -24,13 +25,13 @@ describe("Biscuit section", () => {
     const images = ["biscuit-left", "biscuit-middle", "biscuit-right"]
 
     test("renders Image row correctly", () => {
-      render(<Biscuit />)
+      render(<Biscuit heading="heading" caption="caption" intro="intro" />)
 
       expect(screen.getByTestId("biscuit-image-row")).toBeInTheDocument()
     })
 
     test.each(images)("renders Images correctly - %p", (image) => {
-      render(<Biscuit />)
+      render(<Biscuit heading="heading" caption="caption" intro="intro" />)
 
       expect(screen.getByAltText(image)).toBeInTheDocument()
     })

src/components/BiscuitSection/biscuit.tsx

@@ -0,0 +1,42 @@
+import React, { ReactElement } from "react"
+import biscuitOutside from "./Assets/biscuit-outside.png"
+import biscuitPortrait from "./Assets/biscuit-portrait.jpg"
+import biscuitSocks from "./Assets/biscuit-socks.jpg"
+import type { BasicContent } from "../types"
+
+export const Biscuit = ({
+  heading,
+  caption,
+  intro,
+}: BasicContent): ReactElement => (
+  <section className="section section-biscuit section-biscuit-layout">
+    <div className="flex-row">
+      <h2 className="profile-heading" data-testid="biscuit-heading">
+        {heading}
+      </h2>
+      <p className="profile-caption" data-testid="biscuit-caption">
+        {caption}
+      </p>
+      <p className="profile-intro" data-testid="biscuit-intro">
+        {intro}
+      </p>
+    </div>
+    <div className="biscuit-image-row" data-testid="biscuit-image-row">
+      <img
+        src={biscuitOutside}
+        alt="biscuit-left"
+        className="biscuit-image biscuit-image-mobile"
+      />
+      <img
+        src={biscuitPortrait}
+        alt="biscuit-middle"
+        className="biscuit-image"
+      />
+      <img
+        src={biscuitSocks}
+        alt="biscuit-right"
+        className="biscuit-image biscuit-image-mobile biscuit-image-ipad"
+      />
+    </div>
+  </section>
+)

src/components/CoolSection/__snapshots__/cool.spec.js.snap → src/components/CoolSection/__snapshots__/cool.spec.tsx.snap

@@ -11,17 +11,17 @@ exports[`renders Cool section correctly 1`] = `
       <h2
         class="profile-heading"
       >
-        Something cool
+        heading
       </h2>
       <p
         class="profile-caption"
       >
-        trust me
+        caption
       </p>
       <p
         class="profile-intro"
       >
-        Coming soon...
+        intro
       </p>
     </div>
   </section>

src/components/CoolSection/cool.spec.js → src/components/CoolSection/cool.spec.tsx

@@ -1,9 +1,11 @@
 import React from "react"
 import { render } from "@testing-library/react"
-import { Cool } from "./"
+import { Cool } from "."
 
 test("renders Cool section correctly", () => {
-  const { container } = render(<Cool />)
+  const { container } = render(
+    <Cool heading="heading" caption="caption" intro="intro" />
+  )
 
   expect(container).toMatchSnapshot()
 })

src/components/CoolSection/cool.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react"
+import type { BasicContent } from "../types"
+
+export const Cool = ({
+  heading,
+  caption,
+  intro,
+}: BasicContent): ReactElement => (
+  <section className="section section-cool">
+    <div className="flex-row">
+      <h2 className="profile-heading">{heading}</h2>
+      <p className="profile-caption">{caption}</p>
+      <p className="profile-intro">{intro}</p>
+    </div>
+  </section>
+)

src/components/HeroSection/__snapshots__/hero.spec.jsx.snap → src/components/HeroSection/__snapshots__/hero.spec.tsx.snap

@@ -16,15 +16,21 @@ exports[`Hero Section renders Hero section correctly 1`] = `
       <h2
         class="profile-heading"
         data-testid="profile-heading"
-      />
+      >
+        heading
+      </h2>
       <p
         class="profile-caption"
         data-testid="profile-caption"
-      />
+      >
+        caption
+      </p>
       <p
         class="profile-intro"
         data-testid="profile-intro"
-      />
+      >
+        intro
+      </p>
       <code
         style="display: none;"
       >

src/components/HeroSection/hero.spec.jsx → src/components/HeroSection/hero.spec.tsx

@@ -1,32 +1,32 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import { Hero } from "./"
+import { Hero } from "."
 
 describe("Hero Section", () => {
 
   test("renders Hero section correctly", () => {
-    const { container } = render(<Hero />)
+    const { container } = render(<Hero heading='heading' caption="caption" intro='intro'/>)
 
     expect(container).toMatchSnapshot()
   })
 
 
   test("renders Hero section heading", () => {
-    render(<Hero />)
+    render(<Hero heading='heading' caption="caption" intro='intro'/>)
 
     expect(screen.getByTestId('profile-heading')).toBeInTheDocument();
   })
 
   test("renders Hero section caption", () => {
-    render(<Hero />)
+    render(<Hero heading='heading' caption="caption" intro='intro'/>)
 
     expect(screen.getByTestId('profile-caption')).toBeInTheDocument();
   })
 
   test("renders Hero section intro", () => {
-    render(<Hero />)
+    render(<Hero heading='heading' caption="caption" intro='intro' />)
 
-    expect(screen.getByTestId('profile-caption')).toBeInTheDocument();
+    expect(screen.getByTestId('profile-intro')).toBeInTheDocument();
   })
 
 })

src/components/HeroSection/hero.jsx → src/components/HeroSection/hero.tsx

@@ -1,7 +1,12 @@
-import React from "react"
+import React, { ReactElement } from "react"
 import profilePicture from "./Assets/profile-picture.jpeg"
+import type { BasicContent } from "../types"
 
-export const Hero = ({ title, caption, intro }) => (
+export const Hero = ({
+  heading,
+  caption,
+  intro,
+}: BasicContent): ReactElement => (
   <section className="section section-hero">
     <div className="flex-row">
       <img
@@ -10,7 +15,7 @@ export const Hero = ({ title, caption, intro }) => (
         className="profile-image"
       />
       <h2 className="profile-heading" data-testid="profile-heading">
-        {title}
+        {heading}
       </h2>
       <p className="profile-caption" data-testid="profile-caption">
         {caption}

src/components/WorkSection/__snapshots__/work.spec.jsx.snap → src/components/WorkSection/__snapshots__/work.spec.tsx.snap

@@ -11,17 +11,17 @@ exports[`renders Work section correctly 1`] = `
       <h2
         class="profile-heading"
       >
-        Work
+        heading
       </h2>
       <p
         class="profile-caption-invert"
       >
-        typing, clicking, stackoverflow-ing, caffeinating
+        caption
       </p>
       <p
         class="profile-intro"
       >
-        Coming soon ...
+        intro
       </p>
       <code
         style="display: none;"