refactor(starter): upgrade and move to typescript

src/components/Feed/Feed.module.scss

@@ -2,20 +2,20 @@
 @import "../../assets/scss/mixins";
 
 .feed {
-  &__item {
+  .item {
     @include margin-bottom(1.25);
 
     &:last-child {
       @include margin-bottom(0.5);
     }
 
-    &-title {
+    .title {
       font-size: $typographic-base-font-size * 1.6875;
       @include line-height(1.5);
       @include margin-top(0);
       @include margin-bottom(0.5);
 
-      &-link {
+      .link {
         color: $color-base;
 
         &:hover,
@@ -26,26 +26,26 @@
       }
     }
 
-    &-description {
+    .description {
       font-size: $typographic-base-font-size;
       @include line-height(1);
       @include margin-bottom(0.75);
     }
 
-    &-meta {
-      &-time {
+    .meta {
+      .time {
         color: $color-base;
         font-size: $typographic-small-font-size;
         font-weight: 600;
         text-transform: uppercase;
       }
 
-      &-divider {
-        margin: 0 5px;
+      .divider {
+        @include margin(0, 0.5);
       }
 
-      &-category {
-        &-link {
+      .category {
+        .link {
           color: $color-secondary;
           font-size: $typographic-small-font-size;
           font-weight: 600;
@@ -59,7 +59,7 @@
       }
     }
 
-    &-more {
+    .more {
       color: $color-primary;
       font-size: $typographic-base-font-size;
 

src/components/Feed/Feed.test.tsx

@@ -2,52 +2,11 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { Feed } from "@/components/Feed";
+import * as mocks from "@/mocks";
 
 describe("Feed", () => {
-  const props = {
-    edges: [
-      {
-        node: {
-          fields: {
-            slug: "/test_0",
-            categorySlug: "/test_0",
-            tagSlugs: ["/test-1", "/test-2"],
-          },
-          frontmatter: {
-            template: "post",
-            date: "2016-09-01",
-            description: "test_0",
-            category: "test_0",
-            tags: ["test-1", "test-2"],
-            title: "test_0",
-          },
-          id: "test-123",
-          html: "<p>test</p>",
-        },
-      },
-      {
-        node: {
-          fields: {
-            slug: "/test_1",
-            categorySlug: "/test_1",
-            tagSlugs: ["/test-1", "/test-2"],
-          },
-          frontmatter: {
-            template: "post",
-            date: "2016-09-01",
-            description: "test_1",
-            category: "test_1",
-            tags: ["test-1", "test-2"],
-            title: "test_1",
-          },
-          id: "test-321",
-          html: "<p>test</p>",
-        },
-      },
-    ],
-  };
-
   it("renders correctly", () => {
+    const props = { edges: mocks.edges };
     const tree = renderer.create(<Feed {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Feed/Feed.tsx

@@ -4,7 +4,7 @@ import { Link } from "gatsby";
 
 import { Edge } from "@/types";
 
-import styles from "./Feed.module.scss";
+import * as styles from "./Feed.module.scss";
 
 type Props = {
   edges: Array<Edge>;
@@ -13,10 +13,10 @@ type Props = {
 const Feed: React.FC<Props> = ({ edges }: Props) => (
   <div className={styles.feed}>
     {edges.map(edge => (
-      <div className={styles.feed__item} key={edge.node.fields.slug}>
-        <div className={styles["feed__item-meta"]}>
+      <div className={styles.item} key={edge.node.fields.slug}>
+        <div className={styles.meta}>
           <time
-            className={styles["feed__item-meta-time"]}
+            className={styles.time}
             dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString(
               "en-US",
               { year: "numeric", month: "long", day: "numeric" },
@@ -27,28 +27,22 @@ const Feed: React.FC<Props> = ({ edges }: Props) => (
               month: "long",
             })}
           </time>
-          <span className={styles["feed__item-meta-divider"]} />
-          <span className={styles["feed__item-meta-category"]}>
-            <Link
-              to={edge.node.fields.categorySlug}
-              className={styles["feed__item-meta-category-link"]}
-            >
+          <span className={styles.divider} />
+          <span className={styles.category}>
+            <Link to={edge.node.fields.categorySlug} className={styles.link}>
               {edge.node.frontmatter.category}
             </Link>
           </span>
         </div>
-        <h2 className={styles["feed__item-title"]}>
-          <Link
-            className={styles["feed__item-title-link"]}
-            to={edge.node.fields.slug}
-          >
+        <h2 className={styles.title}>
+          <Link className={styles.link} to={edge.node.fields.slug}>
             {edge.node.frontmatter.title}
           </Link>
         </h2>
-        <p className={styles["feed__item-description"]}>
+        <p className={styles.description}>
           {edge.node.frontmatter.description}
         </p>
-        <Link className={styles["feed__item-more"]} to={edge.node.fields.slug}>
+        <Link className={styles.more} to={edge.node.fields.slug}>
           Read
         </Link>
       </div>

src/components/Feed/__snapshots__/Feed.test.tsx.snap

@@ -1,101 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Feed renders correctly 1`] = `
-<div
-  className="feed"
->
-  <div
-    className="feed__item"
-  >
-    <div
-      className="feed__item-meta"
-    >
+<div>
+  <div>
+    <div>
       <time
-        className="feed__item-meta-time"
         dateTime="September 1, 2016"
       >
         September 2016
       </time>
-      <span
-        className="feed__item-meta-divider"
-      />
-      <span
-        className="feed__item-meta-category"
-      >
+      <span />
+      <span>
         <a
-          className="feed__item-meta-category-link"
-          href="/test_0"
+          href="/typography"
         >
-          test_0
+          typography
         </a>
       </span>
     </div>
-    <h2
-      className="feed__item-title"
-    >
+    <h2>
       <a
-        className="feed__item-title-link"
-        href="/test_0"
+        href="/posts/perfecting-the-art-of-perfection"
       >
-        test_0
+        Perfecting the Art of Perfection
       </a>
     </h2>
-    <p
-      className="feed__item-description"
-    >
-      test_0
+    <p>
+      An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.
     </p>
     <a
-      className="feed__item-more"
-      href="/test_0"
+      href="/posts/perfecting-the-art-of-perfection"
     >
       Read
     </a>
   </div>
-  <div
-    className="feed__item"
-  >
-    <div
-      className="feed__item-meta"
-    >
+  <div>
+    <div>
       <time
-        className="feed__item-meta-time"
         dateTime="September 1, 2016"
       >
         September 2016
       </time>
-      <span
-        className="feed__item-meta-divider"
-      />
-      <span
-        className="feed__item-meta-category"
-      >
+      <span />
+      <span>
         <a
-          className="feed__item-meta-category-link"
-          href="/test_1"
+          href="/design-inspiration"
         >
-          test_1
+          design inspiration
         </a>
       </span>
     </div>
-    <h2
-      className="feed__item-title"
-    >
+    <h2>
       <a
-        className="feed__item-title-link"
-        href="/test_1"
+        href="/posts/the-birth-of-movable-type"
       >
-        test_1
+        Johannes Gutenberg: The Birth of Movable Type
       </a>
     </h2>
-    <p
-      className="feed__item-description"
-    >
-      test_1
+    <p>
+      German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
     </p>
     <a
-      className="feed__item-more"
-      href="/test_1"
+      href="/posts/the-birth-of-movable-type"
     >
       Read
     </a>