refactor(starter): upgrade and move to typescript

src/components/Pagination/Pagination.module.scss

@@ -4,14 +4,14 @@
 @import "../../assets/scss/mixins";
 
 .pagination {
-  @include margin-top(2);
   display: flex;
+  @include margin-top(2);
 
-  &__prev {
+  .previous {
     text-align: left;
     width: 50%;
 
-    &-link {
+    .previousLink {
       color: $color-secondary;
       font-size: 26px;
       font-weight: bold;
@@ -21,18 +21,18 @@
         color: $color-primary;
       }
 
-      &--disable {
-        color: color.adjust($color-gray, 20%);
+      &.disable {
+        color: color.adjust($color-gray, $whiteness: 20%);
         pointer-events: none;
       }
     }
   }
 
-  &__next {
+  .next {
     text-align: right;
     width: 50%;
 
-    &-link {
+    .nextLink {
       color: $color-secondary;
       font-size: 26px;
       font-weight: bold;
@@ -42,8 +42,8 @@
         color: $color-primary;
       }
 
-      &--disable {
-        color: color.adjust($color-gray, 20%);
+      &.disable {
+        color: color.adjust($color-gray, $whiteness: 20%);
         pointer-events: none;
       }
     }

src/components/Pagination/Pagination.test.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import Pagination from "./Pagination";
+
+import { Pagination } from "@/components/Pagination";
+import * as mocks from "@/mocks";
 
 describe("Pagination", () => {
-  const props = {
-    prevPagePath: "/page/1",
-    nextPagePath: "/page/3",
-    hasNextPage: true,
-    hasPrevPage: true,
-  };
-
   it("renders correctly", () => {
+    const props = { ...mocks.pageContext.pagination };
     const tree = renderer.create(<Pagination {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Pagination/Pagination.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import classNames from "classnames/bind";
+import classNames from "classnames";
 import { Link } from "gatsby";
 
 import { PAGINATION } from "@/constants";
 
-import styles from "./Pagination.module.scss";
+import * as styles from "./Pagination.module.scss";
 
 type Props = {
   prevPagePath: string;
@@ -14,27 +14,23 @@ type Props = {
   hasPrevPage: boolean;
 };
 
-const cx = classNames.bind(styles);
-
 const Pagination = ({
   prevPagePath,
   nextPagePath,
   hasNextPage,
   hasPrevPage,
 }: Props) => {
-  const prevClassName = cx({
-    "pagination__prev-link": true,
-    "pagination__prev-link--disable": !hasPrevPage,
+  const prevClassName = classNames(styles.previousLink, {
+    [styles.disable]: !hasPrevPage,
   });
 
-  const nextClassName = cx({
-    "pagination__next-link": true,
-    "pagination__next-link--disable": !hasNextPage,
+  const nextClassName = classNames(styles.nextLink, {
+    [styles.disable]: !hasNextPage,
   });
 
   return (
-    <div className={styles["pagination"]}>
-      <div className={styles["pagination__prev"]}>
+    <div className={styles.pagination}>
+      <div className={styles.previous}>
         <Link
           rel="prev"
           to={hasPrevPage ? prevPagePath : "/"}
@@ -43,7 +39,7 @@ const Pagination = ({
           {PAGINATION.PREV_PAGE}
         </Link>
       </div>
-      <div className={styles["pagination__next"]}>
+      <div className={styles.next}>
         <Link
           rel="next"
           to={hasNextPage ? nextPagePath : "/"}

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

@@ -1,26 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pagination renders correctly 1`] = `
-<div
-  className="pagination"
->
-  <div
-    className="pagination__prev"
-  >
+<div>
+  <div>
     <a
-      className="pagination__prev-link"
-      href="/page/1"
+      className=""
+      href="/typography/page/1"
       rel="prev"
     >
       ← PREV
     </a>
   </div>
-  <div
-    className="pagination__next"
-  >
+  <div>
     <a
-      className="pagination__next-link"
-      href="/page/3"
+      className=""
+      href="/typography/page/3"
       rel="next"
     >
       → NEXT