WIP(7): Component folder structure

components/ChallengeMaterial/ChallengeMaterial.tsx

@@ -22,7 +22,7 @@ import Modal from 'react-bootstrap/Modal'
 import { SubmissionStatus, useAddCommentMutation } from '../../graphql'
 import DiffView from '../DiffView'
 import { Button } from '../theme/Button'
-import { MdInput } from '../MdInput'
+import MdInput from '../MdInput'
 import { updateCache } from '../../helpers/updateCache'
 import { GlobalContext } from '../../helpers/globalContext'
 import { SubmissionComments } from '../SubmissionComments'

components/CommentBox/CommentBox.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react'
-import { MdInput } from '.././MdInput'
+import MdInput from '.././MdInput'
 import { Button } from '.././theme/Button'
 import styles from './commentBox.module.scss'
 import {

components/ExerciseReportCard/ExerciseReportCard.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { DISCORD_PATH } from '../../constants'
 import { FlagExerciseMutation, useFlagExerciseMutation } from '../../graphql'
 import styles from './exerciseReportCard.module.scss'
-import { MdInput } from '../MdInput'
+import MdInput from '../MdInput'
 import NavLink from '../NavLink'
 import QueryInfo from '../QueryInfo'
 import { Button } from '../theme/Button'

components/FormCard/FormCard.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Button, NewButton } from '../theme/Button'
-import { MdInput } from '../MdInput'
+import MdInput from '../MdInput'
 import { DropdownMenu, Item } from '../DropdownMenu'
 import _ from 'lodash'
 import styles from './formCard.module.scss'

components/LessonCard.test.js → components/LessonCard/LessonCard.test.js

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/client'
 import * as React from 'react'
 import LessonCard from './LessonCard'
 import { render, screen } from '@testing-library/react'
-import { SubmissionStatus } from '../graphql'
+import { SubmissionStatus } from '../../graphql'
 
 // Imported to be able to use expect(...).toBeInTheDocument()
 import '@testing-library/jest-dom'

components/LessonCard.tsx → components/LessonCard/LessonCard.tsx

@@ -1,11 +1,11 @@
 import { useQuery } from '@apollo/client'
 import React from 'react'
 import { CheckCircle } from 'react-feather'
-import GET_SUBMISSIONS from '../graphql/queries/getSubmissions'
-import NavLink from './NavLink'
+import GET_SUBMISSIONS from '../../graphql/queries/getSubmissions'
+import NavLink from '../NavLink'
 import Image from 'next/image'
-import styles from '../scss/lessonCard.module.scss'
-import { Submission, SubmissionStatus } from '../graphql'
+import styles from './lessonCard.module.scss'
+import { Submission, SubmissionStatus } from '../../graphql'
 import Link from 'next/link'
 import { get } from 'lodash'
 

components/LessonCard/index.tsx

@@ -0,0 +1 @@
+export { default } from './LessonCard'

scss/lessonCard.module.scss → components/LessonCard/lessonCard.module.scss

@@ -1,4 +1,4 @@
-@use './_variables.module';
+@use '../../scss/variables.module';
 
 .lesson-card__container_inprogress {
   border-width: 2px;

components/LessonLayout.test.js → components/LessonLayout/LessonLayout.test.js

@@ -1,12 +1,12 @@
-import '../__mocks__/useBreakpoint.mock'
+import '../../__mocks__/useBreakpoint.mock'
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { MockedProvider } from '@apollo/client/testing'
-import GET_SESSION from '../graphql/queries/getSession'
-import dummySessionData from '../__dummy__/sessionData'
+import GET_SESSION from '../../graphql/queries/getSession'
+import dummySessionData from '../../__dummy__/sessionData'
 import '@testing-library/jest-dom'
 import LessonLayout, { getLayout } from './LessonLayout'
-import dummyLessonsData from '../__dummy__/lessonData'
+import dummyLessonsData from '../../__dummy__/lessonData'
 
 describe('LessonLayout component', () => {
   const mocks = [

components/LessonLayout.tsx → components/LessonLayout/LessonLayout.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import Layout from './Layout'
-import LessonTitleCard from './LessonTitleCard'
+import Layout from '../Layout'
+import LessonTitleCard from '../LessonTitleCard'
 
-import { LayoutGetter } from '../@types/page'
-import { Lesson, useGetSessionQuery } from '../graphql'
+import { LayoutGetter } from '../../@types/page'
+import { Lesson, useGetSessionQuery } from '../../graphql'
 
 type Props = {
   lesson: Lesson

components/LessonLayout/index.tsx

@@ -0,0 +1 @@
+export { default, getLayout } from './LessonLayout'

components/LessonTitleCard.test.js → components/LessonTitleCard/LessonTitleCard.test.js

@@ -1,4 +1,4 @@
-import { mockUseBreakpoint } from '../__mocks__/useBreakpoint.mock'
+import { mockUseBreakpoint } from '../../__mocks__/useBreakpoint.mock'
 import React from 'react'
 import LessonTitleCard from './LessonTitleCard'
 import { render, screen } from '@testing-library/react'

components/LessonTitleCard.tsx → components/LessonTitleCard/LessonTitleCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import NavLink from './NavLink'
-import styles from '../scss/lessonTitleCard.module.scss'
+import NavLink from '../NavLink'
+import styles from './lessonTitleCard.module.scss'
 import { useRouter } from 'next/router'
-import useBreakpoint from '../helpers/useBreakpoint'
+import useBreakpoint from '../../helpers/useBreakpoint'
 
 export type LessonTitleProps = {
   lessonCoverUrl: string

components/LessonTitleCard/index.tsx

@@ -0,0 +1 @@
+export { default } from './LessonTitleCard'

components/MarkdownToolbar.test.js → components/MarkdownToolbar/MarkdownToolbar.test.js

@@ -3,8 +3,8 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import MarkdownToolbar from './MarkdownToolbar'
-import { markdown } from '../helpers/textStylers'
-jest.mock('../helpers/textStylers')
+import { markdown } from '../../helpers/textStylers'
+jest.mock('../../helpers/textStylers')
 describe('MarkdownToolbar Component', () => {
   const mockTextArea = {}
   const mockRef = { current: mockTextArea }

components/MarkdownToolbar.tsx → components/MarkdownToolbar/MarkdownToolbar.tsx

@@ -11,7 +11,7 @@ import {
   Icon
 } from '@primer/octicons-react'
 import { ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { markdown, TextAreaState } from '../helpers/textStylers'
+import { markdown, TextAreaState } from '../../helpers/textStylers'
 
 type ButtonProps = {
   tooltipTitle: string

components/MarkdownToolbar/index.tsx

@@ -0,0 +1 @@
+export { default } from './MarkdownToolbar'

components/MdInput.test.js → components/MdInput/MdInput.test.js

@@ -1,14 +1,14 @@
-import { mockUseIsMac } from '../__mocks__/useIsMac.mock'
-import '../__mocks__/useBreakpoint.mock'
+import { mockUseIsMac } from '../../__mocks__/useIsMac.mock'
+import '../../__mocks__/useBreakpoint.mock'
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
-jest.mock('../helpers/useBreakpoint.tsx')
+jest.mock('../../helpers/useBreakpoint.tsx')
 
-import useBreakpoint from '../helpers/useBreakpoint.tsx'
-import { MdInput } from './MdInput'
+import useBreakpoint from '../../helpers/useBreakpoint.tsx'
+import MdInput from './MdInput'
 
 const TestComponent = () => {
   const [testState, setTestState] = React.useState('')

components/MdInput.tsx → components/MdInput/MdInput.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useRef } from 'react'
 import Markdown from 'markdown-to-jsx'
-import { colors } from './theme/colors'
+import { colors } from '../theme/colors'
 import { Nav } from 'react-bootstrap'
-import noop from '../helpers/noop'
-import styles from '../scss/mdInput.module.scss'
-import { getHotkeyListener } from '../helpers/hotkeyListener'
+import noop from '../../helpers/noop'
+import styles from './mdInput.module.scss'
+import { getHotkeyListener } from '../../helpers/hotkeyListener'
 import useUndo from 'use-undo'
-import useBreakpoint from '../helpers/useBreakpoint'
-import useIsMac from '../helpers/useIsMac'
-import MarkdownToolbar from './MarkdownToolbar'
-import { markdown, TextAreaState } from '../helpers/textStylers'
+import useBreakpoint from '../../helpers/useBreakpoint'
+import useIsMac from '../../helpers/useIsMac'
+import MarkdownToolbar from '../MarkdownToolbar'
+import { markdown, TextAreaState } from '../../helpers/textStylers'
 
 type MdInputProps = {
   onChange?: Function
@@ -26,7 +26,7 @@ const autoSize = (el: HTMLTextAreaElement) => {
   el.style.height = el.scrollHeight + 2 + 'px'
 }
 
-export const MdInput: React.FC<MdInputProps> = ({
+const MdInput: React.FC<MdInputProps> = ({
   bgColor = 'none',
   onChange = noop,
   onFocus = noop,
@@ -237,3 +237,5 @@ export const MdInput: React.FC<MdInputProps> = ({
     </div>
   )
 }
+
+export default MdInput

components/MdInput/index.tsx

@@ -0,0 +1 @@
+export { default } from './MdInput'

components/ModalCard/index.tsx

@@ -0,0 +1 @@
+export { ModalSize, type ModalCardProps, ModalCard } from './ModalCard'

components/NavLink.test.js → components/NavLink/NavLink.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import NavLink from './NavLink'
 import '@testing-library/jest-dom'
-import Link from 'next/link'
+
 describe('NavLink Component', () => {
   test('Should render with active class when active', () => {
     const { container } = render(

components/NavLink.tsx → components/NavLink/NavLink.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import styles from '../scss/navLink.module.scss'
-import appNavStyles from '../scss/appNav.module.scss'
+import styles from './navLink.module.scss'
 
 export type NavLinkProps = {
   path: string
@@ -22,7 +21,7 @@ const NavLink: React.FC<NavLinkProps> = ({
   hoverUnderline = false
 }) => {
   if (!path) return null
-  if (activePath) className += ` ${appNavStyles['active']}`
+  if (activePath) className += ` ${styles['active']}`
   if (external || path[0] !== '/') {
     return (
       <a

components/NavLink/index.tsx

@@ -0,0 +1 @@
+export { default, type NavLinkProps } from './NavLink'

scss/navLink.module.scss → components/NavLink/navLink.module.scss

@@ -1,5 +1,5 @@
 @use 'sass:color';
-@use '_variables.module.scss';
+@use '../../scss/variables.module';
 
 .link {
   text-decoration: none;

components/NextPreviousLessons.tsx → components/NextPreviousLessons/NextPreviousLessons.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
-import styles from '../scss/NextPreviousLessons.module.scss'
-import { SubLesson } from '../helpers/static/lessons'
+import styles from './nextPreviousLessons.module.scss'
+import { SubLesson } from '../../helpers/static/lessons'
 
 type Props = {
   subLessons: SubLesson[]

components/NextPreviousLessons/index.tsx

@@ -0,0 +1 @@
+export { default } from './NextPreviousLessons'

components/ProfileDropdownMenu.test.js → components/ProfileDropdownMenu/ProfileDropdownMenu.test.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { render, fireEvent, act, waitFor } from '@testing-library/react'
 import ProfileDropdownMenu from './ProfileDropdownMenu'
-import GET_APP from '../graphql/queries/getApp'
-import LOGIN_USER from '../graphql/queries/loginUser'
-import dummySessionData from '../__dummy__/sessionData'
+import GET_APP from '../../graphql/queries/getApp'
+import LOGIN_USER from '../../graphql/queries/loginUser'
+import dummySessionData from '../../__dummy__/sessionData'
 import { MockedProvider } from '@apollo/client/testing'
 import { useRouter } from 'next/router'
 

components/ProfileDropdownMenu.tsx → components/ProfileDropdownMenu/ProfileDropdownMenu.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import Dropdown from 'react-bootstrap/Dropdown'
-import UserInfoImage from './UserInfoImage'
+import UserInfoImage from '../UserInfoImage'
 import { ChevronDownIcon } from '@primer/octicons-react'
-import LogoutContainer from './LogoutContainer'
-import { Button } from './theme/Button'
-import { UserInfo } from '../@types/user'
-import { useUserInfoQuery } from '../graphql/index'
+import LogoutContainer from '../LogoutContainer'
+import { Button } from '../theme/Button'
+import { UserInfo } from '../../@types/user'
+import { useUserInfoQuery } from '../../graphql/index'
 import { useRouter } from 'next/router'
 import _ from 'lodash'
-import styles from '../scss/profileDropDown.module.scss'
-import { ADMIN_PATH, PROFILE_PATH } from '../constants'
+import styles from './profileDropDown.module.scss'
+import { ADMIN_PATH, PROFILE_PATH } from '../../constants'
 
 type ProfileDropDownMenuProps = {
   username: string

components/ProfileDropdownMenu/index.tsx

@@ -0,0 +1 @@
+export { default } from './ProfileDropdownMenu'

scss/profileDropDown.module.scss → components/ProfileDropdownMenu/profileDropDown.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
-@use '_variables.module.scss';
-@import 'colors.module.scss';
+@use '../../scss/variables.module';
+@import '../../scss/colors.module.scss';
 
 .nav-user-toggle {
   display: flex;

components/ReviewCard.tsx

@@ -19,7 +19,7 @@ import { Button } from './theme/Button'
 import { Text } from './theme/Text'
 import { Accordion } from 'react-bootstrap'
 import Markdown from 'markdown-to-jsx'
-import { MdInput } from './MdInput'
+import MdInput from './MdInput'
 import DiffView from './DiffView'
 import { updateCache } from '../helpers/updateCache'
 import { SelectIteration } from './SelectIteration'

components/SubmissionComments.tsx

@@ -8,7 +8,7 @@ import styles from '../scss/submissionComments.module.scss'
 import { updateCache } from '../helpers/updateCache'
 import { useDeleteCommentMutation, useEditCommentMutation } from '../graphql'
 import { GlobalContext } from '../helpers/globalContext'
-import { MdInput } from './MdInput'
+import MdInput from './MdInput'
 import _ from 'lodash'
 import Modal from 'react-bootstrap/Modal'
 import {

stories/components/MdInput.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Story } from '@storybook/react'
-import { MdInput } from '../../components/MdInput'
+import MdInput from '../../components/MdInput'
 
 export default {
   component: MdInput,