WIP(3): Component folder structure

components/Breadcrumbs.test.js → components/Breadcrumbs/Breadcrumbs.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Breadcrumbs from './Breadcrumbs.tsx'
+import Breadcrumbs from './Breadcrumbs'
 
 // Imported to be able to use expect(...).toBeInTheDocument()
 import '@testing-library/jest-dom'

components/Breadcrumbs.tsx → components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import styles from '../scss/breadcrumbs.module.scss'
+import styles from './breadcrumbs.module.scss'
 import { Dropdown } from 'react-bootstrap'
-import { GetAppQuery } from '../graphql'
+import { GetAppQuery } from '../../graphql'
 import { ChevronRightIcon } from '@primer/octicons-react'
 import { lowerCase } from 'lodash'
 

scss/breadcrumbs.module.scss → components/Breadcrumbs/breadcrumbs.module.scss

@@ -1,4 +1,4 @@
-@use './_variables.module';
+@use '../../scss/_variables.module';
 
 @mixin flexRow {
   display: flex;

components/Breadcrumbs/index.tsx

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

components/Card/index.tsx

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

components/ChallengeMaterial.test.js → components/ChallengeMaterial/ChallengeMaterial.test.js

@@ -9,23 +9,23 @@ import {
   within
 } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { mockUseBreakpoint } from '../__mocks__/useBreakpoint.mock'
-import ChallengeMaterial from './ChallengeMaterial'
+import { mockUseBreakpoint } from '../../__mocks__/useBreakpoint.mock'
+import ChallengeMaterial from '.'
 import { MockedProvider } from '@apollo/client/testing'
-import ADD_COMMENT from '../graphql/queries/addComment'
-import SET_STAR from '../graphql/queries/setStar'
-import GET_PREVIOUS_SUBMISSIONS from '../graphql/queries/getPreviousSubmissions'
-import GET_LESSON_MENTORS from '../graphql/queries/getLessonMentors'
-import lessonMentorsData from '../__dummy__/getLessonMentorsData'
+import ADD_COMMENT from '../../graphql/queries/addComment'
+import SET_STAR from '../../graphql/queries/setStar'
+import GET_PREVIOUS_SUBMISSIONS from '../../graphql/queries/getPreviousSubmissions'
+import GET_LESSON_MENTORS from '../../graphql/queries/getLessonMentors'
+import lessonMentorsData from '../../__dummy__/getLessonMentorsData'
 import '@testing-library/jest-dom'
-import { SubmissionStatus } from '../graphql'
-import getPreviousSubmissionsData from '../__dummy__/getPreviousSubmissionsData'
-import dummySessionData from '../__dummy__/sessionData'
-import { ContextProvider, GlobalContext } from '../helpers/globalContext'
+import { SubmissionStatus } from '../../graphql'
+import getPreviousSubmissionsData from '../../__dummy__/getPreviousSubmissionsData'
+import dummySessionData from '../../__dummy__/sessionData'
+import { ContextProvider, GlobalContext } from '../../helpers/globalContext'
 import _ from 'lodash'
 
-jest.mock('../helpers/updateCache')
-import { updateCache } from '../helpers/updateCache'
+jest.mock('../../helpers/updateCache')
+import { updateCache } from '../../helpers/updateCache'
 
 jest.useFakeTimers('modern').setSystemTime(new Date('2000-11-22').getTime())
 

components/ChallengeMaterial.tsx → components/ChallengeMaterial/ChallengeMaterial.tsx

@@ -10,26 +10,26 @@ import {
   Submission,
   UserLesson,
   useGetPreviousSubmissionsQuery
-} from '../graphql/index'
-import NavLink from './NavLink'
+} from '../../graphql/index'
+import NavLink from '../NavLink'
 import Markdown from 'markdown-to-jsx'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
-import { GiveStarCard } from '../components/GiveStarCard'
+import { GiveStarCard } from '../GiveStarCard'
 import _ from 'lodash'
 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 { updateCache } from '../helpers/updateCache'
-import { GlobalContext } from '../helpers/globalContext'
-import { SubmissionComments } from './SubmissionComments'
-import { SelectIteration } from './SelectIteration'
-import Error, { StatusCode } from './Error'
-import { ReviewStatus } from './ReviewStatus'
-import useBreakpoint from '../helpers/useBreakpoint'
+import { SubmissionStatus, useAddCommentMutation } from '../../graphql'
+import DiffView from '../DiffView'
+import { Button } from '../theme/Button'
+import { MdInput } from '../MdInput'
+import { updateCache } from '../../helpers/updateCache'
+import { GlobalContext } from '../../helpers/globalContext'
+import { SubmissionComments } from '../SubmissionComments'
+import { SelectIteration } from '../SelectIteration'
+import Error, { StatusCode } from '../Error'
+import { ReviewStatus } from '../ReviewStatus'
+import useBreakpoint from '../../helpers/useBreakpoint'
 dayjs.extend(relativeTime)
 dayjs.extend(LocalizedFormat)
 

components/ChallengeMaterial/index.tsx

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

stories/components/ChallengeQuestionCard.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ChallengeQuestionCard } from '../../components/ChallengeMaterial'
+import { ChallengeQuestionCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 import { MockedProvider } from '@apollo/client/testing'
 
 export default {

stories/components/ChallengeTitleCard.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { action } from '@storybook/addon-actions'
-import { ChallengeTitleCard } from '../../components/ChallengeMaterial'
+import { ChallengeTitleCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 
 export default {
   component: ChallengeTitleCard,

stories/components/ChallengesCompletedCard.stories.tsx

@@ -1,6 +1,6 @@
 import { MockedProvider } from '@apollo/client/testing'
 import * as React from 'react'
-import { ChallengesCompletedCard } from '../../components/ChallengeMaterial'
+import { ChallengesCompletedCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 import SET_STAR from '../../graphql/queries/setStar'
 import GET_LESSON_MENTORS from '../../graphql/queries/getLessonMentors'
 import lessonMentorsData from '../../__dummy__/getLessonMentorsData'