refactor(starter): upgrade and move to typescript

src/components/Sidebar/Menu/Menu.module.scss

@@ -4,16 +4,16 @@
 .menu {
   @include margin-bottom(1);
 
-  &__list {
+  .list {
     list-style: none;
-    margin: 0;
-    padding: 0;
+    @include margin-equal(0);
+    @include padding-equal(0);
 
-    &-item {
-      margin: 10px 0;
-      padding: 0;
+    .item {
+      @include margin(0.5, 0);
+      @include padding-equal(0);
 
-      &-link {
+      .link {
         border: 0;
         color: $typographic-base-font-color;
         font-size: $typographic-base-font-size;
@@ -25,7 +25,7 @@
           color: $color-primary;
         }
 
-        &--active {
+        &.active {
           border-bottom: 1px solid $color-base;
           color: $color-base;
         }

src/components/Sidebar/Menu/Menu.test.tsx

@@ -5,11 +5,8 @@ import { Menu } from "@/components/Sidebar/Menu";
 import * as mocks from "@/mocks";
 
 describe("Menu", () => {
-  const props = {
-    menu: mocks.menu,
-  };
-
   it("renders correctly", () => {
+    const props = { menu: mocks.menu };
     const tree = renderer.create(<Menu {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Sidebar/Menu/Menu.tsx

@@ -2,24 +2,24 @@ import React from "react";
 
 import { Link } from "gatsby";
 
-import styles from "./Menu.module.scss";
+import * as styles from "./Menu.module.scss";
 
 type Props = {
-  menu: {
+  menu: Array<{
     label: string;
     path: string;
-  }[];
+  }>;
 };
 
 const Menu: React.FC<Props> = ({ menu }: Props) => (
   <nav className={styles.menu}>
-    <ul className={styles.menu__list}>
+    <ul className={styles.list}>
       {menu.map(item => (
-        <li className={styles["menu__list-item"]} key={item.path}>
+        <li className={styles.item} key={item.path}>
           <Link
             to={item.path}
-            className={styles["menu__list-item-link"]}
-            activeClassName={styles["menu__list-item-link--active"]}
+            className={styles.link}
+            activeClassName={styles.active}
           >
             {item.label}
           </Link>

src/components/Sidebar/Menu/__snapshots__/Menu.test.tsx.snap

@@ -1,37 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu renders correctly 1`] = `
-<nav
-  className="menu"
->
-  <ul
-    className="menu__list"
-  >
-    <li
-      className="menu__list-item"
-    >
+<nav>
+  <ul>
+    <li>
       <a
-        className="menu__list-item-link"
         href="/"
       >
         Articles
       </a>
     </li>
-    <li
-      className="menu__list-item"
-    >
+    <li>
       <a
-        className="menu__list-item-link"
         href="/pages/about"
       >
         About Me
       </a>
     </li>
-    <li
-      className="menu__list-item"
-    >
+    <li>
       <a
-        className="menu__list-item-link"
         href="/pages/contacts"
       >
         Contact Me