Merge pull request #188 from mavv/enhancement/introduce-module-path-aliases

chore: add module aliases, refactor imports

Author: briangershon

.storybook/preview.js

@@ -1,6 +1,6 @@
 import * as NextImage from 'next/image'
-import { WalletProvider } from '../components/WalletProvider'
-import { theme } from '../theme'
+import { WalletProvider } from '@components/WalletProvider'
+import { theme } from '@theme'
 
 // de-optimize Image component
 const OriginalNextImage = NextImage.default

components/Header.tsx

@@ -1,4 +1,4 @@
-import NavBar from '../components/NavBar'
+import NavBar from '@components/NavBar'
 
 export default function Header() {
   return <NavBar />

components/NavBar.tsx

@@ -12,9 +12,9 @@ import {
   MenuList,
   MenuItem,
 } from '@chakra-ui/react'
-import HamburgerIcon from './HamburgerIcon'
-import SchoolOfCodeLogo from './SchoolOfCodeLogo'
-import { PomodoroTimer } from './PomodoroTimer'
+import HamburgerIcon from '@components/HamburgerIcon'
+import SchoolOfCodeLogo from '@components/SchoolOfCodeLogo'
+import { PomodoroTimer } from '@components/PomodoroTimer'
 // import { ConnectButton } from '@rainbow-me/rainbowkit'
 
 function NavBar() {

components/PomodoroTimer.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PomodoroTimer } from './PomodoroTimer'
+import { PomodoroTimer } from '@components/PomodoroTimer'
 
 export default {
   component: PomodoroTimer,

components/PomodoroTimer.test.tsx

@@ -1,7 +1,7 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { minute, second } from '../lib/time'
-import { PomodoroTimer } from './PomodoroTimer'
+import { minute, second } from '@lib/time'
+import { PomodoroTimer } from '@components/PomodoroTimer'
 
 beforeEach(() => {
   jest.useFakeTimers()

components/PomodoroTimer.tsx

@@ -23,7 +23,7 @@ import {
   MdVideogameAsset,
   MdOutlineCheck,
 } from 'react-icons/md'
-import { formatTime, minute, second } from '../lib/time'
+import { formatTime, minute, second } from '@lib/time'
 
 export interface TimerState {
   status: TimerStatus

components/SchoolOfCodeLogo.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SchoolOfCodeLogo from './SchoolOfCodeLogo'
+import SchoolOfCodeLogo from '@components/SchoolOfCodeLogo'
 
 export default {
   component: SchoolOfCodeLogo,

components/footer/Footer.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import { FaTwitter, FaGithub } from 'react-icons/fa'
-import { SocialButton } from './SocialButton'
+import { SocialButton } from '@components/footer/SocialButton'
 
 export default function Footer() {
   return (

components/mdx/Components.tsx

@@ -1,11 +1,11 @@
 import { Box, Code, Heading, Image, Text } from '@chakra-ui/react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import dracula from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula'
-import { CopyToClipboard } from '../CopyToClipboard'
-import SideDrawer from './SideDrawer'
-import Quiz from './Quiz'
-import Question from './Question'
-import Callout from './Callout'
+import { CopyToClipboard } from '@components/CopyToClipboard'
+import SideDrawer from '@components/mdx/SideDrawer'
+import Quiz from '@components/mdx/Quiz'
+import Question from '@components/mdx/Question'
+import Callout from '@components/mdx/Callout'
 
 const Components = {
   code: (props: any) => {

components/mdx/Question.tsx

@@ -16,7 +16,7 @@ interface Question {
 }
 
 const Question: FC<QuestionProps> = (props: QuestionProps) => {
-  const question: Question = require(`../../utils/questions/${props.question}.json`)
+  const question: Question = require(`@utils/questions/${props.question}.json`)
   const [optionsSelected, setOptionsSelected]: [
     number[],
     Dispatch<SetStateAction<number[]>>,