refactor(starter): upgrade and move to typescript

src/components/Page/Page.module.scss

@@ -4,11 +4,11 @@
 .page {
   @include margin-bottom(2);
 
-  &__inner {
-    padding: 25px 20px;
+  .inner {
+    @include padding(1, 0.75, 0);
   }
 
-  &__title {
+  .title {
     font-size: $typographic-base-font-size * 2.5;
     font-weight: 600;
     @include line-height(2);
@@ -16,7 +16,7 @@
     @include margin-bottom(1.45);
   }
 
-  &__body {
+  .body {
     font-size: $typographic-base-font-size;
     @include line-height(1);
     @include margin(0, 0, 1);
@@ -27,8 +27,8 @@
   .page {
     lost-column: 7/12;
 
-    &__inner {
-      padding: 30px 20px;
+    .inner {
+      @include padding(1.25, 0.75, 0);
     }
   }
 }
@@ -37,8 +37,8 @@
   .page {
     lost-column: 2/3;
 
-    &__inner {
-      padding: 40px 35px;
+    .inner {
+      @include padding(1.5, 1, 0);
     }
   }
 }

src/components/Page/Page.test.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import Page from "./Page";
+import { Page } from "@/components/Page";
+import * as mocks from "@/mocks";
 
 describe("Page", () => {
-  const props = {
-    children: "test",
-    title: "test",
-  };
-
   it("renders correctly", () => {
+    const props = {
+      children: mocks.markdownRemark.html,
+      title: mocks.markdownRemark.frontmatter.title,
+    };
+
     const tree = renderer
       .create(<Page {...props}>{props.children}</Page>)
       .toJSON();

src/components/Page/Page.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 
 import type { Nullable } from "@/types";
 
-import styles from "./Page.module.scss";
+import * as styles from "./Page.module.scss";
 
 interface Props {
   title?: string;
@@ -20,9 +20,9 @@ const Page: React.FC<Props> = ({ title, children }: Props) => {
 
   return (
     <div ref={pageRef} className={styles.page}>
-      <div className={styles.page__inner}>
-        {title && <h1 className={styles.page__title}>{title}</h1>}
-        <div className={styles.page__body}>{children}</div>
+      <div className={styles.inner}>
+        {title && <h1 className={styles.title}>{title}</h1>}
+        <div className={styles.body}>{children}</div>
       </div>
     </div>
   );

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

@@ -1,21 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Page renders correctly 1`] = `
-<div
-  className="page"
->
-  <div
-    className="page__inner"
-  >
-    <h1
-      className="page__title"
-    >
-      test
+<div>
+  <div>
+    <h1>
+      Perfecting the Art of Perfection
     </h1>
-    <div
-      className="page__body"
-    >
-      test
+    <div>
+      &lt;p&gt;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.&lt;/p&gt;
     </div>
   </div>
 </div>