refactor(starter): upgrade to new version of gatsby

src/components/Pagination/Pagination.js

@@ -1,45 +0,0 @@
-// @flow strict
-import React from 'react';
-import classNames from 'classnames/bind';
-import { Link } from 'gatsby';
-import { PAGINATION } from '../../constants';
-import styles from './Pagination.module.scss';
-
-type Props = {
-  prevPagePath: string,
-  nextPagePath: string,
-  hasNextPage: boolean,
-  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 nextClassName = cx({
-    'pagination__next-link': true,
-    'pagination__next-link--disable': !hasNextPage
-  });
-
-  return (
-    <div className={styles['pagination']}>
-      <div className={styles['pagination__prev']}>
-        <Link rel="prev" to={hasPrevPage ? prevPagePath : '/'} className={prevClassName}>{PAGINATION.PREV_PAGE}</Link>
-      </div>
-      <div className={styles['pagination__next']}>
-        <Link rel="next" to={hasNextPage ? nextPagePath : '/'} className={nextClassName}>{PAGINATION.NEXT_PAGE}</Link>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;

src/components/Pagination/Pagination.module.scss

@@ -1,13 +1,15 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@use "sass:color";
+
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .pagination {
   @include margin-top(2);
   display: flex;
 
   &__prev {
-    width: 50%;
     text-align: left;
+    width: 50%;
 
     &-link {
       color: $color-secondary;
@@ -20,17 +22,15 @@
       }
 
       &--disable {
+        color: color.adjust($color-gray, 20%);
         pointer-events: none;
-        color: lighten($color-gray, 20%);
       }
-
     }
-
   }
 
   &__next {
-    width: 50%;
     text-align: right;
+    width: 50%;
 
     &-link {
       color: $color-secondary;
@@ -43,12 +43,9 @@
       }
 
       &--disable {
+        color: color.adjust($color-gray, 20%);
         pointer-events: none;
-        color: lighten($color-gray, 20%);
       }
-
     }
-
   }
-
-}
+}

src/components/Pagination/Pagination.test.js

@@ -1,18 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Pagination from './Pagination';
-
-describe('Pagination', () => {
-  const props = {
-    prevPagePath: '/page/1',
-    nextPagePath: '/page/3',
-    hasNextPage: true,
-    hasPrevPage: true
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Pagination {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Pagination/Pagination.test.tsx

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

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import classNames from "classnames/bind";
+import { Link } from "gatsby";
+
+import { PAGINATION } from "@/constants";
+
+import styles from "./Pagination.module.scss";
+
+type Props = {
+  prevPagePath: string;
+  nextPagePath: string;
+  hasNextPage: boolean;
+  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 nextClassName = cx({
+    "pagination__next-link": true,
+    "pagination__next-link--disable": !hasNextPage,
+  });
+
+  return (
+    <div className={styles["pagination"]}>
+      <div className={styles["pagination__prev"]}>
+        <Link
+          rel="prev"
+          to={hasPrevPage ? prevPagePath : "/"}
+          className={prevClassName}
+        >
+          {PAGINATION.PREV_PAGE}
+        </Link>
+      </div>
+      <div className={styles["pagination__next"]}>
+        <Link
+          rel="next"
+          to={hasNextPage ? nextPagePath : "/"}
+          className={nextClassName}
+        >
+          {PAGINATION.NEXT_PAGE}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/Pagination/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Pagination';

src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination";